/*
Theme Name: Sài Gòn Danh Trà 1976
Theme URI: https://saigontea.vn
Author: Antigravity Custom Engineering
Author URI: https://saigontea.vn
Description: Luxury Heritage Vietnamese Tea Theme with 100% Exact Pixel-Perfect Design & Full WooCommerce Integration.
Version: 1.0.2
Text Domain: saigontea
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


/* ===== Exact Original Styles from index.html ===== */
html {
      overflow-y: scroll;
    }
    /* ==========================================================================
   SÀI GÒN DANH TRÀ 1976 - HERO SECTION STYLES
   ========================================================================== */

    /* Design Tokens */
    :root {
      --bg-parchment: #FAEBD3;
      --bg-parchment-accent: #ebd5b9;
      --text-plum: #291528;
      --text-muted: #56474f;
      --gold-muted: #9a7952;
      --gold-light: #c4a785;
      --border-subtle: #8c786a;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: #251326;
      color: var(--text-plum);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ==========================================================================
   Hero Section Container Layout
   ========================================================================== */
    .hero-wrapper {
      position: relative;
      width: 100vw;
      height: 100vh;
      min-height: 620px;
      max-height: 100vh;
      background-color: var(--bg-parchment);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }

    /* ==========================================================================
   Background Image & Soft Vignette Blend Layer
   ========================================================================== */
    .hero-bg-image-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 72%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .hero-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 25% top !important;
      display: block;
      filter: contrast(1.02) saturate(1.05) brightness(1.02);
    }

    /* Multi-stage Feathered Overlay for Seamless Canvas Blend */
    .hero-bg-overlay {
      position: absolute;
      inset: 0;
      background:
        /* Heavy Left-to-Right Fade */
        linear-gradient(to right,
          var(--bg-parchment) 0%,
          rgba(250, 235, 211, 0.95) 12%,
          rgba(250, 235, 211, 0.7) 28%,
          rgba(250, 235, 211, 0.25) 45%,
          transparent 70%),
        /* Soft Bottom Fade */
        linear-gradient(to top,
          var(--bg-parchment) 0%,
          rgba(250, 235, 211, 0.8) 10%,
          transparent 30%),
        /* Soft Top-Right Sunlight Radial */
        radial-gradient(ellipse at 80% 0%,
          rgba(250, 235, 211, 0.4) 0%,
          transparent 60%);
    }

    /* ==========================================================================
   Watermark Line Art Elements
   ========================================================================== */
    .watermark {
      position: absolute;
      pointer-events: none;
      z-index: 2;
    }

    .watermark-compass {
      top: 20px;
      left: -20px;
      width: 320px;
      height: 320px;
      opacity: 0.22;
    }

    .watermark-botanical {
      bottom: -40px;
      left: -30px;
      width: 360px;
      height: 520px;
      opacity: 0.28;
    }

    /* ==========================================================================
   Header Navigation Bar
   ========================================================================== */
    .navbar {
      position: relative;
      z-index: 10;
      width: 100%;
      padding: 16px 5% 0 5%;
    }

    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo-link {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin-top: -6px;
    }

    .brand-logo-img {
      height: 75px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0px 2px 4px rgba(41, 21, 40, 0.08));
    
      margin-left: 22px;}

    .brand-logo-text {
      margin-top: 4px;
      margin-left: 0;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #5B3049;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: -60px;
      /* Slight optical alignment adjustment */
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: #C37D40;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: #5B3049;
    }

    .nav-link.active {
      color: #5B3049;
      font-weight: 700;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: #5B3049;
      border-radius: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .icon-btn:hover {
      transform: scale(1.05);
      color: #5B3049;
    }

    .cart-btn {
      position: relative;
    }

    .cart-badge {
      position: absolute;
      top: 2px;
      right: 0px;
      background-color: var(--text-plum);
      color: var(--bg-parchment);
      font-size: 0.65rem;
      font-weight: 700;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Mobile Navigation Toggle & Drawer Overlay */
    .mobile-menu-toggle {
      display: none;
    }

    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(37, 19, 38, 0.65);
      backdrop-filter: blur(4px);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .mobile-nav-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-nav-drawer {
      position: absolute;
      top: 0;
      right: 0;
      width: 82%;
      max-width: 320px;
      height: 100%;
      background-color: var(--bg-parchment);
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      padding: 24px 20px;
      box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25);
    }

    .mobile-nav-overlay.active .mobile-nav-drawer {
      transform: translateX(0);
    }

    .mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(140, 120, 100, 0.2);
      margin-bottom: 24px;
    }

    .mobile-close-btn {
      background: none;
      border: none;
      color: var(--text-plum);
      cursor: pointer;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
    }

    .mobile-nav-link {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-plum);
      text-decoration: none;
      padding: 12px 16px;
      border-radius: 8px;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
      background-color: rgba(91, 48, 73, 0.08);
      color: #5B3049;
      font-weight: 700;
    }

    .mobile-drawer-footer {
      padding-top: 20px;
      border-top: 1px solid rgba(140, 120, 100, 0.2);
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .mobile-drawer-footer span {
      font-weight: 700;
      color: var(--text-plum);
    }

    @media (max-width: 868px) {
      .mobile-menu-toggle {
        display: flex !important;
      }
    }

    /* ==========================================================================
   Main Content Area (Left Column Text)
   ========================================================================== */
    .hero-content-container {
      position: relative;
      z-index: 10;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 5% 0 5%;
      display: flex;
      align-items: center;
      flex: 1;
    }

    .hero-left-column {
      max-width: 480px;
      margin-top: -35px;
    }

    /* Title Styling */
    .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 4vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    .hero-title span {
      display: block;
      margin-bottom: 0.06em;
    }

    /* Subtitle Tagline */
    .hero-tagline {
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      color: var(--gold-muted);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      text-transform: uppercase;
    }

    .hero-tagline .bullet {
      font-size: 0.7rem;
      opacity: 0.6;
    }

    /* Divider Line with Leaf */
    .divider-line-container {
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 320px;
      margin-bottom: 18px;
    }

    .divider-line-container .line {
      height: 1px;
      flex: 1;
      background: linear-gradient(to right, transparent, var(--gold-light), transparent);
    }

    .divider-leaf {
      flex-shrink: 0;
    }

    /* Paragraph Description */
    .hero-description {
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--text-muted);
      margin-bottom: 18px;
      font-weight: 400;
    }

    /* Action Buttons */
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 30px;
      border-radius: 2px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-primary {
      background-color: var(--text-plum);
      color: #ffffff;
      border: 1.5px solid var(--text-plum);
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.18);
    }

    .btn-primary:hover {
      background-color: #422340;
      border-color: #422340;
      transform: translateY(-2px);
      box-shadow: 0 6px 22px rgba(41, 21, 40, 0.28);
    }

    .btn-primary .btn-arrow {
      transition: transform 0.25s ease;
    }

    .btn-primary:hover .btn-arrow {
      transform: translateX(4px);
    }

    .btn-secondary {
      background-color: transparent;
      color: var(--text-plum);
      border: 1.5px solid var(--border-subtle);
    }

    .btn-secondary:hover {
      border-color: var(--text-plum);
      background-color: rgba(41, 21, 40, 0.05);
      transform: translateY(-2px);
    }

    /* ==========================================================================
   Bottom Center Scroll Indicator
   ========================================================================== */
    .scroll-indicator {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding-bottom: 35px;
      margin-top: -65px;
      transform: translateY(-20px);
      cursor: pointer;
      opacity: 0.85;
      transition: opacity 0.3s ease, transform 0.2s ease;
    }

    .scroll-indicator:hover {
      opacity: 1;
    }

    .mouse-icon {
      width: 20px;
      height: 32px;
      border: 1.8px solid var(--text-plum);
      border-radius: 12px;
      display: flex;
      justify-content: center;
      padding-top: 6px;
    }

    .scroll-dot {
      width: 3px;
      height: 6px;
      background-color: var(--text-plum);
      border-radius: 2px;
      animation: scrollWheel 1.8s infinite cubic-bezier(0.65, 0, 0.35, 1);
    }

    @keyframes scrollWheel {
      0% {
        opacity: 1;
        transform: translateY(0);
      }

      60% {
        opacity: 0;
        transform: translateY(9px);
      }

      100% {
        opacity: 0;
        transform: translateY(0);
      }
    }

    .scroll-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--text-plum);
      text-transform: uppercase;
    }

    .chevron-down {
      color: var(--text-plum);
      animation: bounceArrow 1.8s infinite;
    }

    @keyframes bounceArrow {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(3px);
      }

      60% {
        transform: translateY(1px);
      }
    }

    /* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
    @media (max-width: 1100px) {
      .hero-bg-image-container {
        width: 60%;
      }

      .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 4vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

      .nav-menu {
        margin-left: 0;
        gap: 32px;
      }
    }

    @media (max-width: 868px) {
      .hero-wrapper {
        min-height: auto;
      }

      .hero-bg-image-container {
        position: relative;
        width: 90%;
        max-width: 480px;
        height: 220px;
        margin: 20px auto 10px auto;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(40, 20, 10, 0.08);
        border: 1px solid rgba(138, 108, 76, 0.2);
        order: 2;
      }

      .hero-bg-overlay {
        display: none;
      }

      .hero-content-container {
        padding-top: 30px;
        padding-bottom: 20px;
      }

      .hero-left-column {
      max-width: 480px;
      margin-top: -35px;
    }

      .hero-tagline,
      .divider-line-container,
      .hero-actions {
        justify-content: center;
      }

      .divider-line-container {
        margin-left: auto;
        margin-right: auto;
      }

      .nav-menu {
        display: none;
      }

      .brand-logo-img {
        height: 60px;
      
      margin-left: 22px;}
    }

    /* ==========================================================================
   Section 2: The World of Tea
   ========================================================================== */
    .world-tea-section {
      position: relative;
      width: 100%;
      padding: 80px 5% 100px 5%;
      background-color: var(--bg-parchment);
      overflow: hidden;
      border-top: 1px solid rgba(138, 108, 76, 0.12);
    }

    .world-tea-container {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.85fr 1.6fr;
      align-items: center;
      gap: 50px;
      position: relative;
      z-index: 5;
    }

    /* Left Content Column */
    .world-tea-content {
      padding-right: 20px;
    }

    .section-title {
      font-family: var(--font-serif);
      font-size: 4rem;
      font-weight: 700;
      line-height: 1.25;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 24px;
      text-transform: uppercase;
    }

    .section-title span {
      display: block;
      margin-bottom: 0.12em;
    }

    .world-tea-desc {
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--text-muted);
      margin-bottom: 24px;
      font-weight: 400;
    }

    .world-tea-actions {
      margin-top: 12px;
    }

    .btn-world {
      padding: 14px 28px;
      border: 1.5px solid var(--border-subtle);
      color: var(--text-plum);
    }

    .btn-world:hover {
      background-color: var(--text-plum);
      color: #ffffff;
      border-color: var(--text-plum);
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.18);
    }

    .btn-world .btn-arrow {
      transition: transform 0.25s ease;
    }

    .btn-world:hover .btn-arrow {
      transform: translateX(4px);
    }

    /* Right Visual Column (Map Graphic) */
    .world-tea-visual {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .world-map-wrapper {
      position: relative;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(70, 45, 20, 0.06);
      -webkit-mask-image: radial-gradient(ellipse at center, black 70%, rgba(0, 0, 0, 0.8) 88%, transparent 100%);
      mask-image: radial-gradient(ellipse at center, black 70%, rgba(0, 0, 0, 0.8) 88%, transparent 100%);
    }

    .world-map-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      filter: contrast(1.02) saturate(1.03);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .world-map-wrapper:hover .world-map-img {
      transform: scale(1.015);
    }

    .map-blend-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 75%, rgba(250, 235, 211, 0.4) 100%);
      pointer-events: none;
    }

    /* Responsive adjustments for Section 2 */
    @media (max-width: 1100px) {
      .world-tea-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }

      .world-tea-content {
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .world-tea-section {
        border-top: none !important;
        padding-top: 40px;
      }

      .section-title {
        font-size: 3.2rem;
      }
    }

    /* ==========================================================================
   Section 3: Stories
   ========================================================================== */
    .stories-section {
      position: relative;
      width: 100%;
      padding: 50px 5% 90px 5%;
      background-color: var(--bg-parchment);
      overflow: hidden;
      border-top: 1px solid rgba(138, 108, 76, 0.12);
    }

    .section-top-chevron {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      color: var(--text-plum);
      opacity: 0.5;
    }

    .stories-container {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 360px 400px 1fr;
      gap: 36px;
      align-items: center;
      position: relative;
      z-index: 5;
    }

    /* Part A: Left Content Column */
    .stories-left-column {
      display: flex;
      flex-direction: column;
      height: 520px;
      justify-content: space-between;
    }

    .stories-desc {
      font-size: 1.02rem;
      line-height: 1.65;
      color: var(--text-muted);
      margin-top: auto;
      margin-bottom: 24px;
      font-weight: 400;
    }

    .stories-actions {
      margin-top: 0;
    }

    /* Part B: Center Featured Card */
    .featured-story-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      height: 520px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 32px 28px;
      color: #ffffff;
      box-shadow: 0 16px 42px rgba(25, 10, 20, 0.22);
    }

    .featured-bg-wrapper {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .featured-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: brightness(0.88) contrast(1.05);
    }

    .featured-gradient-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
          rgba(15, 8, 14, 0.97) 0%,
          rgba(15, 8, 14, 0.78) 45%,
          rgba(15, 8, 14, 0.35) 100%);
    }

    .featured-card-content {
      position: relative;
      z-index: 5;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .featured-badge {
      display: inline-block;
      padding: 6px 14px;
      border: 1.2px solid rgba(229, 203, 171, 0.45);
      border-radius: 4px;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: #e5cbab;
      width: fit-content;
      text-transform: uppercase;
      background-color: rgba(20, 10, 15, 0.35);
      backdrop-filter: blur(4px);
    }

    .featured-title {
      font-family: var(--font-serif);
      font-size: 2.1rem;
      font-weight: 700;
      color: #f7dfc5;
      line-height: 1.25;
      margin-top: auto;
      margin-bottom: 14px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .featured-title span {
      display: block;
      margin-bottom: 0.1em;
    }

    .featured-desc {
      font-size: 0.92rem;
      line-height: 1.55;
      color: rgba(245, 235, 220, 0.85);
      margin-bottom: 24px;
    }

    .featured-meta {
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 0.78rem;
      color: rgba(229, 203, 171, 0.85);
      padding-top: 16px;
      border-top: 1px solid rgba(229, 203, 171, 0.22);
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Part C: Right 2x2 Story Cards Grid */
    .stories-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      height: 520px;
    }

    .story-card {
      position: relative;
      background-color: #f7edd8;
      border: 1px solid rgba(138, 108, 76, 0.18);
      border-radius: 14px;
      overflow: hidden;
      padding: 22px 22px 16px 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 250px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    .story-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(70, 45, 20, 0.08);
    }

    .story-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      z-index: 10;
      position: relative;
      width: 100%;
    }

    .story-card-title {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.2;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      max-width: 80%;
    }

    .story-card-arrow {
      color: var(--text-plum);
      transition: transform 0.25s ease;
      opacity: 0.85;
    }

    .story-card:hover .story-card-arrow {
      transform: translateX(4px);
      opacity: 1;
    }

    .story-card-image-wrapper {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 64%;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
      -webkit-mask-image: linear-gradient(to top, black 65%, rgba(0, 0, 0, 0.4) 85%, transparent 100%);
      mask-image: linear-gradient(to top, black 65%, rgba(0, 0, 0, 0.4) 85%, transparent 100%);
    }

    .story-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom center;
      opacity: 0.92;
      filter: contrast(1.04) saturate(1.02);
      transition: transform 0.5s ease;
    }

    .story-card:hover .story-card-img {
      transform: scale(1.04);
    }

    /* Responsive adjustments for Section 3 */
    @media (max-width: 1200px) {
      .stories-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .stories-left-column {
        height: auto;
        text-align: center;
        align-items: center;
      }

      .stories-desc {
        margin-top: 24px;
      }

      .featured-story-card {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
      }

      .stories-grid {
        max-width: 700px;
        margin: 0 auto;
        width: 100%;
        height: auto;
      }
    }

    @media (max-width: 600px) {
      .stories-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
   Section 4: Traceability
   ========================================================================== */
    .traceability-section {
      position: relative;
      width: 100%;
      padding: 70px 5% 90px 5%;
      background-color: var(--bg-parchment);
      overflow: hidden;
      border-top: 1px solid rgba(138, 108, 76, 0.12);
    }

    .traceability-container {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 360px 380px 1fr;
      gap: 36px;
      align-items: center;
      position: relative;
      z-index: 5;
    }

    /* Left Content Column */
    .traceability-left-column {
      display: flex;
      flex-direction: column;
      height: 415px;
      justify-content: space-between;
      max-width: 300px;
    }

    .traceability-left-column .section-title {
      font-size: 2.15rem;
      line-height: 1.18;
      margin-bottom: 16px;
      word-break: normal;
    }

    .traceability-left-column .section-title span {
      display: block;
      white-space: nowrap;
    }

    .traceability-desc {
      font-size: 0.98rem;
      line-height: 1.6;
      color: var(--text-muted);
      margin-bottom: 24px;
      font-weight: 400;
    }

    .traceability-actions {
      margin-top: 0;
    }

    /* Center Product Image Column */
    .product-card-wrapper {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      height: 520px;
      box-shadow: 0 12px 35px rgba(25, 10, 20, 0.1);
    }

    .product-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: contrast(1.02) saturate(1.02);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .product-card-wrapper:hover .product-card-img {
      transform: scale(1.02);
    }

    /* Right Traceability Card */
    .traceability-right-panel {
      width: 100%;
    }

    .traceability-card {
      background-color: #f7edd8;
      border: 1px solid rgba(138, 108, 76, 0.18);
      border-radius: 14px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      box-shadow: 0 8px 24px rgba(70, 45, 20, 0.04);
    }

    .trace-header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(138, 108, 76, 0.14);
    }

    .trace-header-text {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 85px;
    }

    .trace-title {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .trace-subtitle {
      font-size: 0.92rem;
      line-height: 1.5;
      color: var(--text-muted);
      margin-bottom: 0;
      margin-top: auto;
    }

    .qr-code-box {
      background: #ffffff;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 3px 10px rgba(40, 20, 10, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .process-flow {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      justify-content: space-between;
    }

    .flow-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
    }

    .flow-icon {
      color: var(--text-plum);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .flow-label {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-plum);
    }

    .flow-arrow {
      color: var(--text-plum);
      opacity: 0.45;
      font-size: 0.85rem;
      margin-top: -14px;
    }

    /* Certification Badges Row with Vertical Dividers */
    .cert-badges-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding-top: 12px;
    }

    .cert-badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      flex: 1;
      position: relative;
      padding: 0 8px;
    }

    /* Subtle vertical divider lines between badges */
    .cert-badge-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 15%;
      height: 70%;
      width: 1px;
      background-color: rgba(138, 108, 76, 0.18);
    }

    .badge-circle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1.5px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-plum);
      background-color: rgba(250, 235, 211, 0.4);
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .cert-badge-item:hover .badge-circle {
      transform: translateY(-2px);
      border-color: var(--text-plum);
    }

    .badge-text {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-plum);
      line-height: 1.2;
      white-space: nowrap;
      max-width: none;
    }

    /* Responsive adjustments for Section 4 */
    @media (max-width: 1200px) {
      .traceability-container {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .traceability-left-column {
        max-width: 100%;
        height: auto;
        text-align: center;
        align-items: center;
      }

      .traceability-left-column .section-title span {
        white-space: nowrap !important;
      }

      .product-card-wrapper {
        max-width: 100%;
        height: 380px;
        margin: 0 auto;
        width: 100%;
      }

      .traceability-right-panel {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
      }
    }

    @media (max-width: 600px) {
      .traceability-card {
        padding: 20px;
      }

      .trace-header-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .trace-header-text {
        min-height: auto;
        align-items: center;
      }

      .process-flow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
      }

      .cert-badges-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
      }

      .cert-badge-item::after {
        display: none !important;
      }

      .badge-text {
        white-space: normal !important;
      }
    }

    /* ==========================================================================
   Global Section Alignment & Container Standard (1440px Grid Alignment)
   ========================================================================== */
    .navbar-container,
    .hero-container,
    .world-tea-container,
    .stories-container,
    .traceability-container,
    .poetry-banner-container,
    .collection-banner-container,
    .collection-filter-container,
    .archive-header-container,
    .archive-grid-container,
    .curator-selection-container,
    .footer-container,
    .footer-bottom-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    /* Outer Section Wrappers Edge-to-Edge */
    .hero-wrapper,
    .world-tea-section,
    .stories-section,
    .traceability-section,
    .poetry-banner-section,
    .collection-filter-section,
    .archive-header-section,
    .archive-grid-section,
    .curator-selection-section,
    .site-footer {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* ==========================================================================
   Section 5: Poetry Banner Section
   ========================================================================== */
    .poetry-banner-section {
      position: relative;
      width: 100%;
      min-height: 560px;
      background-color: var(--bg-parchment);
      overflow: hidden;
      display: flex;
      align-items: center;
      border-top: 1px solid rgba(138, 108, 76, 0.12);
      margin: 0;
      padding: 50px 0;
    }

    .banner-bg-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 68%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .banner-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center;
      display: block;
      filter: contrast(1.03) saturate(1.02);
    }

    .banner-gradient-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right,
          var(--bg-parchment) 0%,
          rgba(250, 235, 211, 0.98) 25%,
          rgba(250, 235, 211, 0.75) 45%,
          rgba(250, 235, 211, 0.2) 70%,
          transparent 90%),
        linear-gradient(to top,
          rgba(250, 235, 211, 0.85) 0%,
          transparent 20%),
        linear-gradient(to bottom,
          rgba(250, 235, 211, 0.85) 0%,
          transparent 20%);
    }

    .poetry-banner-container {
      position: relative;
      z-index: 5;
      width: 100%;
    }

    .poetry-left-column {
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      position: relative;
      z-index: 10;
    }

    .poetry-text {
      font-family: var(--font-serif);
      font-size: 2.85rem;
      font-weight: 600;
      color: var(--text-plum);
      line-height: 1.15;
      letter-spacing: 0.01em;
    }

    .poetry-text span {
      display: block;
    }

    .poetry-line-divider {
      width: 42px;
      height: 1px;
      background-color: var(--gold-light);
      opacity: 0.65;
      margin: 4px 0;
    }

    .red-seal-mark {
      margin-top: 14px;
      filter: drop-shadow(0px 2px 6px rgba(194, 57, 42, 0.25));
    }

    .banner-bottom-bar {
      display: none;
    }

    /* ==========================================================================
       Site Footer (100% Identical Pixel-Perfect Across All Pages)
       ========================================================================== */
    .site-footer {
      background-color: #251326;
      color: #f4eee6;
      width: 100%;
      margin: 0;
      padding: 65px 0 0 0;
      position: relative;
      z-index: 10;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.35fr 1.8fr 1.5fr;
      gap: 24px;
      padding-bottom: 45px;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-brand-col {
      padding-right: 15px;
      margin-top: -15px;
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: 8px;
    }

    .footer-logo-img {
      height: 130px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.08) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
      padding-left: 15px;
    }

    .footer-company-name {
      display: block;
      margin-top: 12px;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: #FFD886;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #d1c2b4;
      white-space: nowrap;
    }

    .showroom-line {
      white-space: normal;
    }

    .footer-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .footer-links a {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

        .footer-contact-info p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #f4eee6;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .footer-contact-info p.showroom-line {
      white-space: normal;
    }

    .footer-contact-info .contact-label,
    .footer-contact-info span {
      color: #c4a785;
      font-weight: 600;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.2px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4a785;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .social-btn:hover {
      background-color: #c4a785;
      color: #251326;
      transform: translateY(-2px);
    }

    /* Newsletter Box */
    .newsletter-box {
      margin-top: 24px;
    }

    .newsletter-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .newsletter-form {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 320px;
      height: 42px;
      border: 1.2px solid #d4a359;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(18, 8, 17, 0.4);
      margin: 0;
    }

    .newsletter-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 16px;
      color: #f4eee6;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: #a89888;
      opacity: 0.75;
    }

    .newsletter-submit {
      flex-shrink: 0;
      position: relative;
      right: 0;
      width: 48px;
      height: 100%;
      background: #d4a359;
      border: none;
      color: #251326;
      cursor: pointer;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .newsletter-submit:hover {
      background: #e6b86e;
      color: #120811;
    }

    .footer-bottom {
      border-top: 1px solid rgba(196, 167, 133, 0.18);
      padding: 24px 0 32px 0;
      background-color: #251326;
      width: 100%;
      margin: 0;
    }

    .footer-bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .copyright-text {
      font-size: 0.78rem;
      color: #a89888;
      margin: 0;
    }

    .end-journey-emblem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
    }

    /* Tablet & Mobile Media Queries (Only trigger at 868px and smaller) */
    @media (max-width: 868px) {
      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }

      .poetry-banner-section {
        flex-direction: column;
        min-height: auto;
        padding-bottom: 30px;
      }

      .banner-bg-container {
        position: relative;
        width: 100%;
        height: 320px;
      }

      .poetry-left-column {
        max-width: 100%;
        text-align: center;
        align-items: center;
      }
    }

    @media (max-width: 1200px) {
      .footer-container {
        grid-template-columns: 1.2fr 1fr 1.1fr;
        gap: 36px 24px;
      }
    }

    @media (max-width: 820px) {
      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
      }
    }

    @media (max-width: 580px) {
      .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 4vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

      .section-title {
        font-size: 2.2rem !important;
      }

      .footer-container {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
      }

      .footer-brand-col,
      .footer-col {
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .footer-logo-img {
        padding-left: 0;
      }

      .social-links {
        justify-content: center;
      }

      .newsletter-form {
        margin: 0 auto;
      }

      .footer-bottom-container {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }

      .showroom-line,
      .footer-company-name,
      .section-title span {
        white-space: normal !important;
      }
    }

    /* ==========================================================================
   COLLECTION / PRODUCT PAGE STYLES
   ========================================================================== */

    /* Collection Hero Section */
    .collection-hero-wrapper {
      min-height: 520px;
    }

    .collection-banner-section {
      position: relative;
      width: 100%;
      min-height: 480px;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 20px 0 40px 0;
    }

    .collection-bg-image-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 62%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .collection-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right top !important;
      display: block;
      filter: contrast(1.02) saturate(1.02);
    }

    .collection-bg-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right,
          var(--bg-parchment) 0%,
          rgba(250, 235, 211, 0.96) 18%,
          rgba(250, 235, 211, 0.72) 35%,
          rgba(250, 235, 211, 0.15) 60%,
          transparent 80%),
        linear-gradient(to top,
          rgba(250, 235, 211, 0.85) 0%,
          transparent 18%),
        linear-gradient(to bottom,
          rgba(250, 235, 211, 0.85) 0%,
          transparent 18%);
    }

    .collection-banner-container {
      position: relative;
      z-index: 5;
      width: 100%;
    }

    .collection-left-content {
      max-width: 680px;
    }

    .collection-header-row {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 18px;
    }

    .collection-main-title {
      font-family: var(--font-serif);
      font-size: 3.4rem;
      font-weight: 700;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      line-height: 1.1;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .collection-purple-stamp {
      display: flex;
      align-items: center;
    }

    .collection-subtitle {
      font-size: 1.02rem;
      line-height: 1.65;
      color: var(--text-muted);
      margin-bottom: 38px;
      font-weight: 400;
    }

    /* Stats Section */
    .collection-stats-grid {
      display: flex;
      align-items: center;
      gap: 28px;
      padding-top: 10px;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .stat-icon-wrapper {
      color: var(--gold-muted);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }

    .stat-number {
      font-family: var(--font-sans);
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-muted);
      line-height: 1.35;
    }

    .stat-divider {
      width: 1px;
      height: 65px;
      background-color: rgba(138, 108, 76, 0.22);
    }

    /* ==========================================================================
   Filter & Controls Toolbar Section
   ========================================================================== */
    .collection-filter-section {
      width: 100%;
      padding: 24px 0;
      background-color: var(--bg-parchment);
      position: relative;
      z-index: 10;
    }

    .collection-filter-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    /* Category Pills */
    .filter-pills-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-plum);
      background-color: rgba(250, 235, 211, 0.6);
      border: 1px solid rgba(138, 108, 76, 0.25);
      cursor: pointer;
      transition: all 0.25s ease;
      white-space: nowrap;
    }

    .filter-pill:hover {
      border-color: var(--text-plum);
      background-color: rgba(41, 21, 40, 0.05);
    }

    .filter-pill.active {
      background-color: var(--text-plum);
      color: #ffffff;
      border-color: var(--text-plum);
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.15);
    }

    .filter-pill.active svg {
      stroke: #ffffff;
    }

    /* Dropdowns / Sort Controls */
    .filter-dropdowns-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .dropdown-select {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-plum);
      background-color: rgba(250, 235, 211, 0.6);
      border: 1px solid rgba(138, 108, 76, 0.25);
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .dropdown-select:hover {
      border-color: var(--text-plum);
      background-color: rgba(41, 21, 40, 0.04);
    }

    /* ==========================================================================
   Section Title: The Archive
   ========================================================================== */
    .archive-header-section {
      width: 100%;
      padding: 50px 0 30px 0;
      background-color: var(--bg-parchment);
      text-align: center;
    }

    .archive-header-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .archive-divider-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 600px;
      margin-bottom: 12px;
    }

    .archive-line {
      height: 1px;
      flex: 1;
      background: linear-gradient(to right, transparent, var(--gold-light), transparent);
    }

    .archive-title {
      font-family: var(--font-serif);
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--text-plum);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .archive-subtitle {
      font-size: 1rem;
      color: var(--text-muted);
      font-weight: 400;
    }

    /* ==========================================================================
   Section 2: Archive Grid Cards (4x2 Grid)
   ========================================================================== */
    .archive-grid-section {
      position: relative;
      width: 100%;
      padding: 30px 0 80px 0;
      background-color: var(--bg-parchment);
    }

    .archive-grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .archive-card {
      position: relative;
      height: 460px;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
      background-color: #221221;
      box-shadow: none;
      transition: transform 0.35s ease;
      cursor: pointer;
    }

    .archive-card:hover {
      transform: translateY(-4px);
      box-shadow: none;
    }

    .card-bg-wrapper {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .card-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: brightness(1) contrast(1.02);
      transition: transform 0.6s ease;
    }

    .archive-card:hover .card-bg-img {
      transform: scale(1.04);
    }

    .card-gradient-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(to top,
          rgba(37, 19, 38, 0.92) 0%,
          rgba(37, 19, 38, 0.5) 45%,
          transparent 75%);
    }

    .card-gradient-overlay.overlay-darker {
      background: linear-gradient(to top,
          rgba(37, 19, 38, 0.95) 0%,
          rgba(37, 19, 38, 0.6) 50%,
          transparent 80%);
    }

    .card-top-row {
      position: relative;
      z-index: 5;
      display: flex;
      align-items: flex-start;
    }

    .collection-badge {
      display: inline-block;
      background-color: rgba(244, 238, 230, 0.92);
      color: var(--text-plum);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding: 6px 12px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .card-middle-content {
      position: relative;
      z-index: 5;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 64px;
    }

    .card-title {
      font-family: var(--font-serif);
      font-size: 1.85rem;
      font-weight: 700;
      color: #f7dfc5;
      line-height: 1.15;
      margin-bottom: 4px;
    }

    .title-inline {
      font-size: 1.6rem;
      margin-bottom: 2px;
    }

    .card-region {
      font-size: 0.85rem;
      font-weight: 500;
      color: rgba(245, 235, 220, 0.75);
      margin-bottom: 12px;
    }

    .region-compact {
      margin-bottom: 8px;
    }

    .card-desc {
      font-size: 0.88rem;
      line-height: 1.5;
      color: rgba(245, 235, 220, 0.85);
      font-weight: 400;
    }

    /* Card 2 Sub-products List */
    .sub-products-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 6px;
    }

    .sub-product-item {
      background: rgba(35, 18, 33, 0.72);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(229, 203, 171, 0.25);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sub-prod-thumb {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 1px solid rgba(229, 203, 171, 0.3);
    }

    .sub-prod-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sub-prod-info {
      flex: 1;
      min-width: 0;
    }

    .sub-prod-name {
      font-size: 0.78rem;
      font-weight: 700;
      color: #f7dfc5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }

    .sub-prod-type {
      font-size: 0.68rem;
      color: #e5cbab;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .sub-prod-notes {
      font-size: 0.66rem;
      color: rgba(245, 235, 220, 0.75);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sub-prod-price-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0;
    }

    .sub-prod-price {
      font-size: 0.76rem;
      font-weight: 700;
      color: #e5cbab;
    }

    .sub-prod-weight {
      font-size: 0.68rem;
      color: rgba(245, 235, 220, 0.6);
    }

    /* Card Footer (Clean Transparent Overlay) */
    .card-footer-row {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      background: transparent;
      border-top: none;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
    }

    .card-tags {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .tag-category {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #e5cbab;
      text-transform: uppercase;
    }

    .tag-season {
      font-size: 0.7rem;
      font-weight: 600;
      color: rgba(245, 235, 220, 0.6);
      text-transform: uppercase;
    }

    .card-arrow-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1.2px solid rgba(229, 203, 171, 0.6);
      background: none;
      color: #f7dfc5;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.25s ease, background-color 0.25s ease;
    }

    .archive-card:hover .card-arrow-btn {
      transform: translateX(3px);
      background-color: rgba(229, 203, 171, 0.15);
      border-color: #f7dfc5;
    }

    /* Bottom CTA Actions */
    .archive-bottom-actions {
      display: flex;
      justify-content: center;
      margin-top: 45px;
    }

    .btn-archive-all {
      padding: 15px 36px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      border: 1.5px solid var(--border-subtle);
      color: var(--text-plum);
    }

    .btn-archive-all:hover {
      background-color: var(--text-plum);
      color: #ffffff;
      border-color: var(--text-plum);
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.18);
    }

    /* Responsive adjustments for Archive Grid */
    @media (max-width: 1200px) {
      .archive-grid-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 650px) {
      .archive-grid-container {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
   Section 3: Curator's Selection Carousel Section
   ========================================================================== */
    .curator-selection-section {
      position: relative;
      width: 100%;
      padding: 50px 0 90px 0;
      background-color: var(--bg-parchment);
    }

    .curator-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 30px;
      position: relative;
    }

    .curator-title-block {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .curator-divider-row {
      margin-bottom: 6px;
    }

    .carousel-nav-btns {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      margin-bottom: 4px;
    }

    .carousel-btn {
      width: 38px;
      height: 38px;
      border-radius: 6px;
      border: 1.2px solid rgba(138, 108, 76, 0.35);
      background-color: rgba(250, 235, 211, 0.7);
      color: var(--text-plum);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .carousel-btn:hover {
      border-color: var(--text-plum);
      background-color: var(--text-plum);
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.15);
    }

    .curator-cards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .badge-new {
      background-color: #b88654 !important;
      color: #ffffff !important;
    }

    /* Responsive adjustments for Curator's Selection */
    @media (max-width: 1200px) {
      .curator-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 650px) {
      .curator-header-row {
        flex-direction: column;
        align-items: center;
      }

      .curator-cards-grid {
        grid-template-columns: 1fr;
      }
    }

/* ===== Exact Original Styles from collection.html ===== */
html {
      overflow-y: scroll;
    }
    /* ==========================================================================
   SÀI GÒN DANH TRÀ 1976 - HERO SECTION STYLES
   ========================================================================== */

    /* Design Tokens */
    :root {
      --bg-parchment: #FAEBD3;
      --bg-parchment-accent: #ebd5b9;
      --text-plum: #291528;
      --text-muted: #56474f;
      --gold-muted: #9a7952;
      --gold-light: #c4a785;
      --border-subtle: #8c786a;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: #251326;
      color: var(--text-plum);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ==========================================================================
   Hero Section Container Layout
   ========================================================================== */
    .hero-wrapper {
      position: relative;
      width: 100vw;
      min-height: 100vh;
      background-color: var(--bg-parchment);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }

    /* ==========================================================================
   Background Image & Soft Vignette Blend Layer
   ========================================================================== */
    .hero-bg-image-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 72%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .hero-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 25% top !important;
      display: block;
      filter: contrast(1.02) saturate(1.05) brightness(1.02);
    }

    /* Multi-stage Feathered Overlay for Seamless Canvas Blend */
    .hero-bg-overlay {
      position: absolute;
      inset: 0;
      background:
        /* Heavy Left-to-Right Fade */
        linear-gradient(to right,
          var(--bg-parchment) 0%,
          rgba(250, 235, 211, 0.95) 12%,
          rgba(250, 235, 211, 0.7) 28%,
          rgba(250, 235, 211, 0.25) 45%,
          transparent 70%),
        /* Soft Bottom Fade */
        linear-gradient(to top,
          var(--bg-parchment) 0%,
          rgba(250, 235, 211, 0.8) 10%,
          transparent 30%),
        /* Soft Top-Right Sunlight Radial */
        radial-gradient(ellipse at 80% 0%,
          rgba(250, 235, 211, 0.4) 0%,
          transparent 60%);
    }

    /* ==========================================================================
   Watermark Line Art Elements
   ========================================================================== */
    .watermark {
      position: absolute;
      pointer-events: none;
      z-index: 2;
    }

    .watermark-compass {
      top: 20px;
      left: -20px;
      width: 320px;
      height: 320px;
      opacity: 0.22;
    }

    .watermark-botanical {
      bottom: -40px;
      left: -30px;
      width: 360px;
      height: 520px;
      opacity: 0.28;
    }

    /* ==========================================================================
   Header Navigation Bar
   ========================================================================== */
    .navbar {
      position: relative;
      z-index: 10;
      width: 100%;
      padding: 16px 5% 0 5%;
    }

    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo-link {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin-top: -6px;
    }

    .brand-logo-img {
      height: 75px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0px 2px 4px rgba(41, 21, 40, 0.08));
    
      margin-left: 22px;}

    .brand-logo-text {
      margin-top: 4px;
      margin-left: 0;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #5B3049;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: -60px;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: #C37D40;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: #5B3049;
    }

    .nav-link.active {
      color: #5B3049;
      font-weight: 700;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: #5B3049;
      border-radius: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .icon-btn:hover {
      transform: scale(1.05);
      color: #5B3049;
    }

    .cart-btn {
      position: relative;
    }

    .cart-badge {
      position: absolute;
      top: 2px;
      right: 0px;
      background-color: var(--text-plum);
      color: var(--bg-parchment);
      font-size: 0.65rem;
      font-weight: 700;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Mobile Navigation Toggle & Drawer Overlay */
    .mobile-menu-toggle {
      display: none;
    }

    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(37, 19, 38, 0.65);
      backdrop-filter: blur(4px);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .mobile-nav-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-nav-drawer {
      position: absolute;
      top: 0;
      right: 0;
      width: 82%;
      max-width: 320px;
      height: 100%;
      background-color: var(--bg-parchment);
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      padding: 24px 20px;
      box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25);
    }

    .mobile-nav-overlay.active .mobile-nav-drawer {
      transform: translateX(0);
    }

    .mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(140, 120, 100, 0.2);
      margin-bottom: 24px;
    }

    .mobile-close-btn {
      background: none;
      border: none;
      color: var(--text-plum);
      cursor: pointer;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
    }

    .mobile-nav-link {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-plum);
      text-decoration: none;
      padding: 12px 16px;
      border-radius: 8px;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
      background-color: rgba(91, 48, 73, 0.08);
      color: #5B3049;
      font-weight: 700;
    }

    .mobile-drawer-footer {
      padding-top: 20px;
      border-top: 1px solid rgba(140, 120, 100, 0.2);
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .mobile-drawer-footer span {
      font-weight: 700;
      color: var(--text-plum);
    }

    @media (max-width: 868px) {
      .mobile-menu-toggle {
        display: flex !important;
      }
    }

    /* ==========================================================================
   Main Content Area (Left Column Text)
   ========================================================================== */
    .hero-content-container {
      position: relative;
      z-index: 10;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 20px 5% 40px 5%;
      display: flex;
      align-items: center;
      flex: 1;
    }

    .hero-left-column {
      max-width: 480px;
      margin-top: -35px;
    }

    /* Title Styling */
    .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 4vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    .hero-title span {
      display: block;
      margin-bottom: 0.12em;
    }

    /* Subtitle Tagline */
    .hero-tagline {
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      color: var(--gold-muted);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      text-transform: uppercase;
    }

    .hero-tagline .bullet {
      font-size: 0.7rem;
      opacity: 0.6;
    }

    /* Divider Line with Leaf */
    .divider-line-container {
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 320px;
      margin-bottom: 26px;
    }

    .divider-line-container .line {
      height: 1px;
      flex: 1;
      background: linear-gradient(to right, transparent, var(--gold-light), transparent);
    }

    .divider-leaf {
      flex-shrink: 0;
    }

    /* Paragraph Description */
    .hero-description {
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--text-muted);
      margin-bottom: 18px;
      font-weight: 400;
    }

    /* Action Buttons */
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 30px;
      border-radius: 2px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-primary {
      background-color: var(--text-plum);
      color: #ffffff;
      border: 1.5px solid var(--text-plum);
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.18);
    }

    .btn-primary:hover {
      background-color: #422340;
      border-color: #422340;
      transform: translateY(-2px);
      box-shadow: 0 6px 22px rgba(41, 21, 40, 0.28);
    }

    .btn-primary .btn-arrow {
      transition: transform 0.25s ease;
    }

    .btn-primary:hover .btn-arrow {
      transform: translateX(4px);
    }

    .btn-secondary {
      background-color: transparent;
      color: var(--text-plum);
      border: 1.5px solid var(--border-subtle);
    }

    .btn-secondary:hover {
      border-color: var(--text-plum);
      background-color: rgba(41, 21, 40, 0.05);
      transform: translateY(-2px);
    }

    /* ==========================================================================
   Bottom Center Scroll Indicator
   ========================================================================== */
    .scroll-indicator {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding-bottom: 35px;
      margin-top: -65px;
      transform: translateY(-20px);
      cursor: pointer;
      opacity: 0.85;
      transition: opacity 0.3s ease, transform 0.2s ease;
    }

    .scroll-indicator:hover {
      opacity: 1;
    }

    .mouse-icon {
      width: 20px;
      height: 32px;
      border: 1.8px solid var(--text-plum);
      border-radius: 12px;
      display: flex;
      justify-content: center;
      padding-top: 6px;
    }

    .scroll-dot {
      width: 3px;
      height: 6px;
      background-color: var(--text-plum);
      border-radius: 2px;
      animation: scrollWheel 1.8s infinite cubic-bezier(0.65, 0, 0.35, 1);
    }

    @keyframes scrollWheel {
      0% {
        opacity: 1;
        transform: translateY(0);
      }

      60% {
        opacity: 0;
        transform: translateY(9px);
      }

      100% {
        opacity: 0;
        transform: translateY(0);
      }
    }

    .scroll-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--text-plum);
      text-transform: uppercase;
    }

    .chevron-down {
      color: var(--text-plum);
      animation: bounceArrow 1.8s infinite;
    }

    @keyframes bounceArrow {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(3px);
      }

      60% {
        transform: translateY(1px);
      }
    }

    /* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
    @media (max-width: 1100px) {
      .hero-bg-image-container {
        width: 60%;
      }

      .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 4vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

      .nav-menu {
        margin-left: 0;
        gap: 32px;
      }
    }

    @media (max-width: 868px) {
      .hero-wrapper {
        min-height: auto;
      }

      .hero-bg-image-container {
        position: relative;
        width: 100%;
        height: 400px;
        order: 2;
      }

      .hero-bg-overlay {
        background: linear-gradient(to top, var(--bg-parchment) 0%, transparent 40%),
          linear-gradient(to bottom, var(--bg-parchment) 0%, transparent 30%);
      }

      .hero-content-container {
        padding-top: 30px;
        padding-bottom: 20px;
      }

      .hero-left-column {
      max-width: 480px;
      margin-top: -35px;
    }

      .hero-tagline,
      .divider-line-container,
      .hero-actions {
        justify-content: center;
      }

      .divider-line-container {
        margin-left: auto;
        margin-right: auto;
      }

      .nav-menu {
        display: none;
      }

      .brand-logo-img {
        height: 60px;
      
      margin-left: 22px;}
    }

    /* ==========================================================================
   Section 2: The World of Tea
   ========================================================================== */
    .world-tea-section {
      position: relative;
      width: 100%;
      padding: 80px 5% 100px 5%;
      background-color: var(--bg-parchment);
      overflow: hidden;
      border-top: 1px solid rgba(138, 108, 76, 0.12);
    }

    .world-tea-container {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.85fr 1.6fr;
      align-items: center;
      gap: 50px;
      position: relative;
      z-index: 5;
    }

    /* Left Content Column */
    .world-tea-content {
      padding-right: 20px;
    }

    .section-title {
      font-family: var(--font-serif);
      font-size: 4rem;
      font-weight: 700;
      line-height: 1.25;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 24px;
      text-transform: uppercase;
    }

    .section-title span {
      display: block;
      margin-bottom: 0.12em;
    }

    .world-tea-desc {
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--text-muted);
      margin-bottom: 24px;
      font-weight: 400;
    }

    .world-tea-actions {
      margin-top: 12px;
    }

    .btn-world {
      padding: 14px 28px;
      border: 1.5px solid var(--border-subtle);
      color: var(--text-plum);
    }

    .btn-world:hover {
      background-color: var(--text-plum);
      color: #ffffff;
      border-color: var(--text-plum);
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.18);
    }

    .btn-world .btn-arrow {
      transition: transform 0.25s ease;
    }

    .btn-world:hover .btn-arrow {
      transform: translateX(4px);
    }

    /* Right Visual Column (Map Graphic) */
    .world-tea-visual {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .world-map-wrapper {
      position: relative;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(70, 45, 20, 0.06);
      -webkit-mask-image: radial-gradient(ellipse at center, black 70%, rgba(0, 0, 0, 0.8) 88%, transparent 100%);
      mask-image: radial-gradient(ellipse at center, black 70%, rgba(0, 0, 0, 0.8) 88%, transparent 100%);
    }

    .world-map-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      filter: contrast(1.02) saturate(1.03);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .world-map-wrapper:hover .world-map-img {
      transform: scale(1.015);
    }

    .map-blend-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 75%, rgba(250, 235, 211, 0.4) 100%);
      pointer-events: none;
    }

    /* Responsive adjustments for Section 2 */
    @media (max-width: 1100px) {
      .world-tea-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }

      .world-tea-content {
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .section-title {
        font-size: 3.2rem;
      }
    }

    /* ==========================================================================
   Section 3: Stories
   ========================================================================== */
    .stories-section {
      position: relative;
      width: 100%;
      padding: 50px 5% 90px 5%;
      background-color: var(--bg-parchment);
      overflow: hidden;
      border-top: 1px solid rgba(138, 108, 76, 0.12);
    }

    .section-top-chevron {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      color: var(--text-plum);
      opacity: 0.5;
    }

    .stories-container {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 280px 400px 1fr;
      gap: 36px;
      align-items: center;
      position: relative;
      z-index: 5;
    }

    /* Part A: Left Content Column */
    .stories-left-column {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .stories-desc {
      font-size: 1.02rem;
      line-height: 1.65;
      color: var(--text-muted);
      margin-bottom: 32px;
      font-weight: 400;
    }

    .stories-actions {
      margin-top: 8px;
    }

    /* Part B: Center Featured Card */
    .featured-story-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      height: 520px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 32px 28px;
      color: #ffffff;
      box-shadow: 0 16px 42px rgba(25, 10, 20, 0.22);
    }

    .featured-bg-wrapper {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .featured-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: brightness(0.88) contrast(1.05);
    }

    .featured-gradient-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
          rgba(15, 8, 14, 0.97) 0%,
          rgba(15, 8, 14, 0.78) 45%,
          rgba(15, 8, 14, 0.35) 100%);
    }

    .featured-card-content {
      position: relative;
      z-index: 5;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .featured-badge {
      display: inline-block;
      padding: 6px 14px;
      border: 1.2px solid rgba(229, 203, 171, 0.45);
      border-radius: 4px;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: #e5cbab;
      width: fit-content;
      text-transform: uppercase;
      background-color: rgba(20, 10, 15, 0.35);
      backdrop-filter: blur(4px);
    }

    .featured-title {
      font-family: var(--font-serif);
      font-size: 2.1rem;
      font-weight: 700;
      color: #f7dfc5;
      line-height: 1.25;
      margin-top: auto;
      margin-bottom: 14px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .featured-title span {
      display: block;
      margin-bottom: 0.1em;
    }

    .featured-desc {
      font-size: 0.92rem;
      line-height: 1.55;
      color: rgba(245, 235, 220, 0.85);
      margin-bottom: 24px;
    }

    .featured-meta {
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 0.78rem;
      color: rgba(229, 203, 171, 0.85);
      padding-top: 16px;
      border-top: 1px solid rgba(229, 203, 171, 0.22);
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Part C: Right 2x2 Story Cards Grid */
    .stories-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      height: 520px;
    }

    .story-card {
      position: relative;
      background-color: #f7edd8;
      border: 1px solid rgba(138, 108, 76, 0.18);
      border-radius: 14px;
      overflow: hidden;
      padding: 22px 22px 16px 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 250px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    .story-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(70, 45, 20, 0.08);
    }

    .story-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      z-index: 10;
      position: relative;
      width: 100%;
    }

    .story-card-title {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.2;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      max-width: 80%;
    }

    .story-card-arrow {
      color: var(--text-plum);
      transition: transform 0.25s ease;
      opacity: 0.85;
    }

    .story-card:hover .story-card-arrow {
      transform: translateX(4px);
      opacity: 1;
    }

    .story-card-image-wrapper {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 64%;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
      -webkit-mask-image: linear-gradient(to top, black 65%, rgba(0, 0, 0, 0.4) 85%, transparent 100%);
      mask-image: linear-gradient(to top, black 65%, rgba(0, 0, 0, 0.4) 85%, transparent 100%);
    }

    .story-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom center;
      opacity: 0.92;
      filter: contrast(1.04) saturate(1.02);
      transition: transform 0.5s ease;
    }

    .story-card:hover .story-card-img {
      transform: scale(1.04);
    }

    /* Responsive adjustments for Section 3 */
    @media (max-width: 1200px) {
      .stories-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .stories-left-column {
        text-align: center;
        align-items: center;
      }

      .featured-story-card {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
      }

      .stories-grid {
        max-width: 700px;
        margin: 0 auto;
        width: 100%;
        height: auto;
      }
    }

    @media (max-width: 600px) {
      .stories-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
   Section 4: Traceability
   ========================================================================== */
    .traceability-section {
      position: relative;
      width: 100%;
      padding: 70px 5% 90px 5%;
      background-color: var(--bg-parchment);
      overflow: hidden;
      border-top: 1px solid rgba(138, 108, 76, 0.12);
    }

    .traceability-container {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 300px 380px 1fr;
      gap: 36px;
      align-items: center;
      position: relative;
      z-index: 5;
    }

    /* Left Content Column */
    .traceability-left-column {
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 300px;
    }

    .traceability-left-column .section-title {
      font-size: 2.35rem;
      line-height: 1.1;
      margin-bottom: 20px;
      word-break: normal;
    }

    .traceability-desc {
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text-muted);
      margin-bottom: 22px;
      font-weight: 400;
    }

    .traceability-actions {
      margin-top: 8px;
    }

    /* Center Product Image Column */
    .product-card-wrapper {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      height: 520px;
      box-shadow: 0 12px 35px rgba(25, 10, 20, 0.1);
    }

    .product-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: contrast(1.02) saturate(1.02);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .product-card-wrapper:hover .product-card-img {
      transform: scale(1.02);
    }

    /* Right Traceability Card */
    .traceability-right-panel {
      width: 100%;
    }

    .traceability-card {
      background-color: #f7edd8;
      border: 1px solid rgba(138, 108, 76, 0.18);
      border-radius: 14px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      box-shadow: 0 8px 24px rgba(70, 45, 20, 0.04);
    }

    .trace-header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(138, 108, 76, 0.14);
    }

    .trace-title {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .trace-subtitle {
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--text-muted);
      margin-bottom: 0;
    }

    /* QR Code & Flow Container */
    .qr-process-container {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 20px 0;
      border-top: 1px solid rgba(138, 108, 76, 0.14);
      border-bottom: 1px solid rgba(138, 108, 76, 0.14);
    }

    .qr-code-box {
      background: #ffffff;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 3px 10px rgba(40, 20, 10, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .process-flow {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      justify-content: space-between;
    }

    .flow-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
    }

    .flow-icon {
      color: var(--text-plum);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .flow-label {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-plum);
    }

    .flow-arrow {
      color: var(--text-plum);
      opacity: 0.45;
      font-size: 0.85rem;
      margin-top: -14px;
    }

    /* Certification Badges Row with Vertical Dividers */
    .cert-badges-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding-top: 12px;
    }

    .cert-badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      flex: 1;
      position: relative;
      padding: 0 8px;
    }

    /* Subtle vertical divider lines between badges */
    .cert-badge-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 15%;
      height: 70%;
      width: 1px;
      background-color: rgba(138, 108, 76, 0.18);
    }

    .badge-circle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1.5px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-plum);
      background-color: rgba(250, 235, 211, 0.4);
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .cert-badge-item:hover .badge-circle {
      transform: translateY(-2px);
      border-color: var(--text-plum);
    }

    .badge-text {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-plum);
      line-height: 1.25;
      max-width: 105px;
    }

    /* Responsive adjustments for Section 4 */
    @media (max-width: 1200px) {
      .traceability-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .traceability-left-column {
        text-align: center;
        align-items: center;
      }

      .product-card-wrapper {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
      }

      .traceability-right-panel {
        max-width: 700px;
        margin: 0 auto;
      }
    }

    /* ==========================================================================
   Global Section Alignment & Container Standard (1440px Grid Alignment)
   ========================================================================== */
    .navbar-container,
    .hero-container,
    .world-tea-container,
    .stories-container,
    .traceability-container,
    .poetry-banner-container,
    .collection-banner-container,
    .collection-filter-container,
    .archive-header-container,
    .archive-grid-container,
    .curator-selection-container,
    .footer-container,
    .footer-bottom-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    /* Outer Section Wrappers Edge-to-Edge */
    .hero-wrapper,
    .world-tea-section,
    .stories-section,
    .traceability-section,
    .poetry-banner-section,
    .collection-filter-section,
    .archive-header-section,
    .archive-grid-section,
    .curator-selection-section,
    .site-footer {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* ==========================================================================
   Section 5: Poetry Banner Section
   ========================================================================== */
    .poetry-banner-section {
      position: relative;
      width: 100%;
      min-height: 560px;
      background-color: var(--bg-parchment);
      overflow: hidden;
      display: flex;
      align-items: center;
      border-top: 1px solid rgba(138, 108, 76, 0.12);
      margin: 0;
      padding: 50px 0;
    }

    .banner-bg-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 68%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .banner-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center;
      display: block;
      filter: contrast(1.03) saturate(1.02);
    }

    .banner-gradient-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right,
          var(--bg-parchment) 0%,
          rgba(250, 235, 211, 0.98) 25%,
          rgba(250, 235, 211, 0.75) 45%,
          rgba(250, 235, 211, 0.2) 70%,
          transparent 90%),
        linear-gradient(to top,
          rgba(250, 235, 211, 0.85) 0%,
          transparent 20%),
        linear-gradient(to bottom,
          rgba(250, 235, 211, 0.85) 0%,
          transparent 20%);
    }

    .poetry-banner-container {
      position: relative;
      z-index: 5;
      width: 100%;
    }

    .poetry-left-column {
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      position: relative;
      z-index: 10;
    }

    .poetry-text {
      font-family: var(--font-serif);
      font-size: 2.85rem;
      font-weight: 600;
      color: var(--text-plum);
      line-height: 1.15;
      letter-spacing: 0.01em;
    }

    .poetry-text span {
      display: block;
    }

    .poetry-line-divider {
      width: 42px;
      height: 1px;
      background-color: var(--gold-light);
      opacity: 0.65;
      margin: 4px 0;
    }

    .red-seal-mark {
      margin-top: 14px;
      filter: drop-shadow(0px 2px 6px rgba(194, 57, 42, 0.25));
    }

    .banner-bottom-bar {
      display: none;
    }

    /* ==========================================================================
       Site Footer (100% Identical Pixel-Perfect Across All Pages)
       ========================================================================== */
    .site-footer {
      background-color: #251326;
      color: #f4eee6;
      width: 100%;
      margin: 0;
      padding: 65px 0 0 0;
      position: relative;
      z-index: 10;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.35fr 1.8fr 1.5fr;
      gap: 24px;
      padding-bottom: 45px;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-brand-col {
      padding-right: 15px;
      margin-top: -15px;
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: 8px;
    }

    .footer-logo-img {
      height: 130px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.08) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
      padding-left: 15px;
    }

    .footer-company-name {
      display: block;
      margin-top: 12px;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: #FFD886;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #d1c2b4;
      white-space: nowrap;
    }

    .showroom-line {
      white-space: normal;
    }

    .footer-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .footer-links a {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

        .footer-contact-info p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #f4eee6;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .footer-contact-info p.showroom-line {
      white-space: normal;
    }

    .footer-contact-info .contact-label,
    .footer-contact-info span {
      color: #c4a785;
      font-weight: 600;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.2px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4a785;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .social-btn:hover {
      background-color: #c4a785;
      color: #251326;
      transform: translateY(-2px);
    }

    /* Newsletter Box */
    .newsletter-box {
      margin-top: 24px;
    }

    .newsletter-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .newsletter-form {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 320px;
      height: 42px;
      border: 1.2px solid #d4a359;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(18, 8, 17, 0.4);
      margin: 0;
    }

    .newsletter-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 16px;
      color: #f4eee6;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: #a89888;
      opacity: 0.75;
    }

    .newsletter-submit {
      flex-shrink: 0;
      position: relative;
      right: 0;
      width: 48px;
      height: 100%;
      background: #d4a359;
      border: none;
      color: #251326;
      cursor: pointer;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .newsletter-submit:hover {
      background: #e6b86e;
      color: #120811;
    }

    .footer-bottom {
      border-top: 1px solid rgba(196, 167, 133, 0.18);
      padding: 24px 0 32px 0;
      background-color: #251326;
      width: 100%;
      margin: 0;
    }

    .footer-bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .copyright-text {
      font-size: 0.78rem;
      color: #a89888;
      margin: 0;
    }

    .end-journey-emblem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
    }

    /* Tablet & Mobile Media Queries (Only trigger at 868px and smaller) */
    @media (max-width: 1200px) {
      .footer-container {
        grid-template-columns: 1.2fr 1fr 1.1fr;
        gap: 36px 24px;
      }
    }

    @media (max-width: 868px) {
      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }

      .poetry-banner-section {
        flex-direction: column;
        min-height: auto;
        padding-bottom: 30px;
      }

      .banner-bg-container {
        position: relative;
        width: 100%;
        height: 320px;
      }

      .poetry-left-column {
        max-width: 100%;
        text-align: center;
        align-items: center;
      }
    }

    @media (max-width: 580px) {
      .footer-container {
        grid-template-columns: 1fr;
      }

      .footer-bottom-container {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }
    }

    /* ==========================================================================
   COLLECTION / PRODUCT PAGE STYLES
   ========================================================================== */

    /* Collection Hero Section */
    .collection-hero-wrapper {
      min-height: 520px;
    }

    .collection-banner-section {
      position: relative;
      width: 100%;
      min-height: 480px;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 20px 0 40px 0;
    }

    .collection-bg-image-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 62%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .collection-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right top !important;
      display: block;
      filter: contrast(1.02) saturate(1.02);
    }

    .collection-bg-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right,
          var(--bg-parchment) 0%,
          rgba(250, 235, 211, 0.96) 18%,
          rgba(250, 235, 211, 0.72) 35%,
          rgba(250, 235, 211, 0.15) 60%,
          transparent 80%),
        linear-gradient(to top,
          rgba(250, 235, 211, 0.85) 0%,
          transparent 18%),
        linear-gradient(to bottom,
          rgba(250, 235, 211, 0.85) 0%,
          transparent 18%);
    }

    .collection-banner-container {
      position: relative;
      z-index: 5;
      width: 100%;
    }

    .collection-left-content {
      max-width: 680px;
    }

    .collection-header-row {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 18px;
    }

    .collection-main-title {
      font-family: var(--font-serif);
      font-size: 3.4rem;
      font-weight: 700;
      color: var(--text-plum);
      letter-spacing: 0.03em;
      line-height: 1.1;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* Traditional Red Seal Emblem */
    .red-seal-box {
      display: inline-block;
      filter: drop-shadow(0px 3px 8px rgba(194, 59, 42, 0.3));
      transition: transform 0.3s ease;
    }

    .red-seal-box:hover {
      transform: translateY(-2px) scale(1.04);
    }

    .collection-subtitle {
      font-size: 1.02rem;
      line-height: 1.65;
      color: var(--text-muted);
      margin-bottom: 38px;
      font-weight: 400;
    }

    /* Stats Section */
    .collection-stats-grid {
      display: flex;
      align-items: center;
      gap: 28px;
      padding-top: 10px;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .stat-icon-wrapper {
      color: var(--gold-muted);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }

    .stat-number {
      font-family: var(--font-sans);
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-muted);
      line-height: 1.35;
    }

    .stat-divider {
      width: 1px;
      height: 65px;
      background-color: rgba(138, 108, 76, 0.22);
    }

    /* ==========================================================================
   Filter & Controls Toolbar Section
   ========================================================================== */
    .collection-filter-section {
      width: 100%;
      padding: 24px 0;
      background-color: var(--bg-parchment);
      position: relative;
      z-index: 10;
    }

    .collection-filter-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    /* Category Pills */
    .filter-pills-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-plum);
      background-color: rgba(250, 235, 211, 0.6);
      border: 1px solid rgba(138, 108, 76, 0.25);
      cursor: pointer;
      transition: all 0.25s ease;
      white-space: nowrap;
    }

    .filter-pill:hover {
      border-color: var(--text-plum);
      background-color: rgba(41, 21, 40, 0.05);
    }

    .filter-pill.active {
      background-color: var(--text-plum);
      color: #ffffff;
      border-color: var(--text-plum);
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.15);
    }

    .filter-pill.active svg {
      stroke: #ffffff;
    }

    /* Dropdowns / Sort Controls */
    .filter-dropdowns-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .dropdown-select {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-plum);
      background-color: rgba(250, 235, 211, 0.6);
      border: 1px solid rgba(138, 108, 76, 0.25);
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .dropdown-select:hover {
      border-color: var(--text-plum);
      background-color: rgba(41, 21, 40, 0.04);
    }

    /* ==========================================================================
   Section Title: The Archive
   ========================================================================== */
    .archive-header-section {
      width: 100%;
      padding: 50px 0 30px 0;
      background-color: var(--bg-parchment);
      text-align: center;
    }

    .archive-header-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .archive-divider-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 600px;
      margin-bottom: 12px;
    }

    .archive-line {
      height: 1px;
      flex: 1;
      background: linear-gradient(to right, transparent, var(--gold-light), transparent);
    }

    .archive-title {
      font-family: var(--font-serif);
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--text-plum);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .archive-subtitle {
      font-size: 1rem;
      color: var(--text-muted);
      font-weight: 400;
    }

    /* ==========================================================================
   Section 2: Archive Grid Cards (4x2 Grid)
   ========================================================================== */
    .archive-grid-section {
      position: relative;
      width: 100%;
      padding: 30px 0 80px 0;
      background-color: var(--bg-parchment);
    }

    .archive-grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .archive-card {
      position: relative;
      height: 460px;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
      background-color: #221221;
      box-shadow: none;
      transition: transform 0.35s ease;
      cursor: pointer;
    }

    .archive-card:hover {
      transform: translateY(-4px);
      box-shadow: none;
    }

    .card-bg-wrapper {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .card-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: brightness(1) contrast(1.02);
      transition: transform 0.6s ease;
    }

    .archive-card:hover .card-bg-img {
      transform: scale(1.04);
    }

    .card-gradient-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(to top,
          rgba(37, 19, 38, 0.92) 0%,
          rgba(37, 19, 38, 0.5) 45%,
          transparent 75%);
    }

    .card-gradient-overlay.overlay-darker {
      background: linear-gradient(to top,
          rgba(37, 19, 38, 0.95) 0%,
          rgba(37, 19, 38, 0.6) 50%,
          transparent 80%);
    }

    .card-top-row {
      position: relative;
      z-index: 5;
      display: flex;
      align-items: flex-start;
    }

    .collection-badge {
      display: inline-block;
      background-color: rgba(244, 238, 230, 0.92);
      color: var(--text-plum);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding: 6px 12px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .card-middle-content {
      position: relative;
      z-index: 5;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 64px;
    }

    .card-title {
      font-family: var(--font-serif);
      font-size: 1.85rem;
      font-weight: 700;
      color: #f7dfc5;
      line-height: 1.15;
      margin-bottom: 4px;
    }

    .title-inline {
      font-size: 1.6rem;
      margin-bottom: 2px;
    }

    .card-region {
      font-size: 0.85rem;
      font-weight: 500;
      color: rgba(245, 235, 220, 0.75);
      margin-bottom: 12px;
    }

    .region-compact {
      margin-bottom: 8px;
    }

    .card-desc {
      font-size: 0.88rem;
      line-height: 1.5;
      color: rgba(245, 235, 220, 0.85);
      font-weight: 400;
    }

    /* Card 2 Sub-products List */
    .sub-products-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 6px;
    }

    .sub-product-item {
      background: rgba(35, 18, 33, 0.72);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(229, 203, 171, 0.25);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sub-prod-thumb {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 1px solid rgba(229, 203, 171, 0.3);
    }

    .sub-prod-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sub-prod-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .sub-prod-name {
      font-size: 0.8rem;
      font-weight: 700;
      color: #ffffff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }

    .sub-prod-type {
      font-size: 0.68rem;
      color: #e5cbab;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .sub-prod-notes {
      font-size: 0.66rem;
      color: rgba(245, 235, 220, 0.75);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sub-prod-price-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0;
    }

    .sub-prod-price {
      font-size: 0.76rem;
      font-weight: 700;
      color: #e5cbab;
    }

    .sub-prod-weight {
      font-size: 0.68rem;
      color: rgba(245, 235, 220, 0.6);
    }

    /* Card Footer (Clean Transparent Overlay) */
    .card-footer-row {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      background: transparent;
      border-top: none;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
    }

    .card-tags {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .tag-category {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #e5cbab;
      text-transform: uppercase;
    }

    .tag-season {
      font-size: 0.7rem;
      font-weight: 600;
      color: rgba(245, 235, 220, 0.6);
      text-transform: uppercase;
    }

    .card-arrow-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1.2px solid rgba(229, 203, 171, 0.6);
      background: none;
      color: #f7dfc5;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.25s ease, background-color 0.25s ease;
    }

    .archive-card:hover .card-arrow-btn {
      transform: translateX(3px);
      background-color: rgba(229, 203, 171, 0.15);
      border-color: #f7dfc5;
    }

    /* Bottom CTA Actions */
    .archive-bottom-actions {
      display: flex;
      justify-content: center;
      margin-top: 45px;
    }

    .btn-archive-all {
      padding: 15px 36px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      border: 1.5px solid var(--border-subtle);
      color: var(--text-plum);
    }

    .btn-archive-all:hover {
      background-color: var(--text-plum);
      color: #ffffff;
      border-color: var(--text-plum);
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.18);
    }

    /* Responsive adjustments for Archive Grid */
    @media (max-width: 1200px) {
      .archive-grid-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 650px) {
      .archive-grid-container {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
   Section 3: Curator's Selection Carousel Section
   ========================================================================== */
    .curator-selection-section {
      position: relative;
      width: 100%;
      padding: 50px 0 90px 0;
      background-color: var(--bg-parchment);
    }

    .curator-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 30px;
      position: relative;
    }

    .curator-title-block {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .curator-divider-row {
      margin-bottom: 6px;
    }

    .carousel-nav-btns {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      margin-bottom: 4px;
    }

    .carousel-btn {
      width: 38px;
      height: 38px;
      border-radius: 6px;
      border: 1.2px solid rgba(138, 108, 76, 0.35);
      background-color: rgba(250, 235, 211, 0.7);
      color: var(--text-plum);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .carousel-btn:hover {
      border-color: var(--text-plum);
      background-color: var(--text-plum);
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.15);
    }

    .curator-carousel-viewport {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 10px 0;
    }

    .curator-cards-grid {
      display: flex;
      gap: 24px;
      transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
      width: 100%;
    }

    .curator-card {
      flex: 0 0 calc(25% - 18px);
      min-width: calc(25% - 18px);
    }

    .badge-new {
      background-color: #b88654 !important;
      color: #ffffff !important;
    }

    /* Responsive adjustments for Curator's Selection & Mobile Layouts */
    @media (max-width: 1200px) {
      .curator-card {
        flex: 0 0 calc(50% - 12px);
        min-width: calc(50% - 12px);
      }

      .archive-grid-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 868px) {
      .collection-banner-section {
        flex-direction: column;
        min-height: auto;
        padding: 20px 5% 40px 5%;
      }

      .collection-bg-image-container {
        position: relative;
        width: 100%;
        height: 280px;
        order: 2;
        margin-top: 20px;
      }

      .collection-left-content {
        max-width: 100%;
        text-align: center;
      }

      .collection-header-row {
        justify-content: center;
      }

      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }

      .nav-menu {
        display: none;
      }
    }

    @media (max-width: 650px) {
      .collection-main-title {
        font-size: 2.4rem;
      }

      .archive-grid-container {
        grid-template-columns: 1fr;
      }

      .curator-header-row {
        flex-direction: column;
        align-items: center;
      }

      .curator-card {
        flex: 0 0 100%;
        min-width: 100%;
      }
    }

    @media (max-width: 580px) {
      .footer-container {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
      }

      .footer-brand-col,
      .footer-col {
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .footer-logo-img {
        padding-left: 0;
      }

      .social-links {
        justify-content: center;
      }

      .newsletter-form {
        margin: 0 auto;
      }

      .footer-bottom-container {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }

      .showroom-line,
      .footer-company-name,
      .section-title span {
        white-space: normal !important;
      }
    }

/* ===== Exact Original Styles from product.html ===== */
html {
      overflow-y: scroll;
    }
    /* ==========================================================================
   Design Tokens & Resets
   ========================================================================== */
    :root {
      --bg-parchment: #FAEBD3;
      --bg-parchment-accent: #ebd5b9;
      --text-plum: #291528;
      --text-muted: #56474f;
      --gold-muted: #9a7952;
      --gold-light: #c4a785;
      --gold-accent: #C37D40;
      --green-dark: #5B3049;
      --green-stock: #5B3049;
      --border-subtle: #8c786a;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: #251326;
      color: var(--text-plum);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Page Canvas */
    .page-wrapper {
      position: relative;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      min-height: 100vh;
      background-color: var(--bg-parchment);
      display: flex;
      flex-direction: column;
    }

    /* ==========================================================================
   Header Navigation Bar
   ========================================================================== */
    .navbar {
      position: relative;
      z-index: 10;
      width: 100%;
      padding: 16px 5% 0 5%;
      background-color: var(--bg-parchment);
    }

    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo-link {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin-top: -6px;
    }

    .brand-logo-img {
      height: 75px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0px 2px 4px rgba(41, 21, 40, 0.08));
    
      margin-left: 22px;}

    .brand-logo-text {
      margin-top: 4px;
      margin-left: 0;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #5B3049;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: -60px;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: #C37D40;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: #5B3049;
    }

    .nav-link.active {
      color: #5B3049;
      font-weight: 700;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: #5B3049;
      border-radius: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .icon-btn:hover {
      transform: scale(1.05);
      color: #5B3049;
    }

    .cart-btn {
      position: relative;
    }

    .cart-badge {
      position: absolute;
      top: 2px;
      right: 0px;
      background-color: var(--text-plum);
      color: var(--bg-parchment);
      font-size: 0.65rem;
      font-weight: 700;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ==========================================================================
   Breadcrumb Navigation
   ========================================================================== */
    .breadcrumb-section {
      width: 100%;
      padding: 16px 5% 24px 5%;
      background-color: var(--bg-parchment);
    }

    .breadcrumb-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.88rem;
      color: var(--text-muted);
    }

    .breadcrumb-link {
      color: #4a3e47;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .breadcrumb-link:hover {
      color: var(--text-plum);
      text-decoration: underline;
    }

    .breadcrumb-separator {
      opacity: 0.5;
      font-size: 0.8rem;
    }

    .breadcrumb-current {
      font-weight: 700;
      color: var(--text-plum);
    }

    /* ==========================================================================
   Product Detail Main Section (2-Column Grid)
   ========================================================================== */
    .product-detail-section {
      width: 100%;
      padding: 10px 5% 80px 5%;
      background-color: var(--bg-parchment);
      flex: 1;
    }

    .product-detail-container {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: start;
    }

    /* --------------------------------------------------------------------------
   Left Column: Product Image Gallery
   -------------------------------------------------------------------------- */
    .product-gallery-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
    }

    /* Main Product Image Card */
    .main-image-card {
      position: relative;
      width: 100%;
      aspect-ratio: 1.08 / 1;
      border-radius: 16px;
      overflow: hidden;
      background-color: #e5d4bd;
      box-shadow: 0 10px 32px rgba(41, 21, 40, 0.08);
      border: 1px solid rgba(140, 120, 100, 0.2);
    }

    .main-image-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.4s ease;
    }

    .main-image-card:hover .main-image-img {
      transform: scale(1.02);
    }

    /* Top Left Badges */
    .product-badges-stacked {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 5;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }

    .badge-bestseller, .badge-premium {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      padding: 6px 12px;
      border-radius: 6px;
      text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .badge-bestseller {
      background-color: #5B3049;
      color: #ffffff;
    }

    .badge-premium {
      background-color: rgba(255, 239, 213, 0.95);
      color: #7b5b29;
      border: 1px solid #d4a359;
    }

    /* Top Right Zoom Button */
    .gallery-zoom-btn {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 5;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background-color: #ffffff;
      color: var(--text-plum);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .gallery-zoom-btn:hover {
      transform: scale(1.08);
      background-color: #f7edd8;
    }

    /* Thumbnail Carousel Row */
    .thumbs-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .thumb-nav-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-plum);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      opacity: 0.7;
      transition: opacity 0.2s ease, transform 0.2s ease;
      flex-shrink: 0;
    }

    .thumb-nav-btn:hover {
      opacity: 1;
      transform: scale(1.1);
    }

    .thumbs-track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      width: 100%;
    }

    .thumb-item {
      position: relative;
      aspect-ratio: 1.15 / 1;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      border: 2.5px solid transparent;
      background-color: #e5d4bd;
      transition: all 0.25s ease;
    }

    .thumb-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
    }

    .thumb-item:hover img {
      transform: scale(1.05);
    }

    .thumb-item.active {
      border-color: #a87434;
      box-shadow: 0 4px 14px rgba(168, 116, 52, 0.3);
    }

    /* --------------------------------------------------------------------------
   Right Column: Product Details & Purchase Form
   -------------------------------------------------------------------------- */
    .product-info-col {
      display: flex;
      flex-direction: column;
      padding-left: 10px;
    }

    .product-category-tag {
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      color: #5B3049;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    /* Main Product Title */
    .product-main-title {
      font-family: var(--font-serif);
      font-size: 2.8rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.18;
      margin-bottom: 14px;
    }

    /* Location & Harvest Metadata */
    .product-meta-location {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 0.92rem;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    .meta-location-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
    }

    .meta-separator {
      opacity: 0.4;
    }

    /* Product Description Paragraph */
    .product-description-text {
      font-size: 1rem;
      line-height: 1.65;
      color: var(--text-muted);
      margin-bottom: 24px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Tasting Notes / Flavor Profile Pills */
    .flavor-pills-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .flavor-pill {
      padding: 8px 20px;
      border: 1.2px solid #C37D40;
      border-radius: 12px;
      font-size: 0.88rem;
      font-weight: 600;
      color: #5B3049;
      background-color: rgba(195, 125, 64, 0.08);
    }

    /* Brewing Parameters Card Row */
    .brewing-params-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      border-top: 1px solid rgba(140, 120, 100, 0.22);
      border-bottom: 1px solid rgba(140, 120, 100, 0.22);
      margin-bottom: 28px;
    }

    .brewing-param-item {
      display: flex;
      border: 1px solid rgba(140, 120, 100, 0.25);
      border-radius: 6px;
      padding: 8px 14px;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-plum);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      opacity: 0.85;
    }

    /* Box & Variant Selection */
    .section-heading {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 12px;
      display: block;
    }

    .variant-card, .letter-option {
      display: block;
      margin-bottom: 12px;
      cursor: pointer;
    }

    .variant-card input[type="radio"], .letter-option input[type="radio"] {
      display: none;
    }

    .variant-card-content, .letter-option-content {
      display: flex;
      align-items: center;
      padding: 16px;
      border: 1.5px solid rgba(195, 125, 64, 0.4);
      border-radius: 12px;
      background-color: rgba(195, 125, 64, 0.03);
      transition: all 0.2s ease;
    }

    .variant-card input[type="radio"]:checked + .variant-card-content,
    .letter-option input[type="radio"]:checked + .letter-option-content {
      border-color: #5B3049;
      background-color: rgba(91, 48, 73, 0.06);
    }

    .radio-circle {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1.5px solid rgba(195, 125, 64, 0.6);
      margin-right: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .variant-card input[type="radio"]:checked + .variant-card-content .radio-circle,
    .letter-option input[type="radio"]:checked + .letter-option-content .radio-circle {
      border-color: #5B3049;
    }

    .variant-card input[type="radio"]:checked + .variant-card-content .radio-circle::after,
    .letter-option input[type="radio"]:checked + .letter-option-content .radio-circle::after {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #5B3049;
    }

    .variant-info, .letter-title {
      flex: 1;
    }

    .variant-title, .letter-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text-plum);
      margin-bottom: 4px;
    }

    .variant-subtext {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .variant-price, .letter-price {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--text-plum);
    }

    .letter-section {
      margin-top: 24px;
      transition: opacity 0.3s ease;
    }

    /* Custom Message Box */
    .custom-message-box {
      margin-top: 14px;
      background-color: rgba(255, 255, 255, 0.85);
      border: 1.5px solid rgba(195, 125, 64, 0.45);
      border-radius: 12px;
      padding: 14px 16px;
      position: relative;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease, transform 0.3s ease;
      display: none;
      opacity: 0;
      transform: translateY(-6px);
    }

    .custom-message-box.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
      border-color: #C37D40;
    }

    .custom-message-box:focus-within {
      border-color: #5B3049;
      box-shadow: 0 4px 16px rgba(91, 48, 73, 0.12);
      background-color: #ffffff;
    }

    .custom-message-input {
      width: 100%;
      min-height: 80px;
      background: transparent;
      border: none;
      resize: none;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      color: var(--text-plum);
      outline: none;
    }

    .custom-message-input::placeholder {
      color: #9a8a80;
    }

    .char-counter {
      text-align: right;
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 8px;
    }

    /* Dynamic Total Section */
    .total-section {
      margin-top: 24px;
      margin-bottom: 24px;
      padding-top: 24px;
      border-top: 1px solid rgba(140, 120, 100, 0.2);
    }

    .total-heading {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .total-price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }

    .total-price-val {
      font-family: var(--font-serif);
      font-size: 1.8rem;
      font-weight: 700;
      color: #5B3049;
    }

    .total-subtext {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* Action Buttons Row */
    .action-buttons-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 32px;
    }

    /* Quantity Selector Box */
    .qty-selector-box {
      display: flex;
      align-items: center;
      border: 1.5px solid rgba(195, 125, 64, 0.4);
      border-radius: 12px;
      background-color: transparent;
      height: 48px;
      overflow: hidden;
    }

    .qty-btn {
      width: 40px;
      height: 100%;
      background: none;
      border: none;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-plum);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .qty-btn:hover {
      background-color: rgba(41, 21, 40, 0.06);
    }

    .qty-input {
      width: 38px;
      height: 100%;
      border: none;
      background: none;
      text-align: center;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text-plum);
      pointer-events: none;
    }

    .btn-buy-now, .btn-add-cart {
      flex: 1;
      height: 48px;
      border-radius: 12px;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: opacity 0.2s ease;
      background-color: #5B3049;
      color: #FFD886;
      border: none;
    }

    .btn-add-cart {
      background-color: #C37D40;
      color: #291528;
    }

    .btn-buy-now:hover, .btn-add-cart:hover {
      opacity: 0.9;
    }

    /* Trust Bar Section */
    .trust-bar-section {
      width: 100%;
      background-color: #f3dfc8;
      padding: 32px 5%;
      border-top: 1px solid rgba(140, 120, 100, 0.15);
      border-bottom: 1px solid rgba(140, 120, 100, 0.15);
      margin-bottom: 40px;
    }

    .trust-bar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .guarantee-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .guarantee-icon {
      color: var(--text-plum);
      opacity: 0.8;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .guarantee-text-group {
      display: flex;
      flex-direction: column;
    }

    .guarantee-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.2;
    }

    .guarantee-sub {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-top: 2px;
      line-height: 1.3;
    }

    /* ==========================================================================
   Product Specs & Information Section 2
   ========================================================================== */
    .product-specs-section {
      width: 100%;
      padding: 0 5% 80px 5%;
      background-color: var(--bg-parchment);
    }

    .product-specs-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Common Specs Card Style */
    .specs-card {
      background-color: #ffffff;
      border-radius: 12px;
      border: 1px solid rgba(195, 125, 64, 0.16);
      box-shadow: 0 4px 20px rgba(41, 21, 40, 0.04);
      padding: 32px;
      position: relative;
      overflow: hidden;
    }

    .specs-card-title {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      color: #5B3049;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* 1. Row 1 Grid (About This Tea + Flavor Profile) */
    .specs-grid-row-1 {
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 24px;
    }

    /* Card 1: About This Tea */
    .about-tea-card {
      display: flex;
      align-items: center;
      padding: 0; /* Override padding for full bleed image */
    }

    .about-tea-content {
      position: relative;
      z-index: 5;
      width: 55%;
      padding: 36px 40px;
    }

    .about-tea-heading {
      font-family: var(--font-serif);
      font-size: 1.8rem;
      font-weight: 700;
      color: #5B3049;
      line-height: 1.3;
      margin-bottom: 16px;
    }

    .about-tea-desc {
      font-size: 0.95rem;
      line-height: 1.7;
      color: var(--text-muted);
      margin-bottom: 28px;
    }

    .btn-read-more {
      padding: 12px 24px;
      background-color: transparent;
      color: #5B3049;
      border: 1.5px solid #5B3049;
      border-radius: 6px;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .btn-read-more:hover {
      background-color: #5B3049;
      color: #ffffff;
    }

    .about-tea-bg-img-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 55%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .about-tea-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .about-tea-blend-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
    }

    /* Card 2: Flavor Profile */
    .flavor-layout {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .flavor-ratings-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .flavor-rating-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .flavor-rating-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-muted);
    }

    .flavor-rating-leaves {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .flavor-profile-card {
      align-self: start;
    }

    .leaf-icon-filled {
      color: #C37D40;
      filter: drop-shadow(0px 1px 2px rgba(139, 90, 43, 0.2));
    }

    .leaf-icon-empty {
      color: #e5e0d8;
    }

    .flavor-callout-box {
      background-color: rgba(255, 216, 134, 0.15);
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      border-left: 3px solid #C37D40;
    }
    
    .flavor-callout-box p {
      font-size: 0.9rem;
      line-height: 1.5;
      color: #5B3049;
      font-weight: 500;
      margin: 0;
    }

    /* 2. Row 2 Grid (Brewing, Processing, Storage) */
    .specs-grid-row-2 {
      display: grid;
      grid-template-columns: 1.2fr 1.8fr 1fr;
      gap: 24px;
    }

    /* Card 3: Brewing Guide */
    .brewing-layout {
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-bottom: 24px;
    }

    .brewing-header {
      font-size: 0.75rem;
      font-weight: 800;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      margin-bottom: 16px;
      display: block;
      border-bottom: 1px solid rgba(140, 120, 100, 0.15);
      padding-bottom: 8px;
    }

    .brewing-timeline {
      display: flex;
      gap: 24px;
    }

    .stepper-static {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .stepper-item {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .stepper-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: var(--theme-bg-tint);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--theme-color);
    }

    .stepper-text {
      display: flex;
      flex-direction: column;
    }

    .st-label {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .st-val {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--theme-color);
    }

    .stepper-dynamic {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-left: 20px;
    }

    .stepper-line {
      position: absolute;
      left: 6px;
      top: 10px;
      bottom: 10px;
      width: 2px;
      background-color: var(--theme-bg-tint);
      z-index: 0;
    }

    .step-point {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      padding-left: 16px;
    }

    .step-point::before {
      content: '';
      position: absolute;
      left: -17px;
      top: 4px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: var(--leaf-active);
      border: 2px solid #fff;
    }

    .sp-icon {
      display: none;
    }

    .sp-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 2px;
    }

    .sp-val {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--theme-color);
    }

    .brewing-auto {
      background-color: var(--theme-bg-tint);
      border-radius: 8px;
      padding: 20px;
      text-align: center;
    }

    .qr-heading {
      font-size: 0.75rem;
      font-weight: 800;
      color: var(--theme-color);
      letter-spacing: 0.05em;
      display: block;
      margin-bottom: 12px;
    }

    .qr-img-box {
      width: 100px;
      height: 100px;
      margin: 0 auto 12px;
      background-color: #fff;
      padding: 6px;
      border-radius: 6px;
      border: 1px solid rgba(0,0,0,0.05);
    }

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

    .btn-download-qr {
      background: none;
      border: none;
      color: var(--leaf-active);
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }
    
    .btn-download-qr:hover {
      text-decoration: underline;
    }

    .qr-hint {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin: 0;
    }

    .pro-tip-callout {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px dashed rgba(140, 120, 100, 0.2);
      font-size: 0.85rem;
      line-height: 1.5;
      color: var(--text-muted);
    }
    
    .pro-tip-callout strong {
      color: var(--theme-color);
    }

    /* Card 4: Processing Method */
    .processing-card {
      align-self: start;
    }

    .processing-flow-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px 10px;
      margin-bottom: 24px;
    }

    .process-step {
      flex: 0 0 calc(25% - 10px);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .step-num {
      position: absolute;
      top: -8px;
      right: 50%;
      transform: translateX(20px);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: var(--step-number-bg);
      color: #fff;
      font-size: 0.6rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .step-icon-box {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background-color: var(--theme-bg-tint);
      color: var(--theme-color);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      transition: all 0.3s ease;
    }

    .process-step:hover .step-icon-box {
      background-color: var(--theme-color);
      color: #fff;
      transform: translateY(-2px);
    }

    .step-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--theme-color);
      margin-bottom: 4px;
    }

    .step-desc {
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .process-arrow {
      display: none; /* Hidden on desktop grid, shown on mobile flex */
    }

    /* Card 5: Storage Guide */
    .storage-card {
      align-self: start;
    }

    .storage-rules-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .storage-rule-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .storage-rule-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background-color: var(--theme-bg-tint);
      color: var(--theme-color);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .storage-rule-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .rule-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--theme-color);
    }

    .rule-desc {
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.4;
    }

    /* Bottom Banner */
    .product-banner-section {
      width: 100%;
      background-color: #5B3049;
      padding: 40px 5%;
      margin-bottom: 80px;
      text-align: center;
    }
    
    .banner-container {
      max-width: 1440px;
      margin: 0 auto;
    }
    
    .banner-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .banner-content p {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 600;
      color: #FFD886;
      margin: 0;
      max-width: 650px;
      line-height: 1.5;
      text-align: left;
      display: inline-block;
    }

    .btn-banner {
      padding: 12px 28px;
      background-color: transparent;
      color: #FFD886;
      border: 1.5px solid #FFD886;
      border-radius: 12px;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: background-color 0.25s ease, color 0.25s ease;
    }
    
    .btn-banner:hover {
      background-color: #FFD886;
      color: #5B3049;
    }

    /* Responsive adjustments for Specs Section 2 */
    @media (max-width: 1100px) {
      .specs-grid-row-1,
      .specs-grid-row-2 {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      
      .about-tea-content {
        width: 100%;
        padding: 40px;
      }
      
      .about-tea-bg-img-container {
        display: none;
      }

      .brewing-layout {
        flex-direction: row;
        align-items: flex-start;
      }
      
      .brewing-manual-stepper {
        flex: 2;
      }
      
      .brewing-auto {
        flex: 1;
      }
      
      .processing-flow-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .brewing-layout {
        flex-direction: column;
        align-items: stretch;
      }
      
      .brewing-timeline {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
      }
      
      .stepper-dynamic {
        padding-left: 0;
      }
      
      .stepper-line {
        display: none;
      }
      
      .step-point {
        padding-left: 0;
        display: grid;
        grid-template-columns: 36px 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
      }
      
      .sp-icon {
        display: flex !important;
        grid-row: 1 / span 2;
        grid-column: 1;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background-color: var(--theme-bg-tint);
        align-items: center;
        justify-content: center;
        color: var(--theme-color);
      }

      .sp-label {
        grid-row: 1;
        grid-column: 2;
        margin-bottom: 0;
      }

      .sp-val {
        grid-row: 2;
        grid-column: 2;
      }
      
      .step-point::before {
        display: none;
      }
      
      .processing-flow-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }
      
      .process-arrow {
        display: block;
        color: var(--theme-bg-tint);
        margin: 4px 0;
        transform: rotate(90deg);
      }
    }

    /* ==========================================================================
   Product Section 3: Traceability & Verification
   ========================================================================== */
    .product-section-3 {
      width: 100%;
      padding: 0 5% 90px 5%;
      background-color: var(--bg-parchment);
    }

    .product-section-3-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    
    .traceability-header {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    
    .traceability-main-title {
      font-family: var(--font-serif);
      font-size: 1.7rem;
      font-weight: 700;
      color: #5B3049;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
    }
    
    .traceability-main-title svg {
      color: #5B3049;
    }
    
    .traceability-subtitle {
      font-size: 0.95rem;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 600px;
      margin: 0;
    }

    /* Traceability Grid & Conditional Layout */
    .traceability-cards-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px;
    }
    
    /* Utility to hide the section if no data */
    .traceability-hidden {
      display: none !important;
    }

    /* Individual Traceability Card */
    .traceability-card {
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(41, 21, 40, 0.04);
      padding: 36px 40px;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(195, 125, 64, 0.12);
      flex: 0 1 calc(50% - 16px);
      min-width: 450px;
    }

    .trace-card-header {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(140, 120, 100, 0.15);
      position: relative;
    }
    
    .trace-card-header::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 2px;
      background-color: #C37D40;
    }

    .trace-card-title {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      font-weight: 700;
      color: #5B3049;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
    }
    
    .cert-header-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background-color: #5B3049;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .trace-card-sub {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.45;
      margin: 0 0 0 54px;
    }

    /* Card Content: Image + List */
    .trace-card-content {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 32px;
      margin-bottom: 32px;
      align-items: flex-start;
      flex: 1; /* Pushes footer down */
    }

    .cert-img-wrapper {
      width: 100%;
    }

    .cert-full-img {
      width: 100%;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      border: 1px solid rgba(0,0,0,0.05);
      display: block;
    }

    .cert-metadata-list {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .metadata-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .metadata-icon {
      color: #C37D40;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .metadata-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .metadata-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: #5B3049;
    }

    .metadata-value {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.4;
    }

    /* CTA Button & Footer Badge */
    .btn-trace-cta {
      width: 100%;
      padding: 16px;
      background-color: #5B3049;
      color: #fff;
      border: none;
      border-radius: 12px;
      font-family: var(--font-sans);
      font-size: 0.88rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: background-color 0.25s ease;
      margin-bottom: 16px;
    }
    
    .btn-trace-cta:hover {
      background-color: #3B1C2D;
    }
    
    .trace-footer-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 0.8rem;
      color: var(--text-muted);
      text-align: center;
    }
    
    .trace-footer-badge svg {
      color: #C37D40;
    }

    /* Responsive adjustments */
    @media (max-width: 1100px) {
      .traceability-cards-grid {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 600px) {
      .trace-card-content {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      
      .cert-full-img {
        max-width: 280px;
        margin: 0 auto;
      }
    }

    /* 2. YOU MAY ALSO LIKE Carousel Section */
    .rec-carousel-section {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .rec-section-title {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 700;
      color: #5B3049;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .rec-carousel-wrapper {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
    }

    .rec-nav-btn {
      position: absolute;
      top: 38%;
      z-index: 10;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ffffff;
      border: 1px solid rgba(195, 125, 64, 0.25);
      color: #5B3049;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(41, 21, 40, 0.1);
      transition: all 0.25s ease;
    }

    .rec-nav-btn:hover {
      background-color: #5B3049;
      color: #ffffff;
      border-color: #5B3049;
      transform: scale(1.06);
    }

    .rec-btn-prev {
      left: -20px;
    }

    .rec-btn-next {
      right: -20px;
    }

    .rec-carousel-track-container {
      width: 100%;
      overflow: hidden;
      padding: 10px 0;
    }

    .rec-carousel-track {
      display: flex;
      gap: 24px;
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
      width: 100%;
    }

    .rec-product-card {
      flex: 0 0 calc((100% - 72px) / 4);
      box-sizing: border-box;
      background-color: transparent;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform 0.3s ease;
    }

    .rec-product-card:hover {
      transform: translateY(-4px);
    }

    .rec-card-img-card {
      width: 100%;
      aspect-ratio: 1.6 / 1;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(41, 21, 40, 0.08);
      border: 1px solid rgba(195, 125, 64, 0.18);
    }

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

    .rec-product-card:hover .rec-card-img-card img {
      transform: scale(1.04);
    }

    .rec-card-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .rec-card-title {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      color: #5B3049;
      line-height: 1.25;
      text-decoration: none;
      transition: color 0.2s ease;
    }
    
    .rec-product-link {
      text-decoration: none;
      display: block;
    }
    
    .rec-product-link:hover .rec-card-title {
      color: #C37D40;
    }

    .rec-card-category {
      font-size: 0.8rem;
      color: #C37D40;
      font-weight: 500;
    }

    .rec-card-bottom-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
    }

    .rec-card-price-rating {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .rec-rating-stars {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .stars-icons {
      color: #d98a2b;
      display: flex;
      gap: 1px;
    }

    .rec-price-val {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 800;
      color: #5B3049;
    }

    .btn-rec-cart {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      border: 1.5px solid #C37D40;
      background: transparent;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-rec-cart:hover {
      background-color: #5B3049;
      color: #ffffff;
      border-color: #5B3049;
    }

    /* Responsive adjustments for Section 3 */
    @media (max-width: 1100px) {
      .traceability-banner-card {
        grid-template-columns: repeat(2, 1fr);
      }

      .trace-col-item::after {
        display: none;
      }

      .rec-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 650px) {
      .traceability-banner-card {
        grid-template-columns: 1fr;
      }

      .rec-cards-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
   Product Section 4: Frequently Asked Questions & Trust Bar
   ========================================================================== */
    .faq-section {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
    }

    .faq-header-wrapper {
      text-align: center;
      margin-bottom: 40px;
    }

    .faq-section-title {
      font-family: var(--font-serif);
      font-size: 2.2rem;
      font-weight: 700;
      color: #5B3049;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .faq-section-sub {
      font-size: 0.95rem;
      color: var(--text-muted);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 40px;
      align-items: start;
    }

    .faq-card {
      background-color: #ffffff;
      border-radius: 12px;
      border: 1px solid rgba(195, 125, 64, 0.12);
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.03);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .faq-question-btn {
      width: 100%;
      padding: 24px 28px;
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .faq-question-btn:hover {
      background-color: rgba(195, 125, 64, 0.05);
    }

    .faq-btn-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .faq-icon-wrapper {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background-color: #FFD886;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #C37D40;
      flex-shrink: 0;
    }

    .faq-index {
      font-family: var(--font-serif);
      font-size: 1.2rem;
      font-weight: 700;
      color: #C37D40;
      flex-shrink: 0;
    }

    .faq-title {
      font-family: var(--font-serif);
      font-size: 1.1rem;
      font-weight: 700;
      color: #5B3049;
      padding-right: 16px;
    }

    .faq-chevron {
      color: #C37D40;
      transition: transform 0.3s ease;
      flex-shrink: 0;
    }

    .faq-card.active .faq-chevron {
      transform: rotate(180deg);
      color: #5B3049;
    }

    .faq-answer-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease;
      padding: 0 28px 0 94px;
      font-size: 0.92rem;
      line-height: 1.6;
      color: var(--text-muted);
    }

    .faq-card.active .faq-answer-content {
      max-height: 300px;
      padding: 0 28px 24px 94px;
    }

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

    @media (max-width: 600px) {
      .faq-btn-left {
        gap: 12px;
      }
      .faq-answer-content {
        padding-left: 24px;
      }
      .faq-card.active .faq-answer-content {
        padding: 0 24px 20px 24px;
      }
    }

    /* ==========================================================================
       Site Footer (100% Identical Pixel-Perfect Across All Pages)
       ========================================================================== */
    .site-footer {
      background-color: #251326;
      color: #f4eee6;
      width: 100%;
      margin: 0;
      padding: 65px 0 0 0;
      position: relative;
      z-index: 10;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.35fr 1.8fr 1.5fr;
      gap: 24px;
      padding-bottom: 45px;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-brand-col {
      padding-right: 15px;
      margin-top: -15px;
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: 8px;
    }

    .footer-logo-img {
      height: 130px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.08) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
      padding-left: 15px;
    }

    .footer-company-name {
      display: block;
      margin-top: 12px;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: #FFD886;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #d1c2b4;
      white-space: nowrap;
    }

    .showroom-line {
      white-space: normal;
    }

    .footer-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .footer-links a {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

        .footer-contact-info p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #f4eee6;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .footer-contact-info p.showroom-line {
      white-space: normal;
    }

    .footer-contact-info .contact-label,
    .footer-contact-info span {
      color: #c4a785;
      font-weight: 600;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.2px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4a785;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .social-btn:hover {
      background-color: #c4a785;
      color: #251326;
      transform: translateY(-2px);
    }

    /* Newsletter Box */
    .newsletter-box {
      margin-top: 24px;
    }

    .newsletter-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .newsletter-form {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 320px;
      height: 42px;
      border: 1.2px solid #d4a359;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(18, 8, 17, 0.4);
      margin: 0;
    }

    .newsletter-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 16px;
      color: #f4eee6;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: #a89888;
      opacity: 0.75;
    }

    .newsletter-submit {
      flex-shrink: 0;
      position: relative;
      right: 0;
      width: 48px;
      height: 100%;
      background: #d4a359;
      border: none;
      color: #251326;
      cursor: pointer;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .newsletter-submit:hover {
      background: #e6b86e;
      color: #120811;
    }

    .footer-bottom {
      border-top: 1px solid rgba(196, 167, 133, 0.18);
      padding: 24px 0 32px 0;
      background-color: #251326;
      width: 100%;
      margin: 0;
    }

    .footer-bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .copyright-text {
      font-size: 0.78rem;
      color: #a89888;
      margin: 0;
    }

    .end-journey-emblem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
    }

    /* Mobile Navigation Toggle & Drawer Overlay */
    .mobile-menu-toggle {
      display: none;
    }

    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(37, 19, 38, 0.65);
      backdrop-filter: blur(4px);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .mobile-nav-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-nav-drawer {
      position: absolute;
      top: 0;
      right: 0;
      width: 82%;
      max-width: 320px;
      height: 100%;
      background-color: var(--bg-parchment);
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      padding: 24px 20px;
      box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25);
    }

    .mobile-nav-overlay.active .mobile-nav-drawer {
      transform: translateX(0);
    }

    .mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(140, 120, 100, 0.2);
      margin-bottom: 24px;
    }

    .mobile-close-btn {
      background: none;
      border: none;
      color: var(--text-plum);
      cursor: pointer;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
    }

    .mobile-nav-link {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-plum);
      text-decoration: none;
      padding: 12px 16px;
      border-radius: 8px;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
      background-color: rgba(91, 48, 73, 0.08);
      color: #5B3049;
      font-weight: 700;
    }

    .mobile-drawer-footer {
      padding-top: 20px;
      border-top: 1px solid rgba(140, 120, 100, 0.2);
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .mobile-drawer-footer span {
      font-weight: 700;
      color: var(--text-plum);
    }

    @media (max-width: 868px) {
      .mobile-menu-toggle {
        display: flex !important;
      }
    }

    /* Mobile Responsive Enhancements & Section Alignments */
    @media (max-width: 1100px) {
      .product-detail-container {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .product-info-col {
        padding-left: 0;
      }

      .specs-grid-row-1,
      .specs-grid-row-2,
      .specs-middle-row,
      .specs-bottom-row {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .traceability-banner-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .trace-col-item::after {
        display: none !important;
      }
    }

    @media (max-width: 1200px) {
      .footer-container {
        grid-template-columns: 1.2fr 1fr 1.1fr;
        gap: 36px 24px;
      }
    }

    @media (max-width: 768px) {
      .specs-summary-banner {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
        padding: 22px 20px;
      }

      .summary-spec-item::after {
        display: none !important;
      }

      .specs-card {
        padding: 24px 20px;
      }

      .about-tea-card {
        padding: 24px 20px;
        min-height: auto;
      }

      .about-tea-content {
        max-width: 100%;
      }

      .about-tea-bg-img-container {
        display: none !important;
      }

      .brewing-timeline {
        flex-direction: column;
        gap: 20px;
      }

      .rec-btn-prev {
        left: 4px;
      }

      .rec-btn-next {
        right: 4px;
      }

      .weight-options-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .trust-guarantees-grid,
      .trust-bar-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }

      .brewing-guide-grid,
      .storage-guide-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 12px;
      }

      .traceability-banner-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 20px;
      }

      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }

      .nav-menu {
        display: none;
      }
    }

    @media (max-width: 580px) {
      html, body {
        overflow-x: hidden !important;
      }
      .page-wrapper {
        overflow-x: hidden !important;
        width: 100% !important;
      }
      .action-buttons-row {
        flex-wrap: wrap;
      }
      .btn-buy-now, .btn-add-cart {
        flex: 1 1 100%;
      }
      .qty-selector-box {
        width: 100%;
      }
      .breadcrumb-container {
        flex-wrap: wrap;
      }
      .tags-wrapper {
        flex-wrap: wrap;
      }

      .product-specs-section {
        padding: 0 4% 50px 4%;
      }

      .specs-card {
        padding: 20px 16px;
      }

      .trust-bar-section {
        padding: 20px 4%;
      }

      .product-main-image-box {
        height: 320px;
      }

      .product-main-title {
        font-size: 1.8rem;
      }

      .specs-summary-banner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px 16px;
      }

      .flavor-profile-card {
        padding: 20px 16px;
      }

      .flavor-rating-row {
        gap: 8px;
      }

      .flavor-rating-leaves {
        gap: 4px;
      }

      .brewing-guide-grid,
      .storage-guide-grid,
      .trust-guarantees-grid,
      .trust-bar-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 10px;
      }

      .rec-product-card {
        flex: 0 0 100%;
      }

      .footer-container {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
      }

      .footer-brand-col,
      .footer-col {
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .footer-logo-img {
        padding-left: 0;
      }

      .social-links {
        justify-content: center;
      }

      .newsletter-form {
        margin: 0 auto;
      }

      .footer-bottom-container {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }

      .showroom-line,
      .footer-company-name,
      .section-title span,
      .summary-spec-value {
        white-space: normal !important;
      }
    }

/* ===== Exact Original Styles from traceability.html ===== */
html {
      overflow-y: scroll;
    }
    /* ==========================================================================
       CSS DESIGN SYSTEM TOKENS (Matching all other pages)
       ========================================================================== */
    :root {
      --bg-parchment: #FAEBD3;
      --bg-parchment-accent: #ebd5b9;
      --text-plum: #291528;
      --primary-purple: #5B3049;
      --accent-gold: #C37D40;
      --accent-bronze: #C37D40;
      --gold-light: #E2B980;
      --bg-cream-light: #FBF7F2;
      --text-muted: #8C786A;
      --border-color: rgba(140, 120, 106, 0.2);
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      --font-script: 'Alex Brush', cursive;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: var(--bg-parchment);
      color: var(--text-plum);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .page-wrapper {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background-color: var(--bg-parchment);
      display: flex;
      flex-direction: column;
    }

        /* Standardized 1440px Alignment Container */
    .navbar-container,
    .breadcrumb-container,
    .trace-content-container,
    .footer-container,
    .footer-bottom-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    /* ==========================================================================
       HEADER NAVIGATION BAR (Global - Identical to contact.html / stories.html)
       ========================================================================== */
    .navbar {
      position: relative;
      z-index: 10;
      width: 100%;
      padding: 16px 0 0 0;
    }

    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo-link {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin-top: -6px;
    }

    .brand-logo-img {
      height: 75px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0px 2px 4px rgba(41, 21, 40, 0.08));
    
      margin-left: 22px;}

    .brand-logo-text {
      margin-top: 4px;
      margin-left: 0;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #5B3049;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: -60px;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: #C37D40;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: #5B3049;
    }

    .nav-link.active {
      color: #5B3049;
      font-weight: 700;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: #5B3049;
      border-radius: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      transition: transform 0.2s ease, color 0.2s ease;
      position: relative;
    }

    .icon-btn:hover {
      transform: scale(1.05);
      color: #5B3049;
    }

    .cart-btn {
      position: relative;
    }

    .cart-badge {
      position: absolute;
      top: 2px;
      right: -4px;
      background-color: #5B3049;
      color: #ffffff;
      font-size: 0.65rem;
      font-weight: 700;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-menu-toggle {
      display: none;
    }

    /* Mobile Drawer */
    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(37, 19, 38, 0.65);
      backdrop-filter: blur(4px);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

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

    .mobile-nav-drawer {
      position: fixed;
      top: 0;
      right: -280px;
      width: 280px;
      height: 100%;
      background-color: #291528;
      z-index: 1000;
      padding: 30px 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      transition: right 0.3s ease;
      box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
    }

    .mobile-nav-overlay.active .mobile-nav-drawer {
      right: 0;
    }

    .mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 216, 134, 0.15);
      padding-bottom: 15px;
    }

    .mobile-close-btn {
      background: none;
      border: none;
      color: #FFD886;
      cursor: pointer;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .mobile-nav-link {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 1.05rem;
      font-weight: 600;
      transition: color 0.2s;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
      color: #FFD886;
    }

    /* BREADCRUMB */
    .breadcrumb-section {
      width: 100%;
      padding: 20px 0 10px 0;
    }

    .breadcrumb-container {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;
      color: var(--text-muted);
    }

    .breadcrumb-link {
      color: var(--text-muted);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s ease;
    }

    .breadcrumb-link:hover {
      color: var(--primary-purple);
    }

    .breadcrumb-separator {
      color: var(--gold-light);
      font-size: 0.95rem;
    }

    .breadcrumb-current {
      color: var(--primary-purple);
      font-weight: 600;
    }

    /* ==========================================================================
       TOP HERO & SERIAL SEARCH SECTION (Matching Prompt Image)
       ========================================================================== */
    .trace-hero-section {
      padding: 30px 0 35px 0;
      text-align: center;
    }

    .trace-main-heading {
      font-family: var(--font-serif);
      font-size: 2.6rem;
      font-weight: 700;
      color: #5B3049;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    

    .trace-hero-subtext {
      font-size: 0.96rem;
      color: #554452;
      max-width: 860px;
      margin: 12px auto 28px auto;
      line-height: 1.55;
    }

    /* Search Box Wrapper */
    .serial-search-box-card {
      max-width: 780px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid rgba(91, 48, 73, 0.12);
      border-radius: 16px;
      padding: 16px 20px;
      box-shadow: 0 8px 24px rgba(41, 21, 40, 0.04);
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .search-barcode-badge {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(91, 48, 73, 0.08);
      color: #5B3049;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .search-input-field {
      flex: 1;
      border: 1px solid rgba(140, 120, 106, 0.25);
      border-radius: 8px;
      padding: 12px 18px;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      color: #291528;
      background: #ffffff;
      outline: none;
      transition: border-color 0.2s ease;
    }

    .search-input-field:focus {
      border-color: #5B3049;
    }

    .btn-check-submit {
      background-color: #5B3049;
      color: #ffffff;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 13px 36px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.15s ease;
      flex-shrink: 0;
    }

    .btn-check-submit:hover {
      background-color: #431f35;
      transform: translateY(-1px);
    }

    /* ==========================================================================
       RESULTS SECTION (Cards Grid & States)
       ========================================================================== */
    .trace-results-section {
      padding: 15px 0 70px 0;
    }

    .results-section-header {
      margin-bottom: 24px;
    }

    .results-heading-title {
      font-family: var(--font-sans);
      font-size: 1.15rem;
      font-weight: 800;
      color: #5B3049;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      display: inline-block;
      position: relative;
      padding-bottom: 6px;
    }

    .results-heading-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 32px;
      height: 2.5px;
      background-color: #C37D40;
      border-radius: 2px;
    }

    .results-cards-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* Base Result Row Card */
    .result-row-card {
      border-radius: 16px;
      padding: 24px 28px;
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 30px;
      align-items: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .result-row-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(41, 21, 40, 0.04);
    }

    /* State 1: Green Card (Both Origin & Organic) */
    .card-state-green {
      background-color: #F4FAF4;
      border: 1px solid rgba(46, 125, 50, 0.2);
    }

    /* State 2: Blue Card (Origin only) */
    .card-state-blue {
      background-color: #F3F8FD;
      border: 1px solid rgba(25, 118, 210, 0.2);
    }

    /* State 3: Gold Card (Organic only) */
    .card-state-gold {
      background-color: #FDFBF6;
      border: 1px solid rgba(195, 125, 64, 0.25);
    }

    /* State 4: Red Card (No Record) */
    .card-state-red {
      background-color: #FDF4F4;
      border: 1px solid rgba(211, 47, 47, 0.2);
    }

    /* State 5: Purple Help Box */
    .card-state-purple {
      background-color: #FAF5F9;
      border: 1px solid rgba(91, 48, 73, 0.15);
      grid-template-columns: 80px 1fr;
    }

    /* Left Info Column */
    .card-left-info {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .card-circular-badge {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .badge-green {
      border: 2px solid #2E7D32;
      color: #2E7D32;
    }

    .badge-blue {
      border: 2px solid #1976D2;
      color: #1976D2;
    }

    .badge-gold {
      border: 2px solid #C37D40;
      color: #C37D40;
    }

    .badge-red {
      border: 2px solid #D32F2F;
      color: #D32F2F;
    }

    .badge-purple {
      border: 2px solid #5B3049;
      color: #5B3049;
    }

    .card-title-text-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .card-state-title {
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .title-green { color: #1B5E20; }
    .title-blue { color: #1565C0; }
    .title-gold { color: #B87A28; }
    .title-red { color: #D32F2F; }
    .title-purple { color: #5B3049; }

    .card-state-desc {
      font-size: 0.86rem;
      color: #554452;
      line-height: 1.45;
    }

    /* Right Sub-Cards Grid */
    .card-right-content-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .single-column-grid {
      display: grid;
      grid-template-columns: 1fr;
    }

    .inner-sub-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
    }

    .sub-card-green { border: 1px solid rgba(46, 125, 50, 0.2); }
    .sub-card-blue { border: 1px solid rgba(25, 118, 210, 0.2); }
    .sub-card-gold { border: 1px solid rgba(195, 125, 64, 0.2); }

    .inner-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .inner-header-green { color: #1B5E20; }
    .inner-header-blue { color: #1565C0; }
    .inner-header-gold { color: #B87A28; }

    /* Metadata Table Rows */
    .metadata-rows-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .meta-row-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.82rem;
      gap: 8px;
    }

    .meta-row-label {
      color: #6B5B68;
      font-weight: 600;
      font-size: 0.84rem;
    }

    .meta-row-label svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }

    .sub-card-green .meta-row-label svg { color: #2E7D32; }
    .sub-card-blue .meta-row-label svg { color: #1976D2; }
    .sub-card-gold .meta-row-label svg { color: #C37D40; }

    .meta-row-value {
      font-weight: 700;
      color: #291528;
      text-align: right;
    }

    /* Two-Tiered Action Buttons Architecture */
    .card-action-buttons-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: auto;
      padding-top: 10px;
    }

    /* Primary Solid Button (Top) */
    .btn-primary-verify {
      width: 100%;
      padding: 12px 18px;
      border-radius: 10px;
      font-family: var(--font-sans);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #ffffff !important;
      text-decoration: none;
      transition: all 0.25s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      border: none;
    }

    .btn-verify-green {
      background-color: #1B5E20;
    }
    .btn-verify-green:hover {
      background-color: #144919;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(27, 94, 32, 0.25);
    }

    .btn-verify-blue {
      background-color: #1565C0;
    }
    .btn-verify-blue:hover {
      background-color: #0D47A1;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(21, 101, 192, 0.25);
    }

    .btn-verify-gold {
      background-color: #B87A28;
    }
    .btn-verify-gold:hover {
      background-color: #93601D;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(184, 122, 40, 0.25);
    }

    /* Secondary How-It-Works Button (Bottom) */
    .btn-secondary-how-it-works {
      width: 100%;
      padding: 10px 16px;
      border-radius: 10px;
      font-family: var(--font-sans);
      font-size: 0.88rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      text-decoration: none;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .btn-how-green {
      background-color: #F4FAF4;
      border: 1.5px solid #1B5E20;
      color: #1B5E20 !important;
    }
    .btn-how-green:hover {
      background-color: #E8F5E9;
      border-color: #144919;
      color: #144919 !important;
    }

    .btn-how-blue {
      background-color: #F0F6FC;
      border: 1.5px solid #1565C0;
      color: #1565C0 !important;
    }
    .btn-how-blue:hover {
      background-color: #E3F2FD;
      border-color: #0D47A1;
      color: #0D47A1 !important;
    }

    .btn-how-gold {
      background-color: #FCF8F2;
      border: 1.5px solid #B87A28;
      color: #B87A28 !important;
    }
    .btn-how-gold:hover {
      background-color: #F5EBE1;
      border-color: #93601D;
      color: #93601D !important;
    }

    /* Blockchain Hash Value */
    .hash-code {
      word-break: break-all;
      font-family: 'Courier New', Courier, monospace;
      font-size: 0.74rem;
      line-height: 1.35;
      color: #1B5E20;
      max-width: 58%;
      text-align: right;
    }

    /* Red No Record Right Content */
    .no-record-right-content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }

    .no-record-text {
      font-size: 0.88rem;
      color: #554452;
      line-height: 1.5;
    }

    .btn-outline-red {
      padding: 8px 24px;
      border: 1.5px solid #D32F2F;
      border-radius: 6px;
      color: #D32F2F;
      background: transparent;
      font-family: var(--font-sans);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }

    .btn-outline-red:hover {
      background-color: #D32F2F;
      color: #ffffff;
    }

    /* Help Card Text */
    .help-card-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .help-card-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: #5B3049;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .help-card-desc {
      font-size: 0.88rem;
      color: #554452;
      line-height: 1.5;
    }

    /* ==========================================================================
       Site Footer (100% Identical Pixel-Perfect Across All Pages)
       ========================================================================== */
    .site-footer {
      background-color: #251326;
      color: #f4eee6;
      width: 100%;
      margin: 0;
      padding: 65px 0 0 0;
      position: relative;
      z-index: 10;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.35fr 1.8fr 1.5fr;
      gap: 24px;
      padding-bottom: 45px;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-brand-col {
      padding-right: 15px;
      margin-top: -15px;
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: 8px;
    }

    .footer-logo-img {
      height: 130px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.08) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
      padding-left: 15px;
    }

    .footer-company-name {
      display: block;
      margin-top: 12px;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: #FFD886;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #d1c2b4;
      white-space: nowrap;
    }

    .showroom-line {
      white-space: normal;
    }

    .footer-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .footer-links a {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

        .footer-contact-info p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #f4eee6;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .footer-contact-info p.showroom-line {
      white-space: normal;
    }

    .footer-contact-info .contact-label,
    .footer-contact-info span {
      color: #c4a785;
      font-weight: 600;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.2px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4a785;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .social-btn:hover {
      background-color: #c4a785;
      color: #251326;
      transform: translateY(-2px);
    }

    /* Newsletter Box */
    .newsletter-box {
      margin-top: 24px;
    }

    .newsletter-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .newsletter-form {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 320px;
      height: 42px;
      border: 1.2px solid #d4a359;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(18, 8, 17, 0.4);
      margin: 0;
    }

    .newsletter-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 16px;
      color: #f4eee6;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: #a89888;
      opacity: 0.75;
    }

    .newsletter-submit {
      flex-shrink: 0;
      position: relative;
      right: 0;
      width: 48px;
      height: 100%;
      background: #d4a359;
      border: none;
      color: #251326;
      cursor: pointer;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .newsletter-submit:hover {
      background: #e6b86e;
      color: #120811;
    }

    .footer-bottom {
      border-top: 1px solid rgba(196, 167, 133, 0.18);
      padding: 24px 0 32px 0;
      background-color: #251326;
      width: 100%;
      margin: 0;
    }

    .footer-bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .copyright-text {
      font-size: 0.78rem;
      color: #a89888;
      margin: 0;
    }

    .end-journey-emblem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
    }

    @media (max-width: 1024px) {
      .nav-menu {
        margin-left: 0;
        gap: 32px;
      }
      .result-row-card {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .card-state-purple {
        grid-template-columns: 60px 1fr;
      }
      .footer-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .nav-menu {
        display: none;
      }
      .mobile-menu-toggle {
        display: flex;
      }
      .trace-main-heading {
        font-size: 2rem;
      }
      .serial-search-box-card {
        flex-direction: column;
        padding: 16px;
      }
      .search-input-field {
        width: 100%;
      }
      .btn-check-submit {
        width: 100%;
      }
      .card-right-content-grid,
      .single-column-grid {
        grid-template-columns: 1fr;
      }
      .card-left-info {
        flex-direction: column;
        text-align: center;
      }
      .card-state-purple {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .footer-container {
        grid-template-columns: 1fr;
      }
    }

/* ===== Exact Original Styles from stories.html ===== */
html {
      overflow-y: scroll;
    }
    /* ==========================================================================
       DESIGN TOKENS & BASE STYLES
       ========================================================================== */
    :root {
      --bg-parchment: #FAEBD3;
      --bg-parchment-accent: #ebd5b9;
      --text-plum: #291528;
      --text-muted: #56474f;
      --gold-muted: #9a7952;
      --gold-light: #c4a785;
      --border-subtle: #8c786a;
      --primary-purple: #5B3049;
      --accent-bronze: #C37D40;
      --cream-tint: #FFD886;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: var(--bg-parchment);
      color: var(--text-plum);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .page-wrapper {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background-color: var(--bg-parchment);
      display: flex;
      flex-direction: column;
    }

    /* Standardized 1440px Alignment Container */
    .navbar-container,
    .breadcrumb-container,
    .story-hero-inner,
    .footer-container,
    .footer-bottom-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    /* ==========================================================================
       HEADER NAVIGATION BAR (Global)
       ========================================================================== */
    .navbar {
      position: relative;
      z-index: 10;
      width: 100%;
      padding: 16px 0 0 0;
    }

    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo-link {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin-top: -6px;
    }

    .brand-logo-img {
      height: 75px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0px 2px 4px rgba(41, 21, 40, 0.08));
    
      margin-left: 22px;}

    .brand-logo-text {
      margin-top: 4px;
      margin-left: 0;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #5B3049;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: -60px;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: #C37D40;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: #5B3049;
    }

    .nav-link.active {
      color: #5B3049;
      font-weight: 700;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: #5B3049;
      border-radius: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      transition: transform 0.2s ease, color 0.2s ease;
      position: relative;
    }

    .icon-btn:hover {
      transform: scale(1.05);
      color: #5B3049;
    }

    .cart-btn {
      position: relative;
    }

    .cart-badge {
      position: absolute;
      top: 2px;
      right: -4px;
      background-color: #5B3049;
      color: #ffffff;
      font-size: 0.65rem;
      font-weight: 700;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-menu-toggle {
      display: none;
    }

    /* Mobile Drawer */
    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(37, 19, 38, 0.65);
      backdrop-filter: blur(4px);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

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

    .mobile-nav-drawer {
      position: absolute;
      top: 0;
      right: 0;
      width: 300px;
      height: 100%;
      background-color: var(--bg-parchment);
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

    .mobile-nav-overlay.active .mobile-nav-drawer {
      transform: translateX(0);
    }

    .mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(140, 120, 106, 0.2);
    }

    .mobile-close-btn {
      background: none;
      border: none;
      color: var(--text-plum);
      cursor: pointer;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 30px;
    }

    .mobile-nav-link {
      font-family: var(--font-sans);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-plum);
      text-decoration: none;
    }

    .mobile-drawer-footer {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .mobile-drawer-footer span {
      font-weight: 700;
      color: var(--text-plum);
    }

    /* ==========================================================================
       BREADCRUMB NAVIGATION
       ========================================================================== */
    .breadcrumb-section {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 24px;
    }

    .breadcrumb-container {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--text-muted);
      flex-wrap: wrap;
    }

    .breadcrumb-link {
      color: var(--text-muted);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: color 0.2s ease;
    }

    .breadcrumb-link:hover {
      color: var(--primary-purple);
    }

    .breadcrumb-home-icon svg {
      margin-bottom: 1px;
    }

    .breadcrumb-separator {
      color: #a89587;
      font-size: 0.85rem;
    }

    .breadcrumb-current {
      color: var(--text-plum);
      font-weight: 600;
    }

    /* ==========================================================================
       SECTION 1: STORY ARTICLE HERO & BANNER
       ========================================================================== */
    .story-article-hero {
      width: 100%;
      padding-bottom: 40px;
    }

    .story-hero-inner {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 4%;
    }

    .story-category-tag {
      display: block;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: var(--accent-bronze);
      text-transform: uppercase;
      margin-bottom: 16px;
      text-align: left;
    }

    .story-header-center-block {
      max-width: 800px;
      margin: 0 auto 36px auto;
      text-align: center;
    }

    .story-article-title {
      font-family: var(--font-serif);
      font-size: 3.4rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.2;
      margin-bottom: 12px;
      letter-spacing: -0.01em;
      text-align: center;
    }

    .story-article-subheadline {
      font-family: var(--font-sans);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--accent-bronze);
      margin-bottom: 18px;
      text-align: center;
    }

    .story-article-excerpt {
      font-size: 1.1rem;
      line-height: 1.65;
      color: var(--text-muted);
      margin-bottom: 24px;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .story-meta-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      font-size: 0.88rem;
      color: var(--text-muted);
      flex-wrap: wrap;
    }

    .meta-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--text-muted);
    }

    .meta-item svg {
      opacity: 0.8;
    }

    .save-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: inherit;
      padding: 0;
      transition: color 0.2s ease;
    }

    .save-btn:hover {
      color: var(--primary-purple);
    }

    .save-btn.saved {
      color: var(--accent-bronze);
      font-weight: 600;
    }

    .story-hero-banner-wrapper {
      width: 100%;
      height: 420px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(41, 21, 40, 0.08);
      position: relative;
    }

    .story-hero-banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 35%;
      display: block;
      transition: transform 0.6s ease;
    }

    .story-hero-banner-wrapper:hover .story-hero-banner-img {
      transform: scale(1.02);
    }

    /* ==========================================================================
       SECTION 2: STORY CHAPTERS & TIMELINE
       ========================================================================== */
    .story-chapters-section {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 70px;
    }

    .story-chapters-container {
      max-width: 800px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .story-chapter-item {
      margin-bottom: 48px;
    }

    .story-chapter-item:last-child {
      margin-bottom: 0;
    }

    .chapter-title-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 18px;
    }

    .chapter-number {
      font-family: var(--font-sans);
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--accent-bronze);
    }

    .chapter-line {
      width: 36px;
      height: 1.5px;
      background-color: var(--accent-bronze);
      display: inline-block;
      opacity: 0.85;
    }

    .chapter-heading {
      font-family: var(--font-serif);
      font-size: 2.1rem;
      font-weight: 700;
      color: var(--text-plum);
    }

    .chapter-desc {
      font-size: 1.08rem;
      line-height: 1.8;
      color: var(--text-muted);
      margin-bottom: 20px;
      max-width: 100%;
    }

    .chapter-quote-card {
      background-color: rgba(250, 235, 211, 0.65);
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 14px;
      padding: 22px 28px;
      display: flex;
      gap: 18px;
      align-items: flex-start;
      width: 100%;
      margin-top: 24px;
      margin-bottom: 10px;
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.02);
    }

    .quote-mark {
      font-family: var(--font-serif);
      font-size: 2.6rem;
      line-height: 0.8;
      color: var(--accent-bronze);
      opacity: 0.85;
    }

    .quote-text {
      font-family: var(--font-sans);
      font-size: 0.96rem;
      font-style: italic;
      color: var(--text-plum);
      margin-bottom: 6px;
    }

    .quote-author {
      font-size: 0.82rem;
      color: var(--text-muted);
    }

    /* Asymmetric 3-Image Gallery Grid for Chapter 02 */
    .chapter-gallery-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 32px;
      align-items: stretch;
    }

    .gallery-col-large {
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      height: 400px;
      box-shadow: 0 10px 28px rgba(41, 21, 40, 0.06);
    }

    .gallery-col-stack {
      display: flex;
      flex-direction: column;
      gap: 20px;
      height: 400px;
    }

    .gallery-img-box {
      flex: 1;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(41, 21, 40, 0.06);
    }

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

    .gallery-col-large:hover .chapter-img,
    .gallery-img-box:hover .chapter-img {
      transform: scale(1.03);
    }

    /* Chapter 03 Dark Featured Teapot Banner */
    .chapter-dark-banner {
      background: linear-gradient(135deg, #180d19 0%, #291528 50%, #3e1b36 100%);
      border-radius: 18px;
      padding: 40px 48px;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 40px;
      align-items: center;
      margin-top: 36px;
      box-shadow: 0 20px 45px rgba(25, 12, 26, 0.22);
    }

    .dark-banner-left {
      width: 100%;
      border-radius: 14px;
      overflow: hidden;
      height: 260px;
    }

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

    .chapter-dark-banner:hover .dark-banner-img {
      transform: scale(1.03);
    }

    .dark-banner-right {
      color: #f4eee6;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dark-quote-mark {
      font-family: var(--font-serif);
      font-size: 3rem;
      line-height: 0.8;
      color: var(--accent-bronze);
    }

    .dark-quote-text {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      line-height: 1.65;
      color: #f4eee6;
      font-weight: 500;
    }

    .dark-quote-arrow {
      margin-top: 8px;
      display: flex;
      align-items: center;
    }

    @media (max-width: 900px) {
      .chapter-gallery-grid {
        grid-template-columns: 1fr;
      }

      .gallery-col-large,
      .gallery-col-stack {
        height: 300px;
      }

      .chapter-dark-banner {
        grid-template-columns: 1fr;
        padding: 30px;
      }
    }

    /* ==========================================================================
       SECTION 3: TAGS, PREV/NEXT & RELATED ARTICLES
       ========================================================================== */
    .story-footer-section {
      width: 100%;
      padding-top: 30px;
      padding-bottom: 90px;
    }

    .story-footer-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    /* 1. Topic Tags & Social Share Bar */
    .story-tags-share-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 36px;
      margin-bottom: 40px;
      border-bottom: 1px solid rgba(140, 120, 106, 0.18);
      flex-wrap: wrap;
      gap: 20px;
    }

    .tags-group {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .tags-label {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-plum);
    }

    .tags-list {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .tag-pill {
      font-size: 0.82rem;
      color: var(--text-muted);
      background-color: rgba(255, 255, 255, 0.65);
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 20px;
      padding: 6px 14px;
      text-decoration: none;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .tag-pill:hover {
      background-color: #ffffff;
      border-color: var(--accent-bronze);
      color: var(--primary-purple);
    }

    .share-group {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .share-label {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .share-buttons {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .share-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.2);
      color: var(--text-plum);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .share-btn:hover {
      transform: translateY(-2px);
      border-color: var(--primary-purple);
      color: var(--primary-purple);
    }

    .zalo-text {
      font-size: 0.72rem;
      font-weight: 800;
      font-family: var(--font-sans);
      color: var(--text-plum);
    }

    /* 2. Previous / Next Article Navigation Card */
    .prev-next-nav-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(140, 120, 106, 0.2);
      border-radius: 16px;
      padding: 24px 36px;
      margin-bottom: 60px;
      box-shadow: 0 6px 20px rgba(41, 21, 40, 0.03);
    }

    .nav-article-box {
      display: flex;
      align-items: center;
      gap: 18px;
      text-decoration: none;
      color: inherit;
      width: 45%;
      transition: transform 0.2s ease;
    }

    .nav-article-box:hover {
      transform: translateX(3px);
    }

    .prev-article:hover {
      transform: translateX(-3px);
    }

    .nav-article-thumb {
      width: 105px;
      height: 68px;
      border-radius: 10px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .nav-article-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .nav-article-sub {
      font-size: 0.82rem;
      color: var(--accent-bronze);
      font-weight: 600;
      display: block;
      margin-bottom: 4px;
    }

    .nav-article-title {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.35;
    }

    .align-right {
      text-align: right;
    }

    .nav-divider-line {
      width: 1px;
      height: 60px;
      background-color: rgba(140, 120, 106, 0.22);
    }

    /* 3. Related Articles Section ("CÓ THỂ BẠN CŨNG THÍCH") */
    .related-stories-section {
      width: 100%;
    }

    .related-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
    }

    .related-section-title {
      font-family: var(--font-sans);
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--text-plum);
      text-transform: uppercase;
    }

    .related-stories-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 20px;
      align-items: center;
    }

    .related-featured-card {
      display: block;
      width: 100%;
      height: 250px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(41, 21, 40, 0.08);
      position: relative;
      text-decoration: none;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .featured-card-img-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
    }

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

    .featured-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(24, 13, 25, 0.92) 0%, rgba(24, 13, 25, 0.5) 55%, transparent 100%);
      transition: opacity 0.3s ease;
    }

    .featured-card-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px 24px;
      z-index: 2;
    }

    .featured-card-content .card-category-tag {
      color: #FFD886;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      margin-bottom: 6px;
    }

    .featured-card-title {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.35;
      margin-bottom: 6px;
    }

    .featured-card-content .card-read-time {
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.82);
      font-weight: 500;
    }

    .related-featured-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(41, 21, 40, 0.12);
    }

    .related-featured-card:hover .featured-card-img {
      transform: scale(1.04);
    }

    .related-cards-stack {
      display: flex;
      flex-direction: column;
      gap: 14px;
      height: 250px;
    }

    .horizontal-story-card {
      display: flex;
      align-items: center;
      gap: 16px;
      height: 118px;
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.18);
      border-radius: 14px;
      padding: 12px 16px;
      text-decoration: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 16px rgba(41, 21, 40, 0.03);
    }

    .horizontal-story-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(41, 21, 40, 0.08);
    }

    .horizontal-card-thumb {
      width: 140px;
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .horizontal-card-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .card-category-tag {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      color: var(--accent-bronze);
      text-transform: uppercase;
      display: block;
      margin-bottom: 6px;
    }

    .horizontal-card-title {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.4;
      margin-bottom: 8px;
    }

    .card-read-time {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    @media (max-width: 900px) {
      .prev-next-nav-card {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
      }

      .nav-article-box {
        width: 100%;
      }

      .nav-divider-line {
        width: 100%;
        height: 1px;
      }

      .align-right {
        text-align: left;
      }

      .next-article {
        flex-direction: row-reverse;
      }

      .related-stories-grid {
        grid-template-columns: 1fr;
      }

      .related-featured-card,
      .related-cards-stack {
        height: auto;
      }

      .horizontal-story-card {
        height: 130px;
      }
    }

    /* ==========================================================================
       Site Footer (100% Identical Pixel-Perfect Across All Pages)
       ========================================================================== */
    .site-footer {
      background-color: #251326;
      color: #f4eee6;
      width: 100%;
      margin: 0;
      padding: 65px 0 0 0;
      position: relative;
      z-index: 10;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.35fr 1.8fr 1.5fr;
      gap: 24px;
      padding-bottom: 45px;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-brand-col {
      padding-right: 15px;
      margin-top: -15px;
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: 8px;
    }

    .footer-logo-img {
      height: 130px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.08) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
      padding-left: 15px;
    }

    .footer-company-name {
      display: block;
      margin-top: 12px;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: #FFD886;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #d1c2b4;
      white-space: nowrap;
    }

    .showroom-line {
      white-space: normal;
    }

    .footer-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .footer-links a {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

        .footer-contact-info p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #f4eee6;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .footer-contact-info p.showroom-line {
      white-space: normal;
    }

    .footer-contact-info .contact-label,
    .footer-contact-info span {
      color: #c4a785;
      font-weight: 600;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.2px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4a785;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .social-btn:hover {
      background-color: #c4a785;
      color: #251326;
      transform: translateY(-2px);
    }

    /* Newsletter Box */
    .newsletter-box {
      margin-top: 24px;
    }

    .newsletter-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .newsletter-form {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 320px;
      height: 42px;
      border: 1.2px solid #d4a359;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(18, 8, 17, 0.4);
      margin: 0;
    }

    .newsletter-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 16px;
      color: #f4eee6;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: #a89888;
      opacity: 0.75;
    }

    .newsletter-submit {
      flex-shrink: 0;
      position: relative;
      right: 0;
      width: 48px;
      height: 100%;
      background: #d4a359;
      border: none;
      color: #251326;
      cursor: pointer;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .newsletter-submit:hover {
      background: #e6b86e;
      color: #120811;
    }

    .footer-bottom {
      border-top: 1px solid rgba(196, 167, 133, 0.18);
      padding: 24px 0 32px 0;
      background-color: #251326;
      width: 100%;
      margin: 0;
    }

    .footer-bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .copyright-text {
      font-size: 0.78rem;
      color: #a89888;
      margin: 0;
    }

    .end-journey-emblem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
    }

    /* Responsive Queries */
    @media (max-width: 1024px) {
      .story-article-title {
        font-size: 2.8rem;
      }

      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }
    }

    @media (max-width: 768px) {
      .nav-menu {
        display: none;
      }

      .mobile-menu-toggle {
        display: flex;
      }

      .story-article-title {
        font-size: 2.2rem;
      }

      .story-meta-row {
        gap: 16px;
      }
    }

    @media (max-width: 580px) {
      .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .footer-brand-col {
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .footer-bottom-container {
        flex-direction: column;
        gap: 14px;
        text-align: center;
      }
    }

/* ===== Exact Original Styles from blog.html ===== */
html {
      overflow-y: scroll;
    }
    /* ==========================================================================
       DESIGN TOKENS & BASE STYLES
       ========================================================================== */
    :root {
      --bg-parchment: #FAEBD3;
      --bg-parchment-accent: #ebd5b9;
      --text-plum: #291528;
      --text-muted: #56474f;
      --gold-muted: #9a7952;
      --gold-light: #c4a785;
      --border-subtle: #8c786a;
      --primary-purple: #5B3049;
      --accent-bronze: #C37D40;
      --cream-tint: #FFD886;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: var(--bg-parchment);
      color: var(--text-plum);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .page-wrapper {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background-color: var(--bg-parchment);
      display: flex;
      flex-direction: column;
    }

    /* Standardized 1440px Alignment Container */
    .navbar-container,
    .breadcrumb-container,
    .blog-hero-container,
    .blog-toolbar-container,
    .footer-container,
    .footer-bottom-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    /* ==========================================================================
       HEADER NAVIGATION BAR (Global)
       ========================================================================== */
    .navbar {
      position: relative;
      z-index: 10;
      width: 100%;
      padding: 16px 0 0 0;
    }

    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo-link {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin-top: -6px;
    }

    .brand-logo-img {
      height: 75px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0px 2px 4px rgba(41, 21, 40, 0.08));
    
      margin-left: 22px;}

    .brand-logo-text {
      margin-top: 4px;
      margin-left: 0;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #5B3049;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: -60px;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: #C37D40;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: #5B3049;
    }

    .nav-link.active {
      color: #5B3049;
      font-weight: 700;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: #5B3049;
      border-radius: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      transition: transform 0.2s ease, color 0.2s ease;
      position: relative;
    }

    .icon-btn:hover {
      transform: scale(1.05);
      color: #5B3049;
    }

    .cart-btn {
      position: relative;
    }

    .cart-badge {
      position: absolute;
      top: 2px;
      right: -4px;
      background-color: #5B3049;
      color: #ffffff;
      font-size: 0.65rem;
      font-weight: 700;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-menu-toggle {
      display: none;
    }

    /* Mobile Drawer */
    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(37, 19, 38, 0.65);
      backdrop-filter: blur(4px);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

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

    .mobile-nav-drawer {
      position: absolute;
      top: 0;
      right: 0;
      width: 300px;
      height: 100%;
      background-color: var(--bg-parchment);
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

    .mobile-nav-overlay.active .mobile-nav-drawer {
      transform: translateX(0);
    }

    .mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(140, 120, 106, 0.2);
    }

    .mobile-close-btn {
      background: none;
      border: none;
      color: var(--text-plum);
      cursor: pointer;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 30px;
    }

    .mobile-nav-link {
      font-family: var(--font-sans);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-plum);
      text-decoration: none;
    }

    .mobile-drawer-footer {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .mobile-drawer-footer span {
      font-weight: 700;
      color: var(--text-plum);
    }

    /* ==========================================================================
       BREADCRUMB NAVIGATION
       ========================================================================== */
    .breadcrumb-section {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 20px;
    }

    .breadcrumb-container {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .breadcrumb-link {
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .breadcrumb-link:hover {
      color: var(--primary-purple);
    }

    .breadcrumb-separator {
      color: #a89587;
    }

    .breadcrumb-current {
      color: var(--text-plum);
      font-weight: 600;
    }

    /* ==========================================================================
       SECTION 1: MAGAZINE HERO BANNER & TOOLBAR
       ========================================================================== */
    .blog-hero-section {
      width: 100%;
      padding-bottom: 20px;
    }

    .blog-hero-card {
      position: relative;
      width: 100%;
      min-height: 360px;
      border-radius: 16px;
      overflow: hidden;
      background-color: #281428;
      box-shadow: 0 16px 40px rgba(41, 21, 40, 0.12);
      display: flex;
      align-items: center;
      background-image:
        linear-gradient(to right,
          #241122 0%,
          #281428 35%,
          rgba(40, 20, 40, 0.88) 55%,
          rgba(40, 20, 40, 0.45) 75%,
          transparent 100%),
        url("images/product_about_landscape.png");
      background-size: cover;
      background-position: center right;
      background-repeat: no-repeat;
    }

    .blog-hero-content {
      position: relative;
      z-index: 2;
      padding: 44px 54px;
      max-width: 680px;
    }

    .blog-badge-tag {
      display: block;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      color: #FFD886;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .blog-hero-title {
      font-family: var(--font-serif);
      font-size: 2.5rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.25;
      margin-bottom: 16px;
      letter-spacing: -0.01em;
    }

    .blog-hero-desc {
      font-size: 1.02rem;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 28px;
    }

    .blog-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background-color: transparent;
      border: 1.5px solid var(--accent-bronze);
      color: #FFD886;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: 30px;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .blog-cta-btn:hover {
      background-color: var(--accent-bronze);
      color: #ffffff;
      border-color: var(--accent-bronze);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(195, 125, 64, 0.25);
    }

    /* Category Filter Pills & Search Bar Row */
    .blog-toolbar-section {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 60px;
    }

    .blog-toolbar-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .filter-pills-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(255, 255, 255, 0.45);
      border: 1px solid rgba(140, 120, 106, 0.18);
      border-radius: 14px;
      padding: 6px;
      flex-wrap: wrap;
    }

    .filter-pill-btn {
      background: transparent;
      border: none;
      font-family: var(--font-sans);
      font-size: 0.86rem;
      font-weight: 500;
      color: var(--text-muted);
      padding: 8px 18px;
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .filter-pill-btn:hover {
      color: var(--text-plum);
      background-color: rgba(255, 255, 255, 0.6);
    }

    .filter-pill-btn.active {
      background-color: var(--text-plum);
      color: #ffffff;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.15);
    }

    .blog-search-box {
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 12px;
      padding: 8px 16px;
      width: 280px;
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.03);
      transition: border-color 0.2s ease;
    }

    .blog-search-box:focus-within {
      border-color: var(--primary-purple);
    }

    .blog-search-input {
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--font-sans);
      font-size: 0.88rem;
      color: var(--text-plum);
      width: 100%;
    }

    .blog-search-input::placeholder {
      color: #9a8878;
    }

    .blog-search-icon {
      color: var(--text-plum);
      display: flex;
      align-items: center;
      cursor: pointer;
      opacity: 0.7;
    }

    /* ==========================================================================
       SECTION 2: FEATURED ARTICLES & ALL ARTICLES GRID
       ========================================================================== */
    .blog-articles-section {
      width: 100%;
      padding-bottom: 90px;
    }

    .blog-articles-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .articles-group-block {
      margin-bottom: 60px;
    }

    .articles-group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .group-title-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .group-leaf-icon {
      color: var(--primary-purple);
    }

    .group-title {
      font-family: var(--font-serif);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text-plum);
    }

    .view-all-link {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-muted);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s ease;
    }

    .view-all-link:hover {
      color: var(--primary-purple);
    }

    /* Featured Section Carousel Controls & Track */
    .featured-slider-controls {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .slider-arrow-btn {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.22);
      color: var(--text-plum);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 2px 8px rgba(41, 21, 40, 0.04);
    }

    .slider-arrow-btn:hover {
      background-color: var(--text-plum);
      color: #ffffff;
      border-color: var(--text-plum);
      transform: translateY(-1px);
    }

    .featured-slider-container {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .featured-slider-track {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 10px 4px 20px 4px;
    }

    .featured-slider-track::-webkit-scrollbar {
      display: none;
    }

    .featured-slider-track .featured-card {
      flex: 0 0 calc((100% - 48px) / 3);
      min-width: 300px;
      box-sizing: border-box;
    }

    @media (max-width: 900px) {
      .featured-slider-track .featured-card {
        flex: 0 0 calc((100% - 24px) / 2);
      }
    }

    @media (max-width: 600px) {
      .featured-slider-track .featured-card {
        flex: 0 0 100%;
      }
    }

    /* Archive Toolbar Row directly above 'Tất cả bài viết' */
    .archive-toolbar-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

    .filter-pills-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(140, 120, 106, 0.18);
      border-radius: 14px;
      padding: 6px;
      flex-wrap: wrap;
    }

    .filter-pill-btn {
      background: transparent;
      border: none;
      font-family: var(--font-sans);
      font-size: 0.86rem;
      font-weight: 500;
      color: var(--text-muted);
      padding: 8px 18px;
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .filter-pill-btn:hover {
      color: var(--text-plum);
      background-color: rgba(255, 255, 255, 0.7);
    }

    .filter-pill-btn.active {
      background-color: #5B3049;
      color: #ffffff;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.15);
    }

    .blog-search-box {
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 12px;
      padding: 8px 16px;
      width: 280px;
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.03);
      transition: border-color 0.2s ease;
    }

    .blog-search-box:focus-within {
      border-color: var(--primary-purple);
    }

    .blog-search-input {
      border: none;
      outline: none;
      background: transparent;
      width: 100%;
      font-family: var(--font-sans);
      font-size: 0.88rem;
      color: var(--text-plum);
    }

    .blog-search-icon {
      color: var(--text-muted);
      display: flex;
      align-items: center;
    }

    /* All Articles 4-Column Grid */
    .all-4col-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    @media (max-width: 1024px) {
      .all-4col-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .all-4col-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Pagination Component */
    .archive-pagination-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 40px;
      padding-top: 10px;
    }

    .pagination-btn {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid rgba(140, 120, 106, 0.2);
      background-color: #ffffff;
      color: #5B3049;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(41, 21, 40, 0.03);
      text-decoration: none;
    }

    .pagination-btn:hover {
      border-color: #5B3049;
      color: #5B3049;
      transform: translateY(-1px);
    }

    .pagination-btn.active {
      background-color: #5B3049;
      color: #ffffff;
      border-color: #5B3049;
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.18);
    }

    .pagination-dots {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #5B3049;
      font-size: 1.1rem;
      user-select: none;
    }

    .blog-card {
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.18);
      border-radius: 18px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 6px 20px rgba(41, 21, 40, 0.04);
    }

    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 32px rgba(41, 21, 40, 0.09);
    }

    .card-thumb-wrapper {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
    }

    .grid-card .card-thumb-wrapper {
      height: 160px;
    }

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

    .blog-card:hover .card-thumb-img {
      transform: scale(1.04);
    }

    .card-badge-pill {
      position: absolute;
      bottom: 12px;
      left: 12px;
      background-color: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(140, 120, 106, 0.2);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--accent-bronze);
      text-transform: uppercase;
    }

    .card-body {
      padding: 20px 22px;
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;
    }

    .grid-card .card-body {
      padding: 16px 18px;
    }

    .card-title {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.35;
      margin-bottom: 10px;
    }

    .card-title-sm {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-plum);
      line-height: 1.4;
      margin-bottom: 12px;
    }

    .card-excerpt {
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--text-muted);
      margin-bottom: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
    }

    .meta-dot {
      color: #a89587;
    }

    @media (max-width: 1024px) {
      .featured-3col-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .all-4col-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .featured-3col-grid, .all-4col-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
       SECTION 3: SPECIAL STORY BANNER, PAGINATION & NEWSLETTER
       ========================================================================== */
    .blog-special-section {
      width: 100%;
      padding-bottom: 90px;
    }

    .blog-special-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .special-story-card {
      position: relative;
      width: 100%;
      min-height: 360px;
      border-radius: 20px;
      overflow: hidden;
      background-color: #1b0c1d;
      box-shadow: 0 16px 40px rgba(25, 12, 26, 0.2);
      display: flex;
      align-items: center;
      background-image:
        linear-gradient(to right,
          #1b0c1d 0%,
          #251326 35%,
          rgba(37, 19, 38, 0.82) 55%,
          transparent 85%),
        url("images/product_about_landscape.png");
      background-size: cover;
      background-position: center right;
      background-repeat: no-repeat;
      margin-bottom: 50px;
    }

    .special-story-content {
      padding: 48px 52px;
      max-width: 620px;
      position: relative;
      z-index: 2;
      color: #ffffff;
    }

    .special-badge-tag {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: #FFD886;
      text-transform: uppercase;
      display: block;
      margin-bottom: 14px;
    }

    .special-story-title {
      font-family: var(--font-serif);
      font-size: 2.2rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.25;
      margin-bottom: 16px;
    }

    .special-story-desc {
      font-size: 0.98rem;
      line-height: 1.65;
      color: #d1c2b4;
      margin-bottom: 28px;
    }

    .special-read-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background-color: transparent;
      border: 1.5px solid var(--accent-bronze);
      color: #FFD886;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: 12px;
      text-decoration: none;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    .special-read-btn:hover {
      background-color: var(--accent-bronze);
      color: #ffffff;
    }

    .pagination-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      margin-bottom: 60px;
    }

    .load-more-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: var(--text-plum);
      color: #ffffff;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 12px 28px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.2s ease;
      box-shadow: 0 6px 18px rgba(41, 21, 40, 0.18);
    }

    .load-more-btn:hover {
      background-color: var(--primary-purple);
      transform: translateY(-2px);
    }

    .pagination-pills-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .page-pill {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.2);
      font-family: var(--font-sans);
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-plum);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .page-pill:hover {
      background-color: rgba(250, 235, 211, 0.6);
    }

    .page-pill.active {
      background-color: var(--text-plum);
      color: #ffffff;
      border-color: var(--text-plum);
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.15);
    }

    .page-dots {
      color: var(--text-muted);
      font-weight: 600;
      padding: 0 4px;
    }

    /* Newsletter Subscription Banner Component */
    .blog-newsletter-banner {
      width: 100%;
      background-color: rgba(255, 248, 242, 0.75);
      border: 1px solid rgba(140, 120, 106, 0.18);
      border-radius: 16px;
      padding: 28px 36px;
      margin-top: 50px;
      box-shadow: 0 8px 24px rgba(41, 21, 40, 0.03);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      flex-wrap: wrap;
      box-sizing: border-box;
    }

    .newsletter-banner-left {
      display: flex;
      align-items: center;
      gap: 18px;
      flex: 1;
      min-width: 300px;
    }

    .newsletter-badge-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: rgba(195, 125, 64, 0.14);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .newsletter-text-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .newsletter-banner-title {
      font-family: var(--font-serif);
      font-size: 1.45rem;
      font-weight: 700;
      color: #5B3049;
      margin: 0;
      line-height: 1.25;
    }

    .newsletter-banner-sub {
      font-family: var(--font-sans);
      font-size: 0.92rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.4;
    }

    .newsletter-banner-right {
      position: relative;
      flex-shrink: 0;
    }

    .newsletter-banner-form {
      display: flex;
      align-items: center;
      background: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 14px;
      padding: 5px 5px 5px 18px;
      width: 440px;
      max-width: 100%;
      box-shadow: 0 4px 14px rgba(41, 21, 40, 0.03);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .newsletter-banner-form:focus-within {
      border-color: #5B3049;
      box-shadow: 0 4px 16px rgba(91, 48, 73, 0.12);
    }

    .newsletter-banner-input {
      border: none;
      outline: none;
      background: transparent;
      width: 100%;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      color: #5B3049;
    }

    .newsletter-banner-input::placeholder {
      color: #a08c7d;
    }

    .newsletter-banner-btn {
      background-color: #5B3049;
      color: #ffffff;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background-color 0.25s ease, transform 0.15s ease;
    }

    .newsletter-banner-btn:hover {
      background-color: var(--primary-purple);
      transform: translateY(-1px);
    }

    .newsletter-feedback-msg {
      margin-top: 8px;
      font-size: 0.86rem;
      font-weight: 600;
      color: #2e7d32;
      display: none;
      align-items: center;
      gap: 6px;
    }

    .newsletter-feedback-msg.error {
      color: #d32f2f;
    }

    @media (max-width: 900px) {
      .blog-newsletter-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 28px;
      }

      .newsletter-banner-right,
      .newsletter-banner-form {
        width: 100%;
      }
    }

    /* ==========================================================================
       Site Footer (100% Identical Pixel-Perfect Across All Pages)
       ========================================================================== */
    .site-footer {
      background-color: #251326;
      color: #f4eee6;
      width: 100%;
      margin: 0;
      padding: 65px 0 0 0;
      position: relative;
      z-index: 10;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.35fr 1.8fr 1.5fr;
      gap: 24px;
      padding-bottom: 45px;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-brand-col {
      padding-right: 15px;
      margin-top: -15px;
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: 8px;
    }

    .footer-logo-img {
      height: 130px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.08) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
      padding-left: 15px;
    }

    .footer-company-name {
      display: block;
      margin-top: 12px;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: #FFD886;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #d1c2b4;
      white-space: nowrap;
    }

    .showroom-line {
      white-space: normal;
    }

    .footer-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .footer-links a {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

        .footer-contact-info p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #f4eee6;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .footer-contact-info p.showroom-line {
      white-space: normal;
    }

    .footer-contact-info .contact-label,
    .footer-contact-info span {
      color: #c4a785;
      font-weight: 600;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.2px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4a785;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .social-btn:hover {
      background-color: #c4a785;
      color: #251326;
      transform: translateY(-2px);
    }

    /* Newsletter Box */
    .newsletter-box {
      margin-top: 24px;
    }

    .newsletter-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .newsletter-form {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 320px;
      height: 42px;
      border: 1.2px solid #d4a359;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(18, 8, 17, 0.4);
      margin: 0;
    }

    .newsletter-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 16px;
      color: #f4eee6;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: #a89888;
      opacity: 0.75;
    }

    .newsletter-submit {
      flex-shrink: 0;
      position: relative;
      right: 0;
      width: 48px;
      height: 100%;
      background: #d4a359;
      border: none;
      color: #251326;
      cursor: pointer;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .newsletter-submit:hover {
      background: #e6b86e;
      color: #120811;
    }

    .footer-bottom {
      border-top: 1px solid rgba(196, 167, 133, 0.18);
      padding: 24px 0 32px 0;
      background-color: #251326;
      width: 100%;
      margin: 0;
    }

    .footer-bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .copyright-text {
      font-size: 0.78rem;
      color: #a89888;
      margin: 0;
    }

    .end-journey-emblem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
    }

    /* Responsive Queries */
    @media (max-width: 1024px) {
      .blog-hero-card {
        background-image:
          linear-gradient(to right,
            #241122 0%,
            #281428 55%,
            rgba(40, 20, 40, 0.82) 80%,
            transparent 100%),
          url("images/product_about_landscape.png");
      }

      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }
    }

    @media (max-width: 768px) {
      .nav-menu {
        display: none;
      }

      .mobile-menu-toggle {
        display: flex;
      }

      .blog-hero-title {
        font-size: 2.2rem;
      }

      .blog-hero-content {
        padding: 32px 24px;
      }

      .blog-toolbar-row {
        flex-direction: column;
        align-items: stretch;
      }

      .blog-search-box {
        width: 100%;
      }
    }

    @media (max-width: 580px) {
      .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .footer-brand-col {
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .footer-bottom-container {
        flex-direction: column;
        gap: 14px;
        text-align: center;
      }
    }

/* ===== Exact Original Styles from contact.html ===== */
html {
      overflow-y: scroll;
    }
    /* ==========================================================================
       DESIGN TOKENS & BASE STYLES (Identical to stories.html / blog.html)
       ========================================================================== */
    :root {
      --bg-parchment: #FAEBD3;
      --bg-parchment-accent: #ebd5b9;
      --text-plum: #291528;
      --text-muted: #56474f;
      --gold-muted: #9a7952;
      --gold-light: #c4a785;
      --border-subtle: #8c786a;
      --primary-purple: #5B3049;
      --accent-bronze: #C37D40;
      --cream-tint: #FFD886;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: var(--bg-parchment);
      color: var(--text-plum);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .page-wrapper {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background-color: var(--bg-parchment);
      display: flex;
      flex-direction: column;
    }

    /* Standardized 1440px Alignment Container */
    .navbar-container,
    .breadcrumb-container,
    .contact-container,
    .footer-container,
    .footer-bottom-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    /* ==========================================================================
       HEADER NAVIGATION BAR (Global - Identical to stories.html / blog.html)
       ========================================================================== */
    .navbar {
      position: relative;
      z-index: 10;
      width: 100%;
      padding: 16px 0 0 0;
    }

    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo-link {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin-top: -6px;
    }

    .brand-logo-img {
      height: 75px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0px 2px 4px rgba(41, 21, 40, 0.08));
    
      margin-left: 22px;}

    .brand-logo-text {
      margin-top: 4px;
      margin-left: 0;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #5B3049;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: -60px;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: #C37D40;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: #5B3049;
    }

    .nav-link.active {
      color: #5B3049;
      font-weight: 700;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: #5B3049;
      border-radius: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      transition: transform 0.2s ease, color 0.2s ease;
      position: relative;
    }

    .icon-btn:hover {
      transform: scale(1.05);
      color: #5B3049;
    }

    .cart-btn {
      position: relative;
    }

    .cart-badge {
      position: absolute;
      top: 2px;
      right: -4px;
      background-color: #5B3049;
      color: #ffffff;
      font-size: 0.65rem;
      font-weight: 700;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-menu-toggle {
      display: none;
    }

    /* Mobile Drawer */
    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(41, 21, 40, 0.6);
      backdrop-filter: blur(4px);
      z-index: 2000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .mobile-nav-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-nav-drawer {
      position: absolute;
      top: 0;
      right: 0;
      width: 300px;
      max-width: 85%;
      height: 100%;
      background-color: #251326;
      padding: 30px 24px;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      color: #f4eee6;
    }

    .mobile-nav-overlay.active .mobile-nav-drawer {
      transform: translateX(0);
    }

    .mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(250, 235, 211, 0.15);
    }

    .mobile-close-btn {
      background: transparent;
      border: none;
      color: #c4a785;
      cursor: pointer;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 30px;
    }

    .mobile-nav-link {
      font-size: 1.05rem;
      font-weight: 600;
      color: #d1c2b4;
      text-decoration: none;
    }

    .mobile-nav-link.active {
      color: #FFD886;
    }

    .mobile-drawer-footer {
      margin-top: auto;
      padding-top: 20px;
      border-top: 1px solid rgba(250, 235, 211, 0.15);
      font-size: 0.85rem;
      color: #b8a698;
    }

    .mobile-drawer-footer span {
      color: #c4a785;
      font-weight: 600;
    }

    /* ==========================================================================
       BREADCRUMB SECTION
       ========================================================================== */
    .breadcrumb-section {
      width: 100%;
      padding: 20px 0 10px 0;
    }

    .breadcrumb-container {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;
      color: var(--text-muted);
    }

    .breadcrumb-link {
      color: var(--text-muted);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s ease;
    }

    .breadcrumb-link:hover {
      color: var(--primary-purple);
    }

    .breadcrumb-separator {
      color: var(--gold-light);
      font-size: 0.95rem;
    }

    .breadcrumb-current {
      color: var(--primary-purple);
      font-weight: 600;
    }

    /* ==========================================================================
       CONTACT HERO BANNER
       ========================================================================== */
    .contact-hero-section {
      padding: 40px 0 20px 0;
      text-align: center;
    }

    .hero-badge-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(195, 125, 64, 0.12);
      border: 1px solid rgba(195, 125, 64, 0.3);
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--accent-bronze);
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .contact-hero-title {
      font-family: var(--font-serif);
      font-size: 3rem;
      font-weight: 700;
      color: var(--primary-purple);
      line-height: 1.25;
      margin-bottom: 14px;
    }

    .contact-hero-sub {
      max-width: 860px;
      margin: 0 auto;
      font-size: 1.05rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .hero-quick-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .hero-quick-pill {
      display: flex;
      align-items: center;
      gap: 10px;
      background-color: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 30px;
      padding: 8px 20px;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-plum);
      box-shadow: 0 4px 14px rgba(41, 21, 40, 0.03);
    }

    /* ==========================================================================
       MAIN CONTACT GRID (INFO & FORM)
       ========================================================================== */
    .contact-main-section {
      padding: 32px 0 70px 0;
    }

    /* Brand Story Card Banner Architecture */
    .brand-story-card {
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 16px;
      padding: 36px 40px;
      margin-top: 0;
      margin-bottom: 36px;
      box-shadow: 0 8px 24px rgba(41, 21, 40, 0.03);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .brand-story-card:hover {
      border-color: rgba(195, 125, 64, 0.35);
      box-shadow: 0 10px 28px rgba(41, 21, 40, 0.05);
    }

    .brand-story-title {
      font-family: var(--font-serif);
      font-size: 26px;
      font-weight: 700;
      color: #5B3049;
      margin-top: 0;
      margin-bottom: 20px;
      letter-spacing: 0.02em;
    }

    .brand-story-body {
      display: flex;
      flex-direction: column;
    }

    .brand-story-body p {
      font-size: 15px;
      line-height: 1.75;
      color: #333333;
      margin-top: 0;
      margin-bottom: 16px;
    }

    .brand-story-body p:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 768px) {
      .brand-story-card {
        padding: 24px 20px;
        margin-bottom: 24px;
      }
      .brand-story-title {
        font-size: 22px;
        margin-bottom: 16px;
      }
      .brand-story-body p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 14px;
      }
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: 36px;
      align-items: start;
    }

    /* Left Info Column */
    .contact-info-col {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .info-card {
      background-color: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 16px;
      padding: 26px 28px;
      box-shadow: 0 8px 24px rgba(41, 21, 40, 0.03);
      transition: border-color 0.25s ease, transform 0.25s ease;
    }

    .info-card:hover {
      border-color: var(--accent-bronze);
      transform: translateY(-2px);
    }

    .info-card-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
    }

    .info-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background-color: rgba(195, 125, 64, 0.14);
      color: var(--accent-bronze);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .info-card-title {
      font-family: var(--font-serif);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--primary-purple);
    }

    .info-card-body {
      font-size: 0.93rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .info-card-body strong {
      color: var(--text-plum);
      font-weight: 700;
    }

    .info-action-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      color: var(--accent-bronze);
      font-weight: 600;
      font-size: 0.9rem;
      text-decoration: none;
      transition: gap 0.2s ease;
    }

    .info-action-link:hover {
      gap: 12px;
      color: var(--primary-purple);
    }

    /* Social Connect Card */
    .contact-social-card {
      background-color: rgba(255, 248, 242, 0.85);
      border: 1px solid rgba(195, 125, 64, 0.3);
      border-radius: 16px;
      padding: 22px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    .social-card-title {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--primary-purple);
    }

    .social-buttons-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .contact-social-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.22);
      color: var(--primary-purple);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(41, 21, 40, 0.04);
    }

    .contact-social-btn:hover {
      background-color: var(--primary-purple);
      color: #ffffff;
      transform: translateY(-2px);
    }

    /* Right Form Column */
    .contact-form-col {
      background-color: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 20px;
      padding: 36px 40px;
      box-shadow: 0 12px 36px rgba(41, 21, 40, 0.04);
    }

    .form-header {
      margin-bottom: 26px;
    }

    .form-title {
      font-family: var(--font-serif);
      font-size: 2rem;
      font-weight: 700;
      color: var(--primary-purple);
      margin-bottom: 6px;
    }

    .form-sub {
      font-size: 0.93rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .form-group-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-bottom: 18px;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 18px;
    }

    .form-label {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text-plum);
    }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      background-color: #ffffff;
      border: 1.5px solid rgba(140, 120, 106, 0.25);
      border-radius: 12px;
      padding: 12px 16px;
      font-family: var(--font-sans);
      font-size: 0.92rem;
      color: var(--text-plum);
      outline: none;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: var(--primary-purple);
      box-shadow: 0 4px 16px rgba(91, 48, 73, 0.12);
    }

    .form-textarea {
      min-height: 110px;
      resize: vertical;
      line-height: 1.5;
    }

    .submit-btn {
      width: 100%;
      background-color: var(--primary-purple);
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 14px 28px;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background-color 0.25s ease, transform 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 6px 18px rgba(41, 21, 40, 0.15);
    }

    .submit-btn:hover {
      background-color: #422035;
      transform: translateY(-2px);
    }

    .form-success-banner {
      display: none;
      background-color: rgba(46, 125, 50, 0.12);
      border: 1px solid rgba(46, 125, 50, 0.3);
      border-radius: 12px;
      padding: 14px 18px;
      margin-top: 18px;
      color: #2e7d32;
      font-size: 0.9rem;
      font-weight: 600;
      align-items: center;
      gap: 10px;
    }

    /* ==========================================================================
       MAP SHOWROOM SECTION
       ========================================================================== */
    .contact-map-section {
      padding: 50px 0 70px 0;
    }

    .section-header-center {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 36px auto;
    }

    .section-title-serif {
      font-family: var(--font-serif);
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--primary-purple);
      margin-bottom: 10px;
    }

    .section-sub-text {
      font-size: 0.96rem;
      color: var(--text-muted);
    }

    .map-container-card {
      width: 100%;
      height: 420px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(140, 120, 106, 0.22);
      box-shadow: 0 12px 32px rgba(41, 21, 40, 0.06);
    }

    .map-iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    /* ==========================================================================
       NEWSLETTER SUBSCRIPTION BANNER (Identical to blog.html)
       ========================================================================== */
    .blog-newsletter-banner {
      width: 100%;
      background-color: rgba(255, 248, 242, 0.75);
      border: 1px solid rgba(140, 120, 106, 0.18);
      border-radius: 16px;
      padding: 28px 36px;
      margin: 50px 0 70px 0;
      box-shadow: 0 8px 24px rgba(41, 21, 40, 0.03);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      flex-wrap: wrap;
    }

    .newsletter-banner-left {
      display: flex;
      align-items: center;
      gap: 18px;
      flex: 1;
      min-width: 300px;
    }

    .newsletter-badge-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: rgba(195, 125, 64, 0.14);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .newsletter-banner-title {
      font-family: var(--font-serif);
      font-size: 1.45rem;
      font-weight: 700;
      color: #5B3049;
      margin: 0;
    }

    .newsletter-banner-sub {
      font-size: 0.92rem;
      color: var(--text-muted);
      margin: 0;
    }

    .newsletter-banner-right {
      position: relative;
      flex-shrink: 0;
    }

    .newsletter-banner-form {
      display: flex;
      align-items: center;
      background: #ffffff;
      border: 1px solid rgba(140, 120, 106, 0.22);
      border-radius: 14px;
      padding: 5px 5px 5px 18px;
      width: 440px;
      max-width: 100%;
      box-shadow: 0 4px 14px rgba(41, 21, 40, 0.03);
    }

    .newsletter-banner-input {
      border: none;
      outline: none;
      background: transparent;
      width: 100%;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      color: #5B3049;
    }

    .newsletter-banner-btn {
      background-color: #5B3049;
      color: #ffffff;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background-color 0.25s ease;
    }

    .newsletter-feedback-msg {
      margin-top: 8px;
      font-size: 0.86rem;
      font-weight: 600;
      color: #2e7d32;
      display: none;
    }

    /* ==========================================================================
       Site Footer (100% Identical Pixel-Perfect Across All Pages)
       ========================================================================== */
    .site-footer {
      background-color: #251326;
      color: #f4eee6;
      width: 100%;
      margin: 0;
      padding: 65px 0 0 0;
      position: relative;
      z-index: 10;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.35fr 1.8fr 1.5fr;
      gap: 24px;
      padding-bottom: 45px;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-brand-col {
      padding-right: 15px;
      margin-top: -15px;
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: 8px;
    }

    .footer-logo-img {
      height: 130px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.08) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
      padding-left: 15px;
    }

    .footer-company-name {
      display: block;
      margin-top: 12px;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: #FFD886;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #d1c2b4;
      white-space: nowrap;
    }

    .showroom-line {
      white-space: normal;
    }

    .footer-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .footer-links a {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

        .footer-contact-info p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #f4eee6;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .footer-contact-info p.showroom-line {
      white-space: normal;
    }

    .footer-contact-info .contact-label,
    .footer-contact-info span {
      color: #c4a785;
      font-weight: 600;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.2px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4a785;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .social-btn:hover {
      background-color: #c4a785;
      color: #251326;
      transform: translateY(-2px);
    }

    /* Newsletter Box */
    .newsletter-box {
      margin-top: 24px;
    }

    .newsletter-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .newsletter-form {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 320px;
      height: 42px;
      border: 1.2px solid #d4a359;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(18, 8, 17, 0.4);
      margin: 0;
    }

    .newsletter-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 16px;
      color: #f4eee6;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: #a89888;
      opacity: 0.75;
    }

    .newsletter-submit {
      flex-shrink: 0;
      position: relative;
      right: 0;
      width: 48px;
      height: 100%;
      background: #d4a359;
      border: none;
      color: #251326;
      cursor: pointer;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .newsletter-submit:hover {
      background: #e6b86e;
      color: #120811;
    }

    .footer-bottom {
      border-top: 1px solid rgba(196, 167, 133, 0.18);
      padding: 24px 0 32px 0;
      background-color: #251326;
      width: 100%;
      margin: 0;
    }

    .footer-bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .copyright-text {
      font-size: 0.78rem;
      color: #a89888;
      margin: 0;
    }

    .end-journey-emblem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
    }

    /* RESPONSIVE DESIGN */
    @media (max-width: 1024px) {
      .contact-grid {
        grid-template-columns: 1fr;
      }
      .footer-container {
        grid-template-columns: repeat(2, 1fr);
      }
      .nav-menu {
        margin-left: 0;
        gap: 32px;
      }
    }

    @media (max-width: 768px) {
      .nav-menu {
        display: none;
      }
      .mobile-menu-toggle {
        display: flex;
      }
      .form-group-row {
        grid-template-columns: 1fr;
      }
      .footer-container {
        grid-template-columns: 1fr;
      }
      .contact-hero-title {
        font-size: 2.2rem;
      }
      .contact-form-col {
        padding: 28px 22px;
      }
    }

