@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
 
/* ============================================================
   LIWIKA PROJECTS AND EVENTS — MASTER STYLESHEET
   ------------------------------------------------------------
   CONTENTS:
     1.  CSS VARIABLES
     2.  GLOBAL RESET & BASE
     3.  TYPOGRAPHY & UTILITIES
     4.  BUTTONS
     5.  FORMS
     6.  DISCLAIMER BANNER
     7.  STICKY TOP AREA (Banner + Header wrapper)
     8.  HEADER & NAVIGATION
     9.  FOOTER
     10. HOMEPAGE — HERO
     11. HOMEPAGE — HOW IT WORKS
     12. HOMEPAGE — SHOP BY OCCASION
     13. HOMEPAGE — INSPIRATION GALLERY
     14. HOMEPAGE — CONTACT CTA
     15. SHARED PAGE HEADERS (Catalogue + List + Hero variants)
     16. CATALOGUE PAGE
     17. DETAILS PAGE
     18. PACKAGES PAGE
     19. SERVICES PAGE
     20. RESPONSIVE MEDIA QUERIES
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  /* Brand colours */
  --color-pink:         #DE00CB;
  --color-deep-blue:    #185079;
  --color-medium-blue:  #3885AB;
  --color-fresh-blue:   #4E97BB;
  --color-soft-blue:    #6BA1BC;
  --color-light-blue:   #95BFD1;
  --color-pale-blue:    #BBD6E1;
  --color-yellow:       #FFDE59;
  --color-offwhite:     #F7F3EF;
  --color-black:        #000000;

  /* Semantic tokens */
  --bg-main:            var(--color-offwhite);
  --bg-section:         var(--color-pale-blue);
  --bg-hero:            var(--color-soft-blue);
  --bg-card:            #FFFFFF;
  --bg-dark:            var(--color-deep-blue);
  --text-primary:       var(--color-deep-blue);
  --text-heading:       var(--color-black);
  --text-muted:         var(--color-soft-blue);
  --text-on-dark:       #FFFFFF;
  --text-accent:        var(--color-pink);
  --border-light:       #E5E5E5;
  --border-medium:      #D0D0D0;

  /* Buttons */
  --btn-primary-bg:        var(--color-deep-blue);
  --btn-primary-text:      #FFFFFF;
  --btn-primary-hover:     #0F3A5C;
  --btn-secondary-bg:      #FFFFFF;
  --btn-secondary-text:    var(--color-deep-blue);
  --btn-secondary-border:  var(--color-deep-blue);
  --btn-accent-bg:         var(--color-pink);
  --btn-accent-text:       #FFFFFF;
  --btn-accent-hover:      #B800A8;

  /* Typography */
  --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.5rem;
  --fs-4xl:  4.5rem;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 2rem;

  /* Radius & Shadow */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-pink: 0 6px 20px rgba(222, 0, 203, 0.35);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
}


/* ============================================================
   2. GLOBAL RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }


/* ============================================================
   3. TYPOGRAPHY & UTILITIES
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p  { color: var(--text-primary); margin-bottom: var(--space-sm); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-pink);
  margin-bottom: var(--space-xs);
}
.section-title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-xs);
  color: var(--text-heading);
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-pink);
  border-radius: 2px;
  margin-top: 0.5rem;
}
.section-subtitle {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  transition: all var(--transition-base);
  cursor: pointer;
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
}
.btn-primary {
  background-color: var(--btn-accent-bg);
  color: var(--btn-accent-text);
  box-shadow: var(--shadow-pink);
}
.btn-primary:hover {
  background-color: var(--btn-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(222, 0, 203, 0.45);
}
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover {
  background-color: var(--color-pale-blue);
  transform: translateY(-1px);
}
.btn-outline-light {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.btn-outline-light:hover {
  background-color: #FFFFFF;
  color: var(--color-deep-blue);
}
.btn-block { width: 100%; }


/* ============================================================
   5. FORMS
   ============================================================ */
.form-group { margin-bottom: var(--space-md); }
.form-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.form-control {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: var(--fs-base);
  color: var(--text-heading);
  background-color: #FFFFFF;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
  outline: none;
  border-color: var(--color-pink);
  box-shadow: 0 0 0 3px rgba(222, 0, 203, 0.12);
}
.form-control::placeholder { color: #A0A0A0; }


/* ============================================================
   6. DISCLAIMER BANNER
   ============================================================ */
.site-disclaimer {
  background-color: var(--color-black);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  padding: 0.625rem 0;
  position: relative;
  z-index: 101;
}
.site-disclaimer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}
.site-disclaimer p {
  margin: 0;
  color: #FFFFFF;
  line-height: 1.4;
  font-size: var(--fs-xs);
}
.disclaimer-icon {
  color: var(--color-yellow);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}


/* ============================================================
   7. STICKY TOP AREA (Banner + Header wrapper)
   Both banner and header sit inside .site-top-area which
   sticks to the top of the viewport as one unit.
   ============================================================ */
.site-top-area {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
}

.site-top-area .site-disclaimer {
  position: relative;
  top: auto;
  z-index: auto;
}

.site-top-area .site-header {
  position: relative;
  top: auto;
  z-index: auto;
}


/* ============================================================
   8. HEADER & NAVIGATION
   ============================================================ */

/* ---- Default header (non-hero pages) ---- */
.site-header {
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-light);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ---- Logo ---- */
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--text-heading);
  flex-shrink: 0;
}
.logo-image {
  height: 44px;
  width: 44px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color var(--transition-base), padding var(--transition-base);
}
.logo-text {
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-heading);
  line-height: 1.1;
}

/* ---- Main nav ---- */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.main-nav a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  position: relative;
  padding: 0.25rem 0;
}
.main-nav a:hover,
.main-nav a.active { color: var(--color-pink); }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background-color: var(--color-pink);
  border-radius: 2px;
}

/* ---- Header actions (search / account / cart) ---- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-primary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}
.icon-btn:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
}
.cart-btn { position: relative; }
.cart-count {
  position: absolute;
  top: 2px; right: 2px;
  background-color: var(--color-pink);
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ---- Search box ---- */
.search-box {
  display: flex;
  align-items: center;
  background-color: transparent;
  border-radius: 999px;
  overflow: hidden;
  transition: all var(--transition-base);
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
}
.search-box.expanded {
  width: 240px;
  background-color: var(--color-offwhite);
  border-color: var(--border-medium);
}
.search-input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  outline: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.search-box.expanded .search-input {
  opacity: 1;
}
.search-box .icon-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
}

/* ---- Mobile toggle button (hidden on desktop) ---- */
.mobile-toggle { display: none; }

/* ---- Hero-page transparent header ---- */
body.has-hero .site-top-area .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
}
body.has-hero .site-top-area .site-header .logo-text,
body.has-hero .site-top-area .site-header .main-nav a,
body.has-hero .site-top-area .site-header .icon-btn {
  color: #FFFFFF;
}
body.has-hero .site-top-area .site-header .logo-image {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 3px;
}
body.has-hero .site-top-area .site-header .main-nav a.active {
  color: #FFFFFF;
}
body.has-hero .site-top-area .site-header .main-nav a.active::after {
  background-color: var(--color-pink);
}
body.has-hero .site-top-area .site-header .icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

/* ---- Header when scrolled (solid white) ---- */
body.has-hero .site-top-area .site-header.scrolled {
  background-color: #FFFFFF;
  border-bottom-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}
body.has-hero .site-top-area .site-header.scrolled .logo-text,
body.has-hero .site-top-area .site-header.scrolled .main-nav a,
body.has-hero .site-top-area .site-header.scrolled .icon-btn {
  color: var(--text-primary);
}
body.has-hero .site-top-area .site-header.scrolled .logo-image {
  background-color: transparent;
  padding: 0;
}
body.has-hero .site-top-area .site-header.scrolled .icon-btn:hover {
  background-color: var(--color-pale-blue);
  color: var(--color-deep-blue);
}


/* ============================================================
   9. FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-deep-blue);
  border-top: none;
  padding-top: var(--space-xl);
  margin-top: var(--space-2xl);
  color: #E0E0E0;
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.footer-col { min-width: 0; }
.footer-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: 0.75rem;
  color: #FFFFFF;
}
.footer-heading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  margin-bottom: 1rem;
}
.footer-text {
  font-size: var(--fs-sm);
  color: #C0C8D0;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.footer-contact {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: #E0E0E0;
  line-height: 1.5;
}
.footer-contact svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-pink);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-links a {
  font-size: var(--fs-sm);
  color: #E0E0E0;
  transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--color-pink); }

.footer-social {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #FFFFFF;
  transition: all var(--transition-fast);
}
.footer-social a:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.25rem 0;
  font-size: var(--fs-xs);
  color: #B0B8C0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  text-align: center;
}
.footer-bottom p { margin: 0; color: #B0B8C0; }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: #B0B8C0; }
.footer-legal a:hover { color: var(--color-pink); }


/* ============================================================
   10. HOMEPAGE — HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('../../images/customer/homepage.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #FFFFFF;
  padding: var(--space-lg) 0;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.hero-title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  color: #FFFFFF;
  margin-bottom: var(--space-md);
  letter-spacing: -0.03em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hero-subtitle {
  font-size: var(--fs-lg);
  color: #FFFFFF;
  margin-bottom: var(--space-lg);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  opacity: 0.95;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.hero .btn-primary {
  padding: 1rem 2.5rem;
  font-size: var(--fs-base);
}
.hero .btn-primary::after {
  content: "→";
  margin-left: 0.5rem;
  transition: transform var(--transition-base);
}
.hero .btn-primary:hover::after {
  transform: translateX(4px);
}

/* When header is transparent over hero, pull hero up */
body.has-hero .hero {
  margin-top: -80px;
  padding-top: 120px;
}


/* ============================================================
   11. HOMEPAGE — HOW IT WORKS
   ============================================================ */
.how-it-works {
  background-color: var(--color-offwhite);
  padding: var(--space-xl) 0;
}
.how-it-works .section-title::after { margin-left: auto; margin-right: auto; }
.how-it-works .section-title { display: block; text-align: center; }
.how-it-works .section-eyebrow { text-align: center; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.how-step {
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  background: #FFFFFF;
}
.how-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.how-number {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-pink);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
}
.how-step-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}
.how-step-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}


/* ============================================================
   12. HOMEPAGE — SHOP BY OCCASION
   ============================================================ */
.occasions {
  padding: var(--space-xl) 0;
  background-color: #F2EDE3; /* Warm cream — subtle yellow tint */
}

