/*
Theme Name: Samexxon Luxury Furniture
Theme URI: https://samexxonsofa.com
Author: Antigravity Master Luxury Design Team
Author URI: https://samexxonsofa.com
Description: پوسته اختصاصی فوق‌لوکس، ژورنالی و بی‌نظیر سام اکسون، طراحی شده بر پایه استانداردها و DNA طراحی ۱۰ برند برتر مبلمان جهان (Minotti, Poliform, B&B Italia, RH, Flexform, Roche Bobois, Cassina, Molteni&C, Sofa.com, Giorgetti).
Version: 4.0.0
License: GNU General Public License v2 or later
Text Domain: samexxon-luxury
*/

/* ==========================================================================
   Google Fonts Import (Vazirmatn & Playfair Display)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,400&display=swap');

/* ==========================================================================
   Design Tokens ($10,000 Bespoke Luxury Color & Spacing System)
   ========================================================================== */
:root {
  /* Surface & Background Palette */
  --color-bg-body: #FFFFFF;
  --color-bg-alt: #F9F8F6;          /* Warm Silk Off-White */
  --color-bg-card: #F2EFEB;         /* Studio Warm Grey */
  --color-bg-dark: #121212;         /* Deep Midnight Charcoal */
  --color-bg-dark-surface: #1C1B1A; /* Architectural Dark Surface */

  /* Text & Contrast Hierarchy */
  --color-primary: #121212;         /* Pure Deep Charcoal */
  --color-text-main: #242220;       /* Dark Text */
  --color-text-muted: #66635F;      /* Muted Neutral */
  --color-text-light: #94908A;      /* Light Studio Grey */
  --color-text-inverse: #FFFFFF;

  /* Luxury Accent Metallics */
  --color-accent-gold: #C5A059;     /* Classic Champagne Gold */
  --color-accent-gold-light: #E4C88E;
  --color-accent-gold-hover: #A8833D;
  --color-gold-gradient: linear-gradient(135deg, #DFB76C 0%, #C5A059 50%, #9E7B35 100%);
  --color-dark-gradient: linear-gradient(180deg, rgba(18,18,18,0.92) 0%, rgba(18,18,18,0.98) 100%);

  /* Borders & Dividers */
  --color-border: #E8E5DF;
  --color-border-subtle: #F0EDE8;
  --color-border-dark: #2D2A27;

  /* Typography */
  --font-main: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3.8rem;
  --space-xl: 6rem;

  /* Elevation Shadows */
  --shadow-subtle: 0 4px 24px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-gold: 0 8px 30px rgba(197, 160, 89, 0.25);
  --shadow-dropdown: 0 24px 60px rgba(0, 0, 0, 0.14);

  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-smooth: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* LTR Adaptations */
[dir="ltr"] {
  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--color-bg-body);
  color: var(--color-text-main);
  direction: rtl;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg-body);
  color: var(--color-text-main);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-smooth);
}

img, picture, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1 { font-size: 3.2rem; }
h2 { font-size: 2.3rem; }
h3 { font-size: 1.45rem; }

/* Editorial Section Header */
.section-header-editorial {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--space-lg);
}

.editorial-eyebrow {
  display: inline-block;
  color: var(--color-accent-gold);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 0.8rem;
  position: relative;
}

.editorial-heading {
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.3;
}

.editorial-lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-top: 1rem;
}

/* Luxury Buttons */
.btn-luxury-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-gold-gradient);
  color: #121212;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 1rem 2.2rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-gold);
  transition: all var(--transition-smooth);
}

.btn-luxury-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(197, 160, 89, 0.4);
  color: #000000;
}

.btn-luxury-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.95rem 1.8rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-smooth);
}

.btn-luxury-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: #FFFFFF;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-dark {
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  text-align: center;
  transition: all var(--transition-smooth);
}

.btn-dark:hover {
  background-color: var(--color-accent-gold);
  color: #FFFFFF;
}

.btn-outline {
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  text-align: center;
  transition: all var(--transition-smooth);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

/* ==========================================================================
   Header & Status Bar
   ========================================================================== */
/* ==========================================================================
   Header & Status Bar (Dark Earthy Khaki Palette & Compact Height)
   ========================================================================== */
.top-announcement-bar {
  background-color: #27221C;
  color: #D6CEC5;
  font-size: 0.82rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-announcement-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.motto-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #E8E2D9;
  font-weight: 600;
}

.live-pulse {
  width: 8px;
  height: 8px;
  background-color: #2ECC71;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px #2ECC71;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.top-announcement-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.top-phone-link {
  color: #E2C082;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.top-phone-link:hover {
  color: #FFFFFF;
}

.lang-selector {
  display: flex;
  gap: 0.8rem;
}

.lang-selector a {
  color: #A89F95;
  font-size: 0.78rem;
  font-weight: 700;
}

.lang-selector a.active, .lang-selector a:hover {
  color: #E2C082;
}

/* Site Header (Warm Earthy Khaki, Compact 68px) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #383127;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
}

.logo-img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-menu-list {
  display: flex;
  align-items: stretch;
  height: 68px;
}

.nav-item {
  position: static;
  display: flex;
  align-items: center;
}

.nav-link {
  font-size: 0.94rem;
  font-weight: 700;
  color: #F7F3EE;
  padding: 0 1.2rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: #E2C082;
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-item.has-mega:hover > .nav-link::after {
  width: 100%;
}

.nav-link:hover,
.nav-item.has-mega:hover > .nav-link {
  color: #E2C082;
}

.nav-chevron {
  font-size: 1rem;
  opacity: 0.6;
  transition: transform 0.25s ease;
}

.nav-item.has-mega:hover .nav-chevron {
  transform: rotate(90deg);
  opacity: 1;
}

/* Header Action CTA Button */
.header-action-wrap {
  display: flex;
  align-items: center;
}

.header-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #D4AF37;
  color: #1E1914 !important;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.55rem 1.25rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
  transition: all 0.25s ease;
  text-decoration: none !important;
}

.header-cta-btn:hover {
  background: #FFFFFF;
  color: #1E1914 !important;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

/* ==========================================================================
   Golden Ratio Luxury Visual Mega Menu Panels (3-Col & 4-Col)
   ========================================================================== */
.mega-panel {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #FFFFFF;
  border-top: 2px solid var(--color-accent-gold, #C5A059);
  border-bottom: 1px solid #E5E0D8;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
  padding: 2.2rem 0 1.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s;
  z-index: 999;
  pointer-events: none;
}

.nav-item.has-mega:hover .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-panel-inner {
  width: 100%;
}

/* Golden Ratio Grid Formats */
.mega-golden-grid {
  display: grid;
  gap: 1.8rem;
  width: 100%;
}

.mega-golden-grid.grid-3col {
  grid-template-columns: repeat(3, 1fr);
}

.mega-golden-grid.grid-4col {
  grid-template-columns: repeat(4, 1fr);
}

/* Visual Editorial Category Cards */
.mega-visual-card {
  display: flex;
  flex-direction: column;
  background: #FAF9F6;
  border: 1px solid #ECE7DE;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.mega-visual-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.1);
  border-color: rgba(197, 160, 89, 0.6);
}

.mvc-img-frame {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #181716;
}

.mega-golden-grid.grid-4col .mvc-img-frame {
  height: 170px;
}

.mvc-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-visual-card:hover .mvc-img-frame img {
  transform: scale(1.06);
}

.mvc-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(24, 23, 22, 0.85);
  backdrop-filter: blur(8px);
  color: var(--color-accent-gold, #C5A059);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(197, 160, 89, 0.35);
  z-index: 2;
}

.mvc-overlay-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.mega-visual-card:hover .mvc-overlay-glow {
  opacity: 0.4;
}

.mvc-info-bar {
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border-top: 1px solid #ECE7DE;
}

.mvc-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #181716;
  margin: 0;
  transition: color 0.25s ease;
}

.mvc-arrow {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent-gold, #C5A059);
  transition: transform 0.25s ease, color 0.25s ease;
}

.mega-visual-card:hover .mvc-title {
  color: #8C6D23;
}

.mega-visual-card:hover .mvc-arrow {
  transform: translateX(-4px);
  color: #181716;
}

/* Bottom Trust Strip */
.mega-bottom-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid #F0ECE4;
  flex-wrap: wrap;
  gap: 1rem;
}

.mb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #5C5247;
}

/* Outlet Link and Archive Badge */
.nav-item-outlet .nav-link-outlet {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-outlet-pill {
  display: inline-block;
  background: rgba(212, 175, 55, 0.2);
  color: #F3DCAC;
  border: 1px solid rgba(212, 175, 55, 0.5);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
  line-height: 1;
}

.nav-item-outlet:hover .nav-outlet-pill {
  background: var(--color-accent-gold, #C5A059);
  color: #181716;
  border-color: var(--color-accent-gold, #C5A059);
}


.mega-visual-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  z-index: 2;
}

.mega-caption-tag {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-accent-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.3rem;
}

.mega-caption-text {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
}

.header-cta-btn {
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-smooth);
  white-space: nowrap;
}

.header-cta-btn:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

/* ==========================================================================
   1. HERO MASTERPIECE (Minotti & RH Multi-Style Interactive Hero)
   ========================================================================= */
.hero-masterpiece {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #0E0E0E;
  color: #FFFFFF;
  padding: 4rem 0 3rem;
}

.hero-bg-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(-90deg, rgba(14, 14, 14, 0.95) 0%, rgba(14, 14, 14, 0.8) 45%, rgba(14, 14, 14, 0.25) 100%);
}

.hero-container {
  position: relative;
  z-index: 3;
}

.hero-inner-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

.hero-text-block {
  max-width: 720px;
}

.hero-prestige-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(197, 160, 89, 0.15);
  border: 1px solid rgba(197, 160, 89, 0.35);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.5rem;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-accent-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-accent-gold);
}

.badge-text {
  color: var(--color-accent-gold-light);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.18;
  margin-bottom: 1.4rem;
}

.hero-title--calligraphy {
  margin-bottom: 1.2rem;
  line-height: 1;
}

.hero-calligraphy-img {
  max-width: 440px;
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) saturate(100%) invert(76%) sepia(21%) saturate(1470%) hue-rotate(5deg) brightness(90%) contrast(87%) drop-shadow(0 4px 20px rgba(0, 0, 0, 0.6));
}

.hero-title-accent {
  background: var(--color-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  font-size: 1.12rem;
  color: #D6D2CB;
  line-height: 1.85;
  margin-bottom: 2.2rem;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 2.2rem;
}

.hero-guarantee-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  gap: 1.2rem;
}

.pill-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #EFEFEF;
}

.pill-item strong {
  color: var(--color-accent-gold);
}

.pill-divider {
  width: 1px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Style Switcher Card (Minotti Inspired) */
.hero-style-switcher {
  background: rgba(24, 23, 22, 0.85);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.switcher-header {
  margin-bottom: 1.5rem;
}

.switcher-sub {
  font-size: 0.75rem;
  color: var(--color-accent-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 0.3rem;
}

.switcher-title {
  font-size: 1.35rem;
  color: #FFFFFF;
  font-weight: 800;
}

.switcher-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.switcher-tab {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  transition: all var(--transition-smooth);
  position: relative;
}

.switcher-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(197, 160, 89, 0.4);
}

.switcher-tab.active {
  background: rgba(197, 160, 89, 0.12);
  border-color: var(--color-accent-gold);
}

.tab-number {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--font-serif);
  color: var(--color-accent-gold);
  opacity: 0.7;
}

.switcher-tab.active .tab-number {
  opacity: 1;
}

.tab-info h4 {
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.tab-info p {
  font-size: 0.78rem;
  color: #AAAAAA;
}

.tab-indicator {
  width: 3px;
  height: 0;
  background: var(--color-gold-gradient);
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  border-radius: 4px;
  transition: height 0.3s ease;
}

.switcher-tab.active .tab-indicator {
  height: 70%;
}

.switcher-footer {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.switcher-direct-call {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: #DDDDDD;
}

.switcher-direct-call strong {
  color: var(--color-accent-gold);
}

.call-pulse {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent-gold);
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}

/* Hero Stats Ribbon */
.hero-stats-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.stat-card {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2.1rem;
  font-weight: 800;
  font-family: var(--font-serif);
  color: var(--color-accent-gold);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-label {
  font-size: 0.85rem;
  color: #AAAAAA;
  line-height: 1.5;
}

/* ==========================================================================
   2. MINIMAL LUXURY TRUST RIBBON
   ========================================================================== */
.trust-ribbon {
  background-color: var(--color-bg-alt);
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trust-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

.trust-ribbon-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.trust-item-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.trust-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.trust-item-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary);
}

.trust-item-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   3. THE ANATOMY OF A MASTERPIECE (B&B Italia & Minotti Inspired)
   ========================================================================== */
.anatomy-section {
  padding: var(--space-xl) 0;
  background-color: #FFFFFF;
}

.anatomy-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4rem;
  align-items: center;
}

.anatomy-visual-wrap {
  position: relative;
}

.anatomy-image-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  background-color: var(--color-bg-card);
}

.anatomy-main-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Interactive Pins */
.anatomy-pin {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transform: translate(50%, 50%);
}

.pin-btn {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: var(--color-accent-gold);
  border: 2px solid var(--color-accent-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all var(--transition-smooth);
}

.anatomy-pin.active .pin-btn,
.anatomy-pin:hover .pin-btn {
  background: var(--color-accent-gold);
  color: #121212;
  transform: scale(1.15);
}

.pin-pulse {
  position: absolute;
  inset: -6px;
  border: 2px solid var(--color-accent-gold);
  border-radius: 50%;
  opacity: 0.6;
  animation: pulse-pin 2s infinite;
}

@keyframes pulse-pin {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.pin-tooltip {
  position: absolute;
  bottom: 120%;
  right: 50%;
  transform: translateX(50%);
  background: rgba(18, 18, 18, 0.92);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(197, 160, 89, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  pointer-events: none;
}

.anatomy-pin:hover .pin-tooltip,
.anatomy-pin.active .pin-tooltip {
  opacity: 1;
  visibility: visible;
  bottom: 130%;
}

.anatomy-specs-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.spec-card {
  display: flex;
  gap: 1.3rem;
  padding: 1.5rem 1.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
  transition: all var(--transition-smooth);
  cursor: pointer;
}

.spec-card:hover {
  border-color: rgba(197, 160, 89, 0.6);
  transform: translateX(-4px);
}

.spec-card.active {
  background-color: #FFFFFF;
  border-color: var(--color-accent-gold);
  box-shadow: var(--shadow-card);
  border-right: 4px solid var(--color-accent-gold);
}

.spec-card-num {
  font-size: 1.4rem;
  font-weight: 800;
  font-family: var(--font-serif);
  color: var(--color-accent-gold);
  line-height: 1;
}

.spec-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.spec-card-desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0.6rem;
}

.spec-card-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent-gold);
}

/* Mobile Anatomy Interactive Features */
.anatomy-mobile-pills-strip {
  display: none;
}

.anatomy-mobile-card {
  display: none;
}

