@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Roboto+Slab:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Rashi+Hebrew:wght@400..700&display=swap');

/* ---------------- GLOBAL STYLES ---------------- */
:root {
  --header-shrunk-height: 56px; /* Base height for smartphones */
  --brand-blue: #002147; /* E. Marinella-inspired navy (update if exact hex is provided) */
  --font-display: 'Roboto Slab', serif; /* squared, less-detailed serif */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* computed in-page: actual preheader height in pixels */
  --preheader-height: 34px; /* Thickness of the preheader bar (edit me) */
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Prevent horizontal scrolling on mobile/tablet due to any wide element */
html, body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }

/* Screen-reader-only utility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :focus-visible {
    outline: 4px solid #ffff00;
    outline-offset: 3px;
  }
  
  .tie-card:hover img.primary {
    opacity: 0.7; /* Less jarring in high contrast */
  }
  
  .carousel-nav {
    background: rgba(0,0,0,0.9);
    border: 2px solid #ffffff;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .tie-card img.secondary {
    transition: none;
  }
  
  .carousel-track {
    transition: none !important;
  }
}

/* Strong focus indicator for keyboard users */
:focus-visible {
  outline: 3px solid #ffbf47; /* UK gov yellow, highly visible */
  outline-offset: 2px;
}

/* Ensure our interactive elements get focus styles even if reset elsewhere */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Enhanced focus styles for tie cards */
.tie-card a:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Improve carousel button focus */
.carousel-nav:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

/* Language toggle focus */
.lang-toggle:focus-visible {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Skip link: hidden off-screen by default; slides into view on focus */
.skip-link {
  position: absolute;
  top: -100px; /* keep it out of view until focused */
  left: 8px;
  background: var(--brand-blue);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2000; /* above header overlays */
}
.skip-link:focus, .skip-link:focus-visible {
  top: 8px;
}
body {
  font-family: var(--font-sans);
  background-color: #000000;
  color: #ffffff;
  margin: 0;
  padding: 0;
  /* Reserve space at the top for fixed   /* ...existing code... */
  padding-top: calc(var(--preheader-height, 0px) + var(--header-shrunk-height, px));
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}
h2 { text-align: center; color: #fff; }

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

.tie-card img.secondary {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.tie-card:hover img.primary {
  opacity: 0;
}

.tie-card:hover img.secondary {
  opacity: 1;
}

/* Sold Out badge (non-interactive, looks like a button) */
.sold-out-badge {
  position: absolute;
  bottom: 12px;
  right: 12px; /* default: bottom-right for collection cards */
  padding: 7px 12px;
  background: var(--brand-blue);
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  letter-spacing: 0.3px;
  border-radius: 9999px; /* fully rounded */
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  pointer-events: none; /* purely decorative, clicks pass through */
  z-index: 4; /* above images, below nav arrows */
  text-transform: uppercase;
  user-select: none;
}
/* Keep visible on hover when secondary image shows */
.tie-card:hover .sold-out-badge { opacity: 1; }

/* NEW badge (same style as sold-out but with bright green background and black text) */
.new-badge {
  position: absolute;
  bottom: 12px;
  right: 12px; /* default: bottom-right for collection cards */
  padding: 7px 12px;
  background: #00ff00; /* bright green */
  color: #000000; /* black text */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  letter-spacing: 0.3px;
  border-radius: 9999px; /* fully rounded */
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  pointer-events: none; /* purely decorative, clicks pass through */
  z-index: 4; /* above images, below nav arrows */
  text-transform: uppercase;
  user-select: none;
}
/* Keep visible on hover when secondary image shows */
.tie-card:hover .new-badge { opacity: 1; }

/* Tie page: place badge bottom-left over each slide */

/* ---------------- HEADER ---------------- */
/* Thin preheader bar: appears only when header is shrunk and page is scrolled to very top.
   Use fixed positioning so it doesn't reserve space above the fullscreen header. */
.preheader {
  background: var(--brand-blue);
  color: #ffffff;
  width: 100%;
  position: fixed; /* was sticky; fixed prevents initial white gap */
  top: 0;
  left: 0;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 240ms ease, opacity 180ms ease;
  pointer-events: none; /* don't intercept clicks when hidden */
  height: var(--preheader-height, px); /* Controls bar thickness */
}
.preheader__inner {
  margin: 0;
  width: 100%;
  height: 100%;               /* Fill the bar height */
  padding: 0 16px;            /* Keep only horizontal padding */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Desktop: Align preheader text with the exact start of the first tie image */
@media (min-width: 901px) {
  .preheader__inner {
    max-width: 1140px; /* Match desktop gallery max-width */
    margin: 0 auto; /* Center the container like the gallery */
    /* Calculate exact alignment with first tie image:
       Gallery content width: 1140px - 32px (padding) = 1108px
       4 columns of 250px + 3 gaps of 12px = 1036px total grid width
       Centered offset: (1108px - 1036px) / 2 = 36px
       Total left offset: 16px (container padding) + 36px (centering) = 52px */
    padding-left: 0px;
    padding-right: 16px;
  }

  /* Align header content container with gallery */
  .header-flex {
    max-width: 1140px; /* Match desktop gallery max-width */
    margin: 0 auto; /* Center the container like the gallery */
    padding-left: 16px; /* Match gallery container padding */
    padding-right: 3px; /* 16px - 13px (header padding) = 3px */
  }

  /* Position menu button to align its left edge with tie images */
  .header-left {
    margin-left: -15px; /* The centering offset to align with first tie image */
    padding-left: 0;
  }

  .menu-toggle {
    margin-left: 0;
  }

  /* Align mobile menu dropdown with tie images and preheader text */
  .mobile-menu {
    /* Calculate position relative to header container:
       Viewport position needed: 52px
       Header container starts at: calc((100vw - 1140px) / 2)  
       So dropdown left = 52px - header container start */
    left: calc(52px - (100vw - 1140px) / 2);
    right: auto;
    width: max-content;
    min-width: 220px;
    border-radius: 0;
    margin-top: 8px;
    border: 1px solid #e6e9ef;
    margin-left: 0;
    transform: none;
  }
}
.preheader__text { font-family: var(--font-display); font-weight: 600; text-transform: none; font-size: 0.85rem; letter-spacing: 0.01em; }
.preheader__hebrew { font-family: "Noto Rashi Hebrew", serif; font-optical-sizing: auto; font-weight: 600; direction: rtl; color: #ffffff; font-size: 0.95rem; letter-spacing: 0.01em; white-space: nowrap; margin-left: auto; }
.preheader__lang { margin-left: auto; }
/* Language switcher: square button, label + chevron aligned on baseline */
.lang-switcher { display: inline-flex; align-items: center; position: relative; }
/* Temporarily hide language switcher */
.preheader__lang { display: none !important; }
.lang-toggle {
  display: inline-flex;
  align-items: baseline; /* align arrow baseline with text */
  gap: 6px; /* tighter spacing */
  background: transparent; /* no surround */
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem; /* keep text legible */
  padding: 0; /* no surround */
  border: none; /* no surround */
  border-radius: 0; /* ensure square if any UA default */
  cursor: pointer;
  padding: 0; /* no internal padding on the panel */
  -webkit-appearance: none;
  appearance: none;
  position: relative; /* anchor for the dropdown below */
}
.lang-toggle .label { line-height: 1; display: inline-block; }
.lang-toggle .arrow {
  position: relative;
  top: -1px; /* nudge up so bottom aligns with label baseline */
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* chevron like the scroll hint */
}
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; /* open directly below the label */
  background: var(--brand-blue);
  color: #ffffff;
  font-size: 0.9rem; /* match the .lang-toggle (English button) font size */
  padding: 1px; /* small padding as requested */
  box-sizing: border-box; /* keep total width equal to button */
  border: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  border-radius: 0;
  /* Make panel exactly the same width as the switcher (label + arrow) */
  width: 100%;
  min-width: 100%;
  white-space: nowrap;
  z-index: 1200;
  overflow: hidden;
  /* Curtain animation */
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.96);
  transform-origin: top;
  transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease;
  will-change: max-height, opacity, transform;
}
.lang-menu.open {
  max-height: 200px; /* enough for two options */
  opacity: 1;
  transform: scaleY(1);
  /* subtle hairline outline for discoverability */
  outline: 1px solid rgba(255,255,255,0.5);
}
.lang-option {
  display: block;
  width: 100%;
  padding: 0; /* button and panel share same height profile */
  line-height: 1; /* match label baseline height */
  height: 1.2em; /* tight, similar to label + arrow composition */
  display: flex; align-items: center; /* vertically center text */
  text-align: left;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #ffffff; /* white text */
  cursor: pointer;
}
/* Hebrew option: right-to-left direction and right alignment */
.lang-option[data-lang="he"] {
  direction: rtl;
  text-align: right;
  justify-content: flex-end;
}
/* English option: left default (LTR) */
.lang-option[data-lang="en"] {
  direction: ltr;
  text-align: left;
  justify-content: flex-start;
}
.lang-menu .lang-option[aria-checked="true"] { display: none; }
.lang-option[aria-checked="true"] { background: rgba(255,255,255,0.14); }
.lang-option:hover { background: rgba(255,255,255,0.10); }
.preheader--visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
 .header-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   width: 100%;
   height: 100%;
 }
/* Preheader visibility is controlled via JS with .preheader--visible */
header {
  /* Animated background that transitions from blue to white during collapse */
  background: linear-gradient(to bottom, var(--brand-blue) 0%, var(--brand-blue) 50%, #ffffff 50%, #ffffff 100%);
  background-size: 100% 200%;
  background-position: 0 0; /* fullscreen starts with blue on top */
  color: white; /* text/icon color on blue */
  text-align: center;
  padding: 13px;
  position: fixed;
  top: var(--preheader-height, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transition: height 1.2s ease-in-out, padding 1.2s ease-in-out, background-position 1.2s ease-in-out, box-shadow 0.3s ease;
  will-change: height, padding, background-position;
  box-sizing: border-box; /* ensure declared height includes padding */
}
/* Header already honors --preheader-height via top; no extra rule needed */

/* Hero image overlay for fullscreen header */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/navy-blue-sea.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0; /* hidden by default (shrunk); visible in fullscreen */
  transform: scale(1);
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
  pointer-events: none;
}
/* Subtle darkening gradient for legibility over the photo */
header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.55) 100%);
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}
/* Ensure header content sits above overlays */
header .header-flex,
header .scroll-hint {
  position: relative;
  z-index: 2;
}

