/* ==========================================================================
   Smart Traders Group - Brand Product Gallery
   Standalone stylesheet: index.html never loads this file.
   ========================================================================== */

:root {
  --bg-deep: #050506;
  --bg-card: #0c0c0f;

  --gold-light: #f5e4ab;
  --gold-primary: #d4af37;
  --gold-dark: #aa771c;
  --gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);

  --text-white: #ffffff;
  --text-muted: #8e8e99;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --topbar-h: 58px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--bg-deep);
  color: var(--text-white);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.bg-ambient-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(212, 175, 55, 0.09) 0%, transparent 45%),
    radial-gradient(circle at 82% 88%, rgba(170, 119, 28, 0.07) 0%, transparent 48%);
}

/* ==========================================================================
   Top Bar
   ========================================================================== */
.gallery-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: rgba(5, 5, 6, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  color: var(--gold-light);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(212, 175, 55, 0.35);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.back-link:hover,
.back-link:focus-visible {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--gold-primary);
}

.back-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.35);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.topbar-ig:hover,
.topbar-ig:focus-visible {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--gold-primary);
}

.topbar-ig-icon {
  width: 18px;
  height: 18px;
  fill: var(--gold-primary);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.gallery-page {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px 16px 60px;
}

.gallery-hero {
  text-align: center;
  margin-bottom: 28px;
}

/* The heading is always the brand logo image. */
.gallery-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(56px, 15vw, 80px);
}

.gallery-logo {
  max-height: clamp(52px, 14vw, 78px);
  max-width: min(76vw, 300px);
  width: auto;
  height: auto;
  object-fit: contain;
}

[hidden] {
  display: none !important;
}

.gallery-tagline {
  margin-top: 8px;
  font-size: clamp(0.63rem, 2.6vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gallery-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.diamond-dot {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--gold-dark);
  opacity: 0.7;
}

.diamond-dot.center {
  width: 7px;
  height: 7px;
  background: var(--gold-primary);
  opacity: 1;
}

/* ==========================================================================
   Brand Switcher - horizontally scrolling chip row
   ========================================================================== */
.brand-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Bleed to the screen edges so the row reads as scrollable on a phone */
  margin-inline: -16px;
  padding-inline: 16px;
  scroll-padding-inline: 16px;
}

.brand-switch::-webkit-scrollbar {
  display: none;
}