/* ===== Exact Original Styles from checkout.html ===== */
html {
      overflow-y: scroll;
    }
    /* ==========================================================================
       CSS DESIGN SYSTEM TOKENS
       ========================================================================== */
    :root {
      --bg-parchment: #FAEBD3;
      --bg-parchment-accent: #ebd5b9;
      --text-plum: #291528;
      --primary-purple: #5B3049;
      --primary-dark-purple: #311B4E;
      --accent-gold: #C37D40;
      --accent-bronze: #C37D40;
      --gold-light: #E2B980;
      --bg-cream-light: #FBF7F2;
      --text-muted: #8C786A;
      --border-color: rgba(140, 120, 106, 0.2);
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      --font-script: 'Alex Brush', cursive;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: var(--bg-parchment);
      color: var(--text-plum);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .page-wrapper {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background-color: var(--bg-parchment);
      display: flex;
      flex-direction: column;
    }

    /* Standardized 1440px Container */
    /* Standardized 1440px Alignment Container */
    .navbar-container,
    .breadcrumb-container,
    .checkout-content-container,
    .footer-container,
    .footer-bottom-container {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    /* ==========================================================================
       HEADER NAVIGATION BAR (Global - Identical to contact.html / stories.html)
       ========================================================================== */
    .navbar {
      position: relative;
      z-index: 10;
      width: 100%;
      padding: 16px 0 0 0;
    }

    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo-link {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin-top: -6px;
    }

    .brand-logo-img {
      height: 75px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0px 2px 4px rgba(41, 21, 40, 0.08));
    
      margin-left: 22px;}

    .brand-logo-text {
      margin-top: 4px;
      margin-left: 0;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #5B3049;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: -60px;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: #C37D40;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: #5B3049;
    }

    .nav-link.active {
      color: #5B3049;
      font-weight: 700;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: #5B3049;
      border-radius: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #C37D40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      transition: transform 0.2s ease, color 0.2s ease;
      position: relative;
    }

    .icon-btn:hover {
      transform: scale(1.05);
      color: #5B3049;
    }

    .cart-btn {
      position: relative;
    }

    .cart-badge {
      position: absolute;
      top: 2px;
      right: -4px;
      background-color: #5B3049;
      color: #ffffff;
      font-size: 0.65rem;
      font-weight: 700;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-menu-toggle {
      display: none;
    }

    /* Mobile Drawer */
    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(37, 19, 38, 0.65);
      backdrop-filter: blur(4px);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

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

    .mobile-nav-drawer {
      position: fixed;
      top: 0;
      right: -280px;
      width: 280px;
      height: 100%;
      background-color: #291528;
      z-index: 1000;
      padding: 30px 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      transition: right 0.3s ease;
      box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
    }

    .mobile-nav-overlay.active .mobile-nav-drawer {
      right: 0;
    }

    .mobile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 216, 134, 0.15);
      padding-bottom: 15px;
    }

    .mobile-close-btn {
      background: none;
      border: none;
      color: #FFD886;
      cursor: pointer;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .mobile-nav-link {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 1.05rem;
      font-weight: 600;
      transition: color 0.2s;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
      color: #FFD886;
    }

    /* BREADCRUMB */
    .breadcrumb-section {
      width: 100%;
      padding: 20px 0 15px 0;
    }

    .breadcrumb-container {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;
      color: var(--text-muted);
    }

    .breadcrumb-link {
      color: var(--text-muted);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s ease;
    }

    .breadcrumb-link:hover {
      color: var(--primary-purple);
    }

    .breadcrumb-separator {
      color: var(--gold-light);
      font-size: 0.95rem;
    }

    .breadcrumb-current {
      color: var(--primary-purple);
      font-weight: 600;
    }

    /* ==========================================================================
       CHECKOUT MAIN LAYOUT (2-Column WooCommerce Style)
       ========================================================================== */
    .checkout-page-section {
      padding: 10px 0 80px 0;
      width: 100%;
    }

    .checkout-main-grid {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 50px;
      align-items: start;
    }

    /* Left: Billing Details */
    .checkout-billing-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .checkout-col-heading {
      font-family: var(--font-sans);
      font-size: 1.6rem;
      font-weight: 800;
      color: #111111;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }

    .woocommerce-form-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .woocommerce-form-row-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .form-field-label {
      font-size: 0.92rem;
      font-weight: 700;
      color: #222222;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .required-star {
      color: #D32F2F;
      font-weight: 700;
    }

    .wc-input-field,
    .wc-select-field,
    .wc-textarea-field {
      width: 100%;
      background: #FFFFFF;
      border: 1.5px solid #E5E5E5;
      border-radius: 12px;
      padding: 14px 18px;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      color: #222222;
      outline: none;
      transition: all 0.25s ease;
    }

    .wc-input-field:focus,
    .wc-select-field:focus,
    .wc-textarea-field:focus {
      background: #FFFFFF;
      border-color: #5B3049;
      box-shadow: 0 0 0 3px rgba(91, 48, 73, 0.12);
    }

    .wc-input-field::placeholder,
    .wc-textarea-field::placeholder {
      color: #9E9E9E;
      font-weight: 400;
    }

    .wc-select-field {
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #FFFFFF;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: calc(100% - 16px) center;
      background-size: 16px;
      padding-right: 44px;
    }

    /* Custom Dropdown (Always opens downwards) */
    .custom-select-container {
      position: relative;
      width: 100%;
    }

    .custom-select-trigger {
      width: 100%;
      background: #FFFFFF;
      border: 1.5px solid #E5E5E5;
      border-radius: 12px;
      padding: 14px 18px;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      color: #222222;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      transition: all 0.25s ease;
    }

    .custom-select-trigger.is-placeholder {
      color: #9E9E9E;
    }

    .custom-select-container.open .custom-select-trigger {
      border-color: #5B3049;
      box-shadow: 0 0 0 3px rgba(91, 48, 73, 0.12);
    }

    .custom-select-arrow {
      transition: transform 0.25s ease;
      flex-shrink: 0;
      color: #555555;
    }

    .custom-select-container.open .custom-select-arrow {
      transform: rotate(180deg);
      color: #5B3049;
    }

    .custom-select-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: 100%;
      max-height: 260px;
      overflow-y: auto;
      background: #FFFFFF;
      border: 1.5px solid #E5E5E5;
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(41, 21, 40, 0.14);
      z-index: 1000;
      display: none;
      padding: 6px 0;
      animation: dropdownFadeDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes dropdownFadeDown {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .custom-select-container.open .custom-select-dropdown {
      display: block;
    }

    .custom-option {
      padding: 11px 18px;
      font-size: 0.92rem;
      color: #291528;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .custom-option:hover {
      background-color: #F5EBE1;
      color: #5B3049;
      font-weight: 600;
    }

    .custom-option.selected {
      background-color: rgba(91, 48, 73, 0.08);
      color: #5B3049;
      font-weight: 700;
    }

    /* Custom Scrollbar for Dropdown */
    .custom-select-dropdown::-webkit-scrollbar {
      width: 6px;
    }

    .custom-select-dropdown::-webkit-scrollbar-track {
      background: #F8F8F8;
      border-radius: 8px;
    }

    .custom-select-dropdown::-webkit-scrollbar-thumb {
      background: #D8D0C5;
      border-radius: 8px;
    }

    .custom-select-dropdown::-webkit-scrollbar-thumb:hover {
      background: #5B3049;
    }

    .street-address-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .wc-textarea-field {
      resize: vertical;
      min-height: 100px;
    }

    /* Right: Your Order */
    .checkout-order-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .order-summary-box {
      background: #FFFFFF;
      border: 1px solid rgba(140, 120, 106, 0.18);
      border-radius: 12px;
      padding: 28px;
      box-shadow: 0 4px 20px rgba(41, 21, 40, 0.03);
    }

    .order-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 24px;
    }

    .order-table th {
      font-size: 0.95rem;
      font-weight: 700;
      color: #111111;
      text-align: left;
      padding-bottom: 16px;
      border-bottom: 1px solid #EBEBEB;
    }

    .order-table th:last-child {
      text-align: right;
    }

    .order-table td {
      padding: 16px 0;
      border-bottom: 1px solid #EBEBEB;
      font-size: 0.92rem;
      color: #333333;
      vertical-align: top;
    }

    .order-table td:last-child {
      text-align: right;
      font-weight: 600;
      white-space: nowrap;
    }

    .order-product-title {
      font-weight: 600;
      color: #222222;
      margin-bottom: 4px;
    }

    .order-product-meta {
      font-size: 0.82rem;
      color: #777777;
      line-height: 1.4;
    }

    .order-subtotal-row td,
    .order-total-row td {
      padding: 16px 0;
    }

    .order-total-row td {
      border-bottom: none;
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--primary-purple);
    }

    /* Custom Letter Preview Box */
    .custom-letter-preview-box {
      margin-top: 10px;
      background: #FDFBF7;
      border: 1px solid rgba(195, 125, 64, 0.25);
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 0.84rem;
    }

    .letter-preview-title {
      font-weight: 700;
      color: #5B3049;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .letter-preview-content {
      color: #554452;
      font-style: italic;
      line-height: 1.45;
    }

    .meta-line {
      margin-bottom: 4px;
      font-size: 0.85rem;
      color: #554452;
    }

    .meta-line strong {
      color: #222222;
    }

    .unit-price-cell {
      font-size: 0.95rem;
      font-weight: 700;
      color: #222222;
      white-space: nowrap;
    }

    /* Order Notice & Checkpoint Boxes */
    .order-notice-box {
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .purple-notice {
      background: #FBF7F9;
      border: 1.5px solid rgba(91, 48, 73, 0.2);
    }

    .purple-notice .notice-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: #5B3049;
    }

    .purple-notice .notice-desc {
      font-size: 0.84rem;
      color: #665564;
      line-height: 1.5;
    }

    .return-policy-box {
      background: #F0F6FC;
      border: 1.5px solid rgba(21, 101, 192, 0.2);
    }

    .return-policy-box .notice-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: #5B3049;
    }

    .return-policy-box .notice-desc {
      font-size: 0.84rem;
      color: #554452;
      line-height: 1.5;
      margin-bottom: 4px;
    }

    .return-policy-checkbox-label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.88rem;
      font-weight: 700;
      color: #222222;
      cursor: pointer;
      padding-top: 8px;
      border-top: 1px solid rgba(21, 101, 192, 0.12);
    }

    .policy-checkbox {
      margin-top: 3px;
      width: 17px;
      height: 17px;
      accent-color: #5B3049;
      cursor: pointer;
      flex-shrink: 0;
    }

    /* Privacy Policy Text */
    .privacy-policy-text {
      font-size: 0.84rem;
      color: #666666;
      line-height: 1.55;
      margin-bottom: 22px;
    }

    .privacy-policy-link {
      color: #5B3049;
      font-weight: 700;
      text-decoration: underline;
    }

    .privacy-policy-link:hover {
      color: #C37D40;
    }

    /* Place Order CTA Button */
    .btn-place-order {
      width: 100%;
      background-color: #5B3049;
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 16px 24px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 6px 18px rgba(91, 48, 73, 0.25);
    }

    .btn-place-order:hover:not(:disabled) {
      background-color: #431f35;
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(91, 48, 73, 0.35);
    }

    .btn-place-order:disabled {
      background-color: #BDBDBD;
      box-shadow: none;
      cursor: not-allowed;
      opacity: 0.7;
    }

    /* ==========================================================================
       Site Footer (100% Identical Pixel-Perfect Across All Pages)
       ========================================================================== */
    .site-footer {
      background-color: #251326;
      color: #f4eee6;
      width: 100%;
      margin: 0;
      padding: 65px 0 0 0;
      position: relative;
      z-index: 10;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.35fr 1.8fr 1.5fr;
      gap: 24px;
      padding-bottom: 45px;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-brand-col {
      padding-right: 15px;
      margin-top: -15px;
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: 8px;
    }

    .footer-logo-img {
      height: 130px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.08) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
      padding-left: 15px;
    }

    .footer-company-name {
      display: block;
      margin-top: 12px;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: #FFD886;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #d1c2b4;
      white-space: nowrap;
    }

    .showroom-line {
      white-space: normal;
    }

    .footer-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .footer-links a {
      color: #d1c2b4;
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

        .footer-contact-info p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #f4eee6;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .footer-contact-info p.showroom-line {
      white-space: normal;
    }

    .footer-contact-info .contact-label,
    .footer-contact-info span {
      color: #c4a785;
      font-weight: 600;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.2px solid #c4a785;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4a785;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .social-btn:hover {
      background-color: #c4a785;
      color: #251326;
      transform: translateY(-2px);
    }

    /* Newsletter Box */
    .newsletter-box {
      margin-top: 24px;
    }

    .newsletter-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #c4a785;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .newsletter-form {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 320px;
      height: 42px;
      border: 1.2px solid #d4a359;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(18, 8, 17, 0.4);
      margin: 0;
    }

    .newsletter-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 16px;
      color: #f4eee6;
      font-size: 0.9rem;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: #a89888;
      opacity: 0.75;
    }

    .newsletter-submit {
      flex-shrink: 0;
      position: relative;
      right: 0;
      width: 48px;
      height: 100%;
      background: #d4a359;
      border: none;
      color: #251326;
      cursor: pointer;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .newsletter-submit:hover {
      background: #e6b86e;
      color: #120811;
    }

    .footer-bottom {
      border-top: 1px solid rgba(196, 167, 133, 0.18);
      padding: 24px 0 32px 0;
      background-color: #251326;
      width: 100%;
      margin: 0;
    }

    .footer-bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
    }

    .copyright-text {
      font-size: 0.78rem;
      color: #a89888;
      margin: 0;
    }

    .end-journey-emblem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #c4a785;
      text-transform: uppercase;
    }

    /* RESPONSIVE DESIGN */
    @media (max-width: 1024px) {
      .nav-menu {
        margin-left: 0;
        gap: 32px;
      }

      .checkout-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .footer-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .nav-menu {
        display: none;
      }

      .mobile-menu-toggle {
        display: flex;
      }

      .woocommerce-form-row-2col {
        grid-template-columns: 1fr;
      }

      .footer-container {
        grid-template-columns: 1fr;
      }
    }