@media (max-width: 991px) {
  .anatomy-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }

  .anatomy-specs-list {
    display: none !important; /* Replaced by the focused mobile card and pills under the image */
  }

  .anatomy-mobile-pills-strip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.1rem 0 0.5rem;
    margin-top: 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .anatomy-mobile-pills-strip::-webkit-scrollbar {
    display: none;
  }

  .anatomy-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f7f6f4;
    border: 1px solid #e8e5df;
    border-radius: var(--radius-pill, 9999px);
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #444240;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s ease;
  }

  .anatomy-pill-btn .pill-num {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--color-accent-gold-hover, #a8833d);
  }

  .anatomy-pill-btn.active {
    background: #121212;
    color: #ffffff;
    border-color: #121212;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }

  .anatomy-pill-btn.active .pill-num {
    color: var(--color-accent-gold-light, #e4c88e);
  }

  /* Luxury Mobile Active Detail Card (Directly beneath photo, no disruptive jumping!) */
  .anatomy-mobile-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: linear-gradient(145deg, #ffffff 0%, #fbfaf8 100%);
    border: 1px solid rgba(197, 160, 89, 0.4);
    border-radius: var(--radius-md, 12px);
    padding: 1.4rem 1.3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    margin-top: 0.5rem;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .mob-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0ede8;
    gap: 0.5rem;
  }

  .mob-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .mob-badge-num {
    background: var(--color-primary, #121212);
    color: var(--color-accent-gold-light, #e4c88e);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    letter-spacing: 1px;
  }

  .mob-badge-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent-gold-hover, #a8833d);
  }

  .mob-card-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .mob-nav-counter {
    font-size: 0.75rem;
    font-weight: 800;
    color: #888580;
    letter-spacing: 1px;
  }

  .mob-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f2efeb;
    border: 1px solid #e2ded8;
    color: #121212;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mob-nav-btn:hover,
  .mob-nav-btn:active {
    background: #121212;
    color: #ffffff;
    border-color: #121212;
  }

  .mob-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .mob-card-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--color-primary, #121212);
    margin: 0;
    line-height: 1.4;
  }

  .mob-card-desc {
    font-size: 0.88rem;
    color: var(--color-text-muted, #66635f);
    line-height: 1.75;
    margin: 0;
  }
}

/* ==========================================================================
   4. CURATED COLLECTIONS LOOKBOOK (Poliform Asymmetric Grid)
   ========================================================================= */
.lookbook-section {
  padding: var(--space-xl) 0;
  background-color: var(--color-bg-alt);
}

.lookbook-asymmetric-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

.lookbook-card {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-bg-card);
  box-shadow: var(--shadow-card);
}

.lookbook-card--large { grid-column: span 8; height: 500px; }
.lookbook-card--tall  { grid-column: span 4; height: 500px; }
.lookbook-card--medium{ grid-column: span 4; height: 440px; }
.lookbook-card--wide  { grid-column: span 8; height: 440px; }

.lookbook-img-holder {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.lookbook-img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.lookbook-card:hover .lookbook-img-holder img {
  transform: scale(1.07);
}

.lookbook-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(18, 18, 18, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lookbook-overlay-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.2rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lookbook-style-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-accent-gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.lookbook-card-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFFFFF;
}

.lookbook-card-desc {
  font-size: 0.9rem;
  color: #DDDDDD;
  line-height: 1.6;
  max-width: 540px;
}

.lookbook-link-btn {
  color: var(--color-accent-gold);
  font-weight: 800;
  font-size: 0.92rem;
  display: inline-block;
  margin-top: 0.5rem;
}

.lookbook-link-btn:hover {
  color: #FFFFFF;
}

/* ==========================================================================
   5. LIVE MATERIAL & SWATCH ATELIER (Flexform & Roche Bobois)
   ========================================================================= */
.atelier-section {
  padding: var(--space-xl) 0;
  background-color: var(--color-bg-dark);
  color: #FFFFFF;
}

.atelier-wrapper {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.atelier-desc {
  color: #BBBBBB;
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 1rem 0 2rem;
}

.swatch-palette {
  margin-bottom: 2.5rem;
}

.swatch-palette-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-gold);
  margin-bottom: 1rem;
}

.swatch-items-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.swatch-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  color: #EEEEEE;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all var(--transition-smooth);
}

.swatch-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-accent-gold);
}

.swatch-btn.active {
  background: rgba(197, 160, 89, 0.2);
  border-color: var(--color-accent-gold);
  color: #FFFFFF;
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
}

.swatch-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.atelier-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.atelier-free-note {
  font-size: 0.82rem;
  color: #999999;
}

/* Preview Stage */
.atelier-preview-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 480px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.atelier-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease;
}

.atelier-preview-card {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem;
}

.atelier-card-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-accent-gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 0.3rem;
}

.atelier-preview-card h4 {
  font-size: 1.15rem;
  color: #FFFFFF;
  margin-bottom: 0.3rem;
}

.atelier-preview-card p {
  font-size: 0.85rem;
  color: #CCCCCC;
}

/* ==========================================================================
   6. FEATURED MASTERPIECES CATALOG
   ========================================================================= */
.masterpieces-section {
  padding: var(--space-xl) 0;
  background-color: #FFFFFF;
}

.catalog-filter-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: var(--space-lg);
}

.catalog-tab-btn {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-pill);
  transition: all var(--transition-smooth);
}

.catalog-tab-btn:hover {
  border-color: var(--color-accent-gold);
}

.catalog-tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.masterpieces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.2rem;
}

.masterpiece-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.masterpiece-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(197, 160, 89, 0.5);
}

.mp-img-box {
  position: relative;
  height: 290px;
  background-color: var(--color-bg-card);
  overflow: hidden;
}

.mp-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.masterpiece-card:hover .mp-img-box img {
  transform: scale(1.06);
}

.mp-guarantee-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(8px);
  color: var(--color-accent-gold);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(197, 160, 89, 0.4);
}

.mp-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.mp-cat-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-accent-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.3rem;
}

.mp-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.mp-specs {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.mp-action-row {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
}

.btn-mp-inquire {
  flex-grow: 1;
  text-align: center;
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-smooth);
}

.btn-mp-inquire:hover {
  background: var(--color-accent-gold);
  color: #121212;
}

.btn-mp-view {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   7. BESPOKE CUSTOMIZATION STUDIO
   ========================================================================= */
.custom-studio-section {
  padding: var(--space-xl) 0;
  background-color: var(--color-bg-alt);
}

.studio-card {
  background: var(--color-dark-gradient);
  border-radius: var(--radius-lg);
  padding: 4.5rem 3.5rem;
  box-shadow: var(--shadow-hover);
  border: 1px solid rgba(197, 160, 89, 0.25);
  text-align: center;
}

.studio-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin: 3.5rem 0;
  text-align: right;
}

.studio-step-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 2rem;
  transition: all var(--transition-smooth);
}

.studio-step-box:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-accent-gold);
  transform: translateY(-4px);
}

.step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-gold-gradient);
  color: #121212;
  font-weight: 900;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.step-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.6rem;
}

.step-desc {
  font-size: 0.9rem;
  color: #CCCCCC;
  line-height: 1.7;
}

.studio-footer-cta {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   8. FOUNDER HERITAGE & NATIONAL PRESTIGE WALL
   ========================================================================= */
.prestige-section {
  padding: var(--space-xl) 0;
  background-color: #FFFFFF;
  border-top: 1px solid var(--color-border);
}

.prestige-flex-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.founder-quote {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.8;
  color: var(--color-primary);
  border-right: 4px solid var(--color-accent-gold);
  padding-right: 1.5rem;
  margin: 1.5rem 0 2rem;
  font-style: italic;
}

.founder-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-accent-gold);
  margin-top: 0.8rem;
  font-style: normal;
}

.prestige-text {
  font-size: 0.98rem;
  color: var(--color-text-muted);
  line-height: 1.85;
}

.prestige-cards-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.honor-trophy-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.8rem 1.5rem;
  background-color: var(--color-bg-alt);
  transition: all var(--transition-smooth);
}

.honor-trophy-card:hover {
  border-color: var(--color-accent-gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-subtle);
}

.honor-trophy-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.8rem;
}

.honor-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.honor-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Certificate & Trophy Photo Gallery Grid */
.certificates-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .certificates-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .certificates-photo-grid {
    grid-template-columns: 1fr;
  }
}

.cert-photo-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.cert-photo-card:hover {
  transform: translateY(-5px);
  border-color: #D4AF37;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cert-img-box {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  margin-bottom: 0.8rem;
}

.cert-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cert-photo-card:hover .cert-thumb-img {
  transform: scale(1.06);
}

.cert-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cert-photo-card:hover .cert-overlay {
  opacity: 1;
}

.cert-zoom-icon {
  font-size: 1.4rem;
  background: rgba(212, 175, 55, 0.9);
  color: #000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.cert-title {
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0.4rem 0 0.2rem;
}

.cert-subtitle {
  color: #D4AF37;
  font-size: 0.82rem;
  margin: 0;
}

/* ==========================================================================
   9. GALLERIES & VIP SHOWROOM VISITS (RH Style)
   ========================================================================= */
.galleries-section {
  padding: var(--space-xl) 0;
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.galleries-two-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.gallery-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.gallery-img-box {
  position: relative;
  height: 280px;
}

.gallery-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-pill {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(8px);
  color: var(--color-accent-gold);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(197, 160, 89, 0.4);
}

.gallery-info {
  padding: 2.2rem;
}

.gallery-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.gallery-desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1.4rem;
}

.gallery-contact-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-text-main);
  margin-bottom: 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--color-border);
}

.gallery-contact-rows a {
  font-weight: 800;
  color: var(--color-primary);
}

.gallery-action-buttons {
  display: flex;
  gap: 1rem;
}

/* ==========================================================================
   10. DESIGNERS & ARCHITECTS CLUB
   ========================================================================= */
.designers-club-section {
  padding: var(--space-xl) 0;
  background-color: #FFFFFF;
}

.designers-club-card {
  background: var(--color-bg-dark);
  border-radius: var(--radius-md);
  padding: 3.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
  border: 1px solid rgba(197, 160, 89, 0.3);
}

.designers-badge-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.d-metric {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.8rem;
  border-radius: var(--radius-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.d-metric strong {
  font-size: 2.2rem;
  font-family: var(--font-serif);
  color: var(--color-accent-gold);
}

.d-metric span {
  font-size: 0.82rem;
  color: #CCCCCC;
}

/* ==========================================================================
   11. SEO EDITORIAL GUILD & BUYERS KNOWLEDGE HUB
   ========================================================================= */
.seo-editorial-guild-section {
  padding: 5rem 0;
  background: #111111;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  color: #FFFFFF;
}

.seo-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 992px) {
  .seo-pillars-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.seo-pillar-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2.2rem 1.8rem;
  transition: all 0.3s ease;
}

.seo-pillar-card:hover {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.pillar-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.pillar-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.6;
  margin-bottom: 0.9rem;
}

.pillar-text {
  font-size: 0.92rem;
  color: #AAAAAA;
  line-height: 1.85;
  margin-bottom: 1.2rem;
}

.pillar-text strong {
  color: var(--color-accent-gold);
}

.pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: #CCCCCC;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1rem;
}

.faq-accordion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

@media (max-width: 768px) {
  .faq-accordion-grid {
    grid-template-columns: 1fr;
  }
}

.faq-accordion-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-accordion-item[open] {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-icon {
  font-size: 1.2rem;
  color: var(--color-accent-gold);
  transition: transform 0.3s ease;
}

.faq-accordion-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem 1.5rem;
  font-size: 0.9rem;
  color: #BBBBBB;
  line-height: 1.85;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 1rem;
}

.faq-answer strong {
  color: var(--color-accent-gold);
}

/* ==========================================================================
   12. FLOATING CONCIERGE BAR (Mobile / Responsive)
   ========================================================================= */
.floating-concierge-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(197, 160, 89, 0.4);
  padding: 0.6rem 0.8rem;
  z-index: 9999;
  justify-content: space-around;
  align-items: center;
}

.concierge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
}

.concierge-icon {
  font-size: 1.2rem;
}

.concierge-call { color: var(--color-accent-gold); }
.concierge-wa { color: #25D366; }

/* ==========================================================================
   Site Footer
   ========================================================================== */
.site-footer-clean {
  background-color: #0E0E0E;
  color: #999999;
  padding: 5rem 0 2.5rem;
  font-size: 0.92rem;
  border-top: 1px solid #222222;
}

.footer-four-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3.5rem;
  margin-bottom: 4rem;
}

.footer-col-clean h4 {
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1.4rem;
}

.footer-col-clean ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col-clean a:hover {
  color: var(--color-accent-gold);
}

.footer-bottom-bar {
  border-top: 1px solid #222222;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #777777;
}

/* ==========================================================================
   WOOCOMMERCE LUXURY SHOWROOM & CATALOG MODE (Samexxon Tier)
   ========================================================================== */

/* 1. Global Reset & Hide Default Woo Elements */
.woocommerce-ordering, 
.woocommerce-result-count, 
.woocommerce-breadcrumb,
.woocommerce div.product form.cart,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce div.product::before,
.woocommerce div.product::after {
  display: none !important;
  content: none !important;
}

/* 2. Category / Archive Hero Banner */
.luxury-archive-hero {
  position: relative;
  background-color: #111111;
  background-image: linear-gradient(135deg, rgba(14,14,14,0.95), rgba(24,24,24,0.85)), url('/wp-content/uploads/2026/05/optimized_by_opt.imum_.ir__2026-05-26_09-51-17-scaled.webp');
  background-size: cover;
  background-position: center;
  padding: 4.5rem 0 3.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.archive-eyebrow {
  display: inline-block;
  color: var(--color-accent-gold);
  font-size: 0.88rem;
  letter-spacing: 2px;
  margin-bottom: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.archive-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: #FFFFFF;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.archive-subtitle {
  max-width: 680px;
  margin: 0 auto;
  color: #AAAAAA;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* 3. Products Catalog Grid */
.luxury-archive-container {
  padding: 4.5rem 0;
  background-color: var(--color-bg);
}

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: var(--color-bg-alt);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-smooth);
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--color-accent-gold);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  overflow: hidden;
}

.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  margin: 0 !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  padding: 1.2rem 1.4rem 0.5rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  transition: color 0.3s ease;
}

.woocommerce ul.products li.product:hover h2.woocommerce-loop-product__title {
  color: var(--color-accent-gold) !important;
}

/* Loop Inquire Button */
.btn-mp-inquire {
  display: block;
  margin: 0.8rem 1.4rem 1.4rem !important;
  text-align: center;
  padding: 0.85rem 1rem;
  background: var(--color-gold-gradient);
  color: #111111 !important;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(210, 168, 122, 0.25);
}

.btn-mp-inquire:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(210, 168, 122, 0.4);
  color: #000000 !important;
}