.occasions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.occasion-card {
  display: block;
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.occasion-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.occasion-card:hover .occasion-image {
  background-color: var(--color-pink);
}
.occasion-card:hover .occasion-label {
  color: var(--color-pink);
}
.occasion-image {
  aspect-ratio: 4 / 3;
  background-color: var(--color-light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  transition: background-color var(--transition-base);
}
.occasion-label {
  padding: var(--space-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  background-color: #FFFFFF;
  transition: color var(--transition-base);
  text-align: center;
}


/* ============================================================
   13. HOMEPAGE — INSPIRATION GALLERY
   ============================================================ */
.inspiration {
  padding: var(--space-xl) 0;
  background-color: var(--color-offwhite);
}
.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.inspiration-item {
  background-color: var(--color-soft-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  transition: transform var(--transition-base), background-color var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Keep complete gallery photos visible inside the inspiration tiles. */
.inspiration-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
 
.inspiration-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(222, 0, 203, 0.35) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.inspiration-item:hover {
  transform: scale(1.02);
}
.inspiration-item:hover::after { opacity: 1; }
.inspiration-item.large {
  grid-row: span 2;
  grid-column: span 2;
  background-color: var(--color-deep-blue);
}


/* ============================================================
   14. HOMEPAGE — CONTACT CTA
   ============================================================ */
.contact-cta {
  padding: var(--space-2xl) 0;
  background: linear-gradient(135deg, var(--color-pale-blue) 0%, var(--color-light-blue) 100%);
  text-align: center;
  color: var(--text-primary);
}
.contact-cta h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-sm);
  color: var(--text-heading);
}
.contact-cta p {
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.contact-cta .btn-primary {
  background-color: var(--color-deep-blue);
  color: #FFFFFF;
  box-shadow: none;
}
.contact-cta .btn-primary:hover {
  background-color: var(--color-deep-blue);
  opacity: 0.9;
  transform: translateY(-1px);
}


/* ============================================================
   15. SHARED PAGE HEADERS (Catalogue + List + Hero variants)
   ============================================================ */

/* ---- Default pale-blue list header ---- */
.list-header {
  background-color: var(--color-pale-blue);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.list-title {
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  margin-bottom: var(--space-xs);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.list-subtitle {
  font-size: var(--fs-base);
  color: var(--text-primary);
  max-width: 620px;
  margin: 0 auto var(--space-md);
}
.list-header .btn { margin-top: var(--space-sm); }

/* ---- Catalogue header ---- */
.catalogue-header {
  background-color: var(--color-pale-blue);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.catalogue-title {
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  margin-bottom: var(--space-xs);
}
.catalogue-subtitle {
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}
.catalogue-search {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.catalogue-search-input {
  width: 100%;
  padding: 1rem 3rem 1rem 1.5rem;
  font-size: var(--fs-base);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  background-color: #FFFFFF;
  color: var(--text-heading);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.catalogue-search-input:focus {
  border-color: var(--color-pink);
  box-shadow: 0 0 0 4px rgba(222, 0, 203, 0.12);
}
.catalogue-search-icon {
  position: absolute;
  right: 1.25rem;
  color: var(--color-pink);
  pointer-events: none;
}

/* ---- Hero variants (with background image) ---- */
.catalogue-header-hero,
.list-header-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  background-image: url('../../images/customer/homepage.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFFFFF;
  padding: 140px 0 var(--space-lg);
  overflow: hidden;
}
.catalogue-header-hero::before,
.list-header-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
}
.catalogue-header-hero > .container,
.list-header-hero > .container {
  position: relative;
  z-index: 2;
}
.list-header-hero > .container {
  text-align: center;
}
.catalogue-header-hero .catalogue-title,
.list-header-hero .list-title {
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.catalogue-header-hero .catalogue-subtitle,
.list-header-hero .list-subtitle {
  color: rgba(255, 255, 255, 0.95);
}
.list-header-hero .section-eyebrow {
  color: var(--color-pink);
}
.list-header-hero .btn-primary {
  background-color: var(--color-pink);
  color: #FFFFFF;
  box-shadow: none;
}
.list-header-hero .btn-primary:hover {
  background-color: var(--color-pink);
  opacity: 0.9;
}

/* Hero headers pull up under transparent sticky top area */
body.has-hero .catalogue-header-hero,
body.has-hero .list-header-hero {
  margin-top: -80px;
  padding-top: 120px;
}


/* ============================================================
   16. CATALOGUE PAGE
   ============================================================ */

/* ---- Layout ---- */
.catalogue-body {
  padding: var(--space-xl) 0;
  background-color: var(--bg-main);
}
.catalogue-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ---- Sidebar Filters ---- */
.catalogue-sidebar {
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: sticky;
  top: 140px;
}
.filter-close-mobile { display: none; }
.filter-group {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}
.filter-group:last-of-type { border-bottom: none; }
.filter-heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.filter-option:hover { color: var(--color-pink); }
.filter-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-pink);
  cursor: pointer;
}
.filter-clear {
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: var(--fs-xs);
}

/* ---- Toolbar ---- */
.catalogue-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.catalogue-count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.catalogue-count strong { color: var(--text-heading); }
.catalogue-sort { display: flex; align-items: center; gap: 0.5rem; }
.sort-label { font-size: var(--fs-sm); color: var(--text-muted); }
.sort-select {
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: var(--fs-sm);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  color: var(--text-heading);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23185079' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 16px;
}
.sort-select:focus { border-color: var(--color-pink); }

/* ---- Mobile filter button ---- */
.filter-open-mobile { display: none; margin-bottom: var(--space-md); }

/* ---- Product grid ---- */
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.product-card-cat {
  display: block;
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  color: inherit;
  text-decoration: none;
}
.product-card-cat:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.product-image-cat {
  aspect-ratio: 4 / 3;
  background-color: var(--color-offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-soft-blue);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
}
.product-info-cat { padding: var(--space-sm); }
.product-row-cat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-sm);
  gap: 0.5rem;
}
.product-name-cat {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.product-price-cat {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-deep-blue);
  white-space: nowrap;
}
.product-card-cat .btn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--fs-sm);
}
.product-card-cat .btn.added {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border-color: var(--color-pink);
}

/* ---- No results ---- */
.no-results {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  background-color: #FFFFFF;
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
}
.no-results h3 { font-size: var(--fs-lg); margin-bottom: var(--space-xs); color: var(--text-heading); }
.no-results p  { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-md); }

/* ---- Pagination ---- */
.catalogue-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-lg);
  width: 100%;
  flex-wrap: wrap;
}
.catalogue-pagination[hidden] { display: none; }
.catalogue-pagination-bottom {
  margin-top: var(--space-lg);
}
.page-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.page-btn:hover:not(:disabled) { border-color: var(--color-pink); color: var(--color-pink); }
.page-btn.active {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: #FFFFFF;
}
.page-btn:disabled { opacity: 0.65; cursor: not-allowed; }

/* ---- Catalogue CTA (pale blue gradient) ---- */
.catalogue-cta {
  background: linear-gradient(135deg, var(--color-pale-blue) 0%, var(--color-light-blue) 100%);
  padding: var(--space-xl) 0;
  text-align: center;
  color: var(--text-primary);
}
.catalogue-cta h2 {
  font-size: var(--fs-xl);
  color: var(--text-heading);
  margin-bottom: var(--space-xs);
}
.catalogue-cta p {
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.catalogue-cta .btn-primary {
  background-color: var(--color-deep-blue);
  color: #FFFFFF;
  box-shadow: none;
}
.catalogue-cta .btn-primary:hover {
  background-color: var(--color-deep-blue);
  opacity: 0.9;
}


/* ============================================================
   17. DETAILS PAGE
   ============================================================ */

/* ---- Breadcrumb ---- */
.breadcrumb {
  background-color: var(--color-offwhite);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-sm) 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--color-pink); }
.breadcrumb-current { color: var(--text-heading); font-weight: var(--fw-semibold); }

/* ---- Not found state ---- */
.details-not-found { padding: var(--space-2xl) 0; }
.details-not-found h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-sm); }
.details-not-found p  { color: var(--text-muted); margin-bottom: var(--space-md); }

/* ---- Main layout ---- */
.details-main { padding: var(--space-xl) 0; background-color: var(--bg-main); }
.details-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ---- Gallery ---- */
.details-gallery { position: sticky; top: 140px; }
.gallery-main {
  aspect-ratio: 4 / 3;
  background-color: #f7f5f2;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  margin-bottom: var(--space-sm);
  transition: background-color var(--transition-base);
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.gallery-main img { display: block; object-fit: contain; background: #f7f5f2; }
.gallery-thumb {
  aspect-ratio: 1;
  background-color: #f7f5f2;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-deep-blue);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.gallery-thumb img { display: block; object-fit: contain; background: #f7f5f2; }
.gallery-thumb:hover  { background-color: var(--color-light-blue); }
.gallery-thumb.active { border-color: var(--color-pink); }

/* ---- Info panel ---- */
.details-info { display: flex; flex-direction: column; gap: var(--space-sm); }
.details-category {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-pink);
  margin-bottom: 0;
}
.details-title { font-size: var(--fs-2xl); color: var(--text-heading); margin: 0; line-height: 1.15; }
.details-price { font-size: var(--fs-lg); color: var(--text-heading); margin: var(--space-sm) 0; }
.details-price strong { font-size: var(--fs-xl); color: var(--color-deep-blue); }
.details-unit { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-regular); }
.details-description {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

/* ---- Fields ---- */
.details-field { margin-bottom: var(--space-md); }
.details-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.details-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--fs-base);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  color: var(--text-heading);
  outline: none;
  transition: border-color var(--transition-fast);
}
.details-input:focus {
  border-color: var(--color-pink);
  box-shadow: 0 0 0 3px rgba(222, 0, 203, 0.12);
}