/* WordPress Admin Bar Compatibility */
#wpadminbar {
  opacity: 0.85;
}


/* Guaranteed Full Top Header Coverage for Hero and Collection */
.hero-bg-image-container,
.collection-bg-image-container {
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
}

.hero-bg-img {
  object-position: 25% top !important;
}

.collection-bg-img {
  object-position: right top !important;
}

.navbar {
  background-color: transparent !important;
  background: transparent !important;
}


/* ==========================================================================
   MASTER SÀI GÒN DANH TRÀ THEME OVERRIDES (100% EXACT PERFECTION)
   ========================================================================== */

/* Global Standard 1440px Container Grid (Logo and Text 100% Flush Left) */
.navbar-container,
.hero-content-container,
.collection-banner-container,
.world-tea-container,
.stories-container,
.traceability-container,
.poetry-banner-container,
.footer-container,
.footer-bottom-container {
  max-width: 1440px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 4% !important;
  padding-right: 4% !important;
  box-sizing: border-box !important;
}

/* Outer Navbar - Transparent with 0 Horizontal Padding */
.navbar,
#site-header,
header.navbar {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 12px !important;
  background: transparent !important;
  background-color: transparent !important;
  position: relative !important;
  z-index: 100 !important;
  margin: 0 !important;
}

/* Brand Logo Flush Left */
.brand-logo-link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

