@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;
}

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;
}

/* 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;
}

/* Skip link: hidden by default, visible when focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: #ffbf47; /* high contrast yellow */
  color: #000;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  z-index: 3000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.skip-link:focus, .skip-link:focus-visible {
  top: 8px;
}
body {
  font-family: var(--font-sans);
  background-color: #000000;
  color: #ffffff;
  margin: 0;
  padding: 0;
}
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;
}

/* ---------------- 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 */
}
.preheader__inner { margin: 0; width: 100%; padding: 4px 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.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--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 */
 .logo {
   width: 150px;
   height: auto;
   display: block;
   margin: 0 auto;
   filter: brightness(0) invert(1); /* makes dark SVG appear white */
   align-self: center;
 }
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: sticky;
  top: 0;
  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 */
}

/* 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;
}

/* 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;
  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: 42px; }

.logo {
  width: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
  /* default filter neutral; state rules below control color */
}

/* 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 ---------------- */
.gallery {
  display: flex;
  flex-wrap: wrap;
  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 */
}

.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;
}

/* 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;
  }
}

/* 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;
}

.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; }
}

.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: 24px auto 0; /* more space under the white bar on desktop */
  }
  .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 */
  .carousel-slide img { max-width: 85%; margin: 18px auto 18px; 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 separation under the header; add preheader height when it's visible */
  padding-top: calc(12px + var(--preheader-height, 0px));
  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; }
}

/* ---------------- 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; }
  .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: 36px; }
  /* 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; }
  .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: 80px; /* 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 */
  .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 {
    left: auto;
    right: 12px;
    width: max-content;
    min-width: 220px;
    border-radius: 0; /* squared corners on desktop too */
    margin-top: 8px;
    border: 1px solid #e6e9ef;
  }
}

/* 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; }
}

/* ---------- Desktop layout: cap at 4 columns ---------- */
/* On large screens, switch the gallery to a 4-column grid so the first row always shows 4 ties and never more than 4 per row. */
@media (min-width: 1200px) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; /* tighter spacing between items */
    align-items: start;
    justify-items: center; /* center fixed-width cards if narrower than column */
  }
  .gallery .tie-card {
    width: 100%;
    max-width: 270px; /* ~25% smaller maximum for desktop fullscreen */
  }
  /* Wide promo card spans two columns and aligns with the grid gaps */
  .gallery .promo-card {
    grid-column: span 2;
    width: 100%;
    max-width: none;
    justify-self: stretch; /* fill grid area */
    align-self: stretch;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden; /* crop image cleanly */
    aspect-ratio: 2 / 1; /* roughly two cards wide by one tall */
  }
  .gallery .promo-card .promo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill area like a poster */
    object-position: 50% 50%; /* default center focus */
  }
}

/* Phones: 2-column grid — make promo span both (two slots) */
@media (max-width: 600px) {
  .gallery .promo-card {
    grid-column: 1 / -1; /* spans both columns */
    width: 100%;
    aspect-ratio: 2 / 1.8; /* taller on phones to match card height */
    overflow: hidden;
  }
  .gallery .promo-card .promo-img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; display: block; /* show more blazer/tie, less face */
  }
}
/* Small tablets: 3-column grid — make promo span 2 of 3 */
@media (min-width: 601px) and (max-width: 900px) {
  .gallery .promo-card {
    grid-column: span 2;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
  }
  .gallery .promo-card .promo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
/* Large tablets (flex layout): approximate two-card width using flex-basis */
@media (min-width: 901px) and (max-width: 1199px) {
  .gallery .promo-card {
    display: block;
    flex: 0 0 calc((250px * 2) + 12px); /* 2 cards + one gap (gap is 12px in this range) */
    width: calc((250px * 2) + 12px);
    max-width: calc((250px * 2) + 12px);
    aspect-ratio: 2 / 1;
    overflow: hidden;
  }
  .gallery .promo-card .promo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
}