/* ---- Colour buttons ---- */
.colour-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.colour-btn {
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.colour-btn:hover  { border-color: var(--color-pink); color: var(--color-pink); }
.colour-btn.active { background-color: var(--color-pink); border-color: var(--color-pink); color: #FFFFFF; }

/* ---- Quantity ---- */
.quantity-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: #FFFFFF;
}
.quantity-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.quantity-btn:hover { background-color: var(--color-pale-blue); color: var(--color-pink); }
.quantity-input {
  width: 70px;
  height: 44px;
  border: none;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  outline: none;
  -moz-appearance: textfield;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Availability notice ---- */
.availability-notice {
  display: flex;
  gap: 0.75rem;
  padding: var(--space-sm) var(--space-md);
  background-color: rgba(20, 160, 80, 0.08);
  border-left: 4px solid #14A050;
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
  color: #0E7A3E;
}
.availability-notice svg { flex-shrink: 0; margin-top: 3px; color: #14A050; }
.availability-notice strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: 2px; }
.availability-notice p { font-size: var(--fs-xs); margin: 0; line-height: 1.5; }

/* ---- Large add-to buttons ---- */
.js-add-to-quote-large,
.js-add-to-cart-large {
  padding: 1rem 2rem;
  font-size: var(--fs-base);
  margin-top: var(--space-sm);
}
.js-add-to-quote-large.added,
.js-add-to-cart-large.added {
  background-color: var(--color-medium-blue);
}
.details-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  margin: 0.5rem 0 0;
}

/* ---- Rental info card ---- */
.rental-info {
  background-color: var(--color-offwhite);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
}
.rental-info h3 { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: 0.5rem; }
.rental-info p  { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; line-height: 1.6; }

/* ---- Related items ---- */
.details-related { padding: var(--space-xl) 0; background-color: transparent; }
.details-related .section-title { margin-bottom: var(--space-lg); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.related-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.related-image {
  aspect-ratio: 4 / 3;
  background-color: var(--color-light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
}
.related-info { padding: var(--space-sm); }
.related-name  { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-heading); margin-bottom: 0.25rem; }
.related-price { font-size: var(--fs-sm); color: var(--color-deep-blue); font-weight: var(--fw-semibold); margin-bottom: var(--space-sm); }

/* Recommendations sit between the detail content and shared footer. */
.recommendations-section {
  margin-top: 0;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.recommendations-section .section-eyebrow { margin-bottom: 0.5rem; }
.recommendations-section .section-title { margin-bottom: var(--space-lg); }
.recommendation-grid { align-items: stretch; }
.recommendation-card { display: flex; flex-direction: column; }
.recommendation-image {
  position: relative;
  display: flex;
  overflow: hidden;
  text-decoration: none;
}
.recommendation-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.recommendation-card:hover .recommendation-image img { transform: scale(1.035); }
.recommendation-image span { color: var(--text-muted); letter-spacing: normal; }
.recommendation-info { flex: 1; }
.recommendation-type {
  margin: 0 0 0.35rem;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-semibold);
}
.recommendation-card .related-name { min-height: 1.5em; }
.recommendation-card .related-info .btn { margin-top: 0.25rem; }


/* ============================================================
   18. PACKAGES PAGE
   ============================================================ */

/* ---- Occasion tabs ---- */
.occasion-tabs-section {
  padding: var(--space-xl) 0;
  background-color: var(--bg-main);
}
.occasion-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--space-md) 0 var(--space-lg);
  justify-content: center;
}
.occasion-tab {
  padding: 0.625rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  background-color: #FFFFFF;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.occasion-tab:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}
.occasion-tab.active {
  background-color: var(--color-deep-blue);
  border-color: var(--color-deep-blue);
  color: #FFFFFF;
}

/* ---- Package grid + cards ---- */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.package-card {
  display: block;
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  color: inherit;
  text-decoration: none;
}
.package-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.package-image {
  aspect-ratio: 4 / 3;
  background-color: var(--color-light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
}
.package-info { padding: var(--space-md); }
.package-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}
.package-price {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-deep-blue);
  margin-bottom: 0.25rem;
}
.package-tags {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.package-card .btn {
  width: 100%;
  pointer-events: none;
}
.package-card .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================
   19. SERVICES PAGE
   ============================================================ */
.services-grid-section {
  padding: var(--space-xl) 0;
  background-color: var(--bg-main);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.service-card {
  display: block;
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  color: inherit;
  text-decoration: none;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.service-image {
  aspect-ratio: 4 / 3;
  background-color: var(--color-soft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
}
.service-info { padding: var(--space-md); }
.service-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}
.service-description {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}
.service-card .btn {
  width: 100%;
  pointer-events: none;
}
.service-card .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Not sure CTA ---- */
.not-sure-section {
  padding: var(--space-xl) 0;
  background: linear-gradient(135deg, var(--color-pale-blue) 0%, var(--color-light-blue) 100%);
  text-align: center;
  color: var(--text-primary);
}
.not-sure-section h2 {
  font-size: var(--fs-xl);
  color: var(--text-heading);
  margin-bottom: var(--space-sm);
}
.not-sure-section p {
  font-size: var(--fs-base);
  color: var(--text-primary);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- Pricing section ---- */
.pricing-section {
  padding: var(--space-xl) 0;
  background-color: var(--bg-main);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.pricing-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.pricing-card h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--space-sm);
}
.pricing-card p {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.6;
}


/* ============================================================
   20. RESPONSIVE MEDIA QUERIES
   ============================================================ */

/* ---- 1024px ---- */
@media (max-width: 1024px) {
  .main-nav ul { gap: 1.25rem; }
  .logo-text   { font-size: 0.65rem; }

  .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
  .package-grid,
  .service-grid,
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

  .details-layout { grid-template-columns: 1fr; gap: var(--space-lg); }
  .details-gallery { position: static; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 900px ---- */
@media (max-width: 900px) {
  /* Mobile sidebar */
  .mobile-toggle { display: inline-flex; }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 260px;
    height: 100vh;
    background-color: #FFFFFF;
    box-shadow: var(--shadow-lg);
    padding: 4rem 1.5rem 2rem;
    transition: right var(--transition-base);
    z-index: 300;
    overflow-y: auto;
  }
  .main-nav.open { right: 0; }
  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .main-nav a {
    font-size: var(--fs-base);
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    position: relative;
    color: var(--text-primary);
  }
  .main-nav a:hover { color: var(--color-pink); }
  .main-nav a.active {
    color: var(--color-pink);
    font-weight: var(--fw-semibold);
  }
  .main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0.5rem;
    width: 40px;
    height: 3px;
    background-color: var(--color-pink);
    border-radius: 2px;
  }

  /* Hero adjustments */
  .hero { min-height: 100vh; }
  .hero-title { font-size: var(--fs-2xl); }
  .hero-subtitle { font-size: var(--fs-md); }
  .catalogue-header-hero,
  .list-header-hero {
    min-height: 320px;
    padding: 120px 0 var(--space-md);
  }

  /* Grids */
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .occasions-grid,
  .inspiration-grid { grid-template-columns: repeat(2, 1fr); }
  .inspiration-item.large { grid-column: span 2; grid-row: span 1; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* Catalogue mobile layout */
  .catalogue-layout { grid-template-columns: 1fr; gap: var(--space-md); }
  .catalogue-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100vh;
    z-index: 300;
    border-radius: 0;
    overflow-y: auto;
    transition: left var(--transition-base);
  }
  .catalogue-sidebar.open { left: 0; box-shadow: var(--shadow-lg); }
  .filter-close-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-offwhite);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    cursor: pointer;
  }
  .filter-open-mobile { display: inline-flex; }
  
    .sidebar-close {
    display: block;
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 2rem;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }
  
  .sidebar-close {
      display: none;
  }
}

/* ---- 768px ---- */
@media (max-width: 768px) {
  :root {
    --container-pad: 1.25rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 2.75rem;
    --fs-xl: 1.75rem;
  }
}

/* ---- 600px ---- */
@media (max-width: 600px) {
  /* Hero */
  .hero { min-height: 100vh; padding: var(--space-xl) 0; }
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: var(--fs-base); }
  .hero-actions .btn { width: 100%; }
  .catalogue-header-hero,
  .list-header-hero {
    min-height: 280px;
    padding: 100px 0 var(--space-md);
  }

  /* Grids */
  .how-grid,
  .occasions-grid,
  .inspiration-grid,
  .catalogue-grid,
  .package-grid,
  .service-grid,
  .pricing-grid,
  .related-grid { grid-template-columns: 1fr; }
  .inspiration-item.large { grid-column: span 1; }

  /* Catalogue */
  .catalogue-title { font-size: var(--fs-xl); }
  .catalogue-search-input { padding: 0.875rem 3rem 0.875rem 1.25rem; }
  .catalogue-toolbar { flex-direction: column; align-items: stretch; }
  .catalogue-sort { justify-content: space-between; }

  /* List headers */
  .list-title { font-size: var(--fs-xl); }
  .occasion-tabs { justify-content: flex-start; }

  /* Details */
  .details-title { font-size: var(--fs-xl); }
  .details-price { font-size: var(--fs-base); }
  .details-price strong { font-size: var(--fs-lg); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-legal { gap: 1rem; }

  /* Disclaimer */
  .site-disclaimer { font-size: 0.65rem; padding: 0.5rem 0; }
  .site-disclaimer p { font-size: 0.65rem; }
}

/* ---- 480px ---- */
@media (max-width: 480px) {
  .logo-text { display: none; }
  .header-inner {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  body.has-hero .hero,
  body.has-hero .catalogue-header-hero,
  body.has-hero .list-header-hero {
    margin-top: -70px;
    padding-top: 100px;
  }
}



/* ============================================================
   22. UNIFIED BUTTON ACTIVE STATE
   All buttons get a consistent pink accent when clicked/active.
   ============================================================ */

/* Default active/focus state for ALL buttons */
.btn:active,
.btn:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

/* Buttons that are normally blue/secondary → pink on click */
.btn-primary:active {
  background-color: var(--btn-accent-hover);
}

.btn-secondary:active {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border-color: var(--color-pink);
}

/* "Added ✓" state — always pink */
.btn.added,
.btn-primary.added,
.btn-secondary.added,
.js-add-to-quote.added,
.js-add-to-cart.added,
.js-add-to-quote-large.added,
.js-add-to-cart-large.added {
  background-color: var(--color-pink) !important;
  color: #FFFFFF !important;
  border-color: var(--color-pink) !important;
}

/* Quantity +/- buttons — pink on click */
.quantity-btn:active {
  background-color: var(--color-pink);
  color: #FFFFFF;
}

/* Colour selector buttons — pink on click */
.colour-btn:active {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border-color: var(--color-pink);
}

/* Icon buttons — pink on click */
.icon-btn:active {
  background-color: var(--color-pink);
  color: #FFFFFF;
}

/* Filter checkboxes — pink when checked */
.filter-checkbox:active,
.filter-checkbox:checked {
  accent-color: var(--color-pink);
}

/* Occasion tabs — pink outline on click */
.occasion-tab:active {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: #FFFFFF;
}

/* Pagination — pink on click */
.page-btn:active:not(:disabled) {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: #FFFFFF;
}

/* FAQ questions — pink highlight on click */
.faq-question:active {
  color: var(--color-pink);
}



/* ============================================================
   23. MOBILE SIDEBAR — FORCE DARK NAV LINKS
   ============================================================ */

@media (max-width: 900px) {
  /* Sidebar panel — force white background */
  .main-nav {
    background-color: #FFFFFF !important;
  }

  /* Nav links inside the sidebar — force dark blue, always */
  .main-nav a,
  .main-nav ul a,
  .main-nav li a {
    color: var(--text-primary) !important;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    position: relative;
  }

  /* Active link — pink */
  .main-nav a.active {
    color: var(--color-pink) !important;
    font-weight: var(--fw-semibold);
  }

  .main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0.5rem;
    width: 40px;
    height: 3px;
    background-color: var(--color-pink);
    border-radius: 2px;
  }

  /* Hover — pink */
  .main-nav a:hover {
    color: var(--color-pink) !important;
  }
}

/* ============================================================
   24. UNIFIED BUTTON HOVER — PINK ACCENT
   All buttons turn pink when hovered for consistent feedback.
   ============================================================ */

/* Primary buttons already pink — keep them pink on hover */
.btn-primary:hover {
  background-color: var(--btn-accent-hover);
  color: #FFFFFF;
  border-color: var(--btn-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(222, 0, 203, 0.45);
}

/* Secondary buttons — pink on hover */
.btn-secondary:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border-color: var(--color-pink);
  transform: translateY(-1px);
}

/* Outline-light buttons — pink on hover */
.btn-outline-light:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border-color: var(--color-pink);
}

/* Generic .btn hover fallback */
.btn:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border-color: var(--color-pink);
}

/* Icon buttons — pink on hover */
.icon-btn:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
}

/* Quantity +/- buttons — pink on hover */
.quantity-btn:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
}

/* Colour selector buttons — pink on hover */
.colour-btn:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border-color: var(--color-pink);
}

/* Occasion tabs — pink on hover */
.occasion-tab:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border-color: var(--color-pink);
}

/* Pagination — pink on hover */
.page-btn:hover:not(:disabled) {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: #FFFFFF;
}

/* FAQ question — pink on hover */
.faq-question:hover {
  color: var(--color-pink);
}

/* Product / package / service cards — subtle pink accent */
.product-card-cat:hover,
.package-card:hover,
.service-card:hover,
.related-card:hover {
  border-color: var(--color-pink);
}

/* Ensure "Added ✓" state persists even on hover */
.btn.added:hover,
.btn-primary.added:hover,
.btn-secondary.added:hover,
.js-add-to-quote.added:hover,
.js-add-to-cart.added:hover,
.js-add-to-quote-large.added:hover,
.js-add-to-cart-large.added:hover {
  background-color: var(--color-pink) !important;
  color: #FFFFFF !important;
  border-color: var(--color-pink) !important;
}

/* ============================================================
   25. QUOTE REQUEST WIZARD
   ============================================================ */