.brand-logo-img {
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;

      margin-left: 22px;}

.brand-logo-text {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

/* Crystal-Clear High-Contrast Navigation Links */
.nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}

.nav-link {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #5B3049 !important;
  text-decoration: none !important;
  position: relative !important;
  padding-bottom: 6px !important;
  transition: all 0.2s ease !important;
  text-shadow: 0 1px 2px rgba(250, 235, 211, 0.9) !important;
}

.nav-link:hover {
  color: #C37D40 !important;
}

.nav-link.active {
  color: #5B3049 !important;
  font-weight: 800 !important;
}

.nav-link.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2.5px !important;
  background-color: #5B3049 !important;
  border-radius: 2px !important;
}

/* Hero Content & Left Column */
.hero-content-container {
  position: relative !important;
  z-index: 10 !important;
  padding-top: 20px !important;
  padding-bottom: 40px !important;
}

.hero-left-column {
      max-width: 480px;
      margin-top: -35px;
    }

.hero-title,
.hero-description,
.divider-line-container {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Hero Actions & Buttons Visible (No Cutoff) */
.hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
  margin-bottom: 20px !important;
  margin-left: 0 !important;
  position: relative !important;
  z-index: 15 !important;
}

.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hero Section Height & Natural Expansion */
.hero-wrapper,
.collection-hero-wrapper {
  position: relative !important;
  width: 100% !important;
  min-height: 760px !important;
  height: auto !important;
  background-color: #FAEBD3 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-bottom: 60px !important;
  overflow: visible !important;
}