/* Fullscreen-to-shrunk header states */
header.fullscreen {
  height: 100vh;           /* full screen height */
  padding-top: 0;
  padding-bottom: 0;
}
/* While fullscreen, don't add extra body padding for shrunk height; only account for preheader */
body:has(header.fullscreen) {
  padding-top: var(--preheader-height, 0px) !important;
}

/* Disable fullscreen hero for Safari only (iOS and desktop) */
html.is-safari header.fullscreen {
  height: var(--header-shrunk-height) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  background: #ffffff !important;
  color: var(--brand-blue) !important;
}
html.is-safari header.fullscreen::before,
html.is-safari header.fullscreen::after {
  opacity: 0 !important;
}
html.is-safari header.fullscreen .scroll-hint { display: none !important; }

/* Show hero image + gradient only in fullscreen; fade out on shrink */
header.fullscreen::before { opacity: 1; transform: scale(1.02); }
header.fullscreen::after { opacity: 1; }
header.shrunk::before { opacity: 0; transform: scale(1); }
header.shrunk::after { opacity: 0; }

header.shrunk {
  height: var(--header-shrunk-height); /* classic thin bar (variable-controlled) */
  padding-top: 6px; /* keep white bar vertical padding */
  padding-bottom: 6px;
  background: #ffffff; /* solid white, no gradient */
  color: var(--brand-blue); /* text/icon color on white */
  border-bottom: 1px solid #e6e9ef; /* very thin, light grey underline when thin */
}

/* Responsive focal point adjustments for the hero image */
@media (max-width: 900px) {
  header::before { background-position: center 35%; }
}
    @media (min-width: 901px) {
      .floating-whatsapp {
        width: 39px;
        height: 39px;
        right: 20px; /* keep position visually balanced */
        bottom: 20px;
        font-size: 1.2em;
      }
      .floating-whatsapp i {
        font-size: 1.2em;
      }
    }
/* The header shrink naturally reveals the collection; no extra top padding animation needed */

/* Show Contact link only when shrunk; hide in fullscreen */
header .header-left a {
  transition: opacity 0.3s ease;
}
/* Contact link color adapts to header state */
header.fullscreen .header-left a { color: #ffffff !important; }
header.shrunk .header-left a { color: var(--brand-blue) !important; }
header.fullscreen .header-left a {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
header.shrunk .header-left a {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Scroll hint text/arrow - visible only in fullscreen header */
header .scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-sans);
  font-weight: 600;
#tie-collection.gallery {
  /* grid layout */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  /* stretch edge-to-edge across viewport */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* uniform tile ratio; adjust if you want taller/shorter tiles */
  --tile-ratio: 3 / 4;
}

@media (min-width: 768px) {
  #tie-collection.gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  #tie-collection.gallery { grid-template-columns: repeat(4, 1fr); }
}

/* Remove spacing from cards/anchors/media wrappers */
#tie-collection .tie-card,
#tie-collection .tie-card a,
#tie-collection .tie-card .card-media {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block;
}

/* Media area keeps a consistent aspect ratio */
#tie-collection .tie-card .card-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--tile-ratio);
  line-height: 0; /* remove inline-gap */
  overflow: hidden;
  background: #f5f5f5; /* Light placeholder background */
}

/* For cards that place the image directly under .tie-card (no .card-media) */
#tie-collection .tie-card > img.primary,
#tie-collection .tie-card > img {
  width: 100%;
  aspect-ratio: var(--tile-ratio);
  object-fit: cover;
  display: block;
}

/* Images fill their container (both primary and secondary) */
#tie-collection .tie-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Picture element optimization */
#tie-collection .tie-card .card-media picture {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  line-height: 0; /* Remove inline-gap for images */
  background: transparent;
}

#tie-collection .tie-card .card-media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

/* Secondary images align exactly over primary for hover fade */
#tie-collection .tie-card .card-media img.secondary {
  position: absolute;
  inset: 0;
  /* Lazy loading animations */
  animation: fadeInImage 0.3s ease-in;
}

/* Smooth fade-in for lazy-loaded images */
@keyframes fadeInImage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Add fade-in animation to lazy-loaded images */
#tie-collection .tie-card .card-media img[loading="lazy"] {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* Titles stay below images (no extra gaps around them) */
#tie-collection .tie-card h2 {
  margin: 0 !important;
  padding: 10px 8px !important;
  text-align: center;
  color: var(--brand-blue);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  line-height: 1.25;
}

/* Keep badges pinned to the image, not the title */
#tie-collection .tie-card .sold-out-badge,
#tie-collection .tie-card .new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  bottom: auto;
  z-index: 3; /* above title overlay */
}

/* Promo card image behaves the same as others */
#tie-collection .tie-card.promo .promo-fill {
  width: 100%;
  aspect-ratio: var(--tile-ratio);
  object-fit: cover;
  display: block;
}

/* Desktop: keep titles below images (no overlay) */
@media (min-width: 1024px) {
  #tie-collection .tie-card a { position: static; display: block; }
  #tie-collection .tie-card h2 { position: static; margin: 0; }
}
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
  text-align: center;
}
header .scroll-hint .arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: arrow-bounce 1.4s ease-in-out infinite;
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(6px) rotate(45deg); }
}
header.fullscreen .scroll-hint { display: inline-flex; }

/* Subtle logo scale for emphasis in fullscreen */
/* Smoothly animate logo size via max-height (only in special header states) */
header .logo {
  transition: max-height 1.2s ease-in-out, transform 1.2s ease-in-out, filter 0.4s ease-in-out;
}
header.fullscreen .logo,
header.shrunk .logo {
  width: auto;           /* allow height to drive size */
  height: auto;
  max-width: 90vw;
}
header.fullscreen .logo { max-height: 65vh; }
header.shrunk .logo { max-height: 50px; }


/* Logo color per state */
header.fullscreen .logo { filter: brightness(0) invert(1); } /* white on blue */
header.shrunk .logo { filter: none; } /* original SVG color (should appear blue) */

header h1 {
  margin: 0;
  font-size: 2em;
  letter-spacing: 1px;
}

/* Rashi Hebrew phrase under the logo (fullscreen only) */
.rashi-phrase {
  font-family: "Noto Rashi Hebrew", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  direction: rtl;
  text-align: center;
  color: rgba(255,255,255,0.95);
  margin-top: 16px;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 2.6vw, 36px);
}
header.shrunk .rashi-phrase { display: none; }
header.fullscreen .rashi-phrase { display: block; }

@media (max-width: 900px) {
  .rashi-phrase { font-size: clamp(16px, 3.6vw, 28px); margin-top: 0; margin-bottom: 18px; }
}
@media (max-width: 600px) {
  .rashi-phrase { font-size: clamp(15px, 4.2vw, 24px); }
}

/* Catalog bar removed */

/* ---------------- GALLERY ---------------- */
.collection-header {
  /* Fully white container, no colored surround */
  background: #ffffff;
  display: block;
  box-sizing: border-box;
  /* Align with gallery width on desktop using the same variables we already compute */
  max-width: 1200px; /* safety cap */
  margin: 12px auto 8px auto; /* small breathing space under header */
  padding: 0; /* no colored surround */
  border: none; /* no border */
  /* Expose the title font size as a variable so spacing can reference it */
  --collection-title-fs: clamp(18px, 2.4vw, 28px);
}
/* Inner white content box so the blue shows as padding around it */
.collection-header__inner {
  background: #ffffff;
  box-sizing: border-box;
  padding: 0; /* no inner padding color */
  border: none; /* remove outline */
}
/* Add side breathing room for title/paragraph on smaller screens */
@media (max-width: 900px) {
  .collection-header__inner { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 600px) {
  .collection-header__inner { padding-left: 16px; padding-right: 16px; }
}
.collection-title {
  /* One line above the title */
  margin: 1em 0 0 0;
  color: var(--brand-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--collection-title-fs);
  text-align: center;
}
.collection-lead {
  margin: 10px auto 0 auto;
  /* One title-sized line below the paragraph */
  margin-bottom: var(--collection-title-fs);
  color: var(--brand-blue);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.5;
  text-align: left; /* text starts on the left side */
  max-width: 70ch; /* keep a comfortable line length */
}
/* Desktop alignment with the image column edges (reuse variables from preheader alignment) */
@media (min-width: 901px) {
  .collection-header { position: relative; }
  /* If we have saved offsets from the homepage calc, use them to align
     the title container left/right with the images grid below */
  :root {
    /* these may be set dynamically elsewhere; keep defaults safe */
    --preheader-inner-left: auto;
    --preheader-inner-width: auto;
  }
  body:not(.no-align) .collection-header {
    /* Align plain white container with gallery width and position */
    width: var(--preheader-inner-width, auto);
    margin-left: var(--preheader-inner-left, auto);
    margin-right: 0;
  }
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);
  justify-content: center;
  padding: 0; /* attach directly under the bar */
  gap: 20px;
  background: #ffffff; /* white background for the collection area */
  position: relative; /* allow absolutely-positioned anchor without affecting flex flow */
}

@media (min-width: 1024px) {
  #tie-collection {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tie-grid-gap, 32px);
    justify-items: stretch;
    align-items: start;
  }
}

.tie-card {
  background: #ffffff;
  border: none;
  border-radius: 0;
  margin: 0; /* spacing now handled by .gallery gap */
  width: 250px;
  text-align: center;
  box-shadow: none;
  transition: transform 0.2s;
}

/* Remove underlines and keep color consistent for card links */
.tie-card a,
.tie-card a:hover,
.tie-card a:focus {
  text-decoration: none;
  color: inherit;
}

.tie-card:hover { transform: none; }

/* When header is fullscreen, keep ties subtly hidden until reveal */
header.fullscreen ~ main#tie-collection .tie-card {
  opacity: 0;
  transform: translateY(24px);
}