/* ---- Page header ---- */
.quote-header {
  background-color: var(--color-pale-blue);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.quote-title {
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  margin-bottom: var(--space-xs);
}
.quote-subtitle {
  font-size: var(--fs-base);
  color: var(--text-primary);
  max-width: 620px;
  margin: 0 auto;
}

/* ---- Body layout ---- */
.quote-body {
  padding: var(--space-xl) 0;
  background-color: var(--bg-main);
}
.quote-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ---- Success + empty states ---- */
.quote-success,
.quote-empty {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  max-width: 640px;
  margin: 0 auto;
}
.quote-success h2,
.quote-empty h2 {
  font-size: var(--fs-xl);
  color: var(--text-heading);
  margin-bottom: var(--space-sm);
}
.quote-success p,
.quote-empty p {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0;
}

/* ---- Form panel ---- */
.quote-form {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.quote-form .form-hint {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.quote-package-meta { justify-content: flex-end; }

/* ---- Step indicator ---- */
.step-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  gap: var(--space-sm);
}
.step-indicator-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  position: relative;
}
.step-indicator-item:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: var(--border-light);
  margin: 0 0.5rem;
}
.step-indicator-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--border-light);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: all var(--transition-base);
  flex-shrink: 0;
}
.step-indicator-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: color var(--transition-base);
  white-space: nowrap;
}
.step-indicator-item.active .step-indicator-number {
  background-color: var(--color-pink);
  color: #FFFFFF;
}
.step-indicator-item.active .step-indicator-label {
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
}
.step-indicator-item.completed .step-indicator-number {
  background-color: var(--color-deep-blue);
  color: #FFFFFF;
}
.step-indicator-item.completed .step-indicator-label {
  color: var(--text-primary);
}

/* ---- Step panels ---- */
.step-panel { display: none; }
.step-panel.active { display: block; }

.step-heading {
  font-size: var(--fs-lg);
  color: var(--text-heading);
  margin: var(--space-lg) 0 var(--space-md);
}
.step-heading:first-child { margin-top: 0; }

/* ---- Form rows ---- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ---- Logistics options ---- */
.logistics-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.logistics-charge-note {
  margin: -0.25rem 0 var(--space-md);
  padding: 0.55rem 0.75rem;
  border-left: 2px solid var(--color-light-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(181, 217, 230, 0.18);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.logistics-option {
  display: block;
  cursor: pointer;
}
.logistics-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.logistics-option-content {
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: all var(--transition-fast);
  background-color: #FFFFFF;
}
.logistics-option-content strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  margin-bottom: 0.25rem;
}
.logistics-option-content p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.logistics-option input[type="radio"]:checked + .logistics-option-content {
  border-color: var(--color-pink);
  background-color: rgba(222, 0, 203, 0.04);
}
.logistics-option:hover .logistics-option-content {
  border-color: var(--color-pink);
}

/* ---- Additional services ---- */
.additional-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.additional-service {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-offwhite);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.additional-service:hover {
  background-color: var(--color-pale-blue);
}
.additional-service input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-pink);
  cursor: pointer;
  flex-shrink: 0;
}

/* ---- Step actions ---- */
.step-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}
.step-actions .btn { min-width: 140px; }

/* ---- Review ---- */
.review-section {
  background-color: var(--color-offwhite);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.review-section h3 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.review-list {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.5rem var(--space-md);
}
.review-list dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.review-list dd {
  font-size: var(--fs-sm);
  color: var(--text-heading);
}

/* ---- Form errors ---- */
.form-errors {
  background-color: rgba(222, 0, 203, 0.08);
  border-left: 4px solid var(--color-pink);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
}
.form-errors p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-pink);
}

/* ---- Sidebar ---- */
.quote-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 140px;
}
.quote-sidebar-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.quote-sidebar-heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-heading);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

/* ---- Sidebar items ---- */
.quote-sidebar-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.quote-sidebar-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
.quote-sidebar-image {
  width: 60px;
  height: 60px;
  background-color: var(--color-light-blue);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.quote-sidebar-info { flex: 1; min-width: 0; }
.quote-sidebar-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.quote-sidebar-colour {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
}
.quote-sidebar-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.quote-sidebar-qty-form { display: inline-flex; }
.quote-sidebar-qty {
  width: 56px;
  padding: 0.25rem;
  font-size: var(--fs-xs);
  text-align: center;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  color: var(--text-heading);
  outline: none;
}
.quote-sidebar-qty:focus { border-color: var(--color-pink); }
.quote-sidebar-price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-deep-blue);
}
.quote-sidebar-remove-form { display: inline; }
.quote-sidebar-remove {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.quote-sidebar-remove:hover { color: var(--color-pink); }

/* ---- Sidebar total ---- */
.quote-sidebar-total {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}
.quote-sidebar-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.quote-sidebar-total-final {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-deep-blue);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
  margin-top: 0.5rem;
}

/* ---- What happens next list ---- */
.what-next-list {
  list-style: none;
  counter-reset: whatsnext;
  padding: 0;
  margin: 0;
}
.what-next-list li {
  counter-increment: whatsnext;
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: 1.5;
}
.what-next-list li::before {
  content: counter(whatsnext) ".";
  font-weight: var(--fw-bold);
  color: var(--color-pink);
  flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .quote-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .quote-sidebar { position: static; }
}

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .logistics-options { grid-template-columns: 1fr; }
  .additional-services { grid-template-columns: 1fr; }
  .review-list { grid-template-columns: 1fr; gap: 0.25rem; }
  .review-list dt { margin-top: 0.5rem; }
  .step-indicator { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .step-indicator-item:not(:last-child)::after { display: none; }
  .step-actions { flex-direction: column-reverse; }
  .step-actions .btn { width: 100%; }
} 

/* ============================================================
   26. CHECKOUT PAGE
   ============================================================ */

.checkout-header {
  background-color: var(--color-pale-blue);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.checkout-title {
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  margin-bottom: var(--space-xs);
}
.checkout-subtitle {
  font-size: var(--fs-base);
  color: var(--text-primary);
  max-width: 620px;
  margin: 0 auto;
}

.checkout-progress-wrap {
  padding: 1.15rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--border-light);
}
.checkout-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.checkout-progress-step {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.checkout-progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: calc(50% + 2rem);
  width: calc(100% - 4rem);
  height: 2px;
  background: var(--border-light);
}
.checkout-progress-step.is-complete:not(:last-child)::after { background: var(--color-deep-blue); }
.checkout-progress-step a,
.checkout-progress-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
}
.checkout-progress-step a:hover { color: var(--color-deep-blue); }
.checkout-progress-number {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-medium);
  border-radius: 50%;
  background: #fff;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.checkout-progress-step.is-current { color: var(--text-heading); }
.checkout-progress-step.is-current .checkout-progress-number,
.checkout-progress-step.is-complete .checkout-progress-number {
  border-color: var(--color-deep-blue);
  background: var(--color-deep-blue);
  color: #fff;
}

.checkout-body {
  padding: var(--space-xl) 0;
  background-color: var(--bg-main);
}
.checkout-wizard-container { max-width: 1060px; }
.checkout-step-card {
  width: 100%;
  max-width: 930px;
  margin: 0 auto;
}
.checkout-step-card.checkout-form { display: block; }
.checkout-section-heading {
  display: block;
  width: 100%;
  margin: 0 0 0.7rem;
  padding: 0 0 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-heading);
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
}
.checkout-section-intro {
  margin: 0 0 var(--space-lg);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.checkout-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-lg); }
.checkout-field { margin-bottom: var(--space-md); }
.checkout-field small { display: block; margin-top: 0.4rem; color: var(--text-muted); font-size: var(--fs-xs); }
.checkout-logistics-fieldset { min-width: 0; margin: 0 0 var(--space-lg); padding: 0; border: 0; }
.checkout-logistics-fieldset > legend { float: none; width: auto; margin-bottom: var(--space-sm); }
.checkout-logistics-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.checkout-logistics-option { display: flex; align-items: flex-start; gap: 0.7rem; min-height: 88px; padding: 1rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.checkout-logistics-option:has(input:checked) { border-color: var(--color-pink); background: rgba(222, 0, 203, 0.04); }
.checkout-logistics-option input { margin-top: 0.2rem; accent-color: var(--color-pink); }
.checkout-logistics-option span { display: grid; gap: 0.35rem; }
.checkout-logistics-option strong { color: var(--text-heading); font-size: var(--fs-sm); }
.checkout-logistics-option small { color: var(--text-muted); font-size: var(--fs-xs); }
.checkout-logistics-notice { margin: var(--space-md) 0; padding: 0.7rem 0.85rem; border-left: 2px solid var(--color-light-blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(181, 217, 230, 0.18); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.checkout-logistics-notice[hidden], .checkout-logistics-dates[hidden] { display: none; }
.checkout-logistics-dates { margin-top: var(--space-sm); }
.checkout-logistics-dates .checkout-field { min-width: 0; }
.checkout-logistics-dates input[readonly] { background: #f8fafc; color: var(--text-muted); }
.checkout-contact-summary {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #f8fafc;
}
.checkout-contact-summary h2 { margin: 0 0 0.55rem; color: var(--text-heading); font-size: var(--fs-sm); }
.checkout-contact-summary p { margin: 0.2rem 0; color: var(--text-primary); font-size: var(--fs-sm); }
.checkout-contact-summary small { display: block; margin-top: 0.45rem; color: var(--text-muted); font-size: var(--fs-xs); }
.checkout-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}
.checkout-step-actions .btn { min-height: 46px; }
.checkout-step-actions .btn-primary { min-width: 210px; }
.checkout-alert {
  max-width: 930px;
  margin: 0 auto var(--space-md);
  padding: 0.9rem 1rem;
  border: 1px solid #f1b9b9;
  border-left: 4px solid #b42318;
  border-radius: var(--radius-sm);
  background: #fff7f6;
  color: #842018;
}
.checkout-alert p { margin: 0.15rem 0; }
.checkout-payment-grid,
.checkout-confirm-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-lg); align-items: start; }
.checkout-payment-items { display: grid; gap: 0; margin: 0 0 var(--space-md); }
.checkout-payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-heading);
  font-size: var(--fs-sm);
}
.checkout-payment-item small { color: var(--text-muted); }
.checkout-payment-item strong { white-space: nowrap; }
.checkout-balance-note { margin: 0.65rem 0 0; color: var(--text-muted); font-size: var(--fs-xs); }
.checkout-payment-grid .payment-summary { margin: 0; }
.checkout-payment-grid .demo-payment-panel { margin: 0; }
.checkout-payment-grid .form-control { width: 100%; }
.checkout-confirm-grid { grid-template-columns: 1.2fr 0.8fr; }
.checkout-review-list { margin: 0 0 var(--space-lg); }
.checkout-review-list > div { display: grid; grid-template-columns: minmax(145px, 0.7fr) 1.3fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border-light); }
.checkout-review-list dt { color: var(--text-muted); font-size: var(--fs-sm); }
.checkout-review-list dd { margin: 0; color: var(--text-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.checkout-review-list dd span { color: var(--text-muted); font-weight: var(--fw-regular); }
.checkout-confirm-products-heading { margin-top: var(--space-lg); }
.checkout-confirm-payment h2 { margin: 0 0 var(--space-sm); color: var(--text-heading); font-size: var(--fs-lg); }
.checkout-confirm-result { padding: 0.75rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.checkout-confirm-result.is-approved { background: #edf8f1; color: #17643a; }
.checkout-confirm-result.is-pending { background: #fff7e6; color: #76520b; }
.checkout-confirm-payment .payment-summary { margin-bottom: var(--space-md); }
.checkout-final-note { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.55; }
.checkout-confirm-actions { max-width: 930px; margin: var(--space-md) auto 0; padding: 0; border: 0; }
.checkout-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.checkout-form {
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-md);
}

.checkout-form .step-heading {
  margin: 0 0 var(--space-md);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-heading);
}

.checkout-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.checkout-form legend.step-heading {
  float: none;
  width: 100%;
}

.checkout-form .form-control {
  min-height: 46px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  background-color: #fff;
  color: var(--text-heading);
}

.checkout-form .form-control:focus {
  border-color: var(--color-deep-blue);
  box-shadow: 0 0 0 3px rgba(28, 65, 103, 0.12);
  outline: none;
}

.checkout-form .form-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.checkout-event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-md);
}

.checkout-event-grid .checkout-location-field { grid-column: 1 / -1; }

.checkout-customer {
  background-color: var(--color-offwhite);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.checkout-customer p {
  margin: 0 0 0.25rem;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.checkout-customer p:last-child { margin-bottom: 0; }
.checkout-customer strong { color: var(--text-heading); }

/* Payment summary */
.payment-summary {
  background: linear-gradient(135deg, #f7f9fc, #fff);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.payment-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  padding: 0.5rem 0;
}
.payment-summary-total {
  border-top: 1px solid var(--border-light);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--text-heading);
}
.payment-summary-deposit {
  border-top: 1px solid var(--border-light);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  font-weight: var(--fw-semibold);
  color: var(--color-pink);
}

/* Payment methods */
.payment-methods {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.payment-method {
  cursor: pointer;
}
.payment-method input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.payment-method-content {
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: all var(--transition-fast);
}
.payment-method-content strong {
  display: block;
  font-size: var(--fs-base);
  color: var(--text-heading);
  margin-bottom: 0.25rem;
}
.payment-method-content p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.payment-method input[type="radio"]:checked + .payment-method-content {
  border-color: var(--color-pink);
  background-color: rgba(222, 0, 203, 0.04);
}

/* Conditions */
.checkout-conditions {
  background-color: var(--color-offwhite);
  border-left: 4px solid var(--color-pink);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-lg);
}
.checkout-conditions h3 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.checkout-conditions p {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.6;
}

/* Actions */
.checkout-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}
.checkout-actions .btn { min-width: 140px; }

/* Sidebar */
.checkout-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 140px;
}
.checkout-sidebar-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
}
.checkout-sidebar-heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-heading);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}
.checkout-sidebar-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.checkout-sidebar-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
.checkout-sidebar-image {
  width: 60px;
  height: 60px;
  background-color: var(--color-light-blue);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.checkout-sidebar-info { flex: 1; min-width: 0; }
.checkout-sidebar-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.checkout-sidebar-colour {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
}
.checkout-sidebar-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.checkout-sidebar-qty-form { display: inline-flex; }
.checkout-sidebar-qty {
  width: 56px;
  padding: 0.25rem;
  font-size: var(--fs-xs);
  text-align: center;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  color: var(--text-heading);
  outline: none;
}
.checkout-sidebar-qty:focus { border-color: var(--color-pink); }
.checkout-sidebar-price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-deep-blue);
}
.checkout-sidebar-remove-form { display: inline; }
.checkout-sidebar-remove {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.checkout-sidebar-remove:hover { color: var(--color-pink); }

.checkout-sidebar-total {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}
.checkout-sidebar-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.checkout-sidebar-total-final {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-deep-blue);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
  margin-top: 0.5rem;
}
.checkout-sidebar-total-deposit {
  font-weight: var(--fw-semibold);
  color: var(--color-pink);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
  margin-top: 0.5rem;
}