.brand-chip {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(14, 13, 10, 0.7);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.brand-chip:hover,
.brand-chip:focus-visible {
  color: var(--gold-light);
  border-color: rgba(212, 175, 55, 0.6);
}

.brand-chip.is-active {
  color: var(--gold-light);
  border-color: rgba(230, 197, 98, 0.85);
  background: linear-gradient(135deg, #3a2e15 0%, #241d0f 60%, #171208 100%);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25), inset 0 1px 1px rgba(255, 233, 170, 0.35);
}

@media (min-width: 700px) {
  .brand-switch {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Hint that the page itself responds to a sideways swipe. Touch only - it would
   be noise on a desktop, where the chips are all visible at once anyway. */
.swipe-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -8px 0 22px;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(142, 142, 153, 0.75);
}

@media (hover: none) and (max-width: 700px) {
  .swipe-hint {
    display: flex;
  }
}

.swipe-hint-arrow {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: swipeNudge 1.8s ease-in-out infinite;
}

.swipe-hint-arrow.flip {
  animation-direction: reverse;
}

@keyframes swipeNudge {
  0%, 100% { transform: translateX(-2px); opacity: 0.5; }
  50%      { transform: translateX(2px);  opacity: 1; }
}

/* ==========================================================================
   Page Entry Choreography

   Each brand is its own page now, so this runs on load rather than on a
   JS-driven swap. Parts arrive a beat apart, leading the eye
   logo -> tagline -> photos -> actions. Pure CSS, so it plays with
   JavaScript switched off too.
   ========================================================================== */
.gallery-page .gallery-title,
.gallery-page .gallery-tagline,
.gallery-page .gallery-divider,
.gallery-page .ig-cta-wrap {
  animation: swapIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* The logo gets its own curve - a touch of scale so it settles rather than slides */
.gallery-page .gallery-logo {
  animation: logoIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.gallery-page .gallery-tagline {
  animation-delay: 0.06s;
}

.gallery-page .gallery-divider {
  animation-delay: 0.1s;
}

.gallery-page .ig-cta-wrap {
  animation-delay: 0.16s;
}

@keyframes swapIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes logoIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Tiles rise in one after another. The delay is written into the markup by
   build-gallery.js and capped so it never drags.
   `backwards`, not `both`: a retained end state would out-rank the hover
   transform and leave the tiles unable to lift. */
.photo-tile {
  animation: tileIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes tileIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-hint-arrow,
  .photo-tile,
  .gallery-page .gallery-title,
  .gallery-page .gallery-logo,
  .gallery-page .gallery-tagline,
  .gallery-page .gallery-divider,
  .gallery-page .ig-cta-wrap {
    animation: none;
  }
}

/* ==========================================================================
   Photo Grid (keeps natural aspect ratios)

   Grid, not CSS columns. Multi-column BALANCES height across columns instead
   of filling left to right: with 6 similar-height tiles in 4 columns the
   target works out to 1.5 tiles each, every column takes 2, and the fourth
   is left empty - which is why the 6-photo brands showed a gap and the
   7-photo one did not. Grid always fills in order, so the last row is the
   only one that can be short.
   ========================================================================== */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 12px;
}

@media (min-width: 700px) {
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1000px) {
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Margins are gone - grid `gap` spaces the tiles now, and a bottom margin on
   top of it would double the vertical gutter. */
.photo-tile {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  cursor: zoom-in;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-tile:hover,
.photo-tile:focus-visible {
  border-color: var(--gold-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
  outline: none;
}

.photo-tile img {
  display: block;
  width: 100%;
  height: auto;
}

.photo-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ==========================================================================
   Instagram CTA + Contact Row
   ========================================================================== */
/* Raised panel: a lighter surface behind the actions so the buttons sit on
   something, instead of floating on the same black as the rest of the page. */
.ig-cta-wrap {
  margin-top: 46px;
  padding: 30px 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 29, 36, 0.85) 0%, rgba(16, 15, 20, 0.9) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  text-align: center;
}

/* Copy block trails the buttons, so it gets a divider above it instead of
   bottom spacing - it now closes the panel rather than introducing it. */
.ig-cta-copy {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ig-cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}

.ig-cta-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 42ch;
  line-height: 1.7;
}

.ig-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 268px;
  padding: 18px 32px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Filled metallic gold with dark text. A dark gold-on-black button could not
     out-rank a page that is already gold on black - the fill is what gives this
     the contrast to read as the single primary action. */
  background: linear-gradient(150deg, #9a7a2c 0%, #c2a052 28%, #8c6d24 56%, #b8964a 80%, #7a5f1e 100%);
  border: 1px solid rgba(212, 175, 55, 0.7);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(212, 175, 55, 0.16),
    inset 0 1px 1px rgba(255, 240, 190, 0.35),
    inset 0 -8px 18px rgba(60, 42, 8, 0.35);
  color: #17120a;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Instagram handles are lowercase - never upper-case them */
  text-transform: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Sheen sweeping across on hover, same trick as the home page CTA buttons */
.ig-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 210, 0.3), transparent);
  transition: left 0.7s ease;
}

.ig-cta-btn:hover::before,
.ig-cta-btn:focus-visible::before {
  left: 110%;
}

.ig-cta-btn:hover,
.ig-cta-btn:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(245, 228, 171, 0.9);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(212, 175, 55, 0.3),
    inset 0 1px 2px rgba(255, 240, 190, 0.5),
    inset 0 -10px 22px rgba(60, 42, 8, 0.3);
}

.ig-cta-icon {
  width: 21px;
  height: 21px;
  fill: #17120a;
  flex-shrink: 0;
}

/* The action comes first and the handle sits under it as a caption. Leading
   with "@name" made this read as a social follow, which is optional - leading
   with the action makes it read as the way to see the rest of the catalogue. */
.ig-cta-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.ig-cta-btn-label {
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ig-cta-btn-handle {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.72;
  /* Instagram handles are lowercase - never upper-case them */
  text-transform: none;
}

.ig-cta-btn-arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #17120a;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.25s ease;
}

.ig-cta-btn:hover .ig-cta-btn-arrow,
.ig-cta-btn:focus-visible .ig-cta-btn-arrow {
  transform: translateX(4px);
}

/* Secondary tier, deliberately NOT gold. With gold on the panel heading and on
   the filled button above, a third gold element flattened the whole block -
   neutral glass gives these somewhere to sit without competing. */
.gallery-contact-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  max-width: 340px;
  margin: 14px auto 0;
}

.gallery-contact-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e9e7e3;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.gallery-contact-btn:hover,
.gallery-contact-btn:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.34);
  color: #ffffff;
  transform: translateY(-2px);
}