/* Reveal animation once header collapses */
#tie-collection.revealed .tie-card {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* Staggered reveal for the first couple of rows */
#tie-collection.revealed .tie-card:nth-child(1)  { transition-delay: 0ms; }
#tie-collection.revealed .tie-card:nth-child(2)  { transition-delay: 50ms; }
#tie-collection.revealed .tie-card:nth-child(3)  { transition-delay: 100ms; }
#tie-collection.revealed .tie-card:nth-child(4)  { transition-delay: 150ms; }
#tie-collection.revealed .tie-card:nth-child(5)  { transition-delay: 200ms; }
#tie-collection.revealed .tie-card:nth-child(6)  { transition-delay: 250ms; }
#tie-collection.revealed .tie-card:nth-child(7)  { transition-delay: 300ms; }
#tie-collection.revealed .tie-card:nth-child(8)  { transition-delay: 350ms; }
#tie-collection.revealed .tie-card:nth-child(9)  { transition-delay: 400ms; }
#tie-collection.revealed .tie-card:nth-child(10) { transition-delay: 450ms; }
#tie-collection.revealed .tie-card:nth-child(11) { transition-delay: 500ms; }
#tie-collection.revealed .tie-card:nth-child(12) { transition-delay: 550ms; }

.tie-card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Media wrapper so overlays align to image area */
.tie-card .card-media {
  position: relative;
}

@media (min-width: 1024px) {
  #tie-collection .tie-card {
    width: 100%;
  }
  #tie-collection .tie-card a {
    width: 100%;
    margin: 0;
  }
  #tie-collection .tie-card .card-media {
    aspect-ratio: 3 / 4;
  }
  #tie-collection .tie-card .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1024px) {
  body.home-fullbleed {
    --home-fullbleed-gutter: 0px;
  }
  body.home-fullbleed .preheader__inner,
  body.home-fullbleed header .header-flex,
  body.home-fullbleed .collection-header__inner,
  body.home-fullbleed .gallery {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: var(--home-fullbleed-gutter);
    padding-right: var(--home-fullbleed-gutter);
    box-sizing: border-box;
  }
  body.home-fullbleed header .header-left {
    margin-left: 0;
    padding-left: 0;
  }
  body.home-fullbleed header .header-flex {
    justify-content: space-between;
  }
  body.home-fullbleed .collection-header {
    width: 100% !important;
    margin: 0 !important;
  }
  body.home-fullbleed .gallery {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    justify-content: stretch;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  body.home-fullbleed #tie-collection {
    scroll-margin-top: var(--header-shrunk-height);
    padding-top: 0;
  }
  body.home-fullbleed #tie-collection .tie-card {
    width: 100%;
    margin: 0;
    border: none;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    background: #fff;
  }
  body.home-fullbleed #tie-collection .tie-card a {
    display: block;
    width: 100%;
    margin: 0;
  }
  body.home-fullbleed #tie-collection .card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
  }
  body.home-fullbleed #tie-collection .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Desktop titles below images (no overlay) */
  body.home-fullbleed #tie-collection .tie-card a { position: static; }
  body.home-fullbleed #tie-collection .tie-card h2 {
    position: static;
    margin: 0;
    padding: 8px 10px;
    color: var(--brand-blue);
    text-align: left;
    background: none;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
  body.home-fullbleed #tie-collection .tie-card.promo::before {
    padding-top: 150%;
  }
}

/* Make the promo image fill the entire tile, including the brand/title/price area */
.tie-card.promo { position: relative; overflow: hidden; }
/* Reserve only the image area; meta height comes from the hidden heading (like other cards) */
.tie-card.promo::before {
  content: "";
  display: block;
  padding-top: 133.333%;
}
.tie-card.promo .promo-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 74%; /* shift as far left as possible */
  transform: scale(1.20); /* additional ~10% zoom to emphasize tie */
  transform-origin: 0% 60%;
  z-index: 0; /* image sits behind hidden heading, which is transparent */
}
/* Mobile & tablet: revert promo card to standard tie card behavior (show like other ties) */
@media (max-width: 1024px) {
  .tie-card.promo {
    overflow: hidden; /* ensure consistent clipping */
  }
  .tie-card.promo::before {
    /* Use same intrinsic-flow style as normal tie cards: remove forced ratio */
    content: none;
    display: none;
    padding-top: 0;
  }
  .tie-card.promo h2 {
    visibility: visible; /* show brand/title/price like other cards */
    opacity: 1;
    pointer-events: auto;
  }
  .tie-card.promo .promo-fill {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: cover; /* keep consistent cover behavior */
    object-position: 50% 50%; /* center the tie for smaller viewports */
    transform: none; /* remove extra zoom on small screens */
    transform-origin: center center;
  }
}
/* Keep heading in flow to reserve real meta height, but make it invisible */
.tie-card.promo h2 { visibility: hidden; opacity: 0; margin: 0; padding: 0; pointer-events: none; }
/* Disable hover swap for promo so the single image never fades out */
.tie-card.promo:hover img.primary,
.tie-card.promo:hover .promo-fill { opacity: 1 !important; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  header, header .logo { transition: none !important; }
  .menu-toggle .bar { transition: none !important; }
  .gallery .tie-card, #tie-collection.revealed .tie-card { transition: none !important; }
  header .scroll-hint .arrow { animation: none !important; }
}

.tie-card h2 {
  font-size: 0.98em; /* smaller, boutique style */
  padding: 8px 0;
  text-align: left;
  color: var(--brand-blue);
  font-family: var(--font-display);
  font-weight: 700; /* slightly less thick to match reference */
  letter-spacing: 0.02em; /* very tight tracking */
  line-height: 1.15; /* tight */
  text-transform: uppercase;
  display: block; /* ensure full-width block for consistent divider */
  min-height: 2.6em; /* reserve space so divider sits at equal distance */
  overflow: hidden; /* prevent overly long wrap from pushing divider */
}

/* Brand label above each tie title */
.tie-card h2::before {
  content: 'Rimmer’s';
  display: block;
  font-family: var(--font-display);
  font-weight: 400; /* normal, not bold */
  text-transform: none; /* not uppercase */
  letter-spacing: 0.003em; /* very tight */
  color: var(--brand-blue); /* match header color */
  font-size: 0.82em;
  line-height: 1.1;
  margin-bottom: 3px; /* closer to the title */
}

/* Price below with a divider line (consistent spacing and width) */
.tie-card h2::after {
  content: '₪350,00';
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--brand-blue); /* match header color */
  font-size: 1.1em; /* ~15% larger */
  line-height: 1.2;
  margin-top: 14px;  /* longer, consistent gap */
  padding-top: 12px; /* longer, consistent gap */
  border-top: 1px solid #e6e9ef;
}

/* Utility: hide pseudo content when measuring title height via JS (index only) */
.tie-card h2.measuring::before,
.tie-card h2.measuring::after { display: none !important; }

/* Tie details page headings: mirror the catalog title styling */
.tie-details h1,
.tie-details h2 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-blue);
  line-height: 1.25;
  text-align: center;
}

/* ---------------- TIE DETAILS PAGE ---------------- */
.tie-details {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: white;
  box-shadow: none;
}

/* Override global black background for tie pages */
body:has(.tie-details) {
  background-color: white !important;
}

/* Fallback for browsers that don't support :has() */
.tie-page-body {
  background-color: white !important;
}

/* Tie page info block mirrors index: brand label above title, brand blue text, no divider */
.tie-info { background: white; color: var(--brand-blue); padding: 0; }
/* Group title and price in one container for consistent left edge */
.tie-header { display: block; }
@media (max-width: 1023px) {
  /* Match the centered 93% column on small screens */
  .tie-info { width: 93%; margin: 0 auto; padding-left: 0; padding-right: 0; }
}
.tie-info h2 {
  background: transparent;
  color: var(--brand-blue);
  text-align: left;
  margin: 0;
  padding: 8px 0 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  font-size: 1rem; /* match price size */
}
.tie-info h2::before {
  content: 'Rimmer’s';
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.003em;
  color: #9aa3b2; /* light gray like index */
  font-size: 0.82em;
  line-height: 1.1;
  margin-bottom: 3px;
}
@media (min-width: 1024px) {
  .tie-info h2 { padding-top: 0; }
  .tie-info h2::before { margin-bottom: 2px; line-height: 1; }
}
.tie-info .title-text { display: inline; }
.tie-sku {
  font-family: var(--font-sans);
  color: #6b7789; /* subtle grey for meta */
  font-size: 0.92rem;
  line-height: 1.2;
  margin-top: 2px;
  margin-bottom: 2px;
}
.tie-sku .sku-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: 6px;
}
.tie-sku .sku-value { font-weight: 600; color: var(--brand-blue); }
.tie-price {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--brand-blue);
  margin-top: 4px; /* tighter to the title */
  /* Align currency symbol with title start */
  padding-left: 0;
  text-indent: 0; /* avoid any optical indent from previous styles */
  font-variant-numeric: lining-nums; /* consistent numeral metrics */
}
@media (min-width: 1024px) {
  /* Desktop: align price left edge exactly with title/brand */
  .tie-details .tie-price {
    position: relative;
    margin-left: 0 !important;
    padding-left: 14px !important; /* same inset as title */
    padding-right: 0 !important;
  }
  /* Align SKU with the same inset as title and price */
  .tie-details .tie-sku {
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 0 !important;
  }
  /* Give the title the same inset so brand, title, and price share one line */
  .tie-details .tie-info h2 { padding-left: 14px !important; padding-right: 0 !important; }
  /* No special shifts for currency/digits now; both align from the same inset */
  .tie-details .tie-price .currency { display: inline-block; margin-left: 0; }
  .tie-details .tie-price .amount { display: inline-block; margin-left: 0; }
}

/* Tablet: tighten price closer to the title on tie pages only */
@media (min-width: 768px) and (max-width: 1023px) {
  .tie-page .tie-price, .tie1-page .tie-price { margin-top: 2px !important; }
}

/* Ensure new tie-info heading is not stretched full-width by older rules */
@media (max-width: 1023px) {
  .tie-details .tie-info h2 { width: auto !important; max-width: none !important; margin: 0 !important; }
}
/* Desktop h2 aligns with price using the shared inset (set below) */

/* Match index: clamp title to exactly three lines on small screens */
@media (max-width: 900px) {
  .tie-info h2 .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.18;
    min-height: calc(1.18em * 3);
    max-height: calc(1.18em * 3);
  }
}
/* On tie pages, do not reserve extra height under the title on mobile/tablet */
@media (max-width: 900px) {
  .tie-page .tie-info h2 .title-text, .tie1-page .tie-info h2 .title-text {
    display: inline !important;
    -webkit-box-orient: initial !important;
    line-clamp: initial !important;
    -webkit-line-clamp: initial !important;
    overflow: visible !important;
    line-height: 1.18 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}
@media (max-width: 600px) {
  .tie-info h2 .title-text {
    line-height: 1.16;
    min-height: calc(1.16em * 3);
    max-height: calc(1.16em * 3);
  }
}
/* Phones: remove reserved height on tie pages as well */
@media (max-width: 600px) {
  .tie-page .tie-info h2 .title-text, .tie1-page .tie-info h2 .title-text {
    line-height: 1.16 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Ensure no gaps on mobile and tablet */
@media (max-width: 1023px) {
  .tie-details {
    margin: 0;
    padding: 0;
  }
  /* Center the image area and add space below the white bar */
  .tie-carousel {
    width: 100%;
    margin-left: 0;
    margin-right: 0; /* fill full width */
    margin-top: 0; /* rely only on internal padding-top for top spacing */
  }
  .carousel-container { padding: 0; }
}

/* Mobile/tablet: align price left edge with title left edge on tie pages */
@media (max-width: 1023px) {
  /* Title uses 12px horizontal padding on tie pages; mirror the same on price */
  .tie-page .tie-price, .tie1-page .tie-price {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Align SKU with title/price on mobile/tablet */
  .tie-page .tie-sku, .tie1-page .tie-sku {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .tie-page .tie-price .currency, .tie1-page .tie-price .currency,
  .tie-page .tie-price .amount, .tie1-page .tie-price .amount {
    display: inline-block;
    margin-left: 0;
  }
}

/* Contact Us Button on tie pages */
.tie-contact-section {
  margin-top: 24px;
  text-align: center;
}

.tie-contact-btn {
  display: inline-block;
  background: var(--brand-blue);
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,33,71,0.15);
}

.tie-contact-btn:hover {
  background: #001530;
  box-shadow: 0 4px 12px rgba(0,33,71,0.25);
  text-decoration: none;
  color: #ffffff;
}

.tie-contact-btn:focus,
.tie-contact-btn:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Contact Curtain Modal */
.contact-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.contact-overlay.active {
  opacity: 1;
  visibility: visible;
}

.contact-curtain {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: #ffffff;
  color: var(--brand-blue);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.contact-overlay.active .contact-curtain {
  transform: translateX(0);
}

.contact-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--brand-blue);
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.contact-close:hover {
  background: rgba(0, 33, 71, 0.1);
}

.contact-close:focus,
.contact-close:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.contact-content {
  flex: 1;
  padding: 80px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.contact-content h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--brand-blue);
  margin: 0 0 40px 0;
  letter-spacing: 0.02em;
}

.contact-message {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--brand-blue);
  margin: 0 0 30px 0;
  text-align: center;
  line-height: 1.5;
  max-width: 280px;
}

.contact-options {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 300px;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(0, 33, 71, 0.05);
  color: var(--brand-blue);
  text-decoration: none;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact-option:hover {
  background: rgba(0, 33, 71, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--brand-blue);
}

.contact-option i {
  font-size: 20px;
  width: 24px;
  text-align: center;
  color: var(--brand-blue);
}

.contact-option .fab.fa-whatsapp {
  color: #25D366;
}

/* Desktop: curtain takes half the screen width */
@media (min-width: 1024px) {
  .contact-curtain {
    width: 50%;
  }
}

/* Mobile/Tablet: curtain takes full screen width */
@media (max-width: 1023px) {
  .contact-curtain {
    width: 100%;
  }
  
  .contact-content {
    padding: 100px 30px 40px;
  }
  
  .contact-content h2 {
    font-size: 1.75rem;
  }
  
  .contact-options {
    max-width: none;
    width: 100%;
  }
  
  .contact-option {
    padding: 20px;
    font-size: 1.1rem;
  }
}

/* Desktop: align contact button with title/price inset */
@media (min-width: 1024px) {
  .tie-contact-section {
    text-align: left;
    padding-left: 14px; /* same inset as title/price */
    margin-top: 28px;
  }
}

/* Mobile/tablet: align with title/price padding */
@media (max-width: 1023px) {
  .tie-contact-section {
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 20px;
  }
}

/* ---------------- TEMPORARY: HIDE PRICE UI ---------------- */
/* Hide price line on index cards (the divider + price lives in h2::after) */
.tie-card h2::after { display: none !important; }
/* Hide price block on tie detail pages */
.tie-price { display: none !important; }

/* Tie pages (mobile/tablet): stack title and price tightly in same container */
@media (max-width: 1023px) {
  .tie-page .tie-header, .tie1-page .tie-header {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1px; /* ultra-tight on tablet */
  }
  .tie-page .tie-info h2, .tie1-page .tie-info h2 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important; /* remove any bottom padding */
  }
  /* Keep SKU tightly grouped between title and price */
  .tie-page .tie-sku, .tie1-page .tie-sku {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.1;
  }
  .tie-page .tie-price, .tie1-page .tie-price {
    margin-top: 0 !important; /* rely on grid gap above */
    padding-top: 0 !important;
    line-height: 1.1;
  }
}
@media (max-width: 767px) {
  .tie-page .tie-header, .tie1-page .tie-header { row-gap: 0; }
}

/* Back to Collection button styling */
.tie-details p {
  text-align: center;
  margin: 10px 0 20px 0;
  padding: 0;
}

.tie-details p a {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1em;
}

/* Mobile and tablet spacing adjustments */
@media (max-width: 1023px) {
  .tie-details p {
    margin: 5px 0 10px 0;
  }
  
  /* Remove any gaps around carousel on mobile/tablet */
  .tie-carousel {
    margin: 0 !important;
  }
}

/* Image Carousel for Tie Detail Pages */
.tie-carousel {
  max-width: 100%;
  margin: 0;
  position: relative;
  background: white;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: white;
  border: none; /* border will hug the image itself */
  box-sizing: border-box;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
  background: white;
}

/* Allow horizontal touch gestures inside the carousel even when the page is locked to pan-y */
.tie-carousel,
.tie-carousel .carousel-container,
.tie-carousel .carousel-track,
.tie-carousel .carousel-slide,
.tie-carousel .carousel-slide img {
  touch-action: pan-x !important; /* enable horizontal gestures within carousel */
}

/* Do not let overlays intercept swipe gestures */
.carousel-numeric { pointer-events: none; }

/* Prevent image drag/selection that can interrupt swipes on iOS Safari */
.tie-carousel .carousel-slide img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
}

.carousel-slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  padding: 0;
  position: relative;
}


.carousel-slide img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 0;
  border: 1px solid #e6e9ef; /* thin gray border around the image itself */
  /* Ensure border is visible on top/bottom and image is centered */
  margin: 10px auto;
}

/* Wrapper so overlays align to the actual image area on tie pages */
/* tie-page badges removed per requirement; index-only */

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 10;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  text-align: center;
  line-height: 1;
}

.carousel-nav:hover {
  background: rgba(0,0,0,0.8);
}

.carousel-nav.prev {
  left: calc(50% - 250px);
  padding-right: 2px;
}

.carousel-nav.next {
  right: calc(50% - 250px);
  padding-left: 2px;
}

/* Hide dots on tie pages; use numeric indicator instead */
.carousel-indicators { display: none !important; }
.tie-page .carousel-nav { display: none !important; }

/* Numeric pager styled as rounded pill like sample site */
.carousel-numeric {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.92);
  color: var(--brand-blue);
  border: 1px solid #e6e9ef;
  border-radius: 999px; /* pill */
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
@media (min-width: 1024px) {
  .carousel-numeric { display: none; }
  .tie-page .carousel-nav { display: flex !important; }
  .carousel-nav.prev { left: 12px; }
  .carousel-nav.next { right: 12px; }
}

/* iOS-only: show arrows on smartphone/tablet and hide numeric pager */
@media (max-width: 1023px) {
  html.is-ios .tie-page .carousel-nav,
  html.is-ios .tie1-page .carousel-nav { display: flex !important; }
  html.is-ios .carousel-numeric { display: none !important; }
  /* Keep comfortable insets near the image border */
  html.is-ios .carousel-nav.prev { left: 12px; }
  html.is-ios .carousel-nav.next { right: 12px; }
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  cursor: pointer;
  transition: background 0.2s;
}

.carousel-dot.active {
  background: var(--brand-blue);
  /* Add a ring so the active state is not conveyed by color alone */
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.carousel-dot:hover {
  background: #bbb;
}

/* Desktop: image column ends at screen center; info on the right */
@media (min-width: 1024px) {
  .tie-details {
    display: grid;
    grid-template-columns: minmax(0, 50vw) 1fr; /* image column right edge at center */
    gap: 24px;
    align-items: start;
    width: 100vw;
    max-width: none;
    margin: 0 auto;
    padding: 16px 0; /* no side padding so center alignment is exact */
    box-sizing: border-box;
  }
  .tie-carousel { grid-column: 1; justify-self: end; }
  .tie-info { grid-column: 2; padding: 0; align-self: start; }
}

/* Responsive carousel sizing */
@media (min-width: 1024px) {
  .tie-carousel {
    max-width: 100%;
    /* margin handled above for left alignment, only margin-top remains */
  }
  .carousel-slide {
    height: 85vh;
    max-height: none;
  }
  /* Ensure top and bottom image borders are not clipped */
  .tie-page .carousel-slide, .tie1-page .carousel-slide { padding-top: 10px !important; padding-bottom: 14px !important; }
  /* Place arrows near the image border edges */
  .carousel-nav.prev { left: 12px; }
  .carousel-nav.next { right: 12px; }
  /* Shrink image slightly inside its area on desktop */
  .tie-carousel .carousel-slide img {
    max-width: 100% !important;
    width: 100% !important;
    margin: 18px 0 !important;
    border: 1px solid #e6e9ef;
  }
}

/* Desktop: shrink image slightly inside its border */
@media (min-width: 1024px) {
  .carousel-container { padding: 6px; }
}
/* Remove desktop padding since border is on image now */
@media (min-width: 1024px) {
  .carousel-container { padding: 0; }
}

/* Desktop: align tie-info with image column visually */
@media (min-width: 1024px) {
  .tie-info { max-width: 600px; margin-top: 42px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Center the carousel and keep it visually aligned with tie-info */
  .tie-carousel {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; /* rely only on padding-top */
    padding-top: 19px; /* top gap */
    padding-left: 19px; /* equal side gap */
    padding-right: 19px; /* equal side gap */
    box-sizing: border-box;
  }
  /* Use image margins instead of container padding for precise border alignment */
  .carousel-container { padding: 0; }
  /* Prevent image border from overflowing container width */
  .tie-page .carousel-slide img, .tie1-page .carousel-slide img { box-sizing: border-box; }
  /* Image uses full content width inside padded carousel */
  .tie-page .carousel-slide img, .tie1-page .carousel-slide img { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .carousel-slide {
    height: 75vh;
    max-height: none;
  }
  .carousel-nav {
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 1;
  }
  .carousel-nav.prev {
    left: 20px;
    padding-right: 2px;
  }
  .carousel-nav.next {
    right: 20px;
    padding-left: 2px;
  }
}

@media (max-width: 767px) {
  .tie-carousel {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; /* rely only on padding-top */
    border-radius: 0;
    padding-top: 19px; /* top gap */
    padding-left: 19px; /* equal side gap */
    padding-right: 19px; /* equal side gap */
    box-sizing: border-box;
  }
  /* Ensure the image is centered within the container */
  .tie-page .carousel-slide img, .tie1-page .carousel-slide img { display: block; margin-left: auto; margin-right: auto; }
  .carousel-slide {
    height: 70vh;
    max-height: none;
    padding: 0;
  }
  .carousel-nav {
    width: 35px;
    height: 35px;
    font-size: 16px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 1;
  }
  .carousel-nav.prev {
    left: 10px;
    padding-right: 1px;
  }
  .carousel-nav.next {
    right: 15px;
    padding-left: 1px;
  }

  /* Use container padding and full-width image for precise equal gaps */
  .carousel-container { padding: 0; }
  /* Prevent image border from overflowing container width */
  .tie-page .carousel-slide img, .tie1-page .carousel-slide img { box-sizing: border-box; }
  .tie-page .carousel-slide img, .tie1-page .carousel-slide img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    object-fit: contain !important;
  }

  /* Make tie detail titles more compact on phones (aim for 1–2 lines) */
  .tie-details h2 { font-size: 0.9rem; letter-spacing: 0.03em; line-height: 1.15; padding: 10px 12px; text-wrap: balance; }
  /* Phone: pull price even closer to title on tie pages only */
  .tie-page .tie-price, .tie1-page .tie-price { margin-top: 1px !important; }
}

/* Mobile/tablet: move numeric pill to lower-right; keep tighter right, restore bottom gap */
@media (max-width: 1023px) {
  .carousel-numeric { left: auto; transform: none; bottom: 19px; right: 9px; }
}
/* Phones: same spacing for consistency */
@media (max-width: 767px) {
  .carousel-numeric { bottom: 19px; right: 9px; }
}

/* Final mobile/tablet centering overrides: ensure equal 14px gap on both sides */
@media (max-width: 1023px) {
  .tie-page .carousel-container, .tie1-page .carousel-container { padding-left: 0 !important; padding-right: 0 !important; }
  /* Override previous image margin tweaks: rely on carousel padding for equal gaps */
  .tie-page .carousel-slide img, .tie1-page .carousel-slide img {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important; /* ensure only 19px padding creates top gap */
  }
  /* Anchor image to the top of the slide so vertical centering doesn't add extra top space */
  .tie-page .carousel-slide, .tie1-page .carousel-slide { align-items: flex-start !important; }
}

/* Large tie images */
.large {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

.description {
  margin-top: 20px;
}

.back-link {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  color: white;
  background: #333;
  padding: 5px 10px;
  border-radius: 4px;
}

/* Make anchor scroll account for sticky header height */
#tie-collection { scroll-margin-top: var(--header-shrunk-height); }
#collection-start { scroll-margin-top: calc(var(--header-shrunk-height) + 12px); }
#tie-collection {
  margin-top: 0;          /* avoid any unintended offset */
  /* Maintain small separation under the header only (header is fixed) */
  padding-top: 12px;
  border-top: 0; /* no top divider; rely on header's thin underline only */
}
/* Removed extra top divider under header */
#collection-start {
  /* Keep as an anchor but remove from flex flow so it doesn't take a slot */
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  scroll-margin-top: var(--header-shrunk-height);
  pointer-events: none;
}

/* ---------------- FOOTER ---------------- */
/* Legacy footer base (kept for backwards compatibility) */
footer { position: relative; width: 100%; }

/* New site footer bar: brand blue background, white logo/text */
footer.site-footer {
  background: var(--brand-blue);
  color: #ffffff;
  padding: 28px 16px; /* thicker bar */
}
footer.site-footer a { color: #ffffff; text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }

footer.site-footer .footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
footer.site-footer .footer-left { display: flex; align-items: center; gap: 10px; }
footer.site-footer .footer-logo { display: inline-flex; align-items: center; }
footer.site-footer .footer-logo img {
  height: 34px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* make dark SVG appear white */
}
footer.site-footer .footer-center { text-align: center; flex: 1; }
footer.site-footer .footer-center p { margin: 0; font-weight: 600; letter-spacing: 0.01em; }
footer.site-footer .footer-right { text-align: right; }
footer.site-footer .footer-contact { display: flex; flex-direction: column; gap: 6px; }
footer.site-footer .footer-contact a { color: #ffffff; font-weight: 400; letter-spacing: 0.2px; }
footer.site-footer .footer-contact .footer-phone { font-size: 0.98rem; }
footer.site-footer .footer-contact .footer-email { font-size: 0.98rem; opacity: 0.95; }

/* New footer layout for index.html using footer-main + footer-credit */
.site-footer .footer-main { background: var(--brand-blue); padding: 36px 16px; }
.site-footer .footer-main .footer-left { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; text-align: left; }
.site-footer .footer-main .footer-logo img { height: 56px; width: auto; display: block; filter: brightness(0) invert(1); }
.site-footer .footer-main .footer-contact { display: grid; gap: 10px; align-content: start; justify-items: start; text-align: left; }
.site-footer .footer-main .footer-contact a { color: #ffffff; font-weight: 400; letter-spacing: 0.2px; text-decoration: none; display: block; }
.site-footer .footer-main .footer-contact a:hover { text-decoration: underline; }
.site-footer .footer-main .footer-contact .footer-phone { font-size: 1rem; }
.site-footer .footer-main .footer-contact .footer-email { font-size: 1rem; opacity: 0.95; }
.site-footer .footer-main .footer-contact .footer-accessibility { border: none; padding: 0; border-radius: 0; font-weight: 400; letter-spacing: 0.2px; }
.site-footer .footer-credit {
  background: var(--brand-blue);
  /* Match main footer horizontal padding so line aligns with logo */
  padding: 12px 16px;
  /* Safe-area aware overrides (supported browsers will use these) */
  padding-right: max(16px, env(safe-area-inset-right));
  padding-left: max(16px, env(safe-area-inset-left));
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden; /* clip any subpixel bleed of the hairline divider */
}
.site-footer .footer-credit .footer-credit-inner {
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
  /* Use a pseudo-element for the divider to avoid edge touching due to subpixel rounding */
  position: relative;
  padding-top: 20px; /* extra breathing room below the line */
  text-align: left; /* align text to left side under the line */
}
.site-footer .footer-credit .footer-credit-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Default: span full content width on desktop */
  right: 0;
  height: 0;
  border-top: 0.33px solid #d9dee7; /* hairline light grey divider */
  pointer-events: none;
}

@media (max-width: 900px) {
  /* On mobile/tablet, deliberately shorten the line on the right, safe-area aware */
  .site-footer .footer-credit .footer-credit-inner::before {
    right: calc(max(16px, env(safe-area-inset-right)) + 10px); /* add 3px more (total +10px) gap on the right */
  }
}
.site-footer .footer-credit p {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 0.76rem; /* ~20% smaller than 0.95rem */
}

@media (max-width: 900px) {
  .site-footer .footer-main .footer-left { gap: 14px; }
  .site-footer .footer-main .footer-logo { justify-self: start; }
  .site-footer .footer-main .footer-contact { justify-self: start; text-align: left; }
  .site-footer .footer-credit .footer-credit-inner {
    padding-top: 18px;
    box-sizing: border-box;
    text-align: left; /* left align on mobile as requested */
  }
}

/* Mobile/tablet: stack items and center */
@media (max-width: 900px) {
  footer.site-footer .footer-inner { flex-direction: column; justify-content: center; text-align: center; gap: 14px; }
  footer.site-footer .footer-left, footer.site-footer .footer-right { width: 100%; justify-content: center; }
  footer.site-footer .footer-right { display: block; }
  footer.site-footer .footer-contact { text-align: center; }
}

/* Desktop: perfectly center the logo in the header */
@media (min-width: 901px) {
  header .header-flex { position: relative; }
  header .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header .header-left, header .header-right { position: relative; z-index: 3; }
}

/* ---------------- RESPONSIVE DESIGN ---------------- */
@media (max-width: 900px) {
  /* Perfectly center the logo in the bar on small screens */
  header .header-flex { position: relative; }
  header .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    flex-direction: column; /* stack logo, phrase, etc. vertically */
    align-items: center;
    justify-content: center;
    width: 100%; /* allow phrase to center and wrap nicely */
    text-align: center;
    gap: 22px; /* space between logo and phrase on tablet */
  }
  header .header-left, header .header-right { position: relative; z-index: 3; }

  /* Show hamburger, hide Contact text on small screens */
  header .header-left a { display: none; }
  .menu-toggle { display: inline-flex; }

  /* Tweak fullscreen logo for tablets (smaller) */
  header.fullscreen .logo {
    max-height: 36vh;
    max-width: 78vw;
  }
  header .scroll-hint { bottom: 18px; font-size: 0.8rem; }

  .gallery {
    /* Glue cards together with shared 1px separators */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0; /* no separation between cards */
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box; /* include border in width to avoid horizontal overflow */
    border-right: 1px solid #e6e9ef; /* close the grid on the far edge */
    border-bottom: 1px solid #e6e9ef; /* close the grid along the bottom */
    overflow-x: hidden; /* guard against sub-pixel overflow on iOS */
  }

  .tie-card {
    /* In grid, each card contributes the top/left separator only to avoid double borders */
    border: none;
    border-top: 1px solid #e6e9ef;
    border-left: 1px solid #e6e9ef;
    box-sizing: border-box;
    overflow: hidden; /* ensure content aligns with the border */
    width: 100%;
    padding: 10px; /* inset content so it doesn't touch the border */
  }

  /* Shrink the whole content column slightly, keep left-aligned */
  .tie-card a { display: block; width: 93%; margin: 0 auto; position: relative; }
  .tie-card img,
  .tie-card h2 { width: 100%; }

  /* Slightly smaller titles on tablet; align all text and divider to card padding */
  .tie-card h2 { font-size: 0.95em; padding: 8px 0; }
  .tie-card h2::before { padding-left: 0; padding-right: 0; }
  .tie-card h2::after { padding-left: 0; padding-right: 0; font-size: 1.06em; }
  /* Exactly three lines visible for the title text; keep space even if shorter */
  .tie-card h2 .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.18;
    min-height: calc(1.18em * 3);
    max-height: calc(1.18em * 3);
  }
  /* Keep uniform height for titles across all cards; do not change size per-card */
  .tie-card h2.condensed { letter-spacing: 0.01em; }
}

/* iPad and small laptop portrait refinements */
@media (max-width: 1200px) and (orientation: portrait) {
  header.fullscreen .logo {
    max-height: 52vh;
    max-width: 85vw;
  }
}

@media (max-width: 600px) {
  header .header-center { gap: 28px; } /* a bit more space on phones */
  /* Use small/ dynamic viewport units on mobile for better fullscreen fit */
  header.fullscreen { height: 100svh; height: 100dvh; }
  header {
    padding: 11px;
  }
  header h1 {
    font-size: 1.5em;
    padding: 0;
  }
  /* Tame fullscreen logo for phones (smaller) */
  header.fullscreen .logo { max-height: 28vh; max-width: 74vw; }
  /* Slightly smaller shrunk logo on phones */
  header.shrunk .logo { max-height: 42px; }
  /* Bring scroll hint closer to the centered logo on phones */
  header .scroll-hint { bottom: 48px; font-size: 0.75rem; }
  /* Even closer when the header is in fullscreen (big blue bar) */
  header.fullscreen .scroll-hint { bottom: 96px; }

  /* Two-per-row layout on smartphones: no gap, shared single-pixel separators */
  .gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box; /* include border in width to avoid horizontal overflow */
    border-right: 1px solid #e6e9ef;
    border-bottom: 1px solid #e6e9ef;
    overflow-x: hidden; /* guard against sub-pixel overflow on iOS */
  }

  .tie-card {
    /* Provide only top/left borders so adjacent items share a single line */
    margin: 0;
    border: none;
    border-top: 1px solid #e6e9ef;
    border-left: 1px solid #e6e9ef;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    padding: 8px; /* inset content so it doesn't touch the border */
  }

  /* Shrink the whole content column slightly, keep left-aligned */
  .tie-card a { display: block; width: 93%; margin: 0 auto; position: relative; }
  .tie-card img,
  .tie-card h2 { width: 100%; }

  .tie-card h2 { font-size: 0.88em; padding: 6px 0; }
  .tie-card h2::before { font-size: 0.78em; padding-left: 0; padding-right: 0; }
  .tie-card h2::after { padding-left: 0; padding-right: 0; font-size: 1.04em; }
  /* Exactly three lines visible for the title text; keep space even if shorter */
  .tie-card h2 .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.16;
    min-height: calc(1.16em * 3);
    max-height: calc(1.16em * 3);
  }
  /* Keep uniform height for titles across all cards; do not change size per-card */
  .tie-card h2.condensed { letter-spacing: 0.01em; }

  .tie-details {
    width: 100%;
    max-width: 100%;
    padding: 11px;
    margin: 10px auto;
  }

  .large {
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }
}

/* iPads and Desktop: make shrunk white bar 80px height (keep logo size unchanged) */
@media (min-width: 768px) {
  :root {
    --header-shrunk-height: 74px; /* Set to 80px for desktop/iPad */
  }
  /* Reinforce in case any other rule interferes */
  header.shrunk { height: var(--header-shrunk-height) !important; }
  
  /* Ensure content stays vertically centered in the taller bar */
  header .header-left,
  header .header-right {
    display: flex;
    align-items: center;
  }
  
  /* Fix menu positioning - ensure it stays right-aligned */
  header .header-right {
    justify-content: flex-end;
  }
}

@media (max-width: 600px) {
  .tie-details {
    max-width: 100%;
    width: 100%;
    padding: 11px;
  }
}

/* Utility for JS-controlled visibility (e.g., WhatsApp button) */
.hidden { display: none !important; }

/* ---------- Floating WhatsApp (desktop) ---------- */
.floating-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2000;
  background: #25D366;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: box-shadow 0.2s, background 0.2s;
  text-decoration: none;
  font-size: 2em;
  border: none;
}
.floating-whatsapp:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  background: #128C7E;
}
.floating-whatsapp i {
  color: #fff;
  font-size: 2em;
}
@media (min-width: 901px) {
  .floating-whatsapp {
    width: 45px; /* 25% smaller than 60px */
    height: 45px; /* 25% smaller than 60px */
    right: 20px;
    bottom: 20px;
    font-size: 1.5em; /* 25% smaller than 2em */
  }
  .floating-whatsapp i { font-size: 1.5em; }
}
@media (max-width: 600px) {
  .floating-whatsapp {
    width: 48px;
    height: 48px;
    font-size: 1.3em;
    right: 12px;
    bottom: 80px;
  }
  .floating-whatsapp i {
    font-size: 1.3em;
  }
}