.demo-payment-panel {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(28, 65, 103, 0.2);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #f5f8fc, #fff 70%);
}
.demo-card-preview {
  min-height: 176px;
  margin: 1.1rem 0 1.2rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 14px;
  color: #fff;
  background: radial-gradient(circle at 90% 10%, rgba(104, 167, 205, 0.55), transparent 36%), linear-gradient(135deg, #123b5d, #185079 62%, #28688e);
  box-shadow: 0 12px 24px rgba(18, 59, 93, 0.2);
}
.demo-card-preview-top,
.demo-card-preview-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.demo-card-preview-top strong { font-size: 1.05rem; font-style: italic; letter-spacing: 0.08em; }
.demo-card-chip {
  width: 2rem;
  height: 1.45rem;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 5px;
  background: linear-gradient(90deg, transparent 32%, rgba(255,255,255,0.35) 33% 36%, transparent 37% 64%, rgba(255,255,255,0.35) 65% 68%, transparent 69%), linear-gradient(0deg, transparent 43%, rgba(255,255,255,0.35) 44% 48%, transparent 49% 70%, rgba(255,255,255,0.35) 71% 75%, transparent 76%);
}
.demo-card-preview-number { font-size: clamp(1rem, 2vw, 1.22rem); letter-spacing: 0.13em; white-space: nowrap; }
.demo-card-preview-bottom > div { display: grid; gap: 0.2rem; min-width: 0; }
.demo-card-preview-bottom small { color: rgba(255,255,255,0.7); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; }
.demo-card-preview-bottom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.73rem; letter-spacing: 0.05em; }
.demo-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); }
.demo-card-field-full { grid-column: 1 / -1; }
.demo-card-number-field { position: relative; }
.demo-card-number-field input { padding-right: 4.4rem; }
.demo-card-number-field > span { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--color-deep-blue); font-size: 0.7rem; font-style: italic; font-weight: var(--fw-bold); letter-spacing: 0.08em; }
.demo-test-cards { padding: 0.85rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: #fff; }
.demo-test-cards > strong { color: var(--text-heading); font-size: var(--fs-xs); }
.demo-test-cards > p { margin: 0.2rem 0 0.6rem; color: var(--text-muted); font-size: var(--fs-xs); }
.demo-test-card-list { display: grid; gap: 0.4rem; }
.demo-test-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.demo-test-card:hover, .demo-test-card:focus-visible { border-color: var(--color-deep-blue); background: #f6f9fc; }
.demo-test-card span { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.demo-test-card code { color: var(--text-muted); font-size: 0.68rem; }
.demo-test-cards > small { display: block; margin-top: 0.55rem; color: var(--text-muted); font-size: 0.67rem; line-height: 1.45; }
.demo-payment-heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: var(--space-sm);
}
.demo-payment-heading > div { flex: 1; }
.demo-payment-heading strong { color: var(--text-heading); }
.demo-payment-heading p { margin: 0.2rem 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.demo-payment-heading p b { color: var(--text-heading); }
.demo-payment-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-deep-blue);
  color: #fff;
  font-weight: var(--fw-bold);
}
.demo-badge {
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #fff3d8;
  color: #77530b;
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}
.demo-payment-note,
.demo-payment-help {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.demo-payment-note {
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--color-pink);
  background: #fff;
}
.demo-payment-help { margin: 0.55rem 0 0; }

/* Bank details */
.bank-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem var(--space-md);
  font-size: var(--fs-sm);
}
.bank-details dt {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.bank-details dd {
  color: var(--text-heading);
  margin: 0;
}

/* Confirmation page */
.confirmation-body {
  padding: var(--space-2xl) 0;
  background-color: var(--bg-main);
  min-height: 60vh;
}
.confirmation-card {
  max-width: 640px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.confirmation-icon {
  color: #14A050;
  margin: 0 auto var(--space-md);
  display: inline-flex;
}
.confirmation-icon-pending { color: #B7791F; }
.confirmation-title {
  font-size: var(--fs-xl);
  color: var(--text-heading);
  margin-bottom: var(--space-sm);
}
.confirmation-subtitle {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}
.confirmation-summary {
  background-color: var(--color-offwhite);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  text-align: left;
}
.confirmation-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}
.confirmation-row:last-child { border-bottom: none; }
.confirmation-row strong { color: var(--text-heading); }
.confirmation-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .checkout-sidebar { position: static; }
}
@media (max-width: 600px) {
  .checkout-form { padding: var(--space-md); }
  .checkout-event-grid { grid-template-columns: 1fr; }
  .checkout-logistics-options { grid-template-columns: 1fr; }
  .checkout-event-grid .checkout-location-field { grid-column: auto; }
  .checkout-progress-wrap { padding: 0.85rem 0.35rem; }
  .checkout-progress-step { font-size: 0.7rem; }
  .checkout-progress-step:not(:last-child)::after { left: calc(50% + 1.45rem); width: calc(100% - 2.9rem); }
  .checkout-progress-step a, .checkout-progress-label { flex-direction: column; gap: 0.25rem; }
  .checkout-payment-grid, .checkout-confirm-grid { grid-template-columns: 1fr; }
  .demo-card-fields { gap: 0 var(--space-sm); }
  .demo-test-card { align-items: flex-start; flex-direction: column; }
  .checkout-step-actions { flex-direction: column-reverse; align-items: stretch; }
  .checkout-step-actions .btn, .checkout-step-actions .btn-primary { width: 100%; min-width: 0; }
  .checkout-review-list > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .demo-payment-heading { align-items: flex-start; flex-wrap: wrap; }
  .demo-badge { margin-left: 3.3rem; }
  .checkout-actions { flex-direction: column-reverse; }
  .checkout-actions .btn { width: 100%; }
  .confirmation-card { padding: var(--space-lg) var(--space-md); }
}



/* ============================================================
   27. QUOTE & PAYMENT PAGE
   ============================================================ */

/* ---- Stepper bar ---- */
.quote-stepper-bar {
  background-color: var(--color-offwhite);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-md) 0;
}
.quote-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  max-width: 900px;
  margin: 0 auto;
}
.quote-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  position: relative;
  flex: 1;
}
.quote-step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-medium);
  margin: 0 0.5rem;
}
.quote-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--border-light);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.quote-step.completed { color: var(--text-primary); }
.quote-step.completed .quote-step-icon {
  background-color: #14A050;
  color: #FFFFFF;
}
.quote-step.active { color: var(--text-heading); font-weight: var(--fw-semibold); }
.quote-step.active .quote-step-icon {
  background-color: var(--color-pink);
  color: #FFFFFF;
  border: 2px solid var(--color-pink);
}

/* ---- Page header ---- */
.quote-payment-header {
  background-color: var(--color-pale-blue);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.quote-payment-title {
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  margin-bottom: var(--space-xs);
}
.quote-payment-subtitle {
  font-size: var(--fs-base);
  color: var(--text-primary);
  max-width: 620px;
  margin: 0 auto;
}

/* ---- Layout ---- */
.quote-payment-body {
  padding: var(--space-xl) 0;
  background-color: var(--bg-main);
}
.quote-payment-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.quote-payment-form {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.quote-payment-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}
.quote-payment-section:last-of-type { border-bottom: none; }

/* ---- Detail grid ---- */
.detail-grid {
  display: grid;
  grid-template-columns: 160px 1fr 160px 1fr;
  gap: 0.75rem var(--space-md);
  font-size: var(--fs-sm);
  padding: var(--space-md);
  background-color: var(--color-offwhite);
  border-radius: var(--radius-md);
}
.detail-grid dt {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.detail-grid dd {
  color: var(--text-heading);
  margin: 0;
}

/* ---- Actions ---- */
.quote-payment-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}
.quote-payment-actions .btn { min-width: 160px; }

/* ---- Sidebar ---- */
.quote-payment-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 140px;
}
.quote-payment-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.quote-payment-card-heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-heading);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

/* ---- Item breakdown table ---- */
.item-breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.item-breakdown th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
}
.item-breakdown td {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}
.item-breakdown tr:last-child td { border-bottom: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .quote-payment-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .quote-payment-sidebar { position: static; }
  .detail-grid { grid-template-columns: 140px 1fr; }
  .quote-stepper { flex-wrap: wrap; justify-content: flex-start; }
  .quote-step:not(:last-child)::after { display: none; }
}
@media (max-width: 600px) {
  .quote-payment-title { font-size: var(--fs-xl); }
  .quote-payment-actions { flex-direction: column-reverse; }
  .quote-payment-actions .btn { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; gap: 0.25rem; }
  .detail-grid dt { margin-top: 0.5rem; }
}



/* ============================================================
   29. ABOUT PAGE
   ============================================================ */