/* WordPress Admin Bar Compatibility */
body.admin-bar .hero-wrapper,
body.admin-bar .collection-hero-wrapper {
  min-height: calc(100vh - 32px) !important;
}

/* Background Image Containers Behind Header */
.hero-bg-image-container,
.collection-bg-image-container {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 72% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.hero-bg-img,
.collection-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right top !important;
  display: block !important;
}

/* Seamless Multi-stage Feathered Overlay with Top Header Parchment Veil */
.hero-bg-overlay,
.collection-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: 
    /* Top Header Parchment Veil for 100% Nav Link Legibility */
    linear-gradient(to bottom,
      rgba(250, 235, 211, 0.92) 0%,
      rgba(250, 235, 211, 0.7) 14%,
      rgba(250, 235, 211, 0.25) 30%,
      transparent 45%),
    /* Heavy Left-to-Right Fade */
    linear-gradient(to right,
      #FAEBD3 0%,
      rgba(250, 235, 211, 0.95) 12%,
      rgba(250, 235, 211, 0.7) 28%,
      rgba(250, 235, 211, 0.25) 45%,
      transparent 70%),
    /* Soft Bottom Fade */
    linear-gradient(to top,
      #FAEBD3 0%,
      rgba(250, 235, 211, 0.8) 10%,
      transparent 30%),
    /* Soft Sunlight Radial */
    radial-gradient(ellipse at 80% 0%,
      rgba(250, 235, 211, 0.3) 0%,
      transparent 60%) !important;
}