/* 4. Category Bottom SEO Editorial Card */
.category-seo-editorial {
  padding: 2rem 0 5rem;
  background-color: var(--color-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.editorial-article-card {
  background: var(--color-bg-alt);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 3rem;
}

.editorial-badge {
  display: inline-block;
  background: rgba(210, 168, 122, 0.15);
  color: var(--color-accent-gold);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.editorial-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 1rem;
}

.editorial-content-typography {
  color: #BBBBBB;
  font-size: 1.02rem;
  line-height: 2;
}

.editorial-content-typography h2,
.editorial-content-typography h3,
.editorial-content-typography h4 {
  color: #FFFFFF;
  margin: 2rem 0 1rem;
  font-weight: 800;
}

.editorial-content-typography p {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   5. SINGLE PRODUCT LUXURY SHOWROOM
   ========================================================================== */
.luxury-single-product-container {
  background-color: var(--color-bg);
  padding: 2.5rem 0 5rem;
}

/* Breadcrumb Navigation */
.product-top-nav {
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  color: #888888;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.product-top-nav a {
  color: #AAAAAA;
  transition: color 0.2s ease;
}

.product-top-nav a:hover {
  color: var(--color-accent-gold);
}

.product-top-nav .nav-sep {
  color: #555555;
}

.product-top-nav .nav-current {
  color: #FFFFFF;
  font-weight: 600;
}

/* Main Single Product Layout (2-Column Grid) */
.woocommerce div.product {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 4rem !important;
  align-items: start !important;
  position: relative !important;
}

/* Column 1: Image Gallery */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
  grid-column: 1 !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  position: relative !important;
}

.woocommerce-product-gallery__wrapper {
  margin: 0 !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Gallery Thumbnails Strip */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 1.2rem 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 90px !important;
  height: 90px !important;
  float: none !important;
  margin: 0 !important;
  cursor: pointer !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.65;
  transition: opacity 0.25s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li:hover,
.woocommerce div.product div.images .flex-control-thumbs li:has(img.flex-active) {
  border-color: var(--color-accent-gold);
}

.woocommerce div.product div.images .flex-control-thumbs li:hover img,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  opacity: 1;
}

/* Column 2: Sticky Summary Sidebar */
.woocommerce div.product div.summary {
  grid-column: 2 !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  position: sticky !important;
  top: 100px !important;
  z-index: 10;
}

.woocommerce div.product .product_title {
  font-size: 2.3rem !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.8rem !important;
  line-height: 1.3 !important;
}

.woocommerce div.product .product_meta {
  font-size: 0.92rem;
  color: #888888;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.woocommerce div.product .product_meta a {
  color: var(--color-accent-gold);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1.05rem;
  color: #CCCCCC;
  line-height: 1.9;
  margin-bottom: 1.8rem;
}

/* Guarantee Checklist Box */
.luxury-guarantee-checklist {
  background: rgba(210, 168, 122, 0.08);
  border: 1px solid rgba(210, 168, 122, 0.25);
  border-right: 4px solid var(--color-accent-gold);
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.8rem;
}

/* WhatsApp Inquiry Box */
.product-inquiry-box {
  background: var(--color-bg-alt);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.8rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.product-inquiry-box .btn-luxury-gold,
.product-inquiry-box .btn-luxury-glass {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100% !important;
  padding: 1rem 1.5rem !important;
  font-size: 1rem !important;
  text-align: center;
  box-sizing: border-box;
}

/* 6. Full-Width Description Tabs & Related Products */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .upsells.products,
.woocommerce div.product .related.products {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-top: 3rem !important;
}

/* Tabs Styling */
.woocommerce div.product .woocommerce-tabs {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 3rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  gap: 2rem !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 1rem !important;
  margin: 0 !important;
  position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: #888888 !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--color-accent-gold) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--color-accent-gold);
}

.woocommerce div.product .woocommerce-tabs .panel {
  color: #CCCCCC;
  font-size: 1.05rem;
  line-height: 2;
  background: var(--color-bg-alt);
  padding: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  display: none; /* Hide redundant tab title */
}

/* Related Products Section */
.woocommerce div.product .related.products h2,
.woocommerce div.product .upsells.products h2 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 2rem 0 2rem !important;
  text-align: center !important;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1200px) {
  .hero-inner-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-style-switcher { max-width: 600px; }
  .lookbook-card--large { grid-column: span 12; height: 420px; }
  .lookbook-card--tall  { grid-column: span 12; height: 400px; }
  .lookbook-card--medium{ grid-column: span 12; height: 380px; }
  .lookbook-card--wide  { grid-column: span 12; height: 400px; }
  .footer-four-cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
  .woocommerce div.product { grid-template-columns: 1fr 1fr !important; gap: 2.5rem !important; }
}

@media (max-width: 992px) {
  .trust-ribbon-grid { grid-template-columns: repeat(2, 1fr); }
  .anatomy-grid { grid-template-columns: 1fr; gap: 3rem; }
  .atelier-wrapper { grid-template-columns: 1fr; gap: 3rem; }
  .studio-steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .prestige-flex-grid { grid-template-columns: 1fr; }
  .galleries-two-grid { grid-template-columns: 1fr; }
  .designers-club-card { grid-template-columns: 1fr; }
  .hero-stats-ribbon { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 2.6rem; }
  .archive-title { font-size: 2.4rem; }
  
  .woocommerce div.product { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .woocommerce div.product div.summary { position: static !important; }
}

@media (max-width: 768px) {
  .top-announcement-bar { display: none; }
  .site-header { height: 74px; }
  .header-inner { height: 74px; }
  .main-nav-bar { display: none; }
  .hero-masterpiece { padding: 3rem 0 2rem; min-height: auto; }
  .hero-title { font-size: 2.1rem; }
  .hero-lead { font-size: 1rem; }
  .hero-cta-group { flex-direction: column; }
  .btn-luxury-gold, .btn-luxury-glass { width: 100%; justify-content: center; }
  .hero-guarantee-pill { flex-direction: column; align-items: flex-start; border-radius: var(--radius-sm); }
  .pill-divider { display: none; }
  .trust-ribbon-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .prestige-cards-col { grid-template-columns: 1fr; }
  .footer-four-cols { grid-template-columns: 1fr; }
  .footer-bottom-bar { flex-direction: column; gap: 0.8rem; text-align: center; }
  .floating-concierge-bar { display: flex; }
  body { padding-bottom: 56px; }
  
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
  .archive-hero-content { padding: 0 1rem; }
  .archive-title { font-size: 1.9rem; }
  .woocommerce div.product .product_title { font-size: 1.8rem !important; }
  .editorial-article-card { padding: 1.8rem; }
  .editorial-title { font-size: 1.4rem; }
  .woocommerce div.product .woocommerce-tabs .panel { padding: 1.5rem; }
}

/* ==========================================================================
   12. POLY & BARK INSPIRED LUXURY SINGLE PRODUCT STYLES
   ========================================================================== */
.pb-product-page-wrapper {
  background-color: #F9F9F8;
  padding: 2.5rem 0 6rem;
  color: #1F2937;
}

/* Top Breadcrumb & Status Bar */
.pb-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #E5E7EB;
}

.pb-breadcrumb {
  font-size: 0.9rem;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pb-breadcrumb a {
  color: #4B5563;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.pb-breadcrumb a:hover {
  color: #B45309;
}

.pb-breadcrumb .sep {
  color: #9CA3AF;
}

.pb-breadcrumb .current {
  color: #111827;
  font-weight: 700;
}

.pb-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
  padding: 0.45rem 1.1rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.pb-badge-pill .dot {
  width: 8px;
  height: 8px;
  background-color: #16A34A;
  border-radius: 50%;
  box-shadow: 0 0 8px #16A34A;
}

/* Main 2-Column Product Grid (Poly & Bark Asymmetric Split) */
.pb-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 3.5rem;
  align-items: start;
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Gallery Column */
.pb-gallery-column {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.pb-gallery-sticky {
  position: sticky;
  top: 100px;
  width: 100%;
  max-width: 100%;
}

.pb-main-image-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 560px;
  max-height: min(72vh, 600px);
  background-color: #F3F4F6;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

.pb-main-image-stage img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.25s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pb-main-image-stage:hover img {
  transform: scale(1.03);
}

.pb-stage-badges {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 2;
}

.pb-badge-chip {
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.pb-badge-chip.chip-gold {
  background: #111827;
  color: #F59E0B;
  border-color: #B45309;
}

.pb-zoom-trigger {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border: 1px solid #E5E7EB;
  color: #1F2937;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.25s ease;
}

.pb-zoom-trigger:hover {
  background: #111827;
  color: #FFFFFF;
  transform: scale(1.08);
}

/* Thumbnails Strip */
.pb-thumbnails-strip {
  display: flex;
  gap: 12px;
  margin-top: 1.2rem;
  overflow-x: auto;
  padding-bottom: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.pb-thumb-item {
  width: 100px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #E5E7EB;
  background: #F3F4F6;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.pb-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

.pb-thumb-item:hover,
.pb-thumb-item.active {
  border-color: #B45309;
  box-shadow: 0 0 12px rgba(180, 83, 9, 0.25);
}

.pb-thumb-item:hover img,
.pb-thumb-item.active img {
  opacity: 1;
}

/* Gallery Highlights */
.pb-gallery-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.8rem;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.pb-highlight-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.pb-hl-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.pb-hl-text strong {
  display: block;
  font-size: 0.85rem;
  color: #111827;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.pb-hl-text span {
  display: block;
  font-size: 0.78rem;
  color: #6B7280;
}

/* Summary Column / Buy Box */
.pb-summary-column {
  width: 100%;
}

.pb-summary-box {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.pb-cat-label {
  display: inline-block;
  color: #B45309;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 0.6rem;
}

.pb-product-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #111827;
  margin: 0 0 1.2rem;
  line-height: 1.35;
}

.pb-pricing-area {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
}

.pb-price-display {
  font-size: 1.6rem;
  font-weight: 800;
  color: #111827;
}

.pb-price-display .price-custom {
  font-size: 1.35rem;
  color: #B45309;
}

.pb-factory-tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #16A34A;
  font-weight: 600;
}

.pb-short-description {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.85;
  margin-bottom: 1.5rem;
}

.pb-divider {
  height: 1px;
  background: #E5E7EB;
  margin: 1.5rem 0;
}

/* Swatch Color Selector */
.pb-swatch-section {
  margin-bottom: 1.8rem;
}

.pb-swatch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  margin-bottom: 0.8rem;
}

.pb-swatch-title {
  color: #374151;
  font-weight: 700;
}

.pb-selected-swatch-name {
  color: #111827;
  font-weight: 800;
}

.pb-swatches-list {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.pb-swatch-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #E5E7EB;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.pb-swatch-circle:hover,
.pb-swatch-circle.active {
  transform: scale(1.18);
  border-color: #111827;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.pb-swatch-note {
  font-size: 0.84rem;
  color: #6B7280;
  margin-top: 0.4rem;
}

/* Quick Specs 2x2 Grid */
.pb-quick-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 2rem;
}

.pb-spec-card {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  padding: 0.9rem 1rem;
  border-radius: 8px;
}

.pb-spec-card .spec-label {
  display: block;
  font-size: 0.78rem;
  color: #6B7280;
  margin-bottom: 0.2rem;
}

.pb-spec-card .spec-val {
  display: block;
  font-size: 0.92rem;
  color: #111827;
  font-weight: 700;
}

/* Call to Actions */
.pb-actions-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.pb-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.1rem 1.5rem;
  background: #111827;
  color: #FFFFFF !important;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.2);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.pb-btn-primary:hover {
  background: #B45309;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(180, 83, 9, 0.35);
}

.pb-secondary-actions {
  display: flex;
  gap: 0.8rem;
}

.pb-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  color: #111827 !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.pb-btn-outline:hover {
  border-color: #111827;
  background: #F9FAFB;
}

/* Trust Services */
.pb-trust-services {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.2rem;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px dashed #D1D5DB;
  margin-bottom: 2rem;
}

.pb-trust-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: #4B5563;
}

/* Accordions (Poly & Bark Signature) */
.pb-accordions-wrap {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #E5E7EB;
}

.pb-acc-item {
  border-bottom: 1px solid #E5E7EB;
}

.pb-acc-trigger {
  width: 100%;
  padding: 1.2rem 0;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #111827;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  text-align: right;
}

.acc-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid #6B7280;
  border-bottom: 2px solid #6B7280;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.pb-acc-item.active .acc-chevron {
  transform: rotate(-135deg);
  border-color: #B45309;
}

.pb-acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: #4B5563;
  font-size: 0.95rem;
  line-height: 1.85;
}

.pb-acc-item.active .pb-acc-content {
  max-height: 500px;
  padding-bottom: 1.2rem;
}

.pb-specs-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pb-tr {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid #F3F4F6;
}

.pb-th {
  color: #6B7280;
}

.pb-td {
  color: #111827;
  font-weight: 600;
}

/* Editorial Section (Anatomy of Quality) */
.pb-editorial-section {
  margin-top: 6rem;
  padding-top: 4rem;
  border-top: 1px solid #E5E7EB;
}

.pb-editorial-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3.5rem;
}

.pb-editorial-sub {
  color: #B45309;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}

.pb-editorial-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #111827;
  margin-bottom: 0.8rem;
}

.pb-editorial-desc {
  color: #6B7280;
  font-size: 1.05rem;
  line-height: 1.8;
}

.pb-editorial-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.pb-feature-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.pb-feature-card:hover {
  transform: translateY(-5px);
  border-color: #B45309;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.pb-fc-img {
  height: 240px;
  overflow: hidden;
}

.pb-fc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pb-feature-card:hover .pb-fc-img img {
  transform: scale(1.06);
}

.pb-fc-body {
  padding: 1.8rem;
}

.pb-fc-body h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.6rem;
}

.pb-fc-body p {
  color: #6B7280;
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}

/* Related / Matching Collection Section (Refined Poly & Bark Grid) */
.pb-related-section {
  margin-top: 5rem;
  padding-top: 3.5rem;
  border-top: 1px solid #E5E7EB;
}

.pb-related-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.pb-related-titles .pb-sub {
  color: #B45309;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.pb-related-titles .pb-title {
  font-size: 1.85rem;
  font-weight: 900;
  color: #111827;
  margin: 0 0 0.35rem;
}

.pb-related-titles .pb-desc {
  font-size: 0.92rem;
  color: #6B7280;
  margin: 0;
}

.pb-view-all {
  color: #B45309;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

.pb-view-all:hover {
  background: #B45309;
  color: #FFFFFF;
  border-color: #B45309;
}

/* 4-Column Refined Card Grid */
.pb-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.pb-related-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.pb-related-card:hover {
  transform: translateY(-4px);
  border-color: #B45309;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}

.pb-rc-img-wrap {
  position: relative;
  width: 100%;
  height: 190px;
  background: #F3F4F6;
  overflow: hidden;
  display: block;
}

.pb-rc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.pb-related-card:hover .pb-rc-img-wrap img {
  transform: scale(1.06);
}

.pb-rc-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  z-index: 1;
}

.pb-rc-body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pb-rc-cat {
  font-size: 0.72rem;
  color: #B45309;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.pb-rc-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 0.7rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pb-rc-title a {
  color: #111827;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pb-rc-title a:hover {
  color: #B45309;
}

.pb-rc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #F3F4F6;
}

.pb-rc-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6B7280;
}

.pb-rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
  color: #111827;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pb-rc-btn:hover {
  background: #111827;
  color: #FFFFFF;
}

/* Breakpoints for Related Grid */
@media (max-width: 1200px) {
  .pb-related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
}

@media (max-width: 900px) {
  .pb-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .pb-rc-img-wrap {
    height: 170px;
  }
}

@media (max-width: 580px) {
  .pb-related-grid {
    grid-template-columns: 1fr;
  }
  .pb-rc-img-wrap {
    height: 220px;
  }
}


/* Lightbox Modal */
.pb-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}

.pb-lightbox-modal.is-open {
  display: flex;
}

.pb-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.pb-lightbox-dialog {
  position: relative;
  z-index: 10;
  max-width: 90vw;
  max-height: 90vh;
}

.pb-lightbox-dialog img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
}

.pb-lightbox-close {
  position: absolute;
  top: -45px;
  left: 0;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
}

/* Responsive Rules for Poly & Bark Single Product */
@media (max-width: 1100px) {
  .pb-product-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .pb-gallery-sticky {
    position: static;
  }
  .pb-main-image-stage {
    height: 460px;
  }
  .pb-editorial-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pb-main-image-stage {
    height: 340px;
  }
  .pb-product-title {
    font-size: 1.8rem;
  }
  .pb-gallery-highlights {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .pb-quick-specs {
    grid-template-columns: 1fr;
  }
  .pb-summary-box {
    padding: 1.5rem;
  }
  .pb-editorial-section,
  .pb-related-section {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
  }
}

/* ==========================================================================
   GOLDEN RATIO EDITORIAL JOURNAL & LUXURY CATALOG STYLES
   Inspired by Architectural Digest & High-End Interior Design Publications
   ========================================================================== */

.journal-catalog-wrapper {
  background-color: #161310;
  color: #E2DDD5;
  padding-bottom: 6rem;
  overflow: hidden;
}

/* Journal Masthead Header */
.journal-masthead {
  padding: 5rem 0 3.5rem;
  background: radial-gradient(circle at 50% 0%, #27221C 0%, #161310 80%);
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  margin-bottom: 4.5rem;
}

.journal-masthead-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.journal-meta-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-gold, #C5A880);
  font-weight: 700;
}

.journal-meta-strip .journal-sep {
  color: rgba(197, 168, 128, 0.4);
}

.journal-main-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.5px;
}

.journal-lead-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.journal-lead-desc p {
  font-size: 1.15rem;
  line-height: 2;
  color: #CFC9C0;
  margin: 0;
}

.journal-lead-badges {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
}

.j-badge-item {
  background: rgba(39, 34, 28, 0.8);
  border: 1px solid rgba(197, 168, 128, 0.3);
  padding: 1rem 1.4rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 110px;
}

.j-badge-item strong {
  font-size: 1.2rem;
  color: var(--color-accent-gold, #C5A880);
  font-weight: 800;
}

.j-badge-item span {
  font-size: 0.75rem;
  color: #A8A29E;
  margin-top: 4px;
}

/* Journal Chapters Navigation */
.journal-chapters-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.chapters-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #8C827A;
}