.about-hero {
  background-color: var(--color-pale-blue);
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
}
.about-title {
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  max-width: 800px;
  margin: 0 auto var(--space-md);
  line-height: 1.15;
}
.about-subtitle {
  font-size: var(--fs-md);
  color: var(--text-primary);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

.about-mission {
  padding: var(--space-2xl) 0;
  background-color: var(--bg-main);
}
.about-mission-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.about-mission-text p {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}
.about-mission-image {
  aspect-ratio: 4 / 3;
  background-color: var(--color-light-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  overflow: hidden;
  position: relative;
}
.about-mission-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-values {
  padding: var(--space-2xl) 0;
  background-color: var(--color-offwhite);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.value-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(222, 0, 203, 0.1);
  color: var(--color-pink);
  margin-bottom: var(--space-md);
}
.value-card h3 {
  font-size: var(--fs-md);
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}
.value-card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.about-area {
  padding: var(--space-2xl) 0;
  background-color: var(--bg-main);
  text-align: center;
}
.about-area-text {
  font-size: var(--fs-base);
  color: var(--text-primary);
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  line-height: 1.7;
}
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.area-tag {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background-color: #FFFFFF;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}
.area-tag:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}




/* ============================================================
   30. CONTACT PAGE
   ============================================================ */

.contact-header {
  background-color: var(--color-pale-blue);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.contact-title {
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  margin-bottom: var(--space-xs);
}
.contact-subtitle {
  font-size: var(--fs-base);
  color: var(--text-primary);
  max-width: 620px;
  margin: 0 auto;
}

/* ---- Centred form section ---- */
.contact-body {
  padding: var(--space-2xl) 0 var(--space-xl);
  background-color: var(--bg-main);
}
.contact-form-centered {
  max-width: 720px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.contact-form-heading {
  font-size: var(--fs-xl);
  color: var(--text-heading);
  text-align: center;
  margin-bottom: 0.5rem;
}
.contact-form-intro {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--space-lg);
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ---- Success state ---- */
.contact-success-centered {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.contact-success-icon {
  margin: 0 auto var(--space-md);
  display: inline-flex;
}
.contact-success-centered h2 {
  font-size: var(--fs-xl);
  color: var(--text-heading);
  margin-bottom: var(--space-sm);
}
.contact-success-centered p {
  font-size: var(--fs-base);
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}
.contact-success-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

/* ---- Info cards ---- */
.contact-info-section {
  padding: var(--space-2xl) 0;
  background-color: var(--color-offwhite);
}
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.contact-info-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.contact-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(222, 0, 203, 0.1);
  color: var(--color-pink);
  margin-bottom: var(--space-md);
}
.contact-info-card h3 {
  font-size: var(--fs-md);
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}
.contact-info-card p {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}
.contact-info-card a {
  color: var(--text-primary);
}
.contact-info-card a:hover {
  color: var(--color-pink);
}

/* ---- Hours + Service areas ---- */
.contact-extras {
  padding: var(--space-xl) 0;
  background-color: var(--bg-main);
}
.contact-extras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.contact-extras-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.contact-extras-card h3 {
  font-size: var(--fs-md);
  color: var(--text-heading);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}
.hours-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem var(--space-md);
  font-size: var(--fs-sm);
}
.hours-list dt {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.hours-list dd {
  color: var(--text-heading);
  margin: 0;
  text-align: right;
}

/* ---- CTA at bottom ---- */
.contact-cta {
  padding: var(--space-2xl) 0;
  background: linear-gradient(135deg, var(--color-pale-blue) 0%, var(--color-light-blue) 100%);
  text-align: center;
  color: var(--text-primary);
}
.contact-cta h2 {
  font-size: var(--fs-xl);
  color: var(--text-heading);
  margin-bottom: var(--space-sm);
}
.contact-cta p {
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.contact-cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.contact-cta .btn-primary {
  background-color: var(--color-deep-blue);
  color: #FFFFFF;
  box-shadow: none;
}
.contact-cta .btn-primary:hover {
  background-color: var(--color-deep-blue);
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .contact-extras-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}
@media (max-width: 600px) {
  .contact-title { font-size: var(--fs-xl); }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .contact-form-centered { padding: var(--space-lg) var(--space-md); }
  .contact-success-actions,
  .contact-cta-buttons { flex-direction: column; }
  .contact-success-actions .btn,
  .contact-cta-buttons .btn { width: 100%; }
}


.package-quote-options {
    display: grid;
    gap: 22px;
    margin-top: 28px;
}

.package-quote-field {
    display: grid;
    gap: 9px;
}

.package-quote-field > label,
.package-quote-field > p {
    color: #80b7cf;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.package-quantity-control {
    display: flex;
    align-items: center;
    width: 145px;
    min-height: 44px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    background: #fff;
}

.package-quantity-control button {
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #24577b;
    font-size: 20px;
    cursor: pointer;
}

.package-quantity-control input {
    width: 60px;
    min-width: 0;
    border: 0;
    outline: none;
    text-align: center;
}

.package-quote-field input[type="date"],
.package-quote-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    font: inherit;
}

#packageQuoteFeedback {
    color: #24577b;
    font-size: 14px;
}


/* Cart and checkout refinements — preserves the existing Liwika palette. */
.quote-body .quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin-inline: auto;
  align-items: start;
}

.quote-body .quote-sidebar {
  min-width: 0;
  position: sticky;
  top: 140px;
}

.quote-body .quote-sidebar-image {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #f5f1ed;
}

.quote-body .quote-sidebar-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .quote-body .quote-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 920px;
  }

  .quote-body .quote-sidebar {
    position: static;
  }
}

.quote-body .quote-form {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.045);
}

.quote-body .quote-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border-color, #e8e8e8);
}

.quote-body .quote-sidebar-item.quote-package-row-with-image {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 1rem;
}

.quote-body .quote-package-row .quote-sidebar-info,
.quote-body .quote-package-price-column {
  align-self: center;
}

.quote-body .quote-package-price-column {
  justify-self: end;
  padding-left: 0.75rem;
  white-space: nowrap;
}

.quote-body .quote-sidebar-info {
  flex: 1;
  min-width: 0;
}

.quote-body .quote-sidebar-name {
  margin-bottom: .4rem;
  overflow-wrap: anywhere;
}

.quote-body .quote-sidebar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .75rem;
}

.quote-body .quote-sidebar-qty-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.quote-body .quote-sidebar-qty {
  width: 64px;
  max-width: 100%;
}

.quote-body .quote-sidebar-remove-form {
  margin-top: .55rem;
}

.quote-body .quote-sidebar-total {
  margin-top: 1.25rem;
}

.quote-body .step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.checkout-sidebar-image {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  overflow: hidden;
  border-radius: 7px;
  background: #f4f1ed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-sidebar-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.checkout-image-fallback {
  font-size: .65rem;
  color: #7395a5;
  text-align: center;
  padding: .25rem;
}

.checkout-sidebar-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.checkout-sidebar-info {
  flex: 1;
  min-width: 0;
}

.checkout-sidebar-name {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .quote-body .quote-form {
    padding: 1rem;
  }

  .quote-body .quote-sidebar-item.quote-package-row-with-image {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.65rem;
  }

  .quote-body .quote-package-row-with-image .quote-sidebar-image {
    width: 54px;
    flex-basis: 54px;
    height: 54px;
  }

  .quote-body .quote-package-price-column {
    padding-left: 0.25rem;
  }

  .quote-body .step-actions {
    align-items: stretch;
  }

  .quote-body .step-actions .btn {
    text-align: center;
  }

  .checkout-sidebar-image {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }
}


/* ============================================================
   HOMEPAGE CARD REFINEMENTS
   ============================================================ */

/* Occasion cards */
.occasions-grid {
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.occasion-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.occasion-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-light-blue);
}

.occasion-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-base);
}

.occasion-card:hover .occasion-image img {
    transform: scale(1.04);
}

.occasion-card:hover .occasion-image {
    background-color: var(--color-light-blue);
}

.occasion-image-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    height: 100%;
    min-height: 150px;
    padding: 1rem;
    color: var(--color-deep-blue);
    background: linear-gradient(
        145deg,
        var(--color-pale-blue),
        var(--color-light-blue)
    );
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-align: center;
}

.occasion-fallback-mark {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-pink);
}

.occasion-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 1;
    min-height: 62px;
    padding: 1rem 1.15rem;
    text-align: left;
}

.occasion-label > span:first-child {
    overflow-wrap: anywhere;
}

.occasion-arrow {
    flex-shrink: 0;
    font-size: 1.15rem;
    color: var(--color-pink);
    transition: transform var(--transition-base);
}

.occasion-card:hover .occasion-arrow {
    transform: translateX(4px);
}