.gallery-contact-btn .gallery-contact-icon {
  width: 16px;
  height: 16px;
  fill: #b9b6b0;
  flex-shrink: 0;
  transition: fill 0.25s ease;
}

.gallery-contact-btn:hover .gallery-contact-icon,
.gallery-contact-btn:focus-visible .gallery-contact-icon {
  fill: #ffffff;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 3, 4, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox[hidden] {
  display: none;
}

.lightbox.lb-open {
  opacity: 1;
}

/* Vertical snap feed: one photo per screen, flick to move exactly one slide */
.lb-track {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline: none;
}

.lb-track::-webkit-scrollbar {
  display: none;
}

/* Each slide hugs its own image rather than filling a fixed-height box. With
   near-square photos on a tall phone a fixed box left a big empty margin around
   the image, so the "peek" at the edges showed blank space instead of the next
   photo. Content-sized slides put the neighbour's actual image in the gap.
   The 50vh padding gives the first and last slide room to reach dead centre.

   Deliberately vh, not dvh. dvh tracks the *current* viewport, which changes the
   instant a mobile browser bar slides in or out - and the bar reappears when you
   scroll up. That re-ran this padding, the slide gap and the image cap together,
   reflowing the feed and moving every snap point mid-gesture. Hence flicker going
   up but not down. vh is fixed to the large viewport, so layout never moves. */
.lb-track {
  padding-block: 50vh;
}

.lb-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  scroll-snap-align: center;
  /* Stops a fast flick from skimming past several photos at once */
  scroll-snap-stop: always;
}

/* The gap is what the neighbouring photo peeks through */
.lb-slide + .lb-slide {
  margin-top: 4vh;
}

/* Neighbours sit back: dimmed, darkened and slightly smaller. transform is used
   rather than width/height so the measured slide positions never move. */
.lb-slide {
  opacity: 0.9;
  filter: brightness(0.8);
  transform: scale(0.95);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

.lb-slide.is-active {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Neighbours are tappable - clicking one pulls it to centre */
.lb-slide:not(.is-active) .lb-img {
  cursor: pointer;
}

/* Fade over the peeking neighbours so they read as a hint, not clutter */
.lightbox::before,
.lightbox::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 11vh;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.lightbox::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(3, 3, 4, 0.62) 0%, rgba(3, 3, 4, 0.3) 55%, rgba(3, 3, 4, 0) 100%);
}

.lightbox::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(3, 3, 4, 0.62) 0%, rgba(3, 3, 4, 0.3) 55%, rgba(3, 3, 4, 0) 100%);
}

/* No neighbour in that direction means nothing to hint at */
.lightbox.lb-at-start::before,
.lightbox.lb-at-end::after,
.lightbox.lb-single::before,
.lightbox.lb-single::after {
  opacity: 0;
}

.lb-img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
}

.lb-btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(20, 18, 12, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.45);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.lb-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lb-btn:hover,
.lb-btn:focus-visible {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold-primary);
}

.lb-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.lb-close {
  top: 16px;
  right: 16px;
}

/* Arrows sit vertically now, matching the scroll direction */
.lb-prev {
  top: 50%;
  right: 18px;
  transform: translateY(calc(-50% - 32px));
}

.lb-next {
  top: 50%;
  right: 18px;
  transform: translateY(calc(-50% + 32px));
}

/* Touch devices scroll by swiping - arrows would only get in the way */
@media (hover: none), (max-width: 768px) {
  .lb-prev,
  .lb-next {
    display: none;
  }
}

.lb-counter {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gold-light);
  background: rgba(20, 18, 12, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
}

/* Single-photo galleries hide the arrows */
.lightbox.lb-single .lb-prev,
.lightbox.lb-single .lb-next,
.lightbox.lb-single .lb-counter {
  display: none;
}

body.lb-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .photo-tile,
  .ig-cta-btn,
  .gallery-contact-btn,
  .lightbox,
  .lb-btn,
  .lb-slide,
  .ig-cta-btn::before {
    transition: none;
  }

  .lb-slide {
    transform: none;
  }
}