/* Next Section Isolation */
.world-tea-section {
  position: relative !important;
  clear: both !important;
  z-index: 5 !important;
}



/* ==========================================================================
   PERFECT HERO SPACING & ALIGNMENT (Spaced below header logo, buttons side-by-side)
   ========================================================================== */
.hero-wrapper {
  min-height: 100vh !important;
}

.hero-content-container {
  padding-top: 20px !important;
  padding-bottom: 15px !important;
}

.hero-wrapper .hero-left-column {
  max-width: 580px !important;
  margin-top: 15px !important;
  padding-top: 10px !important;
}

.hero-wrapper .hero-title {
  font-size: clamp(2.4rem, 3.5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  margin-top: 12px !important;
  margin-bottom: 14px !important;
}

.hero-wrapper .divider-line-container {
  margin-bottom: 14px !important;
}

.hero-wrapper .hero-description {
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
  margin-bottom: 20px !important;
  max-width: 480px !important;
}

.hero-wrapper .hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 0 !important;
}

.hero-wrapper .btn {
  padding: 12px 22px !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}

.hero-wrapper .scroll-indicator {
  position: relative !important;
  z-index: 10 !important;
  margin-top: -20px !important;
  padding-bottom: 20px !important;
  transform: none !important;
}


/* Explicit Header Logo Placement between GÒN and DANH */
.brand-logo-img {
  margin-left: 22px !important;
}