/* Premium homepage mosaic: one featured photo, with supporting photos always visible. */
.inspiration-gallery { max-width: 1180px; margin: var(--space-lg) auto 0; }
.inspiration-stage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(135px, 16vw, 205px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.4vw, 18px);
}
.inspiration-slide {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: span 1;
  grid-row: span 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(43, 76, 105, .08);
  border-radius: 18px;
  background: #f1eeea;
  box-shadow: 0 8px 24px rgba(35, 48, 59, .08);
  transition: box-shadow .45s ease, transform .45s ease;
}
.inspiration-slide.is-featured {
  grid-column: span 2;
  grid-row: span 2;
  box-shadow: 0 18px 42px rgba(35, 48, 59, .16);
  animation: inspirationFeatureIn .55s ease both;
}
.inspiration-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.inspiration-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.inspiration-arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d5dce0; border-radius: 50%; background: #fff; color: var(--color-deep-blue); cursor: pointer; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(35, 48, 59, .06); transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.inspiration-arrow:hover, .inspiration-arrow:focus-visible { transform: translateY(-2px); border-color: var(--color-pink); background: var(--color-pink); color: #fff; }
.inspiration-arrow:focus-visible { outline: 2px solid var(--color-deep-blue); outline-offset: 3px; }
.inspiration-count { min-width: 58px; color: var(--color-deep-blue); font-size: .82rem; font-variant-numeric: tabular-nums; letter-spacing: .1em; text-align: center; }
.inspiration-count-divider { color: #a2adb4; }
.inspiration-rotation-note { margin: .65rem 0 0; color: #788590; font-size: .78rem; text-align: center; }
.inspiration-empty { display: grid; place-items: center; min-height: 250px; margin-top: var(--space-lg); color: #667784; text-align: center; }
.inspiration-empty span { color: var(--color-pink); font-size: 2rem; }
.inspiration-empty p { margin: .5rem 0 0; }
@keyframes inspirationFeatureIn { from { opacity: .78; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 760px) {
  .inspiration-gallery { margin-top: var(--space-md); }
  .inspiration-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 31vw, 190px); }
  .inspiration-controls { gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .inspiration-slide, .inspiration-slide.is-featured { animation: none; transition: none; }
}

/* Homepage feedback */
.homepage-feedback {
    margin-top: var(--space-lg);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: #ffffff;
    color: var(--text-muted);
    text-align: center;
}

.homepage-actions {
    margin-top: var(--space-md);
    text-align: center;
}

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

/* Mobile */
@media (max-width: 600px) {
    .occasions-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .occasion-image {
        aspect-ratio: 16 / 10;
    }

    .occasion-label {
        min-height: 58px;
    }

    .inspiration-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .inspiration-item.large {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Remove the arrow from homepage occasion cards */
.occasion-arrow {
    display: none !important;
}

.occasion-label {
    justify-content: flex-start;
}

/* CUSTOMER DASHBOARD */
.dashboard-page { padding: 42px 0 64px !important; }
.dashboard-page > h1 { margin-bottom: 10px; }
.dashboard-intro { color: var(--text-muted); }
.dashboard-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin: 26px 0 !important;
  box-shadow: var(--shadow-sm);
}
.dashboard-section h2 { font-size: var(--fs-lg); margin-bottom: 20px; }
.dashboard-table-wrap { width: 100%; overflow-x: auto; }
.dashboard-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: var(--fs-sm); }
.dashboard-table th { background: #edf4f7; color: var(--color-deep-blue); text-align: left; }
.dashboard-table th, .dashboard-table td { padding: 13px 15px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.dashboard-table tbody tr:hover { background: #fafcfd; }
.dashboard-status { display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill); background: #edf4f7; color: var(--color-deep-blue); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dashboard-actions .btn { background: var(--color-deep-blue); color: #fff; border-radius: var(--radius-pill); padding: 12px 22px; }
.dashboard-actions .btn:hover { background: #0f3a5c; }
.dashboard-refresh-note { color: var(--text-muted); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .dashboard-page { padding-top: 26px !important; }
  .dashboard-section { padding: 17px; margin: 18px 0 !important; }
  .dashboard-section h2 { font-size: 1.25rem; }
  .dashboard-table th, .dashboard-table td { padding: 10px; }
}

/* Customer account portal */
.customer-portal-layout {
  width: min(1380px, calc(100% - 48px));
  margin: 38px auto 72px;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  color: #20374b;
}
.customer-portal-sidebar,
.customer-portal-panel,
.customer-portal-welcome,
.customer-portal-metric {
  background: #fff;
  border: 1px solid #e6ebef;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(28, 48, 66, .055);
}
.customer-portal-sidebar { overflow: hidden; position: sticky; top: 24px; }
.customer-portal-brand { display:flex; align-items:center; gap:12px; padding:22px 20px; border-bottom:1px solid #edf0f2; }
.customer-portal-brand-icon,.customer-portal-avatar { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border-radius:13px; background:#f9e5f8; color:#c426b9; font-weight:800; }
.customer-portal-brand strong,.customer-portal-brand span,.customer-portal-sidebar-footer span,.customer-portal-sidebar-footer strong { display:block; }
.customer-portal-brand strong { font-size:15px; color:#19344b; }
.customer-portal-brand div > span { margin-top:3px; font-size:12px; color:#82909c; }
.customer-portal-nav { display:grid; gap:5px; padding:16px 12px; }
.customer-portal-nav a { display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 12px; border-radius:10px; color:#506476; text-decoration:none; font-weight:600; transition:background .18s ease,color .18s ease; }
.customer-portal-nav a:hover { background:#f6f8fa; color:#163a56; }
.customer-portal-nav a.active { color:#a91ca2; background:#f9eafa; }
.customer-portal-nav-icon { display:grid; place-items:center; width:22px; color:#8798a7; font-size:18px; }
.customer-portal-nav a.active .customer-portal-nav-icon { color:#c426b9; }
.customer-portal-sidebar-footer { display:grid; gap:5px; margin:0 12px; padding:17px 12px 19px; border-top:1px solid #edf0f2; }
.customer-portal-sidebar-footer span { color:#8a98a3; font-size:12px; }
.customer-portal-sidebar-footer strong { color:#31495d; font-size:13px; overflow-wrap:anywhere; }
.customer-portal-sidebar-footer a { margin-top:8px; color:#687c8d; font-size:13px; text-decoration:none; }
.customer-portal-sidebar-footer a:hover { color:#b91fb1; }
.customer-portal-sidebar-footer form { margin-top:3px; }
.customer-portal-logout { display:flex; align-items:center; gap:9px; width:100%; padding:9px 0; border:0; background:transparent; color:#b42345; font:inherit; font-size:13px; font-weight:700; text-align:left; cursor:pointer; }
.customer-portal-logout:hover { color:#8e1734; }
.customer-portal-main { min-width:0; }
.customer-portal-page-heading { margin:2px 0 25px; }
.customer-portal-page-heading > p:first-child { margin:0 0 8px; color:#82909c; font-size:13px; font-weight:600; }
.customer-portal-page-heading > p:first-child span { padding:0 6px; color:#c0c9d0; }
.customer-portal-page-heading h1 { margin:0; color:#19344b; font-size:32px; line-height:1.2; }
.customer-portal-page-heading > p:last-child { margin:8px 0 0; color:#738493; }
.customer-portal-welcome { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 26px; margin-bottom:20px; background:linear-gradient(115deg,#fff 54%,#fff8ff); }
.customer-portal-eyebrow { display:block; margin-bottom:8px; color:#c426b9; font-size:11px; font-weight:800; letter-spacing:.12em; }
.customer-portal-welcome h2,.customer-portal-panel-heading h2 { margin:0; color:#19344b; font-size:20px; }
.customer-portal-welcome p { margin:6px 0 0; color:#718292; }
.customer-portal-primary-link { display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; padding:12px 17px; border-radius:999px; background:#c426b9; color:#fff; text-decoration:none; font-weight:700; }
.customer-portal-primary-link:hover { background:#a91ca2; color:#fff; }
.customer-portal-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:20px; }
.customer-portal-metric { display:grid; grid-template-columns:1fr auto; gap:7px 10px; min-width:0; padding:18px; color:inherit; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.customer-portal-metric:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(28,48,66,.1); }
.customer-portal-metric-icon { grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#f5e8f5; color:#c426b9; font-size:18px; }
.customer-portal-metric-label { color:#687c8d; font-size:13px; font-weight:600; }
.customer-portal-metric strong { grid-column:1 / -1; color:#19344b; font-size:29px; line-height:1.1; }
.customer-portal-metric-link { grid-column:1 / -1; color:#b321aa; font-size:12px; font-weight:700; }
.customer-portal-panel { padding:23px; }
.customer-portal-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
.customer-portal-panel-heading .customer-portal-eyebrow { margin-bottom:5px; }
.customer-portal-count { flex:0 0 auto; padding:7px 11px; border-radius:999px; background:#f3f6f8; color:#627587; font-size:12px; font-weight:700; }
.customer-portal-account-summary { margin-top:20px; }
.customer-portal-account-summary .customer-portal-panel-heading { margin-bottom:10px; }
.customer-portal-account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
.customer-portal-account-grid p { display:grid; gap:5px; margin:0; padding:13px 0; border-top:1px solid #edf0f2; min-width:0; }
.customer-portal-account-grid p span { color:#82909c; font-size:12px; }
.customer-portal-account-grid p strong { color:#344d61; font-size:14px; overflow-wrap:anywhere; }
.customer-portal-table-wrap { width:100%; overflow-x:auto; }
.customer-quotation-table { min-width:980px !important; }
.customer-quotation-reference { min-width:150px; }
.customer-quotation-reference strong,
.customer-quotation-reference span,
.customer-quotation-reference small,
.customer-quotation-table td > small { display:block; }
.customer-quotation-reference strong { color:#19344b; white-space:nowrap; }
.customer-quotation-reference span { margin-top:4px; color:#506b80; font-size:12px; font-weight:700; white-space:nowrap; }
.customer-quotation-reference small,
.customer-quotation-table td > small { margin-top:4px; color:#718292; font-size:12px; line-height:1.4; }
.customer-quotation-items { margin:6px 0 0; padding-left:17px; color:#506476; }
.customer-quotation-items li { margin:3px 0; }
.customer-quotation-items li span { color:#718292; white-space:nowrap; }
.customer-quotation-muted { display:block; margin-top:5px; color:#82909c; }
.customer-quotation-notes { max-width:260px; }
.customer-portal-empty { padding:24px 18px; border-radius:12px; background:#f7f9fa; color:#718292; text-align:center; }
.customer-portal-alert { padding:14px 16px; border:1px solid #f0d7a5; border-radius:12px; background:#fff9eb; color:#79551a; }
.customer-portal-layout .dashboard-table { min-width:680px; }
@media (max-width: 1050px) {
  .customer-portal-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .customer-portal-layout { width:calc(100% - 32px); margin:23px auto 48px; grid-template-columns:minmax(0,1fr); gap:18px; }
  .customer-portal-sidebar { position:static; }
  .customer-portal-brand { display:none; }
  .customer-portal-nav { display:flex; gap:7px; padding:9px; overflow-x:auto; scrollbar-width:thin; }
  .customer-portal-nav a { flex:0 0 auto; min-height:40px; padding:9px 12px; font-size:13px; white-space:nowrap; }
  /* Keep account controls reachable on phones; hiding this also hid Log out. */
  .customer-portal-sidebar-footer { display:grid; margin:0 9px; padding:14px 12px 16px; }
  .customer-portal-page-heading { margin:3px 0 19px; }
  .customer-portal-page-heading h1 { font-size:27px; }
  .customer-portal-welcome { align-items:flex-start; flex-direction:column; padding:20px; }
  .customer-portal-primary-link { align-self:flex-start; }
  .customer-portal-panel { padding:18px; }
  .customer-portal-account-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 460px) {
  .customer-portal-metrics { gap:10px; }
  .customer-portal-metric { padding:14px; }
  .customer-portal-metric strong { font-size:25px; }
}


/* Consistent customer catalogue cards: products, packages and services */
.catalogue-grid,
.package-grid,
.service-grid {
    align-items: stretch;
}

.product-card-cat,
.package-card,
.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

.product-image-cat,
.package-image,
.service-image {
    height: 220px;
    min-height: 220px;
    flex: 0 0 220px;
    overflow: hidden;
}

.product-image-cat img,
.package-image img,
.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-info-cat,
.package-info,
.service-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.product-card-cat .btn,
.package-card .btn,
.service-card .btn,
.service-card .service-add-to-quote {
    width: 100%;
    margin-top: auto;
    box-sizing: border-box;
}

.product-info-cat > :last-child,
.package-info > :last-child,
.service-info > :last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .product-image-cat,
    .package-image,
    .service-image {
        height: 200px;
        min-height: 200px;
        flex-basis: 200px;
    }
}


/* Fix: allow customers to click the View package link */
.package-card .btn {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}


/* FIX: make service quotation buttons clickable */
.service-card .service-add-to-quote,
.service-card .service-quote-button,
.service-add-to-quote .service-quote-button {
    pointer-events: auto !important;
    position: relative;
    z-index: 5;
    cursor: pointer;
}

.service-add-to-quote .service-quote-button:disabled {
    cursor: wait;
}


/* About page: paired mission sections */
.about-mission-image span {
  display: block;
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
}

.about-mission-grid-reversed {
  grid-template-columns: 1fr 1.3fr;
}

.about-mission-secondary {
  padding-top: 0;
}

.about-mission-grid-reversed .about-mission-image {
  grid-column: 1;
  grid-row: 1;
}

.about-mission-grid-reversed .about-mission-text {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 768px) {
  .about-mission-grid,
  .about-mission-grid-reversed {
    grid-template-columns: 1fr;
  }

  .about-mission-grid-reversed .about-mission-image,
  .about-mission-grid-reversed .about-mission-text {
    grid-column: 1;
    grid-row: auto;
  }

  .about-mission-secondary {
    padding-top: 0;
  }
}


/* About page: display the logo without cropping */
.about-logo-image {
  background-color: #000;
}

.about-logo-image img {
  object-fit: contain;
}

/* Shared photographic hero for About, Contact, and Cart. */
body.has-hero .about-hero,
body.has-hero .contact-header,
body.has-hero .quote-header,
body.has-hero .checkout-header,
body.has-hero .faq-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -80px;
  padding: 140px 0 var(--space-xl);
  background-image: url('../../images/customer/homepage.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  overflow: hidden;
}

body.has-hero .about-hero::before,
body.has-hero .contact-header::before,
body.has-hero .quote-header::before,
body.has-hero .checkout-header::before,
body.has-hero .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .65));
  z-index: 1;
}

body.has-hero .about-hero > .container,
body.has-hero .contact-header > .container,
body.has-hero .quote-header > .container,
body.has-hero .checkout-header > .container,
body.has-hero .faq-hero > .container {
  position: relative;
  z-index: 2;
}

body.has-hero .about-hero .about-title,
body.has-hero .contact-header .contact-title,
body.has-hero .quote-header .quote-title,
body.has-hero .checkout-header .checkout-title,
body.has-hero .faq-hero .faq-title {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

body.has-hero .about-hero .about-subtitle,
body.has-hero .contact-header .contact-subtitle,
body.has-hero .quote-header .quote-subtitle,
body.has-hero .checkout-header .checkout-subtitle,
body.has-hero .faq-hero .faq-subtitle {
  color: rgba(255, 255, 255, .95);
}

body.has-hero .about-hero .section-eyebrow,
body.has-hero .contact-header .section-eyebrow,
body.has-hero .quote-header .section-eyebrow,
body.has-hero .faq-hero .section-eyebrow {
  color: var(--color-pink);
}

@media (max-width: 768px) {
  body.has-hero .about-hero,
  body.has-hero .contact-header,
  body.has-hero .quote-header,
  body.has-hero .checkout-header,
  body.has-hero .faq-hero {
    min-height: 320px;
    padding: 120px 0 var(--space-lg);
  }
}

@media (max-width: 480px) {
  body.has-hero .about-hero,
  body.has-hero .contact-header,
  body.has-hero .quote-header,
  body.has-hero .checkout-header,
  body.has-hero .faq-hero {
    margin-top: -70px;
    padding-top: 100px;
  }
}

/* ============================================================
   FREQUENTLY ASKED QUESTIONS
   ============================================================ */
.faq-hero .faq-title {
  max-width: 900px;
  margin: 0 auto 1rem;
  font-size: clamp(2.35rem, 5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.faq-hero .faq-subtitle {
  max-width: 650px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}

.faq-hero-link {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  margin-top: 1.75rem;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.faq-hero-link span { color: var(--color-pink); font-size: 1.15rem; }

.faq-intro {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  background: #f7f5f2;
}

.faq-intro-grid {
  display: grid;
  grid-template-columns: 1.05fr .75fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  max-width: 1100px;
}

.faq-kicker,
.faq-group-heading > span,
.faq-aside-label {
  color: #aa388d;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.faq-intro h2 {
  max-width: 620px;
  margin: .75rem 0 0;
  color: var(--text-heading);
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.9rem, 3.4vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -.035em;
}

.faq-intro-grid > p {
  margin: 0 0 .35rem;
  color: #65717d;
  font-size: 1rem;
  line-height: 1.85;
}

.faq-content { padding: clamp(3.25rem, 6vw, 5.5rem) 0; background: #fff; }

.faq-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7.25rem);
  max-width: 1120px;
  align-items: start;
}

.faq-aside {
  position: sticky;
  top: 115px;
  padding: 1.5rem;
  border: 1px solid #e8e4e7;
  border-radius: 14px;
  background: #fcfbfa;
}

.faq-aside-label { margin: 0 0 .8rem; }

.faq-aside > a {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  padding: .85rem 0;
  border-bottom: 1px solid #ece8eb;
  color: #344c64;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
}

.faq-aside > a span { color: #bb48a0; }
.faq-aside > a:hover { color: #aa388d; }

.faq-aside-note {
  display: flex;
  gap: .8rem;
  margin-top: 1.35rem;
  padding-top: .3rem;
  color: #65717d;
}

.faq-aside-spark { color: #b849a0; font-size: 1.4rem; }
.faq-aside-note p { margin: 0; font-size: .8rem; line-height: 1.65; }

.faq-group { scroll-margin-top: 110px; margin-bottom: 3.6rem; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-heading { margin-bottom: 1.15rem; }
.faq-group-heading > span { display: block; margin-bottom: .45rem; }
.faq-group-heading h2 { margin: 0; color: var(--text-heading); font-size: clamp(1.5rem, 2.3vw, 2rem); letter-spacing: -.025em; }

.faq-accordion { border-top: 1px solid #e8e4e7; }
.faq-item { border-bottom: 1px solid #e8e4e7; }
.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.3rem .15rem;
  color: #243c55;
  cursor: pointer;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid #bd48a0; outline-offset: 4px; border-radius: 3px; }
.faq-toggle { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #e7d7e3; border-radius: 50%; }
.faq-toggle::before,
.faq-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: #a93c8d; transform: translate(-50%, -50%); transition: transform .2s ease; }
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0); }
.faq-item[open] summary { color: #a93c8d; }
.faq-answer { max-width: 690px; padding: 0 3rem 1.35rem .15rem; }
.faq-answer p { margin: 0; color: #65717d; font-size: .93rem; line-height: 1.8; }

.faq-contact-band { padding: clamp(3rem, 6vw, 5.3rem) 0; background: linear-gradient(135deg, var(--color-pale-blue) 0%, var(--color-light-blue) 100%); }
.faq-contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 2.5rem; max-width: 1050px; }
.faq-contact-inner h2 { margin: .25rem 0 .6rem; color: #27435c; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.035em; }
.faq-contact-inner p:not(.section-eyebrow) { margin: 0; color: #586979; line-height: 1.7; }
.faq-contact-inner .section-eyebrow { margin: 0; color: #aa388d; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.faq-contact-inner .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .8rem; padding: .95rem 1.5rem; }

@media (max-width: 820px) {
  .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .faq-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .faq-aside-label, .faq-aside-note { grid-column: 1 / -1; }
  .faq-aside > a:nth-of-type(odd) { grid-column: 1; }
  .faq-aside > a:nth-of-type(even) { grid-column: 2; }
}

@media (max-width: 600px) {
  .faq-intro-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .faq-aside { grid-template-columns: 1fr; }
  .faq-aside > a:nth-of-type(n) { grid-column: 1; }
  .faq-contact-inner { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .faq-contact-inner .btn { width: 100%; justify-content: center; }
  .faq-item summary { font-size: .93rem; }
  .faq-answer { padding-right: 1rem; }
}

/* Rental policy */
.rental-policy-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  background: linear-gradient(118deg, #193a57 0%, #275573 58%, #40788d 100%);
  color: #fff;
}
.rental-policy-hero::after {
  position: absolute;
  top: -35%;
  right: -8%;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255, 255, 255, .035), 0 0 0 84px rgba(255, 255, 255, .025);
  content: "";
}
.rental-policy-hero-inner { position: relative; z-index: 1; max-width: 900px; }
.rental-policy-hero .section-eyebrow,
.rental-policy-contact .section-eyebrow { margin: 0 0 .85rem; color: #efb3df; font-size: .72rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.rental-policy-hero h1 { margin: 0; color: #fff; font-size: clamp(2.8rem, 6vw, 5.2rem); font-weight: 750; letter-spacing: -.055em; line-height: 1.05; }
.rental-policy-hero-inner > p:not(.section-eyebrow) { max-width: 620px; margin: 1.1rem 0 1.8rem; color: rgba(255, 255, 255, .83); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
.rental-policy-scroll { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; }
.rental-policy-scroll span { color: #efb3df; font-size: 1.15rem; transition: transform .2s ease; }
.rental-policy-scroll:hover span { transform: translateY(3px); }
.rental-policy-intro { padding: clamp(2.8rem, 5vw, 4rem) 0; background: #f7f5f2; }
.rental-policy-intro-inner { display: grid; grid-template-columns: 64px minmax(0, 760px); align-items: start; gap: 1.4rem; max-width: 1000px; }
.rental-policy-intro-mark { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #efd9e9; border-radius: 18px; background: #fff; color: #b849a0; font-size: 1.6rem; box-shadow: 0 8px 22px rgba(35, 48, 59, .06); }
.rental-policy-kicker { margin: 0 0 .5rem; color: #a33d8e; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.rental-policy-intro h2 { margin: 0 0 .65rem; color: #1d354d; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.035em; }
.rental-policy-intro-inner > div:last-child > p:last-child { max-width: 760px; margin: 0; color: #5f6d78; line-height: 1.8; }
.rental-policy-content { padding: clamp(3rem, 6vw, 5rem) 0; background: #fff; }
.rental-policy-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; max-width: 1160px; }
.rental-policy-nav { position: sticky; top: 120px; display: grid; gap: .2rem; padding: 1.25rem; border: 1px solid #e9e7e5; border-radius: 16px; background: #fbfaf9; }
.rental-policy-nav > p { margin: 0 0 .5rem; padding: 0 .55rem .8rem; border-bottom: 1px solid #e9e7e5; color: #8b949b; font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.rental-policy-nav a { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: .5rem; padding: .62rem .55rem; border-radius: 9px; color: #455a6a; font-size: .8rem; font-weight: 650; line-height: 1.45; text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.rental-policy-nav a span { color: #b849a0; font-size: .7rem; font-variant-numeric: tabular-nums; }
.rental-policy-nav a:hover { background: #f2eaf1; color: #8f317e; }
.rental-policy-sections { display: grid; gap: 1rem; }
.rental-policy-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1.25rem; padding: clamp(1.4rem, 3.4vw, 2.25rem); scroll-margin-top: 120px; border: 1px solid #e8e8e6; border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(28, 49, 65, .045); }
.rental-policy-card-number { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #f6eaf3; color: #a43b8d; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rental-policy-card h2 { margin: .25rem 0 .55rem; color: #203950; font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -.025em; }
.rental-policy-card-intro { margin: 0 0 .8rem; color: #526575; font-weight: 600; line-height: 1.7; }
.rental-policy-card ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.rental-policy-card li { position: relative; padding-left: 1.15rem; color: #687681; font-size: .92rem; line-height: 1.75; }
.rental-policy-card li::before { position: absolute; top: .72em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #bd48a0; content: ""; }
.rental-policy-contact { padding: clamp(3rem, 6vw, 5.3rem) 0; background: linear-gradient(135deg, var(--color-pale-blue) 0%, var(--color-light-blue) 100%); }
.rental-policy-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1100px; }
.rental-policy-contact .section-eyebrow { margin: 0 0 .4rem; color: #aa388d; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.rental-policy-contact h2 { margin: 0 0 .55rem; color: #203950; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -.04em; }
.rental-policy-contact-inner > div:first-child > p:last-child { max-width: 650px; margin: 0; color: #5f6d78; line-height: 1.75; }
.rental-policy-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: .85rem; }
.rental-policy-actions .btn { display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.45rem; }
@media (max-width: 820px) {
  .rental-policy-layout { grid-template-columns: 1fr; gap: 1.7rem; }
  .rental-policy-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rental-policy-nav > p { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .rental-policy-hero { padding: 4rem 0; }
  .rental-policy-hero::after { top: -15%; right: -48%; width: 90vw; }
  .rental-policy-intro-inner { grid-template-columns: 1fr; gap: 1rem; }
  .rental-policy-nav { grid-template-columns: 1fr; }
  .rental-policy-nav > p { grid-column: auto; }
  .rental-policy-card { grid-template-columns: 42px minmax(0, 1fr); gap: .9rem; padding: 1.25rem; }
  .rental-policy-card-number { width: 40px; height: 40px; border-radius: 12px; }
  .rental-policy-contact-inner { align-items: flex-start; flex-direction: column; }
  .rental-policy-actions { width: 100%; align-items: stretch; text-align: center; }
}

.register-policy-consent { margin: -.2rem 0 1.4rem; }
.register-policy-consent label { display: flex; align-items: flex-start; gap: .7rem; color: #526575; font-size: .88rem; line-height: 1.6; cursor: pointer; }
.register-policy-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: .12rem 0 0; accent-color: #b849a0; cursor: pointer; }
.register-policy-consent a { color: #285678; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }