/* ===========================
   ASEAN LINKS — APPAREL PAGE
   Additional styles layered over style.css
   AL monogram · darker, richer, more editorial
   =========================== */

/* Slightly richer dark for apparel page */
.apparel-page {
  --bg: #09100c;
  --surface: #0c1410;
  --surface-2: #101a13;
  --surface-off: #162015;
}

/* ---- APPAREL HERO ---- */
.apparel-hero {
  position: relative; min-height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden; padding-top: 58px;
}
.apparel-hero-bg { position: absolute; inset: 0; z-index: 0; }
.apparel-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.apparel-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(6,10,7,0.96) 0%,
    rgba(6,10,7,0.85) 45%,
    rgba(6,10,7,0.3)  100%
  );
}
.apparel-hero-content {
  position: relative; z-index: 1;
  max-width: var(--content-default); margin: 0 auto;
  padding: var(--space-20) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-8);
  max-width: 680px; margin-left: clamp(var(--space-6), 8vw, 160px);
}
.apparel-monogram { margin-bottom: var(--space-4); }
.monogram-img {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold-dim);
  box-shadow: 0 0 32px color-mix(in srgb, var(--gold) 20%, transparent);
}
.apparel-hero-heading {
  font-size: clamp(3rem, 2rem + 4vw, 6.5rem);
  font-weight: 600; line-height: 1.02;
  color: #ede8d6;
}
.apparel-hero-sub {
  font-size: var(--text-base); color: color-mix(in srgb, #e0dbc8 72%, transparent);
  line-height: 1.75; max-width: 50ch;
}

/* ---- VALUE STRIP ---- */
.value-strip {
  background: var(--surface);
  border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
  padding: var(--space-5) 0;
}
.value-strip-inner {
  max-width: var(--content-default); margin: 0 auto; padding: 0 var(--space-6);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); flex-wrap: wrap;
}
.value-item {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-muted);
}
.v-sep { color: var(--gold-dim); font-size: var(--text-sm); }

/* ---- DISCLAIMER BANNER ---- */
.disclaimer-banner {
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
  border-top: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  padding: var(--space-4) 0;
}
.disclaimer-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: color-mix(in srgb, #e0dbc8 85%, transparent);
  line-height: 1.65;
  max-width: var(--content-default);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.disclaimer-inner svg { flex-shrink: 0; margin-top: 2px; }
.disclaimer-inner strong { color: var(--gold); font-weight: 600; }

.disclaimer-repeat {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--gold) 5%, transparent);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.7;
  font-style: italic;
  text-align: center;
}

/* ---- GALLERY CATEGORIES ---- */
.gallery-category {
  margin-bottom: var(--space-14);
}
.gallery-category:last-child { margin-bottom: 0; }

.category-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--divider);
}

/* ---- APPAREL GALLERY ---- */
.apparel-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 420px;
  gap: var(--space-3);
}
.gallery-item {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item-large { grid-column: 1 / 3; }
.gallery-item-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(to top, rgba(6,10,7,0.85) 0%, transparent 100%);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}

/* Dense grid for real product images — 4 cols desktop, 3 tablet, 2 mobile */
.apparel-grid-dense {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: unset;
  auto-rows: 280px;
}
.apparel-grid-dense .gallery-item {
  height: 280px;
}

.gallery-upload-placeholder {
  background: var(--surface-off);
  border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
}
.placeholder-inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  color: var(--text-faint); text-align: center;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}

.gallery-note {
  text-align: center; margin-top: var(--space-6);
  font-size: var(--text-sm); color: var(--text-muted);
  max-width: none;
}
.gallery-note a { color: var(--gold); }

/* ---- OFFER GRID ---- */
.offer-section { background: var(--surface); }
.offer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
.offer-card {
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4);
  transition: border-color var(--transition);
}
.offer-card:hover { border-color: var(--gold-dim); }
.offer-icon { color: var(--gold); }
.offer-card h4 { font-size: var(--text-lg); }
.offer-card p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; flex: 1; }

/* ---- CUSTOM ORDER SECTION ---- */
.custom-order-section { background: var(--bg); }
.checkbox-group {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  padding: var(--space-3) 0;
}
.checkbox-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-muted); cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--gold); cursor: pointer; border-radius: 3px;
}

/* ---- APPAREL RESPONSIVE ---- */
@media (max-width: 1024px) {
  .apparel-gallery-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 280px; }
  .apparel-grid-dense { grid-template-columns: repeat(3, 1fr); }
  .gallery-item-large { grid-column: 1 / 2; }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .apparel-hero-content { margin-left: 0; padding: var(--space-12) var(--space-6); }
  .apparel-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 240px; }
  .apparel-grid-dense { grid-template-columns: repeat(2, 1fr); }
  .apparel-grid-dense .gallery-item { height: 240px; }
  .offer-grid { grid-template-columns: 1fr; }
  .value-strip-inner { flex-direction: column; align-items: flex-start; }
  .v-sep { display: none; }
}
@media (max-width: 480px) {
  .apparel-gallery-grid { grid-template-columns: 1fr; grid-template-rows: 280px; }
  .apparel-grid-dense { grid-template-columns: repeat(2, 1fr); }
  .apparel-grid-dense .gallery-item { height: 200px; }
  .gallery-item-large { grid-column: auto; }
}