.chapters-list {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.chapters-list a {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #D6D3CD;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1.2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.chapters-list a:hover,
.chapters-list a.active {
  background: var(--color-accent-gold, #C5A880);
  color: #171411;
  border-color: var(--color-accent-gold, #C5A880);
  box-shadow: 0 4px 15px rgba(197, 168, 128, 0.25);
}

/* Exhibit 01: Masterpiece Hero Spread (Golden Ratio 61.8% / 38.2%) */
.journal-exhibit-hero {
  margin-bottom: 5.5rem;
  background: #1D1A16;
  border-radius: 18px;
  border: 1px solid rgba(197, 168, 128, 0.25);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.exhibit-hero-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  align-items: stretch;
}

.exhibit-hero-media {
  position: relative;
  background: #0E0C0A;
  overflow: hidden;
  min-height: 520px;
}

.exhibit-img-frame {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.exhibit-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.exhibit-img-frame:hover img {
  transform: scale(1.04);
}

.exhibit-stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(23, 20, 17, 0.85);
  backdrop-filter: blur(8px);
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(197, 168, 128, 0.3);
}

.exhibit-expand-hint {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

.exhibit-img-frame:hover .exhibit-expand-hint {
  background: var(--color-accent-gold, #C5A880);
  color: #171411;
}

.exhibit-hero-editorial {
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #1D1A16;
}

.exhibit-num-badge {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-accent-gold, #C5A880);
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.exhibit-cat-tag {
  font-size: 0.85rem;
  color: #9E978E;
  margin-bottom: 0.6rem;
}

.exhibit-title {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 1.2rem;
}

.exhibit-title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.exhibit-title a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.exhibit-story {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #CFC9C0;
  margin-bottom: 1.8rem;
}

.exhibit-specs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2.5rem;
}

.spec-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #E2DDD5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.exhibit-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-journal-primary {
  background: var(--color-accent-gold, #C5A880);
  color: #171411;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.btn-journal-primary:hover {
  background: #DFCAAB;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(197, 168, 128, 0.3);
}

.btn-journal-wa {
  background: rgba(37, 211, 102, 0.12);
  color: #25D366;
  border: 1px solid rgba(37, 211, 102, 0.35);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.btn-journal-wa:hover {
  background: #25D366;
  color: #FFFFFF;
}

/* Exhibits 02 & 03: Asymmetric Duo (Golden Ratio Spreads) */
.journal-duo-section {
  margin-bottom: 5.5rem;
}

.journal-duo-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.duo-card {
  background: #1D1A16;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.duo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(197, 168, 128, 0.4);
}

.duo-img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  background: #0E0C0A;
}

.duo-card-wide .duo-img-wrap {
  height: 400px;
}

.duo-card-tall .duo-img-wrap {
  height: 400px;
}

.duo-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease, opacity 0.4s ease;
}

.duo-img-wrap .hover-reveal {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.duo-card:hover .duo-img-wrap .hover-reveal {
  opacity: 1;
}

.duo-card:hover .duo-img-wrap img:not(.hover-reveal) {
  transform: scale(1.05);
}

.duo-index-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(23, 20, 17, 0.85);
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(197, 168, 128, 0.3);
}

.duo-caption {
  padding: 1.8rem 2rem;
}

.duo-cat {
  font-size: 0.8rem;
  color: #9E978E;
  display: block;
  margin-bottom: 4px;
}

.duo-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.duo-title a {
  color: #FFFFFF;
  text-decoration: none;
}

.duo-title a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.duo-excerpt {
  font-size: 0.95rem;
  color: #CFC9C0;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.duo-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.duo-link-btn {
  color: var(--color-accent-gold, #C5A880);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.duo-wa-btn {
  color: #25D366;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(37, 211, 102, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Manifesto Craftsmanship Full Bleed Interlude */
.journal-manifesto-strip {
  background: linear-gradient(135deg, #27221C 0%, #171411 100%);
  border-top: 1px solid rgba(197, 168, 128, 0.25);
  border-bottom: 1px solid rgba(197, 168, 128, 0.25);
  padding: 5.5rem 0;
  margin: 6rem 0;
  position: relative;
}

.manifesto-inner {
  text-align: center;
  position: relative;
}

.manifesto-quote-mark {
  font-size: 6rem;
  color: var(--color-accent-gold, #C5A880);
  line-height: 1;
  font-family: Georgia, serif;
  opacity: 0.35;
  margin-bottom: -2rem;
}

.manifesto-quote {
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.85;
  font-weight: 700;
  color: #FFFFFF;
  max-width: 950px;
  margin: 0 auto 2rem;
  font-style: normal;
}

.manifesto-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 3.5rem;
}

.manifesto-author strong {
  font-size: 1.05rem;
  color: var(--color-accent-gold, #C5A880);
}

.manifesto-author span {
  font-size: 0.85rem;
  color: #A8A29E;
}

.manifesto-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: right;
  margin-top: 2rem;
}

.pillar-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.25s ease;
}

.pillar-card:hover {
  background: rgba(197, 168, 128, 0.08);
  border-color: rgba(197, 168, 128, 0.3);
}

.pillar-card .p-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-accent-gold, #C5A880);
  display: block;
  margin-bottom: 0.5rem;
}

.pillar-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.pillar-card p {
  font-size: 0.85rem;
  color: #CFC9C0;
  line-height: 1.7;
  margin: 0;
}

/* Exhibits 04+: 3-Column Lookbook Grid */
.journal-lookbook-section {
  margin-bottom: 5.5rem;
}

.lookbook-section-head {
  text-align: center;
  margin-bottom: 3rem;
}

.lb-sub {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-gold, #C5A880);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.lb-title {
  font-size: 2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.journal-lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}

.lookbook-card {
  background: #1D1A16;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.lookbook-card:hover {
  transform: translateY(-6px);
  border-color: rgba(197, 168, 128, 0.4);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.lb-img-wrap {
  display: block;
  position: relative;
  height: 280px;
  overflow: hidden;
  background: #0E0C0A;
}

.lb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, opacity 0.3s ease;
}

.lb-img-wrap .hover-reveal {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.lookbook-card:hover .lb-img-wrap .hover-reveal {
  opacity: 1;
}

.lookbook-card:hover .lb-img-wrap img:not(.hover-reveal) {
  transform: scale(1.06);
}

.lb-number {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(23, 20, 17, 0.85);
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.lb-tag-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #E2DDD5;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
}

.lb-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lb-cat {
  font-size: 0.75rem;
  color: #9E978E;
  margin-bottom: 4px;
}

.lb-body .lb-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.4;
}

.lb-body .lb-title a {
  color: #FFFFFF;
  text-decoration: none;
}

.lb-body .lb-title a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.lb-excerpt {
  font-size: 0.88rem;
  color: #A8A29E;
  line-height: 1.65;
  margin-bottom: 1.4rem;
  flex: 1;
}

.lb-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lb-link {
  color: var(--color-accent-gold, #C5A880);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}

.lb-wa-btn {
  color: #25D366;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(37, 211, 102, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Journal VIP Concierge Banner */
.journal-concierge-banner {
  margin-top: 4rem;
}

.concierge-box {
  background: radial-gradient(circle at 100% 50%, #2F2820 0%, #1C1915 100%);
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: 16px;
  padding: 3rem 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  gap: 2rem;
}

.concierge-badge {
  display: inline-block;
  background: rgba(197, 168, 128, 0.15);
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.concierge-content h3 {
  font-size: 1.6rem;
  color: #FFFFFF;
  font-weight: 800;
  margin: 0 0 8px;
}

.concierge-content p {
  color: #CFC9C0;
  font-size: 0.98rem;
  margin: 0;
  max-width: 650px;
}

.concierge-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}

.btn-concierge-gold {
  background: var(--color-accent-gold, #C5A880);
  color: #171411;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.btn-concierge-gold:hover {
  background: #DFCAAB;
}

.btn-concierge-call {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.btn-concierge-call:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Responsive Rules for Golden Ratio Journal */
@media (max-width: 1100px) {
  .journal-lead-grid,
  .exhibit-hero-grid,
  .journal-duo-grid {
    grid-template-columns: 1fr;
  }
  .manifesto-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .journal-lookbook-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .concierge-box {
    flex-direction: column;
    text-align: center;
  }
  .concierge-content p {
    margin: 0 auto;
  }
  .concierge-actions {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .journal-masthead {
    padding: 3rem 0 2rem;
  }
  .journal-lead-badges {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .exhibit-hero-media {
    min-height: 320px;
  }
  .exhibit-hero-editorial {
    padding: 2rem 1.5rem;
  }
  .manifesto-pillars-grid {
    grid-template-columns: 1fr;
  }
  .journal-lookbook-grid {
    grid-template-columns: 1fr;
  }
  .concierge-box {
    padding: 2rem 1.5rem;
  }
}

/* Journal Editorial Essay & Architecture Guide */
.journal-editorial-article-section {
  margin: 5rem 0 3rem;
}

.journal-article-card {
  background: #1D1A16;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 16px;
  padding: 4rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.article-masthead {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
}

.article-badge {
  display: inline-block;
  background: rgba(197, 168, 128, 0.15);
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.article-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.article-meta-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #A8A29E;
  font-size: 0.85rem;
}

.article-body-typography {
  font-size: 1.05rem;
  line-height: 2.1;
  color: #D6D3CD;
}

.article-body-typography p {
  margin-bottom: 1.6rem;
}

.article-body-typography h3,
.article-body-typography h4 {
  color: var(--color-accent-gold, #C5A880);
  font-size: 1.35rem;
  font-weight: 800;
  margin: 2.2rem 0 1rem;
}

.article-body-typography blockquote {
  border-right: 3px solid var(--color-accent-gold, #C5A880);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .journal-article-card {
    padding: 2rem 1.5rem;
  }
  .article-title {
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   SAMEXXON LUXURY EDITORIAL GAZETTE & MAGAZINE (Golden Ratio 1:1.618)
   ========================================================================== */

/* 1. Gazette Masthead */
.gazette-masthead {
  background: radial-gradient(circle at 50% 20%, #2A241D 0%, #171411 100%);
  border-bottom: 1px solid rgba(197, 168, 128, 0.25);
  padding: 3.5rem 0 2.5rem;
  position: relative;
}

.gazette-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gazette-edition-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(197, 168, 128, 0.12);
  border: 1px solid rgba(197, 168, 128, 0.3);
  padding: 4px 14px;
  border-radius: 20px;
}

.stamp-dot {
  width: 7px;
  height: 7px;
  background: var(--color-accent-gold, #C5A880);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-accent-gold, #C5A880);
}

.stamp-text {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.gazette-breadcrumb {
  font-size: 0.85rem;
  color: #8C847B;
  display: flex;
  gap: 8px;
}

.gazette-breadcrumb a {
  color: #A89F95;
  text-decoration: none;
  transition: color 0.2s;
}

.gazette-breadcrumb a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.gazette-title-block {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 2.5rem;
}

.gazette-kicker {
  display: inline-block;
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 0.8rem;
}

.gazette-heading {
  font-size: 2.5rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.35;
  margin: 0 0 1.2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.gazette-lead {
  font-size: 1.12rem;
  color: #D1C9BF;
  line-height: 1.9;
  margin: 0 auto;
}

.gazette-stats-ribbon {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 2rem;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 0.85rem;
  color: #E6E1DA;
}

.gazette-chapters-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chapter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(197, 168, 128, 0.2);
  color: #DDD6CE;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.chapter-pill:hover,
.chapter-pill.active {
  background: var(--color-accent-gold, #C5A880);
  color: #171411 !important;
  border-color: var(--color-accent-gold, #C5A880);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.3);
}

/* 2. Main Gazette Content Layout */
.gazette-main-content {
  background: #171411;
  padding: 4rem 0 5rem;
}

/* A. Cover Story Hero Spread (61.8% / 38.2% Split) */
.gazette-cover-story {
  margin-bottom: 4.5rem;
}

.cover-story-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 3rem;
  background: #201C17;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.cover-visual-col {
  position: relative;
  min-height: 440px;
}

.cover-image-holder {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cover-image-holder:hover .cover-img {
  transform: scale(1.05);
}

.cover-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.cover-badge-top {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.badge-gold {
  background: var(--color-accent-gold, #C5A880);
  color: #171411;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 4px;
}

.badge-time {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
}

.cover-badge-bottom {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  display: flex;
  gap: 12px;
  z-index: 2;
  color: #FFFFFF;
  font-size: 0.82rem;
}

.cover-narrative-col {
  padding: 2.8rem 2.8rem 2.8rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.narrative-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.volume-num {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.82rem;
  font-weight: 800;
}

.volume-tag {
  background: rgba(255, 255, 255, 0.08);
  color: #D1C9BF;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.cover-title {
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1.45;
  margin: 0 0 1.2rem;
}

.cover-title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s;
}

.cover-title a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.cover-excerpt {
  color: #C2BBB2;
  font-size: 0.98rem;
  line-height: 1.9;
  margin-bottom: 1.5rem;
}

.cover-highlights-box {
  background: rgba(0, 0, 0, 0.3);
  border-right: 3px solid var(--color-accent-gold, #C5A880);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  margin-bottom: 1.8rem;
}

.highlights-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-accent-gold, #C5A880);
  margin: 0 0 0.6rem;
}

.highlights-list {
  margin: 0;
  padding-right: 1.2rem;
  list-style: disc;
  color: #E2DDD5;
  font-size: 0.86rem;
  line-height: 1.7;
}

.cover-cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-gazette-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-gold, #C5A880);
  color: #171411 !important;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.75rem 1.6rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.3);
}

.btn-gazette-primary:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.btn-gazette-inquire {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(197, 168, 128, 0.3);
  color: #E6E1DA !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.75rem 1.3rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.btn-gazette-inquire:hover {
  background: rgba(197, 168, 128, 0.15);
  color: var(--color-accent-gold, #C5A880) !important;
  border-color: var(--color-accent-gold, #C5A880);
}

/* B. Fibonacci Duo Spread */
.gazette-duo-wrapper {
  margin-bottom: 4.5rem;
}

.section-label-row {
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  padding-bottom: 0.8rem;
}

.label-badge {
  display: inline-block;
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 0.3rem;
}

.label-heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.gazette-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.gazette-duo-card {
  background: #201C17;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.gazette-duo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 168, 128, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

.duo-img-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  display: block;
  overflow: hidden;
}

.duo-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gazette-duo-card:hover .duo-img-wrap img {
  transform: scale(1.06);
}

.duo-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(23, 20, 17, 0.85);
  backdrop-filter: blur(4px);
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(197, 168, 128, 0.3);
}

.duo-read-time {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: 0.74rem;
  padding: 3px 8px;
  border-radius: 4px;
}

.duo-content {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.duo-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #8C847B;
  margin-bottom: 0.8rem;
}

.duo-title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 0.8rem;
}

.duo-title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s;
}

.duo-title a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.duo-excerpt {
  color: #B0A89F;
  font-size: 0.92rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.duo-read-more {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  transition: padding 0.2s;
}

.duo-read-more:hover {
  padding-right: 6px;
  color: #FFFFFF;
}

/* C. Editorial Manifesto Interlude */
.gazette-manifesto-interlude {
  background: radial-gradient(circle at 50% 50%, #2A231A 0%, #15120F 100%);
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 16px;
  padding: 3.5rem 3rem;
  margin-bottom: 4.5rem;
  text-align: center;
}

.manifesto-quote-icon {
  font-size: 4rem;
  color: var(--color-accent-gold, #C5A880);
  line-height: 1;
  display: block;
  margin-bottom: -1rem;
}

.manifesto-quote {
  font-size: 1.55rem;
  font-weight: 800;
  color: #F7F3EE;
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto 1.2rem;
  font-style: italic;
}

.manifesto-author {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.95rem;
  font-weight: 700;
  display: block;
  margin-bottom: 2.5rem;
}

.manifesto-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
}

.pillar-item strong {
  display: block;
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.pillar-item span {
  font-size: 0.82rem;
  color: #9C948A;
}

/* D. Lookbook Grid (3 Columns) */
.gazette-lookbook-wrapper {
  margin-bottom: 4rem;
}

.gazette-lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.gazette-lookbook-card {
  background: #1F1B16;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.gazette-lookbook-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 168, 128, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.lb-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  display: block;
  overflow: hidden;
}

.lb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gazette-lookbook-card:hover .lb-img-wrap img {
  transform: scale(1.05);
}

.lb-num-badge {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: rgba(23, 20, 17, 0.88);
  backdrop-filter: blur(4px);
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(197, 168, 128, 0.3);
}

.lb-time-badge {
  position: absolute;
  bottom: 0.8rem;
  left: 0.8rem;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.lb-content {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.lb-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #8C847B;
  margin-bottom: 0.6rem;
}

.lb-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 0.6rem;
}

.lb-title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s;
}

.lb-title a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.lb-excerpt {
  color: #A8A096;
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
  flex-grow: 1;
}

.lb-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.8rem;
}

.lb-link {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.lb-author {
  font-size: 0.75rem;
  color: #787066;
}

/* 3. Luxury Pagination */
.gazette-pagination-wrap {
  text-align: center;
  margin: 3rem 0 1rem;
}

.gazette-pagination-wrap ul.page-numbers {
  display: inline-flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gazette-pagination-wrap .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: #201C17;
  border: 1px solid rgba(197, 168, 128, 0.25);
  color: #DDD6CE;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.gazette-pagination-wrap .page-numbers.current,
.gazette-pagination-wrap a.page-numbers:hover {
  background: var(--color-accent-gold, #C5A880);
  color: #171411 !important;
  border-color: var(--color-accent-gold, #C5A880);
  transform: translateY(-1px);
}

/* 4. SEO Authority Section */
.gazette-seo-authority-section {
  background: #12100E;
  padding: 4rem 0;
  border-top: 1px solid rgba(197, 168, 128, 0.2);
}

.seo-guide-card {
  background: #1C1814;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 16px;
  padding: 3.5rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.guide-badge {
  display: inline-block;
  background: rgba(197, 168, 128, 0.15);
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 0.8rem;
}

.guide-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.guide-column h3 {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--color-accent-gold, #C5A880);
  margin: 0 0 1rem;
}

.guide-column p {
  color: #C2BBB2;
  font-size: 0.96rem;
  line-height: 1.95;
  margin-bottom: 1rem;
}

.guide-column a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.guide-column a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.guide-faq-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
}

.faq-main-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 1.5rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 1.4rem;
}

.faq-item h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: #F2ECE4;
  margin: 0 0 0.6rem;
}

.faq-item p {
  font-size: 0.88rem;
  color: #A8A096;
  line-height: 1.8;
  margin: 0;
}

/* 5. Concierge Banner */
.gazette-concierge-banner {
  background: #171411;
  padding: 1rem 0 5rem;
}

.concierge-box {
  background: linear-gradient(135deg, #2A231A 0%, #1B1713 100%);
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: 16px;
  padding: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.concierge-kicker {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.82rem;
  font-weight: 800;
  display: block;
  margin-bottom: 0.4rem;
}

.concierge-heading {
  font-size: 1.6rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 0.6rem;
}

.concierge-text p {
  color: #C2BBB2;
  font-size: 0.95rem;
  margin: 0;
}

.concierge-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-concierge-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-gold, #C5A880);
  color: #171411 !important;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.85rem 1.8rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(197, 168, 128, 0.35);
}

.btn-concierge-gold:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
}

.btn-concierge-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.btn-concierge-call:hover {
  border-color: var(--color-accent-gold, #C5A880);
  color: var(--color-accent-gold, #C5A880) !important;
}

/* ==========================================================================
   SINGLE ARTICLE TEMPLATE (Robb Report / Architectural Digest Standard)
   ========================================================================== */
.gazette-single-article {
  background: #171411;
  color: #E2DDD5;
  min-height: 100vh;
}

.article-container-narrow {
  max-width: 820px;
  margin: 0 auto;
}

.article-container-wide {
  max-width: 1040px;
  margin: 0 auto;
}

.article-container-reading {
  max-width: 780px;
  margin: 0 auto;
}

/* Article Masthead */
.article-masthead {
  padding: 3.5rem 0 2rem;
}

.article-breadcrumb {
  font-size: 0.85rem;
  color: #8C847B;
  display: flex;
  gap: 8px;
  margin-bottom: 1.2rem;
}

.article-breadcrumb a {
  color: #A89F95;
  text-decoration: none;
}

.article-breadcrumb a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.article-edition-stamp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.stamp-pill {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.stamp-time {
  background: rgba(255, 255, 255, 0.08);
  color: #DDD6CE;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.article-headline {
  font-size: 2.6rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.35;
  margin: 0 0 1.2rem;
}

.article-subheading {
  font-size: 1.2rem;
  color: #C2BBB2;
  line-height: 1.85;
  margin: 0 0 2rem;
}

.article-meta-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.meta-author-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar-gold {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(197, 168, 128, 0.2);
  border: 1px solid var(--color-accent-gold, #C5A880);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.author-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
}

.author-role {
  display: block;
  font-size: 0.78rem;
  color: #8C847B;
}

.meta-dates-wrap {
  display: flex;
  gap: 1.5rem;
  font-size: 0.82rem;
}

.meta-date-item {
  display: flex;
  flex-direction: column;
}

.date-label {
  color: #787066;
  font-size: 0.74rem;
}

.date-val {
  color: #DDD6CE;
  font-weight: 700;
}

.meta-date-updated .date-val {
  color: var(--color-accent-gold, #C5A880);
}

/* Article Featured Hero Media */
.article-hero-media {
  margin: 1.5rem 0 3rem;
}

.hero-media-frame {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.hero-main-img {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  display: block;
}

.hero-media-caption {
  background: #201C17;
  padding: 0.8rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8C847B;
  font-size: 0.82rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.caption-icon {
  color: var(--color-accent-gold, #C5A880);
}

/* Executive Summary Box (Google Featured Snippet Authority) */
.article-executive-summary {
  background: #201C17;
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: 12px;
  padding: 1.8rem 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.summary-badge {
  display: inline-block;
  background: var(--color-accent-gold, #C5A880);
  color: #171411;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 0.4rem;
}

.summary-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 1rem;
}

.summary-list {
  margin: 0;
  padding-right: 1.2rem;
  list-style: disc;
  color: #D6D0C7;
  font-size: 0.95rem;
  line-height: 1.9;
}

/* Table of Contents (TOC) */
.article-toc-box {
  background: #1C1814;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1.5rem 1.8rem;
  margin-bottom: 3rem;
}

.toc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.toc-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-accent-gold, #C5A880);
  margin: 0;
}

.toc-ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toc-li.toc-sub {
  padding-right: 1.2rem;
}

.toc-anchor {
  color: #DDD6CE;
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.2s;
  display: block;
}

.toc-anchor:hover {
  color: var(--color-accent-gold, #C5A880);
}

.toc-num {
  color: var(--color-accent-gold, #C5A880);
  font-weight: 700;
}

/* Core Article Content Flow Typography */
.article-content-flow {
  font-size: 1.12rem;
  line-height: 2.2;
  color: #D6D0C7;
  margin-bottom: 3.5rem;
}

.article-content-flow p {
  margin-bottom: 1.8rem;
}

.article-content-flow h2 {
  font-size: 1.65rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 3rem 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-content-flow h2::before {
  content: '❖';
  color: var(--color-accent-gold, #C5A880);
  font-size: 1.1rem;
}

.article-content-flow h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-accent-gold, #C5A880);
  margin: 2.2rem 0 1rem;
}

.article-content-flow ul,
.article-content-flow ol {
  margin: 1.5rem 0;
  padding-right: 1.5rem;
  line-height: 2;
}

.article-content-flow blockquote {
  border-right: 4px solid var(--color-accent-gold, #C5A880);
  background: #201C17;
  border-radius: 0 10px 10px 0;
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
  font-size: 1.18rem;
  font-style: italic;
  color: #F7F3EE;
  line-height: 1.9;
}

.article-content-flow img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.article-content-flow table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: #1C1814;
  border-radius: 8px;
  overflow: hidden;
}

.article-content-flow th,
.article-content-flow td {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
}

.article-content-flow th {
  background: #2A231A;
  color: var(--color-accent-gold, #C5A880);
  font-weight: 800;
}

/* In-Article Consultation Callout Box */
.article-consultation-callout {
  background: linear-gradient(135deg, #282119 0%, #1A1612 100%);
  border: 1px solid var(--color-accent-gold, #C5A880);
  border-radius: 14px;
  padding: 2.5rem;
  margin: 3.5rem 0;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.callout-badge {
  display: inline-block;
  background: var(--color-accent-gold, #C5A880);
  color: #171411;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}

.callout-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 0.8rem;
}

.callout-desc {
  font-size: 0.98rem;
  color: #C2BBB2;
  line-height: 1.85;
  margin-bottom: 1.8rem;
}

.callout-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-callout-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-gold, #C5A880);
  color: #171411 !important;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.8rem 1.8rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.3);
}

.btn-callout-gold:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
}

.btn-callout-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.btn-callout-phone:hover {
  border-color: var(--color-accent-gold, #C5A880);
  color: var(--color-accent-gold, #C5A880) !important;
}

/* Tags Bar */
.article-tags-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 3rem;
}

.tags-label {
  font-size: 0.88rem;
  color: #8C847B;
  font-weight: 700;
}

.tags-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #DDD6CE;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s;
}

.tag-pill:hover {
  background: var(--color-accent-gold, #C5A880);
  color: #171411;
  border-color: var(--color-accent-gold, #C5A880);
}

/* Author Bio Card */
.article-author-card {
  background: #1C1814;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 12px;
  padding: 2.2rem;
  display: flex;
  gap: 1.8rem;
  align-items: flex-start;
  margin-bottom: 4rem;
}

.author-avatar-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(197, 168, 128, 0.2);
  border: 2px solid var(--color-accent-gold, #C5A880);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}

.bio-subtitle {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.78rem;
  font-weight: 800;
  display: block;
  margin-bottom: 0.3rem;
}

.bio-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 0.8rem;
}

.bio-text {
  color: #B0A89F;
  font-size: 0.92rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.bio-link {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.bio-link:hover {
  text-decoration: underline;
}

/* Related Articles Section */
.article-related-section {
  background: #12100E;
  padding: 4rem 0 5rem;
  border-top: 1px solid rgba(197, 168, 128, 0.2);
}

.related-header {
  margin-bottom: 2rem;
}

.related-badge {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.4rem;
}

.related-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.related-card {
  background: #1C1814;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 168, 128, 0.35);
}

.related-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  display: block;
}

.related-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-time {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  background: rgba(0, 0, 0, 0.75);
  color: #FFF;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.related-content {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.related-cat {
  font-size: 0.78rem;
  color: var(--color-accent-gold, #C5A880);
  margin-bottom: 0.5rem;
}

.related-card-title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 1rem;
  flex-grow: 1;
}

.related-card-title a {
  color: #FFFFFF;
  text-decoration: none;
}

.related-card-title a:hover {
  color: var(--color-accent-gold, #C5A880);
}

.related-read-more {
  color: var(--color-accent-gold, #C5A880);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .cover-story-grid {
    grid-template-columns: 1fr;
  }
  .cover-visual-col {
    min-height: 320px;
  }
  .cover-narrative-col {
    padding: 2rem;
  }
  .gazette-duo-grid {
    grid-template-columns: 1fr;
  }
  .manifesto-pillars {
    grid-template-columns: 1fr 1fr;
  }
  .gazette-lookbook-grid {
    grid-template-columns: 1fr 1fr;
  }
  .guide-body-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .related-articles-grid {
    grid-template-columns: 1fr;
  }
  .article-headline {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .gazette-lookbook-grid {
    grid-template-columns: 1fr;
  }
  .manifesto-pillars {
    grid-template-columns: 1fr;
  }
  .seo-guide-card {
    padding: 2rem 1.5rem;
  }
  .concierge-box {
    padding: 2rem 1.5rem;
  }
  .article-author-card {
    flex-direction: column;
    padding: 1.5rem;
  }
  .gazette-heading {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   ULTRA-LUXURY EDITORIAL JOURNAL SINGLE PRODUCT SYSTEM (GOLDEN RATIO 1:1.618)
   Inspired by Architectural Digest, Minotti, Poliform, Cassina, B&B Italia
   ========================================================================== */

.samexxon-woocommerce-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}

.samexxon-journal-product-page {
  background-color: var(--color-bg-body, #ffffff);
  color: var(--color-text-main, #242220);
  padding-bottom: 5rem;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}

/* 1. Masthead & Issue Bar */
.journal-masthead {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--color-border-subtle, #f0ede8);
  background: linear-gradient(180deg, rgba(249, 248, 246, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
  width: 100%;
  max-width: 100%;
}

.journal-issue-tagline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted, #66635f);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.issue-pill {
  background: var(--color-primary, #121212);
  color: #ffffff;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-xs, 3px);
  letter-spacing: 1px;
  font-size: 0.75rem;
}

.atelier-tag {
  color: var(--color-accent-gold, #c5a059);
}

.sep-dot {
  color: var(--color-border, #e8e5df);
}

.piece-num {
  letter-spacing: 0.5px;
}

.journal-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-light, #94908a);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.journal-breadcrumb a:hover {
  color: var(--color-accent-gold, #c5a059);
}

.journal-breadcrumb .current {
  color: var(--color-text-main, #242220);
  font-weight: 600;
}

.journal-title {
  font-size: 2.85rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-primary, #121212);
  letter-spacing: -0.03em;
  margin-bottom: 0.8rem;
  word-break: break-word;
}

.journal-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted, #66635f);
  max-width: 850px;
  line-height: 1.8;
  margin-bottom: 1.8rem;
}

.journal-curator-pills {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.curator-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg-alt, #f9f8f6);
  border: 1px solid var(--color-border, #e8e5df);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill, 9999px);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-main, #242220);
}

.curator-pill .pill-icon {
  font-size: 1rem;
}

/* 2. Journal Spreads Foundation */
.journal-spread {
  padding: 4.5rem 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.journal-spread-hero {
  padding-top: 3.5rem;
}

/* Golden Ratio Grid Hero: 1.618fr : 1fr with minmax protection */
.golden-ratio-grid-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

/* Visual Stage */
.hero-visual-stage {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hero-image-frame {
  position: relative;
  background: #f7f6f4;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.07);
  border: 1px solid var(--color-border-subtle, #f0ede8);
  aspect-ratio: 16 / 11;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: min(72vh, 680px);
}

.hero-image-frame img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.hero-image-frame:hover img {
  transform: scale(1.03);
}

/* Stage Overlay Badges */
.stage-overlay-badge {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.stage-badge-top {
  top: 1.5rem;
  right: 1.5rem;
}

.stage-badge-bottom {
  bottom: 1.5rem;
  right: 1.5rem;
}

.stamp-gold {
  display: inline-block;
  background: rgba(18, 18, 18, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-accent-gold-light, #e4c88e);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-xs, 3px);
  border: 1px solid rgba(197, 160, 89, 0.35);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.stamp-glass {
  display: inline-block;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-primary, #121212);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-xs, 3px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.stage-zoom-btn {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-primary, #121212);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--color-border, #e8e5df);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.stage-zoom-btn:hover {
  background: var(--color-primary, #121212);
  color: #ffffff;
  border-color: var(--color-primary, #121212);
}

/* Thumbs Nav Strip (Horizontally Scrollable Filmstrip without layout blowout) */
.journal-hero-thumbs-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.thumbs-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted, #66635f);
  letter-spacing: 0.5px;
}

.thumbs-list-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-gold, #c5a059) #f0ede8;
  -webkit-overflow-scrolling: touch;
}

.thumbs-list-row::-webkit-scrollbar {
  height: 6px;
}

.thumbs-list-row::-webkit-scrollbar-track {
  background: #f0ede8;
  border-radius: 9999px;
}

.thumbs-list-row::-webkit-scrollbar-thumb {
  background: var(--color-accent-gold, #c5a059);
  border-radius: 9999px;
}

.j-thumb-btn {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  border: 2px solid transparent;
  background: #f2efeb;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.j-thumb-btn img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.j-thumb-num {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(18, 18, 18, 0.8);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
}

.j-thumb-btn:hover {
  border-color: var(--color-text-light, #94908a);
  transform: translateY(-2px);
}

.j-thumb-btn.active {
  border-color: var(--color-accent-gold, #c5a059);
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35);
}

/* Narrative & Atelier Box */
.hero-narrative-box {
  background: var(--color-bg-alt, #f9f8f6);
  border: 1px solid var(--color-border, #e8e5df);
  border-radius: var(--radius-md, 12px);
  padding: 2.8rem 2.4rem;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.narrative-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.edition-gold {
  color: var(--color-accent-gold, #c5a059);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
}

.factory-direct-stamp {
  background: #e9f5ed;
  color: #1b6338;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid rgba(27, 99, 56, 0.2);
}

.narrative-heading {
  font-size: 1.65rem;
  font-weight: 900;
  color: var(--color-primary, #121212);
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
}

.narrative-text {
  font-size: 1rem;
  color: var(--color-text-muted, #66635f);
  line-height: 1.85;
  word-break: break-word;
}

.narrative-text .narrative-extra {
  margin-top: 0.85rem;
  font-size: 0.95rem;
}

.narrative-divider {
  height: 1px;
  background: var(--color-border, #e8e5df);
  margin: 1.8rem 0;
}

/* Swatch Box */
.journal-swatch-box {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.8rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.swatch-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  flex-wrap: wrap;
}

.swatch-title {
  color: var(--color-text-muted, #66635f);
}

.swatch-active-name {
  color: var(--color-primary, #121212);
  font-weight: 800;
}

.swatches-grid {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.j-swatch-item {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.j-swatch-item:hover {
  transform: scale(1.15);
}

.j-swatch-item.active {
  box-shadow: 0 0 0 2px var(--color-accent-gold, #c5a059), 0 4px 12px rgba(197, 160, 89, 0.4);
  transform: scale(1.1);
}

.swatch-hint {
  font-size: 0.78rem;
  color: var(--color-text-light, #94908a);
  line-height: 1.6;
}

/* Spec Metrics Grid */
.journal-spec-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 100%;
}

.metric-item {
  background: #ffffff;
  border: 1px solid var(--color-border-subtle, #f0ede8);
  border-radius: var(--radius-sm, 6px);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.metric-label {
  font-size: 0.75rem;
  color: var(--color-text-light, #94908a);
  font-weight: 600;
}

.metric-val {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-primary, #121212);
  word-break: break-word;
}

/* CTA Actions */
.journal-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
}

.btn-journal-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: var(--color-gold-gradient, linear-gradient(135deg, #dfb76c 0%, #c5a059 50%, #ad863b 100%)) !important;
  color: #121212 !important;
  font-size: 0.98rem;
  font-weight: 800;
  padding: 1.15rem 1.8rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 24px rgba(197, 160, 89, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  text-align: center;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

.btn-journal-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}

.btn-journal-primary:hover::before {
  left: 150%;
}

.btn-journal-primary:hover {
  background: linear-gradient(135deg, #e8c987 0%, #d6b46e 50%, #bc9549 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(197, 160, 89, 0.5);
  color: #121212 !important;
}

.btn-journal-primary .btn-icon-gold {
  display: inline-flex;
  align-items: center;
  color: #121212;
}

.btn-journal-primary .btn-arrow-icon {
  transition: transform 0.25s ease;
  color: #121212;
}

.btn-journal-primary:hover .btn-arrow-icon {
  transform: translateX(-4px);
}

.btn-journal-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-primary, #121212);
  border: 1px solid var(--color-border, #e8e5df);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm, 8px);
  transition: all 0.25s ease;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.btn-journal-outline:hover {
  background: #ffffff;
  border-color: var(--color-accent-gold, #c5a059);
  color: var(--color-accent-gold-hover, #a8833d);
}

/* 3. Spread 02: Fibonacci Asymmetric Section */
.section-intro-journal {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem;
  padding: 0 1rem;
}

.intro-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-accent-gold, #c5a059);
  letter-spacing: 2.5px;
  margin-bottom: 0.6rem;
}

.intro-heading {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-primary, #121212);
  line-height: 1.3;
  margin-bottom: 0.8rem;
}

.intro-lead {
  font-size: 1.05rem;
  color: var(--color-text-muted, #66635f);
  line-height: 1.8;
}

.fibonacci-asymmetric-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.fibo-card {
  background: var(--color-bg-alt, #f9f8f6);
  border: 1px solid var(--color-border-subtle, #f0ede8);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fibo-img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f0ede8;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fibo-img-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.fibo-card:hover .fibo-img-wrap img {
  transform: scale(1.04);
}

.fibo-stamp {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-xs, 3px);
  border: 1px solid rgba(197, 160, 89, 0.4);
}

.fibo-caption {
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

.fibo-caption h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary, #121212);
}

.fibo-caption p {
  font-size: 0.95rem;
  color: var(--color-text-muted, #66635f);
  line-height: 1.8;
}

/* 4. Spread 03: Full-Bleed Atmosphere Section */
.atmosphere-frame {
  position: relative;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  min-height: 520px;
  max-height: 650px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
}

.atmosphere-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.atmosphere-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(18,18,18,0.15) 0%, rgba(18,18,18,0.85) 100%);
  z-index: 2;
}

.atmosphere-floating-quote {
  position: relative;
  z-index: 3;
  padding: 3.5rem;
  max-width: 820px;
  color: #ffffff;
}

.quote-tag {
  display: inline-block;
  color: var(--color-accent-gold-light, #e4c88e);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.atmosphere-floating-quote blockquote {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-family: var(--font-main);
}

.atmosphere-floating-quote cite {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  font-style: normal;
}

.atmosphere-stamp {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 3;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-accent-gold-light, #e4c88e);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-xs, 3px);
  border: 1px solid rgba(197, 160, 89, 0.4);
}

/* 5. Spread 04: Spatial Blueprint Grid */
.blueprint-box-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.blueprint-visual-col,
.blueprint-specs-col {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.blueprint-card {
  background: #ffffff;
  border: 1px solid var(--color-border, #e8e5df);
  border-radius: var(--radius-md, 12px);
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.bp-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-accent-gold, #c5a059);
  letter-spacing: 1.5px;
  margin-bottom: 0.8rem;
}

.bp-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--color-primary, #121212);
  margin-bottom: 0.6rem;
}

.bp-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted, #66635f);
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

.bp-dimensions-table {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
}

.bp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  background: var(--color-bg-alt, #f9f8f6);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.88rem;
  gap: 0.5rem;
}

.bp-row.highlight {
  background: #fdfaf3;
  border: 1px solid rgba(197, 160, 89, 0.3);
}

.bp-row.highlight .bp-val {
  color: var(--color-accent-gold-hover, #a8833d);
}

.bp-label {
  color: var(--color-text-muted, #66635f);
}

.bp-val {
  color: var(--color-primary, #121212);
  font-weight: 700;
  text-align: left;
}

/* Editorial Accordions */
.editorial-accordion-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.e-acc-item {
  background: #ffffff;
  border: 1px solid var(--color-border, #e8e5df);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.e-acc-item.active {
  border-color: var(--color-accent-gold, #c5a059);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.e-acc-head {
  width: 100%;
  text-align: right;
  padding: 1.3rem 1.6rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary, #121212);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border: none;
  gap: 0.5rem;
}

.e-chevron {
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--color-text-main, #242220);
  border-bottom: 2px solid var(--color-text-main, #242220);
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.e-acc-item.active .e-chevron {
  transform: rotate(135deg);
  border-color: var(--color-accent-gold, #c5a059);
}

.e-acc-body {
  display: none;
  padding: 0 1.6rem 1.4rem;
  font-size: 0.95rem;
  color: var(--color-text-muted, #66635f);
  line-height: 1.85;
  word-break: break-word;
}

.e-acc-item.active .e-acc-body {
  display: block;
}

/* 6. Spread 05: Additional Exhibits Mosaic */
.journal-gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 100%;
}

.mosaic-item {
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: #f7f6f4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mosaic-img-wrap {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mosaic-img-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.mosaic-item:hover .mosaic-img-wrap img {
  transform: scale(1.04);
}

.mosaic-stamp {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-xs, 3px);
  border: 1px solid rgba(197, 160, 89, 0.35);
}

/* 7. Concierge Card */
.concierge-editorial-card {
  background: var(--color-primary, #121212);
  border-radius: var(--radius-lg, 20px);
  padding: 4.5rem 3.5rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(197, 160, 89, 0.3);
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.concierge-content {
  max-width: 780px;
  margin: 0 auto;
}

.concierge-tag {
  display: inline-block;
  color: var(--color-accent-gold-light, #e4c88e);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.concierge-title {
  font-size: 2.3rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.2rem;
  line-height: 1.3;
}

.concierge-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.concierge-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.btn-journal-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-gold-gradient, linear-gradient(135deg, #dfb76c 0%, #c5a059 50%, #9e7b35 100%));
  color: #121212;
  font-weight: 800;
  font-size: 0.98rem;
  padding: 1.1rem 2.2rem;
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 8px 30px rgba(197, 160, 89, 0.35);
  transition: all 0.3s ease;
}

.btn-journal-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(197, 160, 89, 0.5);
  color: #121212;
}

.btn-journal-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 1.1rem 2rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.btn-journal-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
}

/* 8. Related Pieces */
.related-editorial-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.8rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.related-editorial-head .sub {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-accent-gold, #c5a059);
  letter-spacing: 2px;
  display: block;
  margin-bottom: 0.4rem;
}

.related-editorial-head .title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary, #121212);
}

.view-catalog-link {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary, #121212);
  border-bottom: 1px solid var(--color-primary, #121212);
  padding-bottom: 2px;
}

.view-catalog-link:hover {
  color: var(--color-accent-gold, #c5a059);
  border-color: var(--color-accent-gold, #c5a059);
}

.related-journal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
  width: 100%;
  max-width: 100%;
}

.journal-rel-card {
  background: #ffffff;
  border: 1px solid var(--color-border-subtle, #f0ede8);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.journal-rel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.rel-img-link {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f7f6f4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.rel-img-link img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.journal-rel-card:hover .rel-img-link img {
  transform: scale(1.05);
}

.rel-badge {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: rgba(18, 18, 18, 0.8);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}

.rel-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.rel-cat {
  font-size: 0.75rem;
  color: var(--color-accent-gold, #c5a059);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.rel-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary, #121212);
  line-height: 1.4;
  margin-bottom: 1rem;
}

.rel-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border-subtle, #f0ede8);
  font-size: 0.8rem;
}

.rel-tag {
  color: var(--color-text-light, #94908a);
  font-weight: 600;
}

.rel-more {
  color: var(--color-primary, #121212);
  font-weight: 800;
}

.journal-rel-card:hover .rel-more {
  color: var(--color-accent-gold, #c5a059);
}

/* 9. Sticky Concierge Dock */
.journal-sticky-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(18, 17, 16, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(197, 160, 89, 0.35);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  padding: 0.85rem 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.journal-sticky-dock.is-visible {
  transform: translateY(0);
}

.sticky-dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.dock-product-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dock-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xs, 4px);
  object-fit: cover;
  border: 1px solid rgba(197, 160, 89, 0.3);
  flex-shrink: 0;
}

.dock-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dock-title {
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
}

.dock-sub {
  font-size: 0.78rem;
  color: var(--color-accent-gold-light, #e4c88e);
}

.dock-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.dock-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--color-gold-gradient, linear-gradient(135deg, #dfb76c 0%, #c5a059 100%));
  color: #121212 !important;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-pill, 9999px);
  box-shadow: 0 4px 18px rgba(197, 160, 89, 0.4);
  transition: all 0.3s ease;
  text-decoration: none !important;
  position: relative;
}

.dock-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(197, 160, 89, 0.6);
  background: linear-gradient(135deg, #e8c987 0%, #d6b46e 100%);
  color: #121212 !important;
}

.dock-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #121212;
  display: inline-block;
  animation: dockDotPulse 2s infinite ease-in-out;
}

@keyframes dockDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

.dock-btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.75rem 1.3rem;
  border-radius: var(--radius-pill, 9999px);
  transition: all 0.25s ease;
  text-decoration: none !important;
}

.dock-btn-phone:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(197, 160, 89, 0.6);
  color: #ffffff !important;
}

/* 10. Lightbox Modal */
.journal-lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
}

.journal-lightbox-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.journal-lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 18, 18, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.journal-lightbox-dialog {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journal-lightbox-dialog img {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 24px 72px rgba(0,0,0,0.5);
}

.journal-lightbox-close {
  position: absolute;
  top: -45px;
  left: 0;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .golden-ratio-grid-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .fibonacci-asymmetric-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .blueprint-box-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .related-journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .journal-title {
    font-size: 2.1rem;
  }
  .hero-image-frame {
    aspect-ratio: 4 / 3;
    max-height: 480px;
  }
  .atmosphere-frame {
    min-height: 380px;
    max-height: 500px;
  }
  .atmosphere-floating-quote {
    padding: 2rem 1.5rem;
  }
  .atmosphere-floating-quote blockquote {
    font-size: 1.25rem;
  }
  .concierge-editorial-card {
    padding: 3rem 1.5rem;
  }
  .concierge-title {
    font-size: 1.8rem;
  }
  .related-journal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sticky-dock-inner {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
  .dock-actions {
    justify-content: space-between;
  }
  .dock-btn-whatsapp, .dock-btn-phone {
    flex: 1;
    justify-content: center;
  }
}

/* Distributed Editorial Narrative Enhancements */
.chapter-anatomy-narrative {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--color-text-muted, #66635f);
}

.chapter-anatomy-narrative p {
  margin-bottom: 0.5rem;
}

.atmosphere-extra-narrative {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  max-width: 750px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1rem;
}

/* ==========================================================================
   13. SHOWROOMS NAVIGATION HUB & MAP EMBEDS (Homepage & Contact Page)
   ========================================================================== */
.luxury-showroom-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--color-border, #E8E5DF);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.luxury-showroom-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
  border-color: rgba(197, 160, 89, 0.4);
}

/* Full Width Showroom Photo at Top of Card */
.luxury-showroom-card .gallery-img-box,
.contact-showroom-card .c-card-media-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #181716;
  border-bottom: 1px solid var(--color-border, #E8E5DF);
}

.luxury-showroom-card .gallery-img-box img,
.contact-showroom-card .c-showroom-top-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.luxury-showroom-card:hover .gallery-img-box img,
.contact-showroom-card:hover .c-showroom-top-img {
  transform: scale(1.04);
}

/* Map Embed Positioned Above Routing Buttons */
.showroom-map-embed-wrapper,
.c-card-map-embed {
  position: relative;
  width: 100%;
  height: 220px;
  background: #EFECE6;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ECE7DE;
  margin: 1.2rem 0 1.2rem 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.showroom-map-embed-wrapper iframe,
.c-card-map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Phone Numbers with 021 Area Code strictly on the Left */
.phone-number-ltr {
  direction: ltr !important;
  display: inline-block !important;
  unicode-bidi: isolate !important;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Navigation Hub & Pure Text Routing Buttons */
.showroom-navigation-hub,
.c-routing-hub {
  margin: 0 0 1.8rem 0;
  padding: 1.2rem;
  background: #F9F8F5;
  border: 1px solid #ECE7DE;
  border-radius: 12px;
}

.hub-label,
.c-routing-title strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #222222;
  margin-bottom: 0.85rem;
}

.routing-buttons-grid,
.c-routing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.routing-btn,
.c-route-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  line-height: 1.2;
}

/* App-Specific Styling (Clean Badges) */
.btn-neshan,
.c-route-btn.c-neshan {
  background: #FFFFFF;
  color: #0284C7;
  border: 1px solid #BAE6FD;
}
.btn-neshan:hover,
.c-route-btn.c-neshan:hover {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.25);
}

.btn-google-maps,
.c-route-btn.c-google {
  background: #FFFFFF;
  color: #EA580C;
  border: 1px solid #FED7AA;
}
.btn-google-maps:hover,
.c-route-btn.c-google:hover {
  background: #EA580C;
  color: #FFFFFF;
  border-color: #EA580C;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.25);
}

.btn-balad,
.c-route-btn.c-balad {
  background: #FFFFFF;
  color: #0D9488;
  border: 1px solid #99F6E4;
}
.btn-balad:hover,
.c-route-btn.c-balad:hover {
  background: #0D9488;
  color: #FFFFFF;
  border-color: #0D9488;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.25);
}

.btn-waze,
.c-route-btn.c-waze {
  background: #FFFFFF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}
.btn-waze:hover,
.c-route-btn.c-waze:hover {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.btn-wa-location {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #15803D !important;
  border-color: #BBF7D0 !important;
}
.btn-wa-location:hover {
  background: #15803D !important;
  color: #FFFFFF !important;
  border-color: #15803D !important;
}

/* ==========================================================================
   14. LUXURY CONTACT & SHOWROOMS PAGE TEMPLATE (page-contact.php)
   ========================================================================== */
.luxury-contact-page-wrapper {
  background-color: #F8F6F2;
  color: #222222;
  font-family: var(--font-main, 'Vazirmatn', sans-serif);
}

/* Hero Masthead */
.contact-hero-masthead {
  padding: 5rem 0 3.5rem 0;
  background: linear-gradient(180deg, #181716 0%, #23201D 100%);
  color: #FFFFFF;
  border-bottom: 2px solid var(--color-accent-gold, #C5A059);
}

.contact-hero-inner {
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.contact-meta-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-accent-gold, #C5A059);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.contact-page-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.4;
  margin-bottom: 1.2rem;
}

.contact-page-lead {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #CCCCCC;
  margin-bottom: 2.5rem;
}

/* Highlights Ribbon */
.contact-highlights-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 14px;
  padding: 1.2rem;
}

.c-hl-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: right;
}

.c-hl-icon {
  font-size: 1.6rem;
}

.c-hl-item strong {
  display: block;
  font-size: 0.95rem;
  color: #FFFFFF;
}

.c-hl-item span {
  font-size: 0.78rem;
  color: var(--color-accent-gold, #C5A059);
}

/* Contact Showrooms Grid */
.contact-showrooms-section {
  padding: 5rem 0;
}

.contact-showrooms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.8rem;
}

.contact-showroom-card {
  background: #FFFFFF;
  border: 1px solid #E5E0D6;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.contact-showroom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
  border-color: rgba(197, 160, 89, 0.5);
}

.c-card-body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.c-badge-pill {
  display: inline-block;
  align-self: flex-start;
  background: #F4EFE6;
  color: #8C6D23;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  border: 1px solid #E8DEC9;
}

.c-showroom-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #181716;
  margin-bottom: 0.75rem;
}

.c-showroom-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #666666;
  margin-bottom: 1.8rem;
}

.c-details-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
  padding: 1.2rem;
  background: #FAF8F4;
  border-radius: 12px;
  border: 1px solid #EDE7DC;
}

.c-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.c-d-icon {
  font-size: 1.15rem;
  margin-top: 2px;
}

.c-d-text strong {
  color: #222222;
  margin-left: 5px;
}

.c-d-text span {
  color: #555555;
}

.c-phone-link {
  color: #181716;
  font-weight: 800;
  text-decoration: none;
  font-family: inherit;
  direction: ltr;
  display: inline-block;
}

.c-phone-link:hover {
  color: var(--color-accent-gold, #C5A059);
}

/* Card Actions */
.c-card-actions {
  display: flex;
  gap: 0.85rem;
  margin-top: auto;
}

.c-btn-primary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #181716;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.c-btn-primary:hover {
  background: var(--color-accent-gold, #C5A059);
  color: #181716;
}

.c-btn-wa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #15803D;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.c-btn-wa:hover {
  background: #166534;
}

/* Experience Pillars Box */
.contact-experience-pillars {
  padding: 4.5rem 0;
}

.exp-pillars-box {
  background: #181716;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  padding: 3.5rem;
}

.exp-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.exp-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.8rem;
  text-align: right;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.exp-card:hover {
  border-color: var(--color-accent-gold, #C5A059);
  transform: translateY(-4px);
}

.exp-num {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-accent-gold, #C5A059);
  margin-bottom: 0.8rem;
}

.exp-card h4 {
  font-size: 1.1rem;
  color: #FFFFFF;
  margin-bottom: 0.6rem;
}

.exp-card p {
  font-size: 0.88rem;
  color: #AAAAAA;
  line-height: 1.75;
}

/* Concierge CTA */
.contact-concierge-cta {
  padding: 1rem 0 4.5rem 0;
}

.concierge-banner {
  background: linear-gradient(135deg, #2A2520 0%, #151412 100%);
  border: 1px solid var(--color-accent-gold, #C5A059);
  border-radius: 18px;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

.concierge-content {
  max-width: 680px;
}

.c-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-accent-gold, #C5A059);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.concierge-banner h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.6rem;
}

.concierge-banner p {
  font-size: 0.95rem;
  color: #CCCCCC;
  line-height: 1.8;
}

.btn-concierge-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-gold-gradient, linear-gradient(135deg, #DFB76C 0%, #C5A059 50%, #9E7B35 100%));
  color: #121212;
  font-weight: 800;
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(197, 160, 89, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-concierge-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(197, 160, 89, 0.5);
}

/* Contact FAQ Section */
.contact-faq-section {
  padding: 2rem 0 6rem 0;
}

.contact-faq-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid #E5E0D6;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item[open] {
  border-color: var(--color-accent-gold, #C5A059);
}

.faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.8rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #181716;
  cursor: pointer;
  list-style: none;
}

.faq-header::-webkit-details-marker {
  display: none;
}

.faq-arrow {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-accent-gold, #C5A059);
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-arrow {
  transform: rotate(45deg);
}

.faq-body {
  padding: 0 1.8rem 1.6rem 1.8rem;
  border-top: 1px solid #F0ECE4;
  font-size: 0.95rem;
  line-height: 1.85;
  color: #555555;
  padding-top: 1.2rem;
}

/* ==========================================================================
   Responsive Adaptations for Showrooms & Contact Page
   ========================================================================== */
@media (max-width: 1024px) {
  .showroom-media-container {
    grid-template-columns: 1fr;
  }
  .showroom-media-container .gallery-img-box,
  .showroom-map-embed-wrapper {
    height: 220px;
  }
  .contact-showrooms-grid {
    grid-template-columns: 1fr;
  }
  .exp-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-highlights-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }
  .concierge-banner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .galleries-two-grid {
    grid-template-columns: 1fr;
  }
  .contact-page-title {
    font-size: 1.8rem;
  }
  .c-card-body {
    padding: 1.5rem;
  }
  .contact-highlights-ribbon {
    grid-template-columns: 1fr;
  }
  .exp-pillars-grid {
    grid-template-columns: 1fr;
  }
  .exp-pillars-box {
    padding: 2rem 1.2rem;
  }
  .routing-buttons-grid,
  .c-routing-grid {
    grid-template-columns: 1fr;
  }
  .c-card-actions {
    flex-direction: column;
  }
}

/* ==========================================================================
   SAMEXXON MASTER LUXURY MOBILE RESPONSIVE SYSTEM (v4.1.0)
   Dual Mobile Menu Architecture: Top Off-Canvas Drawer + Fixed Bottom App Bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global Mobile & Touch Essentials
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }
  
  .site-footer-clean {
    padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
  }
  
  body.mobile-drawer-open {
    overflow: hidden !important;
    touch-action: none;
  }
}

/* --------------------------------------------------------------------------
   2. Top Announcement Bar (Mobile Adaptation)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .top-announcement-bar {
    padding: 0.35rem 0;
    font-size: 0.72rem;
  }
  
  .top-announcement-bar .container {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }
  
  .top-announcement-bar .motto-badge {
    justify-content: center;
    font-size: 0.72rem;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
  
  .top-announcement-right {
    gap: 0.8rem;
    justify-content: center;
  }
  
  .top-phone-link {
    font-size: 0.72rem;
  }
}

/* --------------------------------------------------------------------------
   3. Header Bar & Mobile Header Triggers
   -------------------------------------------------------------------------- */
.mobile-header-triggers {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.mobile-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F7F3EE;
  transition: all 0.25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-icon-btn:hover,
.mobile-icon-btn:active {
  background: rgba(212, 175, 55, 0.2);
  border-color: #D4AF37;
  color: #E2C082;
  transform: scale(1.05);
}

.mobile-call-btn {
  color: #E2C082;
  border-color: rgba(226, 192, 130, 0.3);
}

/* Animated Luxury Hamburger Button */
.mobile-hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  cursor: pointer;
  padding: 0;
  gap: 5px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.mobile-hamburger-btn .ham-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #E2C082;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.mobile-hamburger-btn.is-active {
  background: rgba(212, 175, 55, 0.25);
  border-color: #E2C082;
}

.mobile-hamburger-btn.is-active .ham-top {
  transform: translateY(7px) rotate(45deg);
}

.mobile-hamburger-btn.is-active .ham-mid {
  opacity: 0;
  transform: scale(0);
}

.mobile-hamburger-btn.is-active .ham-bot {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .main-nav-bar {
    display: none !important;
  }
  
  .desktop-only-action {
    display: none !important;
  }
  
  .mobile-header-triggers {
    display: flex !important;
  }
  
  .site-header {
    height: 62px;
  }
  
  .header-inner {
    height: 62px;
  }
  
  .logo-img {
    max-height: 34px !important;
  }
}

/* --------------------------------------------------------------------------
   4. Off-Canvas Drawer Menu & Backdrop Overlay
   -------------------------------------------------------------------------- */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 12, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  z-index: 99990;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.mobile-drawer-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 88vw;
  max-width: 380px;
  background: #1C1814;
  color: #FFFFFF;
  z-index: 99999;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 45px rgba(0, 0, 0, 0.6);
  border-left: 1px solid rgba(212, 175, 55, 0.2);
  display: flex;
  flex-direction: column;
}

[dir="ltr"] .mobile-drawer-menu {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  border-left: none;
  border-right: 1px solid rgba(212, 175, 55, 0.2);
}

.mobile-drawer-menu.is-active {
  transform: translateX(0) !important;
}

.drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  gap: 1.25rem;
}

/* Drawer Header */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-logo {
  max-height: 32px;
  width: auto;
  object-fit: contain;
}

.drawer-motto {
  font-size: 0.68rem;
  color: #C5A059;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.drawer-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #D6CEC5;
  cursor: pointer;
  transition: all 0.25s ease;
}

.drawer-close-btn:hover,
.drawer-close-btn:active {
  background: rgba(212, 175, 55, 0.25);
  border-color: #D4AF37;
  color: #FFFFFF;
}

/* Drawer Search Form */
.drawer-search-wrap {
  width: 100%;
}

.drawer-search-form {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.drawer-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.86rem;
  padding: 0.7rem 2.6rem 0.7rem 0.9rem;
  transition: all 0.25s ease;
  outline: none;
}

[dir="ltr"] .drawer-search-input {
  padding: 0.7rem 0.9rem 0.7rem 2.6rem;
}

.drawer-search-input:focus {
  background: rgba(0, 0, 0, 0.4);
  border-color: #C5A059;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
}

.drawer-search-submit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #C5A059;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

[dir="ltr"] .drawer-search-submit {
  right: auto;
  left: 10px;
}

/* Drawer Language Strip */
.drawer-lang-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.lang-strip-label {
  font-size: 0.75rem;
  color: #A89F95;
  font-weight: 600;
}

.drawer-lang-pills {
  display: flex;
  gap: 0.4rem;
}

.drawer-lang-pills a {
  font-size: 0.75rem;
  font-weight: 700;
  color: #D6CEC5;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.drawer-lang-pills a.active {
  background: #C5A059;
  color: #121212;
}

/* Drawer Navigation List */
.drawer-nav {
  width: 100%;
}

.drawer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.drawer-nav-item {
  position: relative;
  width: 100%;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.drawer-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.drawer-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  color: #F7F3EE;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.25s ease;
  flex: 1;
}

.drawer-nav-item:hover > .drawer-nav-link,
.drawer-nav-item:hover > .drawer-nav-row .drawer-nav-link {
  background: rgba(255, 255, 255, 0.05);
  color: #E2C082;
}

.d-item-icon {
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

.drawer-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #C5A059;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-left: 4px;
}

[dir="ltr"] .drawer-accordion-trigger {
  margin-left: 0;
  margin-right: 4px;
}

.drawer-accordion-trigger svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-nav-item.is-expanded > .drawer-nav-row .drawer-accordion-trigger svg {
  transform: rotate(180deg);
}

.drawer-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin: 0.2rem 0 0.5rem;
  border: 1px solid rgba(212, 175, 55, 0.1);
}

.drawer-submenu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.2rem;
  color: #D6CEC5;
  font-size: 0.86rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.drawer-submenu li:last-child a {
  border-bottom: none;
}

.drawer-submenu li a:hover {
  background: rgba(212, 175, 55, 0.12);
  color: #E2C082;
  padding-right: 1.5rem;
}

[dir="ltr"] .drawer-submenu li a:hover {
  padding-right: 1.2rem;
  padding-left: 1.5rem;
}

.d-sub-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(197, 160, 89, 0.2);
  color: #E4C88E;
  border: 1px solid rgba(197, 160, 89, 0.4);
}

.d-sub-viewall {
  color: #C5A059 !important;
  font-weight: 800 !important;
}

.drawer-badge-outlet {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(231, 76, 60, 0.2);
  color: #FF7675;
  border: 1px solid rgba(231, 76, 60, 0.4);
  margin-right: auto;
}

[dir="ltr"] .drawer-badge-outlet {
  margin-right: 0;
  margin-left: auto;
}

/* Drawer Footer Card (VIP Concierge) */
.drawer-footer-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(35, 30, 24, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  margin-top: 0.5rem;
}

.df-card-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #E2C082;
}

.df-card-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.df-card-text {
  font-size: 0.78rem;
  color: #B8B0A5;
  line-height: 1.5;
  margin: 0;
}

.df-card-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.df-btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF !important;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.55rem 0.6rem;
  border-radius: 6px;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.df-btn-call {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF !important;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.55rem 0.6rem;
  border-radius: 6px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.df-card-hours {
  font-size: 0.7rem;
  color: #8E867C;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. Fixed Bottom Mobile App Navigation Bar (Bottom Tab Bar)
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  height: calc(62px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(26, 23, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1024px) {
  .mobile-bottom-nav {
    display: block;
  }
}

.bottom-nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr 1fr 1fr;
  align-items: center;
  height: 62px;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9C958C;
  text-decoration: none;
  gap: 3px;
  height: 100%;
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.2s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.bn-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: transform 0.2s ease;
}

.bn-label {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  transition: color 0.2s ease;
}

.bottom-nav-item:hover,
.bottom-nav-item.is-active {
  color: #E2C082;
}

.bottom-nav-item:hover .bn-icon-wrap,
.bottom-nav-item.is-active .bn-icon-wrap {
  transform: translateY(-2px);
  color: #E2C082;
}

.bottom-nav-item.is-active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #E2C082;
  box-shadow: 0 0 6px #E2C082;
}

/* Center Elevated Floating Action Button (FAB) */
.bottom-nav-fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.fab-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DFB76C 0%, #C5A059 50%, #9E7B35 100%);
  color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.45);
  transform: translateY(-12px);
  border: 2.5px solid #1C1814;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fab-glow 3s infinite;
}

@keyframes fab-glow {
  0% { box-shadow: 0 6px 20px rgba(197, 160, 89, 0.45); }
  50% { box-shadow: 0 8px 28px rgba(226, 192, 130, 0.7); }
  100% { box-shadow: 0 6px 20px rgba(197, 160, 89, 0.45); }
}

.bottom-nav-fab:hover .fab-circle,
.bottom-nav-fab:active .fab-circle {
  transform: translateY(-15px) scale(1.08);
  background: #FFFFFF;
  color: #121212;
}

.bn-fab-label {
  font-size: 0.64rem;
  font-weight: 800;
  color: #E2C082;
  margin-top: -8px;
  line-height: 1;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Comprehensive Theme Responsive Styles (Sections 1-8, WooCommerce, Blog)
   -------------------------------------------------------------------------- */

/* Hero Masterpiece Section */
@media (max-width: 992px) {
  .hero-masterpiece {
    min-height: auto;
    padding: 2.5rem 0 2.5rem;
  }
  
  .hero-inner-grid {
    grid-template-columns: 1fr !important;
    gap: 2.2rem !important;
  }
  
  .hero-text-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .hero-calligraphy-img {
    max-width: 290px !important;
    margin: 0 auto 1rem !important;
  }
  
  .hero-lead {
    font-size: 0.94rem !important;
    line-height: 1.8 !important;
    text-align: center !important;
    max-width: 600px;
  }
  
  .hero-cta-group {
    justify-content: center;
    width: 100%;
  }
  
  .hero-guarantee-pill {
    margin: 1.2rem auto 0;
    justify-content: center;
  }
  
  .hero-style-switcher {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .hero-stats-ribbon {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-top: 2rem !important;
  }
}

@media (max-width: 576px) {
  .hero-guarantee-pill {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
  }
  
  .pill-divider {
    display: none;
  }
  
  .hero-stats-ribbon {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .stat-card {
    padding: 1rem 0.6rem !important;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
  }
  
  .stat-label {
    font-size: 0.76rem !important;
  }
  
  .editorial-heading {
    font-size: 1.6rem !important;
  }
  
  .editorial-lead {
    font-size: 0.9rem !important;
  }
}

/* WooCommerce Single Product & Catalog Archives */
@media (max-width: 992px) {
  .samexxon-product-journal-grid,
  .product-main-journal-grid,
  .single-product-journal-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .product-journal-specs-box {
    grid-template-columns: 1fr !important;
  }
  
  .anatomy-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* 2-Column Catalog Grid on Mobile */
  .woocommerce ul.products,
  .products-grid-luxury,
  .catalog-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  .product-card-luxury,
  .wc-product-card {
    padding: 0.75rem !important;
  }
  
  .product-card-luxury .card-title,
  .wc-product-card .card-title {
    font-size: 0.92rem !important;
  }
  
  .btn-mp-inquire {
    font-size: 0.75rem !important;
    padding: 0.55rem 0.5rem !important;
  }
  
  .catalog-toolbar-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.8rem;
  }
}

@media (max-width: 480px) {
  .product-gallery-thumbs {
    gap: 0.4rem;
  }
  
  .product-gallery-thumbs img {
    width: 60px;
    height: 60px;
  }
}

/* Homepage Sections (2 to 8) Mobile Refinements */
@media (max-width: 768px) {
  .collections-grid-lux,
  .featured-showcase-grid,
  .craft-materials-grid,
  .journal-gazette-grid,
  .founder-awards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  
  .showrooms-two-grid {
    grid-template-columns: 1fr !important;
  }
  
  .faq-accordion-list {
    padding: 0;
  }
  
  .faq-item summary {
    padding: 1.1rem 1rem !important;
    font-size: 0.92rem !important;
  }
  
  .faq-body {
    padding: 0 1rem 1.2rem 1rem !important;
    font-size: 0.88rem !important;
  }
}

/* Blog & Article Pages */
@media (max-width: 768px) {
  .gazette-heading {
    font-size: 1.65rem !important;
  }
  
  .gazette-lead {
    font-size: 0.92rem !important;
  }
  
  .gazette-stats-ribbon {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .gazette-chapters-nav {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  
  .single-article-content {
    font-size: 1rem !important;
    line-height: 1.85 !important;
  }
}

/* Footer Mobile Refinement */
@media (max-width: 768px) {
  .footer-four-cols {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  
  .footer-col-clean {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-col-clean ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .footer-bottom-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.6rem !important;
  }
}

/* ==========================================================================
   ULTRA-LUXURY EDITORIAL JOURNAL CATEGORY HERO & CATALOG SYSTEM
   Inspired by Architectural Digest, Minotti, Poliform, Cassina, B&B Italia
   ========================================================================== */

.journal-catalog-wrapper {
  background-color: var(--color-bg-body, #ffffff);
  color: var(--color-text-main, #242220);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
  padding-bottom: 6rem;
}

/* Ensure ALL product titles inside the catalog on light background are deep charcoal, never white! */
.journal-catalog-wrapper .exhibit-title,
.journal-catalog-wrapper .exhibit-title a,
.journal-catalog-wrapper .duo-title,
.journal-catalog-wrapper .duo-title a,
.journal-catalog-wrapper .lb-title,
.journal-catalog-wrapper .lb-title a,
.journal-catalog-wrapper .duo-card h3 a,
.journal-catalog-wrapper .lookbook-card h3 a {
  color: #121212 !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.journal-catalog-wrapper .exhibit-title a:hover,
.journal-catalog-wrapper .duo-title a:hover,
.journal-catalog-wrapper .lb-title a:hover,
.journal-catalog-wrapper .duo-card h3 a:hover,
.journal-catalog-wrapper .lookbook-card h3 a:hover {
  color: var(--color-accent-gold, #c5a059) !important;
}

/* 1. Category Journal Masthead (Dark Prestige Editorial Cover) */
.cat-journal-masthead {
  background: radial-gradient(circle at 85% 20%, rgba(197, 160, 89, 0.12) 0%, transparent 55%),
              linear-gradient(175deg, #141312 0%, #1a1917 60%, #201e1b 100%);
  color: #ffffff;
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(197, 160, 89, 0.28);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}

.cat-journal-masthead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 15% 85%, rgba(197, 160, 89, 0.06) 0%, transparent 40%);
  pointer-events: none;
}

.cat-masthead-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Topbar Meta & Breadcrumbs */
.cat-editorial-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  gap: 1rem;
}

.cat-edition-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid rgba(197, 160, 89, 0.3);
  font-size: 0.76rem;
  font-weight: 700;
  color: #f5f3ef;
  letter-spacing: 0.5px;
}

.cat-edition-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-gold, #c5a059);
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.8);
}

.cat-edition-vol {
  color: var(--color-accent-gold-light, #e4c88e);
  font-weight: 800;
}

.cat-edition-sep {
  color: rgba(255, 255, 255, 0.25);
}

.cat-edition-note {
  color: rgba(255, 255, 255, 0.75);
}

.cat-editorial-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.cat-editorial-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}

.cat-editorial-breadcrumb a:hover {
  color: var(--color-accent-gold-light, #e4c88e);
}

.cat-editorial-breadcrumb .current {
  color: #ffffff;
  font-weight: 700;
}

/* Main Title & Minimal Featured Showcase Grid */
.cat-hero-title-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.cat-hero-heading-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cat-hero-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-accent-gold-light, #e4c88e);
  letter-spacing: 1.5px;
}

.eyebrow-icon {
  font-size: 1.1rem;
}

.cat-hero-title {
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1.15;
  color: #ffffff !important;
  letter-spacing: -0.035em;
  margin: 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.cat-hero-subtitle {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--color-accent-gold-light, #e4c88e);
  line-height: 1.6;
  margin: 0;
}

.cat-hero-lead-narrative {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.85;
  margin: 0;
  max-width: 680px;
}

/* Left Side: Minimal Flagship Chair / Piece Showcase Card */
.cat-hero-featured-showcase {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.cat-featured-piece-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: #ffffff;
}

.cat-featured-piece-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 160, 89, 0.6);
  box-shadow: 0 20px 50px rgba(197, 160, 89, 0.15), 0 10px 30px rgba(0, 0, 0, 0.4);
}

.featured-piece-img-box {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1e1d1b;
  width: 100%;
}

.featured-piece-img-box img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-featured-piece-card:hover .featured-piece-img-box img {
  transform: scale(1.05);
}

.featured-gold-corner-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-accent-gold-light, #e4c88e);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-xs, 3px);
  border: 1px solid rgba(197, 160, 89, 0.4);
}

.featured-piece-caption {
  padding: 1.4rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(20, 19, 18, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.featured-piece-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.feat-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-accent-gold-light, #e4c88e);
  letter-spacing: 1px;
}

.feat-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feat-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--color-gold-gradient, linear-gradient(135deg, #dfb76c 0%, #c5a059 100%));
  color: #121212;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill, 9999px);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.cat-featured-piece-card:hover .feat-cta-link {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.4);
}

/* Category Chapters Strip */
.cat-chapters-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.chapters-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-accent-gold-light, #e4c88e);
  letter-spacing: 1px;
  white-space: nowrap;
}

.chapters-pills-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.chapter-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-pill, 9999px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.chapter-pill-btn .cp-num {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--color-accent-gold-light, #e4c88e);
  opacity: 0.8;
}

.chapter-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-accent-gold, #c5a059);
  color: #ffffff;
  transform: translateY(-2px);
}

.chapter-pill-btn.active {
  background: #ffffff;
  color: #121212;
  border-color: #ffffff;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.chapter-pill-btn.active .cp-num {
  color: var(--color-accent-gold-hover, #a8833d);
}

.cp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-gold-hover, #a8833d);
}

/* 2. Exhibit 01: The Golden Ratio Hero Spread */
.journal-exhibit-hero {
  padding: 4.5rem 0 3.5rem;
  width: 100%;
  max-width: 100%;
}

.exhibit-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.exhibit-hero-media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
}

.exhibit-img-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  background: #f7f6f4;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border-subtle, #f0ede8);
  display: block;
}

.exhibit-img-frame img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.exhibit-img-frame:hover img {
  transform: scale(1.04);
}

.exhibit-badge-top {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
}

.exhibit-badge-bottom {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 2;
}

.exhibit-expand-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-primary, #121212);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--color-border, #e8e5df);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.exhibit-img-frame:hover .exhibit-expand-hint {
  background: var(--color-primary, #121212);
  color: #ffffff;
  border-color: var(--color-primary, #121212);
}

/* Exhibit Hero Narrative Box */
.exhibit-hero-editorial {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
}

.exhibit-editorial-inner {
  background: var(--color-bg-alt, #f9f8f6);
  border: 1px solid var(--color-border, #e8e5df);
  border-radius: var(--radius-lg, 16px);
  padding: 3rem 2.6rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}

.exhibit-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.exhibit-edition-tag {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-accent-gold, #c5a059);
  letter-spacing: 2px;
}

.exhibit-cat-tag {
  background: #ffffff;
  color: var(--color-text-muted, #66635f);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--color-border-subtle, #f0ede8);
}

.exhibit-title {
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.25;
  color: #121212 !important;
  margin: 0;
  letter-spacing: -0.02em;
}

.exhibit-story {
  font-size: 1rem;
  color: var(--color-text-muted, #66635f);
  line-height: 1.85;
  margin: 0;
}

.exhibit-specs-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.spec-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid var(--color-border-subtle, #f0ede8);
  border-radius: var(--radius-sm, 6px);
  padding: 0.65rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary, #121212);
}

.sp-icon {
  font-size: 1rem;
}

/* Single Elegant Gold/Beige Button for Exhibit 01 */
.exhibit-actions {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  width: 100%;
}

.btn-journal-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: var(--color-gold-gradient, linear-gradient(135deg, #dfb76c 0%, #c5a059 50%, #ad863b 100%)) !important;
  color: #121212 !important;
  font-size: 1rem;
  font-weight: 800;
  padding: 1.1rem 2.2rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(197, 160, 89, 0.4);
  box-shadow: 0 8px 24px rgba(197, 160, 89, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
  width: 100%;
  text-align: center;
}

.btn-journal-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(197, 160, 89, 0.5);
  background: linear-gradient(135deg, #e6c581 0%, #d4b26a 50%, #ba9345 100%) !important;
  color: #121212 !important;
}

/* 3. Exhibits 02 & 03: Asymmetric Fibonacci Duo */
.journal-duo-section {
  padding: 3rem 0;
  width: 100%;
  max-width: 100%;
}

.journal-duo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.journal-duo-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 850px;
  margin: 0 auto;
}

.duo-card {
  background: var(--color-bg-alt, #f9f8f6);
  border: 1px solid var(--color-border-subtle, #f0ede8);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  transition: all 0.35s ease;
}

.duo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.duo-img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f0ede8;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
}

.duo-img-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

.duo-img-wrap .hover-reveal {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.duo-card:hover .duo-img-wrap img:not(.hover-reveal) {
  transform: scale(1.04);
}

.duo-card:hover .duo-img-wrap .hover-reveal {
  opacity: 1;
  transform: scale(1.04);
}

.duo-index-tag {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-accent-gold-light, #e4c88e);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-xs, 3px);
  border: 1px solid rgba(197, 160, 89, 0.4);
}

.duo-caption {
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.duo-cat {
  font-size: 0.75rem;
  color: var(--color-accent-gold, #c5a059);
  font-weight: 700;
}

.duo-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #121212 !important;
  margin: 0;
}

.duo-excerpt {
  font-size: 0.95rem;
  color: var(--color-text-muted, #66635f);
  line-height: 1.8;
  margin: 0;
}

.duo-footer-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-border-subtle, #f0ede8);
}

/* Elegant Card Link Button (Gold / Deep Noir Theme) */
.btn-journal-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: #181716;
  color: #f5f3ef !important;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(197, 160, 89, 0.35);
  transition: all 0.3s ease;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.btn-journal-card-link svg {
  color: var(--color-accent-gold-light, #e4c88e);
  transition: transform 0.25s ease;
}

.btn-journal-card-link:hover {
  background: var(--color-gold-gradient, linear-gradient(135deg, #dfb76c 0%, #c5a059 100%));
  color: #121212 !important;
  border-color: #c5a059;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(197, 160, 89, 0.35);
}

.btn-journal-card-link:hover svg {
  color: #121212;
  transform: translateX(-3px);
}

/* 4. Editorial Craftsmanship Manifesto Strip */
.journal-manifesto-strip {
  background: var(--color-primary, #121212);
  color: #ffffff;
  padding: 5rem 0;
  margin: 4.5rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(197, 160, 89, 0.3);
  border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}

.journal-manifesto-strip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(197, 160, 89, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.manifesto-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.manifesto-quote-mark {
  font-size: 4.5rem;
  line-height: 1;
  font-family: serif;
  color: var(--color-accent-gold-light, #e4c88e);
  margin-bottom: -1rem;
}

.manifesto-quote {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.75;
  color: #ffffff;
  margin: 0 auto 1.8rem;
  font-family: var(--font-main);
}

.manifesto-author {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 3.5rem;
}

.manifesto-author strong {
  font-size: 1.05rem;
  color: var(--color-accent-gold-light, #e4c88e);
  font-weight: 800;
  letter-spacing: 1px;
}

.manifesto-author span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

.manifesto-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: right;
}

.pillar-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 8px);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.pillar-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(197, 160, 89, 0.35);
  transform: translateY(-3px);
}

.pillar-card .p-num {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--color-accent-gold-light, #e4c88e);
  margin-bottom: 0.6rem;
  display: block;
}

.pillar-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.pillar-card p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

/* 5. Exhibits 04+: Lookbook Grid */
.journal-lookbook-section {
  padding: 3.5rem 0;
  width: 100%;
  max-width: 100%;
}

.lookbook-section-head {
  margin-bottom: 2.8rem;
  text-align: center;
}

.lookbook-section-head .lb-sub {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-accent-gold, #c5a059);
  letter-spacing: 2px;
  display: block;
  margin-bottom: 0.5rem;
}

.lookbook-section-head .lb-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #121212 !important;
  margin: 0;
}

.journal-lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 100%;
}

.lookbook-card {
  background: #ffffff;
  border: 1px solid var(--color-border-subtle, #f0ede8);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.lookbook-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.lb-img-wrap {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #f7f6f4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
}

.lb-img-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

.lb-img-wrap .hover-reveal {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.lookbook-card:hover .lb-img-wrap img:not(.hover-reveal) {
  transform: scale(1.05);
}

.lookbook-card:hover .lb-img-wrap .hover-reveal {
  opacity: 1;
  transform: scale(1.05);
}

.lb-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(18, 18, 18, 0.85);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-xs, 3px);
}

.lb-tag-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-primary, #121212);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-xs, 3px);
  backdrop-filter: blur(4px);
}

.lb-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.5rem;
}

.lb-cat {
  font-size: 0.75rem;
  color: var(--color-accent-gold, #c5a059);
  font-weight: 700;
}

.lb-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #121212 !important;
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

.lb-excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted, #66635f);
  line-height: 1.75;
  margin: 0 0 1rem;
}

.lb-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-subtle, #f0ede8);
}

/* 6. Journal Architectural Guide Section */
.journal-editorial-article-section {
  padding: 4.5rem 0 2.5rem;
  width: 100%;
}

.journal-article-card {
  background: var(--color-bg-alt, #f9f8f6);
  border: 1px solid var(--color-border, #e8e5df);
  border-radius: var(--radius-lg, 16px);
  padding: 3.5rem 3rem;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.03);
}

.article-masthead {
  border-bottom: 1px solid var(--color-border, #e8e5df);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.article-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-accent-gold, #c5a059);
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}

.article-title {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--color-primary, #121212);
  margin-bottom: 0.8rem;
}

.article-meta-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-light, #94908a);
}

.article-body-typography {
  font-size: 1.02rem;
  color: var(--color-text-main, #242220);
  line-height: 2;
}

.article-body-typography p {
  margin-bottom: 1.25rem;
}

/* 7. Journal VIP Concierge Banner */
.journal-concierge-banner {
  padding: 3.5rem 0 1.5rem;
  width: 100%;
}

.concierge-box {
  background: var(--color-primary, #121212);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: var(--radius-lg, 20px);
  padding: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  color: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.concierge-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 10% 90%, rgba(197, 160, 89, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.concierge-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.concierge-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-accent-gold-light, #e4c88e);
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
}

.concierge-content h3 {
  font-size: 1.85rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.concierge-content p {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin: 0;
}

.concierge-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-shrink: 0;
  min-width: 260px;
}

.btn-concierge-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--color-gold-gradient, linear-gradient(135deg, #dfb76c 0%, #c5a059 100%));
  color: #121212;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 1.1rem 1.8rem;
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 8px 25px rgba(197, 160, 89, 0.35);
  transition: all 0.3s ease;
  text-align: center;
}

.btn-concierge-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(197, 160, 89, 0.5);
  color: #121212;
}

.btn-concierge-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-sm, 6px);
  transition: all 0.25s ease;
  text-align: center;
}

.btn-concierge-call:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color: #ffffff;
}

/* 8. Responsive Breakpoints for Category Journal */
@media (max-width: 1150px) {
  .cat-hero-title-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .exhibit-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .journal-duo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .journal-lookbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .manifesto-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .concierge-box {
    flex-direction: column;
    text-align: center;
  }
  .concierge-actions {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .cat-journal-masthead {
    padding: 2.5rem 0 2rem;
  }
  .cat-hero-title {
    font-size: 2.2rem;
  }
  .cat-hero-subtitle {
    font-size: 1.05rem;
  }
  .cat-hero-lead-narrative {
    font-size: 0.92rem;
  }
  .chapters-pills-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .chapter-pill-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .exhibit-editorial-inner {
    padding: 2rem 1.5rem;
  }
  .exhibit-title {
    font-size: 1.65rem;
  }
  .exhibit-specs-pills {
    grid-template-columns: 1fr;
  }
  .exhibit-actions {
    width: 100%;
  }
  .exhibit-actions .btn-journal-primary {
    width: 100%;
  }
  .manifesto-quote {
    font-size: 1.25rem;
  }
  .manifesto-pillars-grid {
    grid-template-columns: 1fr;
  }
  .journal-lookbook-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .journal-article-card {
    padding: 2rem 1.5rem;
  }
  .article-title {
    font-size: 1.5rem;
  }
  .concierge-box {
    padding: 2rem 1.5rem;
  }
  .concierge-content h3 {
    font-size: 1.45rem;
  }
}