/* ---------- WhatsApp overlay on image (smartphones only) ---------- */
/* Hidden by default; enabled on tie pages for phones */
.whatsapp-overlay { display: none; }
@media (max-width: 767px) {
  /* Ensure the carousel can host absolutely positioned children */
  .tie-page .carousel-container, .tie1-page .carousel-container { position: relative; }
  /* Remove over-image WA bubble; use inline button next to Back link */
  .tie-page .whatsapp-overlay, .tie1-page .whatsapp-overlay { display: none !important; }
  .tie-page .whatsapp-overlay i, .tie1-page .whatsapp-overlay i { font-size: 1.3em; color: #fff; }
  /* Phones: show floating only; hide inline to avoid duplication */
  .tie-page .back-actions .whatsapp-inline, .tie1-page .back-actions .whatsapp-inline { display: none !important; }
}

/* ---------- Tie page tight spacing overrides ---------- */
/* Remove any breathing room around the tie details on tie pages */
.tie-page .tie-details, .tie1-page .tie-details { margin: 0 !important; padding: 0 !important; }
.tie-page .tie-details h2, .tie1-page .tie-details h2 {
  margin: 0 auto !important; /* centered on desktop */
  padding: 10px 16px !important; /* slightly tighter vertical padding */
}
@media (max-width: 1023px) {
  .tie-page .tie-details h2, .tie1-page .tie-details h2 { width: 100%; margin: 0 !important; padding: 8px 12px 2px !important; }
}
.tie-page .carousel-container, .tie1-page .carousel-container { margin: 0 !important; }
.tie-page .carousel-slide, .tie1-page .carousel-slide { padding: 0 !important; }
/* Minimize space above the Back to Collection link */
.tie-page .tie-details p, .tie1-page .tie-details p { margin: 12px 0 12px 0 !important; padding: 0 !important; }
@media (max-width: 767px) {
  .tie-page .tie-details p, .tie1-page .tie-details p { margin: 10px 0 12px 0 !important; }
}
/* Only remove slide padding on mobile/tablet so desktop top/bottom borders remain visible */
@media (max-width: 1023px) {
  .tie-page .carousel-slide, .tie1-page .carousel-slide { padding: 0 !important; }
}
/* Minimize space above the Back to Collection link */
/* Reassert desktop slide padding so image top/bottom borders are never clipped */
@media (min-width: 1024px) {
  .tie-page .carousel-slide, .tie1-page .carousel-slide { padding-top: 10px !important; padding-bottom: 14px !important; }
  .tie-page .carousel-slide img, .tie1-page .carousel-slide img { border: 1px solid #e6e9ef !important; }
}

/* Inline Back + WhatsApp row on tie pages for tablet/phone */
.tie-page .back-actions, .tie1-page .back-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.tie-page .back-actions .back-link-inline, .tie1-page .back-actions .back-link-inline {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05em;
}
.tie-page .back-actions .whatsapp-inline, .tie1-page .back-actions .whatsapp-inline {
  display: none; /* hidden by default; enabled on tablet/phone */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.tie-page .back-actions .whatsapp-inline i, .tie1-page .back-actions .whatsapp-inline i { font-size: 1.2em; color: #fff; }

/* Show inline WhatsApp on tablet/phone (incl. iPad landscape), hide floating */
@media (max-width: 1199px) {
  .tie-page .back-actions, .tie1-page .back-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* center column fits the back link */
    align-items: center;
    width: 100%;
    padding: 0 14px; /* small side padding */
    box-sizing: border-box;
    gap: 8px;
  }
  .tie-page .back-actions .back-link-inline, .tie1-page .back-actions .back-link-inline {
    grid-column: 2;
    justify-self: center;
  }
  .tie-page .back-actions .whatsapp-inline, .tie1-page .back-actions .whatsapp-inline {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    margin-right: 8px; /* a little inset from the right edge */
  }
  /* Lower the floating WhatsApp on small screens */
  .tie-page .floating-whatsapp, .tie1-page .floating-whatsapp {
    bottom: 16px;
    right: 12px;
  }
}
/* Tablets only: show inline, hide floating to avoid duplication */
@media (min-width: 768px) and (max-width: 1199px) {
  .tie-page .floating-whatsapp, .tie1-page .floating-whatsapp { display: none !important; }
  .tie-page .back-actions .whatsapp-inline, .tie1-page .back-actions .whatsapp-inline { display: inline-flex !important; }
}
/* Desktop: hide inline, keep floating */
@media (min-width: 1200px) {
  .tie-page .back-actions .whatsapp-inline, .tie1-page .back-actions .whatsapp-inline { display: none !important; }
}

/* Smartphone: make the image fill width and avoid side white bars */
@media (max-width: 767px) {
  .tie-page .carousel-slide, .tie1-page .carousel-slide { height: auto !important; }
  .tie-page .carousel-slide img, .tie1-page .carousel-slide img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* ---------- Hamburger and menu (all sizes) ---------- */
/* Replace Contact link with menu button on all sizes */
header .header-left .contact-link { display: none !important; }

.menu-toggle {
  display: inline-flex; /* visible on desktop and mobile */
  width: 40px; /* hit target */
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent; /* no square */
  border: none; /* no border */
  color: #fff;
  cursor: pointer;
  position: relative;
  transition: none;
}
.menu-toggle:hover, .menu-toggle:focus-visible {
  background: transparent; /* stay clean */
  border-color: transparent; /* no border */
  outline: none;
}
.menu-toggle .bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center center;
  width: 22px; /* line width */
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease, top 200ms ease, margin-left 200ms ease;
}
.menu-toggle .bar:nth-child(1) { top: 12px; }
.menu-toggle .bar:nth-child(2) { top: 19px; }
.menu-toggle .bar:nth-child(3) { top: 26px; }

/* On hover (pointer devices), lines become vertical in the center */
@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover .bar,
  .menu-toggle:focus-visible .bar {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .menu-toggle:hover .bar:nth-child(1),
  .menu-toggle:focus-visible .bar:nth-child(1) { margin-left: -9px; }
  .menu-toggle:hover .bar:nth-child(2),
  .menu-toggle:focus-visible .bar:nth-child(2) { margin-left: 0; }
  .menu-toggle:hover .bar:nth-child(3),
  .menu-toggle:focus-visible .bar:nth-child(3) { margin-left: 9px; }
}

/* Show hamburger only on small screens when header is shrunk; hide in fullscreen */
header.fullscreen .menu-toggle { opacity: 0; visibility: hidden; pointer-events: none; }
header.shrunk .menu-toggle { opacity: 1; visibility: visible; }

/* Menu icon color per state */
header.fullscreen .menu-toggle { color: #ffffff; }
header.shrunk .menu-toggle { color: var(--brand-blue); }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0; /* full-width on mobile by default; narrowed on desktop below */
  background: #ffffff; /* clean white dropdown */
  color: #002147;
  border-top: 1px solid #e6e9ef;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  display: none;
  z-index: 1200;
  border-radius: 0; /* squared corners */
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: #002147;
  font-family: var(--font-sans);
  font-weight: 600;
}
.mobile-menu a:hover { background: #f5f7fb; }

/* ---------- Open state: turn hamburger into an X ---------- */
.menu-toggle.open { background: transparent; border-color: transparent; }
.menu-toggle.open .bar {
  top: 50% !important;
  left: 50% !important;
  margin-left: 0 !important;
  transform: translate(-50%, -50%) rotate(0deg) !important; /* base reset */
}
.menu-toggle.open .bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open .bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Desktop dropdown style: compact, rounded panel aligned to right side */
@media (min-width: 901px) {
  /* Constrain the gallery on desktop to avoid full-bleed width (not on home-fullbleed) */
  body:not(.home-fullbleed) .gallery {
    max-width: 1140px;  /* narrower container for larger side gutters */
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px; /* slightly smaller inner padding */
    gap: 12px; /* bring pictures closer together on desktop */
  }
  /* Ensure desktop tie titles reserve exactly two lines for visual consistency */
  .tie-card h2 .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.15; /* match .tie-card h2 line-height */
    min-height: calc(1.15em * 2);
    max-height: calc(1.15em * 2);
  }
  /* Mobile menu positioning now handled in the main desktop media query above */
}

/* Desktop styles for tie-info (centralized layout) */
@media (min-width: 1025px) {
  .tie-details > .tie-info {
    margin-left: 130px;
    margin-right: 130px;
    padding: 20px;
    text-align: left;
    box-sizing: border-box;
  }
}

/* Mobile/tablet: keep full-width feel, soft rounded bottom corners */
@media (max-width: 900px) {
  .mobile-menu {
    left: 0;
    right: 0;
    border-radius: 0; /* fully squared on mobile/tablet */
  }
  .preheader__inner { padding-left: 12px; padding-right: 12px; }
}

/* === DEBUGGING SECOND COLUMN (.tie-info) === */
/* Enable by adding class="debug-mode" on <body> or <html> */

/* DEBUG: Highlight tie-info section in debug mode */
.debug-mode .tie-details > .tie-info {
  margin-left: 130px;
  margin-right: 130px;
  padding: 20px;
}

/* Tie Page Mobile Improvements */
@media (max-width: 768px) {
  /* Add spacing and center the back link */
  body.tie-page .back-actions {
    margin-top: 24px !important;  /* space above the back link */
    text-align: center;           /* center align the link */
  }

  body.tie-page .back-actions .back-link-inline {
    display: inline-block;        /* so it can be centered */
    font-size: 0.95em;            /* slightly smaller for balance */
    color: var(--brand-blue);     /* consistent with brand */
    font-weight: 500;
    text-decoration: none;
  }

  /* Tighten spacing under the contact section */
  body.tie-page .tie-info .tie-contact-section {
    margin-bottom: 12px !important;
  }
}


/* --- HEADER BAR & LOGO CLEANUP --- */

/* Consistent header bar size (no dynamic shrink) */
#site-header {
  padding: 12px 0 !important;
  transition: none !important;
}

/* Clean, consistent logo styling */
.logo {
  max-height: 75px;
  width: auto;
  display: block;
  margin: 0 auto;
  align-self: center;
  /* Remove filter so logo appears as intended */
  filter: none;
}

/* Center logo vertically & horizontally in header */
.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  text-align: center;
}

/* Responsive: keep logo visible and sized well on mobile */
@media (max-width: 600px) {
  .logo {
    max-height: 75px;
  }
}

/* Remove Jerusalem image and subtitle styles (no longer used) */
/* ---------------- ABOUT PAGE LAYOUT ---------------- */
body.about-page { background: #ffffff; color: var(--brand-blue); font-family: var(--font-sans); }

.about-page .container { max-width: 1140px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

/* Elegant hero */
.about-page .about-hero { padding: 36px 0 28px; text-align: center; }
.about-page .about-hero h1 { color: var(--brand-blue); font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0 0 8px; }
.about-page .about-hero p { color: #2b3d57; font-size: clamp(1rem, 1.3vw, 1.15rem); margin: 0; }

/* Section blocks */
.about-page .about-section { padding: 28px 0; border-top: 1px solid #e6e9ef; }
.about-page .about-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 900px) { .about-page .about-grid { grid-template-columns: 1.1fr 0.9fr; gap: 28px; } }
.about-page .about-copy h2 { font-family: var(--font-display); font-weight: 700; color: var(--brand-blue); margin: 0 0 10px; }
.about-page .about-copy p { margin: 8px 0; color: #2b3d57; line-height: 1.6; }

/* Image placeholders (drop your images later) */
.about-page .image-placeholder {
  width: 100%; aspect-ratio: 3/2; background: #f6f8fb; border: 1px dashed #cfd6e6;
  border-radius: 8px; display: grid; place-items: center; color: #7a8aa3; font-weight: 600;
}
.about-page .image-tall { aspect-ratio: 2/3; }

/* Reversed layout helper */
.about-page .reverse .about-grid { direction: rtl; }
.about-page .reverse .about-grid > * { direction: ltr; }

/* CTA band */
.about-page .about-cta { padding: 28px 0 40px; }
.about-page .cta-card { background: #0b2450; color: #fff; border-radius: 10px; padding: 22px 20px; text-align: center; }
.about-page .cta-card h3 { margin: 0 0 10px; font-weight: 700; }
.about-page .cta-card p { margin: 0 0 16px; color: rgba(255,255,255,0.9); }
.about-page .cta-card a { display: inline-block; background: #fff; color: var(--brand-blue); padding: 10px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; }

/* About page drawer styles */
.about-page .menu-drawer { position: fixed; top: 0; left: -100%; width: 260px; height: 100%; background: #fff; box-shadow: 4px 0 12px rgba(0,0,0,0.2); transition: left 0.3s ease; z-index: 9999; padding: 20px; }
.about-page .menu-drawer.open { left: 0; }
.about-page .drawer-nav { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.about-page .drawer-nav a { font-size: 1.2em; color: var(--brand-blue); text-decoration: none; font-weight: bold; }
.about-page .drawer-nav a:hover { text-decoration: underline; }
.about-page .close-drawer { position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer; font-size: 28px; line-height: 1; padding: 0; color: var(--brand-blue); }

/* ---------------- ABOUT2 (CONCEPT) PAGE ---------------- */
/* Scoped styles so we don't affect other pages */
body.about2-page {
  --about2-cream: #f6f2ea;
  --about2-navy: #0b2847; /* close to the reference */
  --about2-gold: #d8a63a;
  background: var(--about2-cream);
  color: var(--about2-navy);
  font-family: var(--font-sans);
  /* Only reserve space for the preheader; header is transparent and overlays */
  padding-top: var(--preheader-height, 0px);
}

/* Transparent header with centered wordmark */
.about2-header {
  position: fixed;
  top: var(--preheader-height, 0px);
  left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1100; /* above content, below any modals */
  border: none;
}
.about2-header .logo-wrap {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--about2-navy);
  font-size: clamp(22px, 2.3vw, 28px);
}

/* Three-panel hero inspired by the provided image */
.about2-hero {
  position: relative;
  display: grid;
  grid-template-columns: 0.36fr 0.44fr 0.32fr;
  min-height: calc(100vh - var(--preheader-height, 0px));
}
.about2-hero .panel { position: relative; }
.about2-hero .panel--left {
  background: var(--about2-navy);
  color: #ffffff;
  padding: clamp(24px, 4vw, 60px) clamp(18px, 3vw, 48px);
  display: flex; flex-direction: column; gap: 14px;
}
.about2-hero .panel--middle {
  background: var(--about2-cream);
  color: var(--about2-navy);
  padding: clamp(24px, 4vw, 60px) clamp(18px, 3vw, 56px);
}
.about2-hero .panel--right {
  background: var(--about2-cream);
  padding: clamp(24px, 4vw, 50px) clamp(12px, 2.6vw, 34px);
  display: flex; align-items: flex-start; justify-content: center;
}

/* Left column details */
.panel-meta { display: flex; justify-content: space-between; font-weight: 600; opacity: 0.9; letter-spacing: 0.15em; font-size: 0.9rem; }
.panel-icon { font-size: 1.2rem; opacity: 0.9; margin-top: 12px; }
.panel-title { font-family: var(--font-display); font-weight: 800; line-height: 1.05; font-size: clamp(32px, 4.6vw, 56px); margin: 6px 0 0; }
.panel-sub { font-family: var(--font-display); opacity: 0.8; font-style: italic; margin: 6px 0 6px; }
.panel-blurb { margin: 0; opacity: 0.85; }
.panel-mark { position: absolute; right: clamp(10px, 2vw, 22px); bottom: clamp(56px, 8vh, 100px); width: 2px; height: 80px; background: var(--about2-gold); opacity: 0.7; }
.panel-footer { position: absolute; left: clamp(12px, 2vw, 20px); bottom: clamp(16px, 3vh, 26px); opacity: 0.85; font-weight: 600; }

/* Middle column editorial styling */
.crest-rule { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.crest-rule .crest { font-size: 1.1rem; color: var(--about2-gold); }
.crest-rule .rule { height: 2px; background: var(--about2-gold); flex: 1; display: block; }
.ed-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 14px 0 14px; }
.about2-page .ed-title { color: var(--about2-navy); text-align: left; }
.ed-copy { max-width: 52ch; line-height: 1.7; opacity: 0.9; }

.pullout { margin-top: clamp(30px, 6vh, 60px); padding-top: 18px; position: relative; }
.pullout-rule { position: absolute; top: 0; left: 0; width: 40%; height: 2px; background: var(--about2-gold); }
.pullout-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.2vw, 28px); margin: 6px 0 2px; }
.about2-page .pullout-title { color: var(--about2-navy); text-align: left; }
.pullout-copy { margin: 0; opacity: 0.9; }
.pullout-foot { margin-top: 14px; color: #9a8a62; font-size: 0.8rem; letter-spacing: 0.12em; }

/* Right column photo frame (image slot you can replace) */
.photo-frame { width: 100%; }
.photo-frame .image-slot {
  width: 100%;
  aspect-ratio: 4/3;
  background: #ece7de;
  border: 2px solid var(--about2-gold);
  display: grid; place-items: center; color: #7a7058; font-weight: 700; letter-spacing: 0.08em;
}

/* Simple responsive stacking */
@media (max-width: 960px) {
  .about2-hero { grid-template-columns: 1fr; }
  .about2-header { height: 56px; }
  .panel--right { order: 3; }
}

/* ---------------- ABOUT2B (REFERENCE WITH NAVY SLABS) ---------------- */
body.about2b-page {
  --about2b-navy: #0b2450;
  --about2b-gold: #d7a74a;
  background: #ffffff;
  color: var(--brand-blue);
  font-family: var(--font-sans);
  padding-top: calc(var(--preheader-height, 34px) + var(--header-shrunk-height, 56px));
}
.about2b-page .container { max-width: 1140px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

/* Drawer styles scoped to this page */
.about2b-page .menu-drawer { position: fixed; top: 0; left: -100%; width: 260px; height: 100%; background: #fff; box-shadow: 4px 0 12px rgba(0,0,0,0.2); transition: left 0.3s ease; z-index: 9999; padding: 20px; }
.about2b-page .menu-drawer.open { left: 0; }
.about2b-page .drawer-nav { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.about2b-page .drawer-nav a { font-size: 1.2em; color: var(--brand-blue); text-decoration: none; font-weight: bold; }
.about2b-page .drawer-nav a:hover { text-decoration: underline; }
.about2b-page .close-drawer { position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer; font-size: 28px; line-height: 1; padding: 0; color: var(--brand-blue); }

/* Hero slabs + image */
.about2b-hero { display: grid; grid-template-rows: auto auto auto; }
.about2b-hero .slab { background: var(--about2b-navy); color: #ffffff; }
.about2b-hero .slab .slab-inner { max-width: 1140px; margin: 0 auto; padding: 36px 16px; text-align: center; }
.about2b-hero .slab .crest { width: 38px; height: 38px; opacity: 0.95; margin: 6px auto 10px; display: block; }
.about2b-hero .slab-meta { letter-spacing: 0.22em; font-weight: 600; font-size: 0.8rem; opacity: 0.9; }
.about2b-hero .slab-title { font-family: var(--font-display); font-weight: 800; margin: 8px 0 0; font-size: clamp(22px, 2.2vw, 28px); }
.about2b-hero .hero-image { margin: 0; }
.about2b-hero .hero-image .image-slot { width: 100%; aspect-ratio: 16/9; background: #e9edf4; display: grid; place-items: center; color: #6a7a90; font-weight: 700; letter-spacing: 0.08em; }
.about2b-hero .slab--bottom .slab-inner { padding-top: 28px; padding-bottom: 44px; }
.about2b-hero .slab-kicker { font-style: italic; opacity: 0.9; margin-bottom: 6px; }
.about2b-hero .slab-copy { max-width: 70ch; margin: 0 auto 16px; opacity: 0.95; }
.about2b-hero .btn-outline { display: inline-block; padding: 10px 18px; color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 4px; text-decoration: none; font-weight: 700; }
.about2b-hero .btn-outline:hover { background: rgba(255,255,255,0.08); }

/* Story block */
.about2b-story { padding: 40px 0; text-align: center; }
.about2b-story .crest { width: 28px; height: 28px; opacity: 0.9; display: block; margin: 4px auto 10px; }
.about2b-story h2 { color: var(--brand-blue); font-family: var(--font-display); font-weight: 800; margin: 0 0 10px; text-align: center; }
.about2b-story p { color: #2b3d57; margin: 0 auto; max-width: 70ch; }

/* Alternating content blocks */
.about2b-blocks { padding: 10px 0 40px; }
.about2b-blocks .grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; padding: 20px 0; border-top: 1px solid #e6e9ef; }
.about2b-blocks .grid.reverse { direction: rtl; }
.about2b-blocks .grid.reverse > * { direction: ltr; }
@media (min-width: 900px) { .about2b-blocks .grid { grid-template-columns: 1.05fr 0.95fr; gap: 28px; } }
.about2b-blocks h3 { font-family: var(--font-display); font-weight: 800; color: var(--brand-blue); margin: 0 0 10px; }
.about2b-blocks p { color: #2b3d57; margin: 0; }
.about2b-blocks .image-ph { width: 100%; aspect-ratio: 3/2; background: #f6f8fb; border: 1px dashed #cfd6e6; border-radius: 8px; display: grid; place-items: center; color: #7a8aa3; font-weight: 600; }
.about2b-blocks .image-tall { aspect-ratio: 2/3; }

/* CTA card */
.about2b-cta { padding: 36px 0 56px; }
.about2b-cta .card { background: var(--about2b-navy); color: #fff; border-radius: 10px; padding: 22px 20px; text-align: center; }
.about2b-cta h3 { margin: 0 0 10px; font-weight: 800; font-family: var(--font-display); }
.about2b-cta p { margin: 0 0 14px; color: rgba(255,255,255,0.92); }
.about2b-cta .btn-outline { display: inline-block; padding: 10px 16px; color: #fff; border: 1px solid rgba(255,255,255,0.6); border-radius: 6px; text-decoration: none; font-weight: 700; }
.about2b-cta .btn-outline:hover { background: rgba(255,255,255,0.08); }

/* ---------------- BLOG PAGE ---------------- */
/* Full-width, minimalist editorial layout in brand palette */
body.blog-page {
  --blog-navy: #002147;
  --blog-ivory: #F8F8F5;
  --blog-accent: #16345f; /* lighter navy for subtle hover */
  background: var(--blog-navy);
  color: #e9eef7; /* readable against navy */
  font-family: var(--font-sans);
  line-height: 1.65;
  /* Reserve space for preheader + thin header */
  padding-top: calc(var(--preheader-height, 34px) + var(--header-shrunk-height, 56px));
}

/* Hero */
.blog-hero { padding: 80px 10%; text-align: center; }
.blog-hero .hero-inner { max-width: 920px; margin: 0 auto; }
.blog-hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em; color: #ffffff; margin: 0 0 12px; font-size: clamp(2.2rem, 5vw, 3rem); }
.blog-hero .hero-lead { color: #dbe4f3; margin: 0; font-size: clamp(1rem, 1.4vw, 1.125rem); }

/* Posts grid */
.blog-list { padding: 40px 10% 100px; }
.blog-list .posts { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .blog-list .posts { grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 34px; } }

/* Post card */
.post-card { background: var(--blog-ivory); color: var(--blog-navy); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 28px rgba(0,33,71,0.14); transition: transform 220ms ease, box-shadow 220ms ease; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,33,71,0.18); }
.post-link { color: inherit; text-decoration: none; display: grid; grid-template-rows: auto 1fr; height: 100%; }
.post-media { margin: 0; }
.post-media .ph { width: 100%; aspect-ratio: 16/9; background: #e9edf4; display: grid; place-items: center; color: #6a7a90; font-weight: 700; letter-spacing: 0.08em; transition: transform 220ms ease; }
.post-card:hover .post-media .ph { transform: scale(1.02); }
.post-body { padding: 22px 20px 20px; }
.post-title { font-family: var(--font-display); font-weight: 800; margin: 0 0 8px; color: var(--blog-navy); font-size: clamp(1.25rem, 2vw, 1.5rem); }
.post-excerpt { margin: 0 0 16px; color: #2b3d57; }
.post-more { display: inline-block; font-weight: 700; color: var(--blog-navy); border: 1px solid rgba(0,33,71,0.18); padding: 8px 12px; border-radius: 4px; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.post-card:hover .post-more { background: #ffffff; border-color: rgba(0,33,71,0.28); color: var(--blog-accent); }