/*
Theme Name: Namayah
Theme URI: https://pixelvect.com
Author: Shuvadip Sana
Author URI: https://pixelvect.com
Description: Namayah is a premium luxury lifestyle brand WordPress theme designed for handcrafted wooden decor, copper & brass handicrafts, handmade products, and authentic handloom collections. Featuring a luxury blue & sustainable color palette, elegant typography, and international-standard design that combines modern luxury aesthetics with warm handcrafted emotions.
Version: 1.0.5
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: namayah
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, one-column, two-columns, right-sidebar, footer-widgets, blog, e-commerce
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.  CSS Custom Properties / Variables
   2.  Reset & Base Styles
   3.  Typography
   4.  Layout & Grid
   5.  Custom Scrollbar
   6.  Animations & Keyframes
   7.  Utility Classes
   8.  Navigation & Header
   9.  Hero Section & Sliders
   10. Featured Categories
   11. Brand Story Section
   12. Why Choose Section
   13. Cards & Product Cards
   14. Blog & Archive
   15. Single Post
   16. Comments
   17. Testimonials
   18. Timeline
   19. Wholesale / CTA Section
   20. Social Feed
   21. Newsletter
   22. Footer
   23. Sidebar & Widgets
   24. Forms & Buttons
   25. Page Templates
   26. WooCommerce Overrides
   27. 404 Page
   28. Search
   29. Gallery
   30. Accessibility
   31. Print Styles
   32. Responsive - Tablet
   33. Responsive - Mobile
   34. Responsive - Small Mobile
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties / Variables
   ========================================================================== */
:root {
  /* Primary Colors */
  --color-navy: #0A1628;
  --color-navy-light: #132240;
  --color-royal-blue: #1B3A5C;
  --color-luxury-blue: #1E4D8C;

  /* Accent Colors */
  --color-brass: #C5A55A;
  --color-brass-light: #D4BA7A;
  --color-gold: #D4AF37;
  --color-gold-light: #E8D48B;

  /* Neutral Colors */
  --color-ivory: #FFFFF0;
  --color-beige: #F5F0E8;
  --color-beige-warm: #EDE4D3;

  /* Earth Tones */
  --color-wooden-brown: #8B6914;
  --color-copper: #B87333;
  --color-copper-light: #DA9A5B;

  /* Semantic Colors */
  --color-background: #FFFFF0;
  --color-foreground: #0A1628;
  --color-card: #FFFFFF;
  --color-card-foreground: #0A1628;
  --color-popover: #FFFFFF;
  --color-popover-foreground: #0A1628;
  --color-primary: #1B3A5C;
  --color-primary-foreground: #FFFFF0;
  --color-secondary: #F5F0E8;
  --color-secondary-foreground: #0A1628;
  --color-muted: #F5F0E8;
  --color-muted-foreground: #6B7280;
  --color-accent: #C5A55A;
  --color-accent-foreground: #0A1628;
  --color-destructive: #DC2626;
  --color-border: #E5DFD3;
  --color-input: #E5DFD3;
  --color-ring: #1B3A5C;

  /* Sidebar Colors */
  --color-sidebar: #0A1628;
  --color-sidebar-foreground: #FFFFF0;
  --color-sidebar-primary: #C5A55A;
  --color-sidebar-primary-foreground: #0A1628;
  --color-sidebar-accent: #132240;
  --color-sidebar-accent-foreground: #FFFFF0;
  --color-sidebar-border: #1B3A5C;
  --color-sidebar-ring: #C5A55A;

  /* Chart Colors */
  --color-chart-1: #1B3A5C;
  --color-chart-2: #C5A55A;
  --color-chart-3: #B87333;
  --color-chart-4: #8B6914;
  --color-chart-5: #1E4D8C;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;

  /* Border Radius */
  --radius-sm: calc(0.625rem - 4px);
  --radius-md: calc(0.625rem - 2px);
  --radius-lg: 0.625rem;
  --radius-xl: calc(0.625rem + 4px);
  --radius-2xl: calc(0.625rem + 8px);
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(10, 22, 40, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(10, 22, 40, 0.1), 0 2px 4px -2px rgba(10, 22, 40, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(10, 22, 40, 0.1), 0 4px 6px -4px rgba(10, 22, 40, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(10, 22, 40, 0.1), 0 8px 10px -6px rgba(10, 22, 40, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(10, 22, 40, 0.25);
  --shadow-luxury: 0 20px 40px rgba(10, 22, 40, 0.15);
  --shadow-brass: 0 4px 14px rgba(197, 165, 90, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-luxury: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;

  /* Container */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 960px;

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Full-Width Layout */
body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-foreground);
  background-color: var(--color-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-brass);
}

a:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-xl) 0;
}

::selection {
  background-color: var(--color-brass);
  color: var(--color-navy);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  margin-bottom: 0.5em;
}

h1, .h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: clamp(1.375rem, 3vw, 2.25rem);
}

h4, .h4 {
  font-size: clamp(1.125rem, 2vw, 1.75rem);
}

h5, .h5 {
  font-size: clamp(1rem, 1.5vw, 1.375rem);
}

h6, .h6 {
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
}

p {
  margin-bottom: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--color-muted-foreground);
  font-weight: 300;
}

.display-text {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.subtitle {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-brass);
}

.caption {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  line-height: 1.5;
}

small,
.text-sm {
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.text-4xl {
  font-size: 2.25rem;
}

strong, .font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.font-light {
  font-weight: 300;
}

.font-italic {
  font-style: italic;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-navy {
  color: var(--color-navy);
}

.text-brass {
  color: var(--color-brass);
}

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

.text-royal {
  color: var(--color-royal-blue);
}

.text-copper {
  color: var(--color-copper);
}

.text-muted {
  color: var(--color-muted-foreground);
}

.text-white {
  color: #FFFFFF;
}

.text-ivory {
  color: var(--color-ivory);
}

blockquote {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-royal-blue);
  border-left: 3px solid var(--color-brass);
  padding-left: var(--spacing-xl);
  margin: var(--spacing-2xl) 0;
}

blockquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-brass);
  margin-top: var(--spacing-md);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-secondary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--color-navy);
  color: var(--color-ivory);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--spacing-xl) 0;
}

pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

/* ==========================================================================
   4. Layout & Grid
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.container-wide {
  max-width: var(--container-wide);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-top: var(--spacing-4xl);
  padding-bottom: var(--spacing-4xl);
}

.section-lg {
  padding-top: var(--spacing-5xl);
  padding-bottom: var(--spacing-5xl);
}

.section-sm {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

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

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }

.grid {
  display: grid;
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.max-h-96 {
  max-height: 24rem;
}

.max-w-prose {
  max-width: 65ch;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }

.mr-2 { margin-right: 0.5rem; }
.mr-4 { margin-right: 1rem; }
.ml-auto { margin-left: auto; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

.border { border: 1px solid var(--color-border); }
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-l { border-left: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }

.border-brass { border-color: var(--color-brass); }
.border-navy { border-color: var(--color-navy); }

.bg-navy { background-color: var(--color-navy); }
.bg-navy-light { background-color: var(--color-navy-light); }
.bg-royal { background-color: var(--color-royal-blue); }
.bg-luxury-blue { background-color: var(--color-luxury-blue); }
.bg-brass { background-color: var(--color-brass); }
.bg-brass-light { background-color: var(--color-brass-light); }
.bg-gold { background-color: var(--color-gold); }
.bg-gold-light { background-color: var(--color-gold-light); }
.bg-ivory { background-color: var(--color-ivory); }
.bg-beige { background-color: var(--color-beige); }
.bg-beige-warm { background-color: var(--color-beige-warm); }
.bg-copper { background-color: var(--color-copper); }
.bg-copper-light { background-color: var(--color-copper-light); }
.bg-white { background-color: #FFFFFF; }
.bg-transparent { background-color: transparent; }

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   5. Custom Scrollbar
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-beige);
}

::-webkit-scrollbar-thumb {
  background: var(--color-brass);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-royal-blue);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-brass) var(--color-beige);
}

/* ==========================================================================
   6. Animations & Keyframes
   ========================================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-10px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes widthGrow {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes borderPulse {
  0%, 100% {
    border-color: var(--color-brass);
  }
  50% {
    border-color: var(--color-gold-light);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s ease forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.8s ease forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s ease forwards;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Stagger children animation */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }

/* Delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* ==========================================================================
   7. Utility Classes
   ========================================================================== */

/* Luxury text gradient */
.text-luxury-gradient {
  background: linear-gradient(135deg, #C5A55A 0%, #D4AF37 50%, #D4BA7A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Brass shimmer animation */
.brass-shimmer {
  background: linear-gradient(90deg, #C5A55A 0%, #E8D48B 25%, #D4AF37 50%, #E8D48B 75%, #C5A55A 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* Hero overlay */
.hero-overlay {
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.85) 0%, rgba(27, 58, 92, 0.7) 50%, rgba(10, 22, 40, 0.85) 100%);
}

/* Luxury card hover */
.luxury-card {
  transition: all var(--transition-luxury);
}

.luxury-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-luxury);
}

/* Image hover zoom */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.img-zoom:hover img {
  transform: scale(1.08);
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 240, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 165, 90, 0.2);
}

.glass-dark {
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 165, 90, 0.15);
}

/* Section divider */
.section-divider {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #C5A55A, #D4AF37, #C5A55A);
  margin: 0 auto;
}

.section-divider-left {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #C5A55A, #D4AF37, #C5A55A);
  margin: 0;
}

.section-divider-wide {
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, #C5A55A, #D4AF37, #C5A55A);
  margin: 0 auto;
}

/* Premium button styles */
.btn-luxury {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-luxury::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s ease;
}

.btn-luxury:hover::before {
  left: 100%;
}

/* Smooth link underline */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-brass);
  transition: width 0.3s ease;
}

.link-underline:hover::after {
  width: 100%;
}

/* Category card overlay */
.category-overlay {
  background: linear-gradient(to top, rgba(10, 22, 40, 0.9) 0%, rgba(10, 22, 40, 0.3) 50%, transparent 100%);
}

/* Testimonial quote */
.quote-mark {
  position: relative;
}

.quote-mark::before {
  content: '\201C';
  font-size: 4rem;
  line-height: 1;
  color: var(--color-brass);
  font-family: Georgia, serif;
  position: absolute;
  top: -10px;
  left: -5px;
}

/* Decorative divider with diamond */
.divider-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.divider-diamond::before,
.divider-diamond::after {
  content: '';
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brass));
}

.divider-diamond::after {
  background: linear-gradient(90deg, var(--color-brass), transparent);
}

.divider-diamond .diamond {
  width: 8px;
  height: 8px;
  background: var(--color-brass);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Decorative corners */
.corner-decoration {
  position: relative;
}

.corner-decoration::before,
.corner-decoration::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: var(--color-brass);
  border-style: solid;
}

.corner-decoration::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.corner-decoration::after {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

/* Ornamental separator */
.ornament-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
}

.ornament-separator .line {
  width: 40px;
  height: 1px;
  background: var(--color-brass);
}

.ornament-separator .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-brass);
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-beige) 25%, var(--color-beige-warm) 50%, var(--color-beige) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* Tooltip */
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--color-navy);
  color: var(--color-ivory);
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.tooltip:hover::after {
  opacity: 1;
}

/* ==========================================================================
   8. Navigation & Header
   ========================================================================== */

/* Top Bar */
.top-bar {
  background-color: var(--color-navy);
  color: var(--color-ivory);
  font-size: 0.8125rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(197, 165, 90, 0.15);
}

.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-bar a {
  color: var(--color-brass-light);
  text-decoration: none;
  transition: color var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.top-bar a:hover {
  color: var(--color-gold-light);
}

.top-bar .shipping-notice {
  color: var(--color-beige);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top-bar .shipping-notice svg {
  color: var(--color-brass);
  flex-shrink: 0;
}

.top-bar .contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.top-bar .contact-item svg {
  width: 14px;
  height: 14px;
  color: var(--color-brass);
  flex-shrink: 0;
}

.top-bar .social-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.top-bar .social-links a {
  color: var(--color-brass-light);
  transition: all var(--transition-base);
}

.top-bar .social-links a:hover {
  color: var(--color-gold-light);
  transform: translateY(-1px);
}

.top-bar .social-links svg {
  width: 16px;
  height: 16px;
}

/* Main Navigation */
.main-header {
  background-color: var(--color-ivory);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: all var(--transition-base);
  border-bottom: 1px solid var(--color-border);
}

.main-header.scrolled {
  box-shadow: var(--shadow-md);
}

.main-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 2rem;
}

/* Logo */
.site-logo {
  flex-shrink: 0;
}

.site-logo a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.site-logo .logo-text {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}

.site-logo .logo-text span {
  color: var(--color-brass);
}

.custom-logo-link {
  display: block;
  line-height: 0;
}

.custom-logo {
  max-height: 60px;
  width: auto;
}

/* Primary Navigation */
.primary-nav {
  display: flex;
  align-items: center;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav li {
  position: relative;
}

.primary-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--transition-base);
  white-space: nowrap;
}

.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.current-menu-item > a,
.primary-nav > ul > li.current-menu-ancestor > a {
  color: var(--color-brass);
}

.primary-nav > ul > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 0.375rem;
  transition: transform var(--transition-base);
}

.primary-nav > ul > li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* Dropdown / Submenu */
.primary-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
  z-index: var(--z-dropdown);
}

.primary-nav li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav .sub-menu li a {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-navy);
  text-decoration: none;
  transition: all var(--transition-base);
}

.primary-nav .sub-menu li a:hover {
  background-color: var(--color-beige);
  color: var(--color-brass);
  padding-left: 1.5rem;
}

.primary-nav .sub-menu .current-menu-item > a {
  color: var(--color-brass);
  font-weight: 600;
}

/* Deep dropdown */
.primary-nav .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: 4px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.header-actions .header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
  transition: all var(--transition-base);
}

.header-actions .header-btn:hover {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
}

.header-actions .header-btn svg {
  width: 20px;
  height: 20px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}

.mobile-menu-toggle .hamburger {
  width: 24px;
  height: 18px;
  position: relative;
}

.mobile-menu-toggle .hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-navy);
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
  border-radius: 1px;
}

.mobile-menu-toggle .hamburger span:nth-child(1) { top: 0; }
.mobile-menu-toggle .hamburger span:nth-child(2) { top: 8px; }
.mobile-menu-toggle .hamburger span:nth-child(3) { top: 16px; }

.mobile-menu-toggle.active .hamburger span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Menu Sidebar */
.mobile-menu-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--color-ivory);
  z-index: calc(var(--z-overlay) + 1);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-menu-sidebar.active {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  color: var(--color-navy);
  transition: all var(--transition-base);
}

.mobile-menu-close:hover {
  background: var(--color-navy);
  color: var(--color-ivory);
}

.mobile-menu-content {
  flex: 1;
  padding: 1.5rem;
}

.mobile-menu-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-content > ul > li {
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu-content > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: none;
}

.mobile-menu-content .sub-menu {
  padding-left: 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-menu-content .submenu-open > .sub-menu {
  max-height: 500px;
}

.mobile-menu-content .sub-menu a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  text-decoration: none;
}

.mobile-menu-content .submenu-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-muted-foreground);
  transition: transform var(--transition-base);
}

.mobile-menu-content .submenu-toggle.open {
  transform: rotate(180deg);
}

.mobile-menu-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   9. Hero Section & Sliders
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-navy);
}

.hero-section.hero-lg {
  min-height: 100vh;
}

.hero-section.hero-sm {
  min-height: 50vh;
}

.hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
  transform: translateX(100%);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.hero-slide.active {
  opacity: 1;
  z-index: 1;
  transform: translateX(0);
}

.hero-slide .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

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

.hero-content {
  max-width: 680px;
  color: var(--color-ivory);
}

.hero-content .subtitle {
  margin-bottom: 1rem;
  animation: fadeInUp 0.8s ease forwards;
}

.hero-content h1 {
  color: var(--color-ivory);
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.1;
  animation: fadeInUp 0.8s ease 0.2s forwards;
  opacity: 0;
}

.hero-content .hero-description {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(245, 240, 232, 0.7);
  margin-bottom: 2.5rem;
  max-width: 540px;
  animation: fadeInUp 0.8s ease 0.4s forwards;
  opacity: 0;
}



.hero-content .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  animation: fadeInUp 0.8s ease 0.6s forwards;
  opacity: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(197, 165, 90, 0.1);
  border: 1px solid rgba(197, 165, 90, 0.3);
  color: var(--color-brass-light);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  margin-bottom: 2rem;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brass);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.hero-badge svg {
  width: 16px;
  height: 16px;
}

/* Slider Navigation */
.hero-slider-nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 10;
}

.hero-slider-dots {
  display: flex;
  gap: 0.75rem;
}

.hero-slider-dot {
  width: 48px;
  height: 4px;
  border-radius: 4px;
  border: none;
  background: rgba(245, 240, 232, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.hero-slider-dot.active {
  background: var(--color-brass);
  width: 64px;
}

.hero-slider-arrows {
  display: flex;
  gap: 0.5rem;
}

/* Arrow buttons - positioned on left/right sides of hero */
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 240, 232, 0.2);
  border-radius: var(--radius-full);
  background: rgba(245, 240, 232, 0.1);
  color: var(--color-ivory);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  z-index: 10;
}

.hero-slider-prev {
  left: 1.5rem;
}

.hero-slider-next {
  right: 1.5rem;
}

.hero-slider-arrow:hover {
  background: var(--color-brass);
  color: var(--color-navy);
  border-color: var(--color-brass);
}

.hero-slider-arrow svg {
  width: 20px;
  height: 20px;
}

/* Page Hero (inner pages) */
.page-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-color: var(--color-navy);
}

.page-hero .hero-overlay {
  position: absolute;
  inset: 0;
}

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

.page-hero h1 {
  color: var(--color-ivory);
  margin-bottom: 0.75rem;
}

.page-hero .breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-brass-light);
}

.page-hero .breadcrumb a {
  color: var(--color-brass-light);
  text-decoration: none;
  transition: color var(--transition-base);
}

.page-hero .breadcrumb a:hover {
  color: var(--color-gold-light);
}

.page-hero .breadcrumb .separator {
  color: var(--color-brass);
}

.page-hero .breadcrumb .current {
  color: var(--color-ivory);
}

/* ==========================================================================
   10. Featured Categories
   ========================================================================== */
.featured-categories {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-ivory);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.category-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  group: true;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover img {
  transform: scale(1.08);
}

.category-card .category-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  transition: background var(--transition-base);
}

.category-card:hover .category-overlay {
  background: linear-gradient(to top, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.4) 50%, transparent 100%);
}

.category-card .category-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ivory);
  margin-bottom: 0.5rem;
}

.category-card .category-count {
  font-size: 0.875rem;
  color: var(--color-brass-light);
  margin-bottom: 1rem;
}

.category-card .category-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-brass);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-base);
}

.category-card:hover .category-link {
  opacity: 1;
  transform: translateY(0);
}

.category-card .category-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.category-card .category-link:hover svg {
  transform: translateX(4px);
}

/* Category card featured (large) */
.category-card.featured {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

/* ==========================================================================
   11. Brand Story Section
   ========================================================================== */
.brand-story {
  padding: var(--spacing-5xl) 0;
  background-color: var(--color-beige);
}

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

.brand-story-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.brand-story-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.brand-story-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-brass);
  border-radius: var(--radius-xl);
  transform: translate(12px, 12px);
  z-index: -1;
  opacity: 0.3;
}

.brand-story-content .subtitle {
  margin-bottom: 0.75rem;
}

.brand-story-content h2 {
  margin-bottom: 1.5rem;
}

.brand-story-content p {
  color: var(--color-muted-foreground);
  margin-bottom: 1.25rem;
  line-height: 1.8;
}

.brand-story-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.brand-story-stat {
  text-align: center;
}

.brand-story-stat .stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-brass);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.brand-story-stat .stat-label {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   12. Why Choose Section
   ========================================================================== */
.why-choose {
  padding: var(--spacing-5xl) 0;
  background-color: var(--color-navy);
  color: var(--color-ivory);
}

.why-choose .section-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.why-choose .section-header h2 {
  color: var(--color-ivory);
}

.why-choose .section-header p {
  color: var(--color-beige);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.why-choose .section-divider {
  background: linear-gradient(90deg, var(--color-brass), var(--color-gold), var(--color-brass));
}

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

.feature-card {
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 240, 0.03);
  border: 1px solid rgba(197, 165, 90, 0.12);
  transition: all var(--transition-luxury);
}

.feature-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 240, 0.06);
  border-color: rgba(197, 165, 90, 0.25);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.feature-card .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  background: rgba(197, 165, 90, 0.1);
  color: var(--color-brass);
  margin-bottom: 1.5rem;
  transition: all var(--transition-base);
}

.feature-card:hover .feature-icon {
  background: var(--color-brass);
  color: var(--color-navy);
  transform: scale(1.05);
}

.feature-card .feature-icon svg {
  width: 32px;
  height: 32px;
}

.feature-card h3 {
  color: var(--color-ivory);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.feature-card p {
  color: var(--color-beige);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ==========================================================================
   13. Cards & Product Cards
   ========================================================================== */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-luxury);
}

.card:hover {
  box-shadow: var(--shadow-luxury);
}

.card-img-top {
  width: 100%;
  height: auto;
  display: block;
}

.card-body {
  padding: 1.5rem;
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.card-title a:hover {
  color: var(--color-brass);
}

.card-text {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
}

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Product Card */
.product-card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-luxury);
  border: 1px solid var(--color-border);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-luxury);
}

.product-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-beige);
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-card-image img {
  transform: scale(1.08);
}

.product-card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

.product-card-badge.badge-new {
  background: var(--color-brass);
  color: var(--color-navy);
}

.product-card-badge.badge-sale {
  background: var(--color-destructive);
  color: #FFFFFF;
}

.product-card-badge.badge-featured {
  background: var(--color-royal-blue);
  color: var(--color-ivory);
}

.product-card-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--transition-base);
  z-index: 2;
}

.product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateX(0);
}

.product-card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.product-card-action-btn:hover {
  background: var(--color-brass);
  color: var(--color-white);
  border-color: var(--color-brass);
}

.product-card-action-btn svg {
  width: 16px;
  height: 16px;
}

.product-card-body {
  padding: 1.25rem;
}

.product-card-category {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
  margin-bottom: 0.375rem;
}

.product-card-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.product-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.product-card-title a:hover {
  color: var(--color-brass);
}

.product-card-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.product-card-price .current-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-royal-blue);
}

.product-card-price .original-price {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  text-decoration: line-through;
}

.product-card-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.product-card-rating .star {
  color: var(--color-brass);
  width: 14px;
  height: 14px;
}

.product-card-rating .star.empty {
  color: var(--color-border);
}

.product-card-rating .rating-text {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-left: 0.25rem;
}

.product-card-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--color-navy);
  color: var(--color-ivory);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}

.product-card-add-to-cart:hover {
  background: var(--color-brass);
  color: var(--color-navy);
}

.product-card-add-to-cart svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   14. Blog & Archive
   ========================================================================== */
.blog-section {
  padding: var(--spacing-4xl) 0;
}

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

.blog-card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all var(--transition-luxury);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-luxury);
}

.blog-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-date-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: var(--color-brass);
  color: var(--color-navy);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-card-body {
  padding: 1.5rem;
}

.blog-card-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
  margin-bottom: 0.5rem;
  text-decoration: none;
}

.blog-card-category:hover {
  color: var(--color-royal-blue);
}

.blog-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.blog-card-title a:hover {
  color: var(--color-brass);
}

.blog-card-excerpt {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.blog-card-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-card-author img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.blog-card-author-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-navy);
}

.blog-card-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}

.blog-card-read-more:hover {
  color: var(--color-brass);
}

.blog-card-read-more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.blog-card-read-more:hover svg {
  transform: translateX(3px);
}

/* Blog Featured / Large Card */
.blog-card.featured {
  grid-column: span 2;
  grid-row: span 2;
}

.blog-card.featured .blog-card-image {
  aspect-ratio: 16 / 9;
}

.blog-card.featured .blog-card-title {
  font-size: 1.5rem;
}

/* Blog List Layout */
.blog-list .blog-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  overflow: hidden;
}

.blog-list .blog-card-image {
  aspect-ratio: auto;
  height: 100%;
}

.blog-list .blog-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Archive Page */
.archive-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.archive-header h1 {
  margin-bottom: 0.75rem;
}

.archive-description {
  font-size: 1.125rem;
  color: var(--color-muted-foreground);
  max-width: 600px;
  margin: 0 auto;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--spacing-3xl);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-base);
}

.pagination a {
  color: var(--color-navy);
  border: 1px solid var(--color-border);
}

.pagination a:hover {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
}

.pagination .current {
  background: var(--color-brass);
  color: var(--color-navy);
  font-weight: 700;
  border: 1px solid var(--color-brass);
}

.pagination .dots {
  color: var(--color-muted-foreground);
  border: none;
}

.pagination .prev,
.pagination .next {
  padding: 0 1rem;
}

/* ==========================================================================
   15. Single Post
   ========================================================================== */
.single-post-content {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-lg);
}

.single-post-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.single-post-header .post-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-brass);
  margin-bottom: 1rem;
  text-decoration: none;
}

.single-post-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.25rem;
}

.single-post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.single-post-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.single-post-meta svg {
  width: 16px;
  height: 16px;
  color: var(--color-brass);
}

.single-post-featured-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--spacing-2xl);
}

.single-post-featured-image img {
  width: 100%;
  height: auto;
}

/* Post Content Typography */
.entry-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--color-foreground);
}

.entry-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.entry-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.entry-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

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

.entry-content ul,
.entry-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li {
  margin-bottom: 0.5rem;
}

.entry-content img {
  border-radius: var(--radius-lg);
  margin: 2rem 0;
}

.entry-content a {
  color: var(--color-royal-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-brass);
}

.entry-content a:hover {
  color: var(--color-brass);
}

.entry-content .wp-block-image {
  margin: 2rem 0;
}

.entry-content .wp-block-gallery {
  margin: 2rem 0;
}

.entry-content .alignwide {
  max-width: 1100px;
  margin-left: calc(-1 * var(--spacing-lg));
  margin-right: calc(-1 * var(--spacing-lg));
}

.entry-content .alignfull {
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.entry-content .wp-block-quote {
  border-left: 3px solid var(--color-brass);
  padding-left: var(--spacing-xl);
  margin: 2rem 0;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-style: italic;
  color: var(--color-royal-blue);
}

.entry-content .wp-block-pullquote {
  border-top: 3px solid var(--color-brass);
  border-bottom: 3px solid var(--color-brass);
  padding: 2rem 0;
  margin: 3rem 0;
  text-align: center;
}

.entry-content .wp-block-pullquote blockquote {
  border: none;
  padding: 0;
  font-size: 1.5rem;
}

/* Post Tags */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.post-tags a {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: var(--color-beige);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  color: var(--color-navy);
  text-decoration: none;
  transition: all var(--transition-base);
}

.post-tags a:hover {
  background: var(--color-brass);
  color: var(--color-navy);
}

/* Post Navigation */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
}

.post-navigation a {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all var(--transition-base);
}

.post-navigation a:hover {
  border-color: var(--color-brass);
  box-shadow: var(--shadow-md);
}

.post-navigation .nav-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
  margin-bottom: 0.5rem;
}

.post-navigation .nav-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-navy);
}

.post-navigation .nav-next {
  text-align: right;
}

/* Author Box */
.author-box {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--color-beige);
  border-radius: var(--radius-xl);
  margin-top: var(--spacing-2xl);
}

.author-box .author-avatar {
  flex-shrink: 0;
}

.author-box .author-avatar img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--color-brass);
}

.author-box .author-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.author-box .author-bio {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
}

/* ==========================================================================
   16. Comments
   ========================================================================== */
.comments-area {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
}

.comments-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xl);
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: 1rem;
}

.comment.depth-2,
.comment.depth-3 {
  margin-left: 3rem;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.comment-author img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.comment-author-name {
  font-weight: 600;
  color: var(--color-navy);
}

.comment-date {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

.comment-content p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-foreground);
}

.comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  text-decoration: none;
  margin-top: 0.75rem;
}

.comment-reply-link:hover {
  color: var(--color-brass);
}

/* Comment Form */
.comment-respond {
  margin-top: var(--spacing-xl);
  padding: 2rem;
  background: var(--color-beige);
  border-radius: var(--radius-xl);
}

.comment-reply-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  margin-bottom: 1.5rem;
}

.comment-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.comment-form .comment-form-comment {
  margin-bottom: 1rem;
}

/* ==========================================================================
   17. Testimonials
   ========================================================================== */
.testimonials-section {
  padding: var(--spacing-5xl) 0;
  background-color: var(--color-beige);
}

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

.testimonial-card {
  background: var(--color-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  transition: all var(--transition-luxury);
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-luxury);
  border-color: rgba(197, 165, 90, 0.3);
}

.testimonial-card .quote-mark::before {
  font-size: 3rem;
  top: -5px;
  left: -5px;
}

.testimonial-card .testimonial-text {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 1rem;
}

.testimonial-card .testimonial-rating {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.testimonial-card .testimonial-rating svg {
  width: 16px;
  height: 16px;
  fill: var(--color-brass);
}

.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-card .testimonial-author img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-brass);
}

.testimonial-card .testimonial-author-name {
  font-weight: 700;
  color: var(--color-navy);
  font-size: 0.9375rem;
}

.testimonial-card .testimonial-author-role {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

.testimonial-card .testimonial-author-location {
  font-size: 0.75rem;
  color: var(--color-brass);
}

/* ==========================================================================
   18. Timeline
   ========================================================================== */
.timeline-section {
  padding: var(--spacing-5xl) 0;
  background-color: var(--color-navy);
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom, var(--color-brass), var(--color-gold), var(--color-brass));
}

.timeline-item {
  position: relative;
  padding: 2rem 0;
  display: flex;
  align-items: flex-start;
}

.timeline-item:nth-child(odd) {
  flex-direction: row;
  padding-right: calc(50% + 2rem);
  text-align: right;
}

.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
  padding-left: calc(50% + 2rem);
  text-align: left;
}

.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--color-brass);
  border: 3px solid var(--color-navy);
  border-radius: var(--radius-full);
  z-index: 2;
  top: 2.5rem;
}

.timeline-content {
  background: rgba(255, 255, 240, 0.05);
  border: 1px solid rgba(197, 165, 90, 0.15);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  transition: all var(--transition-base);
}

.timeline-content:hover {
  border-color: rgba(197, 165, 90, 0.3);
  background: rgba(255, 255, 240, 0.08);
}

.timeline-year {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-brass);
  margin-bottom: 0.5rem;
}

.timeline-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ivory);
  margin-bottom: 0.5rem;
}

.timeline-text {
  font-size: 0.9375rem;
  color: var(--color-beige);
  line-height: 1.7;
}

/* ==========================================================================
   19. Wholesale / CTA Section
   ========================================================================== */
.cta-section {
  padding: var(--spacing-5xl) 0;
  position: relative;
  overflow: hidden;
}

.cta-section.bg-image {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.cta-section .hero-overlay {
  position: absolute;
  inset: 0;
}

.cta-section .container {
  position: relative;
  z-index: 2;
}

.cta-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  color: var(--color-ivory);
}

.cta-content h2 {
  color: var(--color-ivory);
  margin-bottom: 1rem;
}

.cta-content p {
  color: var(--color-beige);
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.cta-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(197, 165, 90, 0.2);
}

.cta-feature {
  text-align: center;
}

.cta-feature svg {
  width: 32px;
  height: 32px;
  color: var(--color-brass);
  margin-bottom: 0.75rem;
}

.cta-feature h4 {
  color: var(--color-ivory);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.cta-feature p {
  color: var(--color-beige);
  font-size: 0.8125rem;
  margin-bottom: 0;
}

/* ==========================================================================
   20. Social Feed
   ========================================================================== */
.social-feed {
  padding: var(--spacing-4xl) 0;
}

/* Social Feed Grid - mobile first (see Section 35 for responsive overrides) */
.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.social-feed-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.social-feed-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.social-feed-item:hover img {
  transform: scale(1.1);
}

.social-feed-item .social-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.social-feed-item:hover .social-overlay {
  opacity: 1;
}

.social-feed-item .social-overlay svg {
  width: 24px;
  height: 24px;
  color: var(--color-ivory);
}

/* ==========================================================================
   21. Newsletter
   ========================================================================== */
.newsletter-section {
  padding: var(--spacing-3xl) 0;
  background: linear-gradient(135deg, var(--color-royal-blue) 0%, var(--color-luxury-blue) 100%);
  color: var(--color-ivory);
}

.newsletter-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.newsletter-text h3 {
  color: var(--color-ivory);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.newsletter-text p {
  color: var(--color-beige);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.newsletter-form {
  display: flex;
  gap: 0.75rem;
  flex: 1;
  max-width: 480px;
}

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(255, 255, 240, 0.3);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 240, 0.1);
  color: var(--color-ivory);
  font-size: 0.9375rem;
  backdrop-filter: blur(8px);
  transition: all var(--transition-base);
}

.newsletter-form input[type="email"]::placeholder {
  color: var(--color-beige);
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-brass);
  background: rgba(255, 255, 240, 0.15);
}

/* ==========================================================================
   22. Footer
   ========================================================================== */
.site-footer {
  background-color: var(--color-navy);
  color: var(--color-beige);
}

.footer-main {
  padding: var(--spacing-4xl) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
}

.footer-brand .footer-logo {
  margin-bottom: 1.25rem;
}

.footer-brand .footer-logo a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.footer-brand .footer-logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ivory);
}

.footer-brand .footer-logo-text span {
  color: var(--color-brass);
}

.footer-brand .footer-logo .footer-custom-logo {
  max-height: 50px;
  width: auto;
  display: block;
}

.footer-brand .footer-logo .custom-logo-link img {
  max-height: 50px;
  width: auto;
}

.footer-brand .footer-description {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-beige);
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(197, 165, 90, 0.2);
  color: var(--color-brass-light);
  text-decoration: none;
  transition: all var(--transition-base);
}

.footer-social a:hover {
  background: var(--color-brass);
  color: var(--color-navy);
  border-color: var(--color-brass);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-column h4 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ivory);
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer-column h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--color-brass);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 0.625rem;
}

.footer-column ul li a {
  font-size: 0.9375rem;
  color: var(--color-beige);
  text-decoration: none;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.footer-column ul li a:hover {
  color: var(--color-brass);
  transform: translateX(4px);
}

.footer-column ul li a::before {
  content: '';
  width: 0;
  height: 1px;
  background: var(--color-brass);
  transition: width var(--transition-base);
}

.footer-column ul li a:hover::before {
  width: 12px;
}

.footer-contact-item {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer-contact-item svg {
  width: 20px;
  height: 20px;
  color: var(--color-brass);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item .contact-text {
  font-size: 0.9375rem;
  color: var(--color-beige);
  line-height: 1.6;
}

.footer-contact-item a {
  color: var(--color-beige);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-contact-item a:hover {
  color: var(--color-brass);
}

/* Footer Bottom */
.footer-bottom {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(197, 165, 90, 0.12);
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copyright {
  font-size: 0.8125rem;
  color: var(--color-beige);
}

.footer-copyright a {
  color: var(--color-brass);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-copyright a:hover {
  color: var(--color-gold-light);
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a {
  font-size: 0.8125rem;
  color: var(--color-beige);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-legal a:hover {
  color: var(--color-brass);
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: var(--z-toast);
  transition: all var(--transition-base);
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

.whatsapp-float .tooltip-text {
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-navy);
  color: var(--color-ivory);
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.whatsapp-float:hover .tooltip-text {
  opacity: 1;
}

/* ==========================================================================
   23. Sidebar & Widgets
   ========================================================================== */
.sidebar {
  padding-left: 2rem;
}

.widget {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.widget-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-brass);
  position: relative;
}

.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a {
  color: var(--color-foreground);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.widget ul li a:hover {
  color: var(--color-brass);
}

/* Search Widget */
.widget_search .search-form {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.widget_search .search-field {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
}

.widget_search .search-field:focus {
  outline: none;
}

.widget_search .search-submit {
  padding: 0.75rem 1rem;
  background: var(--color-navy);
  color: var(--color-ivory);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base);
}

.widget_search .search-submit:hover {
  background: var(--color-brass);
  color: var(--color-navy);
}

/* Categories Widget */
.widget_categories .cat-item a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brass);
  flex-shrink: 0;
}

/* Tag Cloud Widget */
.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tagcloud a {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--color-beige);
  border-radius: var(--radius-full);
  font-size: 0.8125rem !important;
  color: var(--color-navy);
  text-decoration: none;
  transition: all var(--transition-base);
}

.tagcloud a:hover {
  background: var(--color-brass);
  color: var(--color-navy);
}

/* Recent Posts Widget */
.widget_recent_entries .recent-post-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.widget_recent_entries .recent-post-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.widget_recent_entries .recent-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget_recent_entries .recent-post-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  display: block;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  transition: color var(--transition-base);
}

.widget_recent_entries .recent-post-title:hover {
  color: var(--color-brass);
}

.widget_recent_entries .post-date {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

/* Newsletter Widget */
.widget_newsletter {
  background: linear-gradient(135deg, var(--color-royal-blue), var(--color-luxury-blue));
  color: var(--color-ivory);
  border: none;
}

.widget_newsletter .widget-title {
  color: var(--color-ivory);
  border-bottom-color: rgba(197, 165, 90, 0.3);
}

.widget_newsletter p {
  color: var(--color-beige);
  font-size: 0.9375rem;
}

/* ==========================================================================
   24. Forms & Buttons
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn-primary {
  background: var(--color-navy);
  color: var(--color-ivory);
}

.btn-primary:hover {
  background: var(--color-royal-blue);
  color: var(--color-ivory);
  box-shadow: var(--shadow-brass);
}

.btn-secondary {
  background: var(--color-brass);
  color: var(--color-navy);
}

.btn-secondary:hover {
  background: var(--color-gold);
  color: var(--color-navy);
  box-shadow: var(--shadow-brass);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-brass);
  color: var(--color-brass);
}

.btn-outline:hover {
  background: var(--color-brass);
  color: var(--color-navy);
}

.btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 240, 0.4);
  color: var(--color-ivory);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 240, 0.1);
  color: var(--color-ivory);
}

.btn-ghost-light {
  background: transparent;
  border: none;
  color: rgba(245, 240, 232, 0.7);
}

.btn-ghost-light:hover {
  color: var(--color-brass);
}

.btn-white {
  background: var(--color-ivory);
  color: var(--color-navy);
}

.btn-white:hover {
  background: var(--color-brass);
  color: var(--color-navy);
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1rem;
  border-radius: var(--radius-xl);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
}

.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* Form Elements */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-foreground);
  transition: all var(--transition-base);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-brass);
  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted-foreground);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' 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: right 0.75rem center;
  padding-right: 2.5rem;
}

.form-checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brass);
  cursor: pointer;
}

.form-error {
  font-size: 0.8125rem;
  color: var(--color-destructive);
  margin-top: 0.375rem;
}

.form-success {
  font-size: 0.8125rem;
  color: #16a34a;
  margin-top: 0.375rem;
}

/* Search Form */
.search-form {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  transition: all var(--transition-base);
}

.search-form:focus-within {
  border-color: var(--color-brass);
  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
}

.search-form .search-field {
  flex: 1;
  padding: 0.75rem 1.25rem;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--color-foreground);
}

.search-form .search-field:focus {
  outline: none;
}

.search-form .search-submit {
  padding: 0.75rem 1.25rem;
  background: var(--color-navy);
  color: var(--color-ivory);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.search-form .search-submit:hover {
  background: var(--color-brass);
  color: var(--color-navy);
}

/* ==========================================================================
   25. Page Templates
   ========================================================================== */

/* Two Column Layout */
.page-layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
}

/* Full Width */
.page-layout-full .entry-content {
  max-width: 100%;
}

/* About Page */
.about-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-color: var(--color-navy);
  overflow: hidden;
}

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

.about-value {
  text-align: center;
  padding: 2.5rem 2rem;
}

.about-value .value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--color-beige);
  color: var(--color-brass);
  margin-bottom: 1.5rem;
}

.about-value h3 {
  margin-bottom: 0.75rem;
}

.about-value p {
  color: var(--color-muted-foreground);
  font-size: 0.9375rem;
}

/* Team Section */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.team-member {
  text-align: center;
}

.team-member .member-photo {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--color-brass);
}

.team-member .member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member .member-name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.team-member .member-role {
  font-size: 0.875rem;
  color: var(--color-brass);
}

/* Contact Page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-form-wrapper {
  padding: 2.5rem;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info-card {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-beige);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}

.contact-info-card:hover {
  background: var(--color-brass);
}

.contact-info-card:hover .contact-info-text h4,
.contact-info-card:hover .contact-info-text p,
.contact-info-card:hover .contact-info-text a {
  color: var(--color-navy);
}

.contact-info-card .contact-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-brass);
  color: var(--color-navy);
  flex-shrink: 0;
}

.contact-info-card:hover .contact-info-icon {
  background: var(--color-navy);
  color: var(--color-brass);
}

.contact-info-card .contact-info-icon svg {
  width: 22px;
  height: 22px;
}

.contact-info-text h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.contact-info-text p,
.contact-info-text a {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  text-decoration: none;
  line-height: 1.6;
}

/* Map */
.contact-map {
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 400px;
  margin-top: 3rem;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ==========================================================================
   25b. Inner Page Components
   ========================================================================== */

/* --- Page Hero Section (shared by all inner pages) --- */
.page-hero-section {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-royal-blue) 0%, var(--color-navy) 100%);
  padding: 6rem 0;
}

.page-hero-section .container {
  position: relative;
  z-index: 10;
}

.page-hero-badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-brass);
  margin-bottom: 1rem;
}

.page-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.page-hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.page-hero-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2rem;
}

.page-hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--transition-base);
}

.page-hero-breadcrumb a:hover {
  color: #FFFFFF;
}

.page-hero-breadcrumb .breadcrumb-separator {
  color: rgba(255, 255, 255, 0.3);
}

.page-hero-breadcrumb .breadcrumb-current {
  color: #FFFFFF;
}

.hero-decoration {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-decoration--top-right {
  top: 0;
  right: 0;
  width: 24rem;
  height: 24rem;
  margin-right: -12rem;
  margin-top: -12rem;
  background: radial-gradient(circle, var(--color-brass) 0%, transparent 70%);
  opacity: 0.1;
}

.hero-decoration--bottom-left {
  bottom: 0;
  left: 0;
  width: 16rem;
  height: 16rem;
  margin-left: -8rem;
  margin-bottom: -8rem;
  background: radial-gradient(circle, var(--color-brass) 0%, transparent 70%);
  opacity: 0.1;
}

/* Page Hero - Left-aligned variant (default page.php) */
.page-hero-section--left {
  text-align: left;
  justify-content: flex-start;
  min-height: 40vh;
  padding: 5rem 0;
}

.page-hero-section--left .page-hero-subtitle {
  margin-left: 0;
  max-width: 768px;
}

.page-hero-section--left .page-hero-breadcrumb {
  justify-content: flex-start;
}

/* --- Info Cards (About Mission/Vision, Contact Cards, etc.) --- */
.info-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 3rem;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--color-royal-blue);
  transition: all var(--transition-luxury);
}

.info-card:hover {
  box-shadow: var(--shadow-xl);
}

.info-card--brass {
  border-top-color: var(--color-brass);
}

.info-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  margin-bottom: 1.5rem;
}

.info-card-icon svg {
  width: 32px;
  height: 32px;
}

.info-card-icon--royal {
  background-color: rgba(27, 58, 92, 0.1);
  color: var(--color-royal-blue);
}

.info-card-icon--brass {
  background-color: rgba(197, 165, 90, 0.1);
  color: var(--color-brass);
}

.info-card-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-royal-blue);
  margin-bottom: 1rem;
}

.info-card-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-muted-foreground);
}

/* --- Contact Info Cards (4-column layout) --- */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.contact-info-card--centered {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--color-royal-blue);
  transition: all var(--transition-luxury);
}

.contact-info-card--centered:hover {
  box-shadow: var(--shadow-xl);
}

.contact-info-card--centered--brass {
  border-top-color: var(--color-brass);
}

.contact-info-card--centered .info-card-icon {
  margin-left: auto;
  margin-right: auto;
}

.contact-info-card--centered h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin-bottom: 0.5rem;
}

.contact-info-card--centered p,
.contact-info-card--centered a {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  line-height: 1.6;
  text-decoration: none;
}

.contact-info-card--centered a:hover {
  color: var(--color-brass);
}

/* --- Benefit Cards (Wholesale page) --- */
.benefit-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: all var(--transition-luxury);
}

.benefit-card:hover {
  box-shadow: var(--shadow-xl);
}

.benefit-card .benefit-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background-color: rgba(27, 58, 92, 0.08);
  color: var(--color-royal-blue);
  margin-bottom: 1.5rem;
}

.benefit-card .benefit-card-icon svg {
  width: 28px;
  height: 28px;
}

.benefit-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin-bottom: 0.75rem;
}

.benefit-card p {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
}

/* --- Wholesale Category Cards --- */
.wholesale-category-card {
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 240, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-luxury);
  text-decoration: none;
}

.wholesale-category-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px);
}

.wholesale-category-card .category-thumbnail {
  position: relative;
  height: 14rem;
  overflow: hidden;
}

.wholesale-category-card .category-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.wholesale-category-card:hover .category-thumbnail img {
  transform: scale(1.1);
}

.wholesale-category-card .category-thumbnail-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.wholesale-category-card .category-body {
  padding: 1.5rem;
}

.wholesale-category-card .category-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}

.wholesale-category-card .category-body p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.wholesale-category-card .category-link-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-brass);
  margin-top: 1rem;
}

.wholesale-category-card:hover .category-link-text svg {
  margin-left: 0.5rem;
}

.wholesale-category-card .category-link-text svg {
  width: 16px;
  height: 16px;
  transition: margin var(--transition-base);
}

/* --- Craftsmanship Cards (About page, dark bg) --- */
.craft-card {
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-luxury);
}

.craft-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.craft-card .craft-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, rgba(197, 165, 90, 0.2), rgba(197, 165, 90, 0.05));
  color: var(--color-brass);
}

.craft-card .craft-card-icon svg {
  width: 40px;
  height: 40px;
}

.craft-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

.craft-card p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

/* --- Sustainability Check Items --- */
.sustainability-checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.sustainability-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sustainability-check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: rgba(197, 165, 90, 0.15);
  color: var(--color-brass);
  flex-shrink: 0;
}

.sustainability-check-icon svg {
  width: 20px;
  height: 20px;
}

.sustainability-check h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin-bottom: 0.125rem;
}

.sustainability-check p {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-bottom: 0;
}

/* --- Story Badge (floating years badge) --- */
.story-badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.5rem;
  text-align: center;
  border-bottom: 3px solid var(--color-brass);
}

.story-badge .badge-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-royal-blue);
  line-height: 1;
}

.story-badge .badge-label {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- CTA Buttons Row --- */
.cta-buttons-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .cta-buttons-row {
    flex-direction: row;
  }
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: #FFFFFF;
  background-color: var(--color-brass);
  transition: all var(--transition-base);
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.cta-btn-primary:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
  color: #FFFFFF;
}

.cta-btn-primary svg {
  width: 20px;
  height: 20px;
}

.cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: #FFFFFF;
  background: transparent;
  border: 2px solid var(--color-brass);
  transition: all var(--transition-base);
  text-decoration: none;
  cursor: pointer;
}

.cta-btn-outline:hover {
  background-color: var(--color-brass);
  color: var(--color-navy);
}

/* --- Namayah Form Styles --- */
.namayah-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.namayah-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.namayah-form .form-group {
  display: flex;
  flex-direction: column;
}

.namayah-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-royal-blue);
  margin-bottom: 0.5rem;
}

.namayah-form label .required {
  color: var(--color-destructive);
}

.namayah-form input[type="text"],
.namayah-form input[type="email"],
.namayah-form input[type="tel"],
.namayah-form select,
.namayah-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: 1rem;
  color: var(--color-foreground);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.namayah-form input:focus,
.namayah-form select:focus,
.namayah-form textarea:focus {
  outline: none;
  border-color: var(--color-brass);
  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
}

.namayah-form textarea {
  resize: vertical;
  min-height: 120px;
}

.namayah-form select {
  appearance: none;
  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='%236B7280' 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: right 1rem center;
  padding-right: 2.5rem;
}

.namayah-form .form-submit {
  margin-top: 0.5rem;
}

.namayah-form .form-submit button,
.namayah-form .form-submit input[type="submit"] {
  width: 100%;
  padding: 1rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 1rem;
  color: #FFFFFF;
  background-color: var(--color-brass);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.namayah-form .form-submit button:hover,
.namayah-form .form-submit input[type="submit"]:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
}

.namayah-form .form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.namayah-form .form-consent input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brass);
  flex-shrink: 0;
}

.namayah-form .form-consent label {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  margin-bottom: 0;
  font-weight: 400;
}

/* --- Form Card Wrapper --- */
.form-card {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: 2rem;
  border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .form-card {
    padding: 3rem;
  }
}

/* --- FAQ / Accordion --- */
.faq-section {
  max-width: 48rem;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: rgba(255, 255, 240, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.faq-item.active {
  border-color: rgba(197, 165, 90, 0.3);
}

.faq-toggle {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 1rem;
  font-family: var(--font-body);
  transition: color var(--transition-base);
}

.faq-toggle:hover {
  color: var(--color-brass-light);
}

.faq-toggle span {
  padding-right: 1rem;
}

.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-brass);
  transition: transform var(--transition-base);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-content {
  max-height: 500px;
}

.faq-content-inner {
  padding: 0 1.5rem 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

/* --- Prose Content Typography --- */
.prose {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--color-muted-foreground);
  max-width: 100%;
}

.prose h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-royal-blue);
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.prose h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--color-royal-blue);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose p {
  margin-bottom: 1.5rem;
}

.prose a {
  color: var(--color-brass);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--transition-base);
}

.prose a:hover {
  text-decoration: underline;
}

.prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.prose ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose blockquote {
  border-left: 3px solid var(--color-brass);
  background: var(--color-beige);
  padding: 1rem 1.5rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic;
  margin: 2rem 0;
}

.prose img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: 2rem 0;
}

.prose table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 2rem 0;
}

.prose th {
  background: var(--color-beige);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-royal-blue);
  border-bottom: 1px solid var(--color-border);
}

.prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
}

.prose pre {
  background: var(--color-navy);
  color: var(--color-ivory);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: 2rem 0;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-beige);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

.prose pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.prose strong {
  color: var(--color-royal-blue);
  font-weight: 700;
}

/* --- Post Hero Section --- */
.post-hero-section {
  position: relative;
  height: 60vh;
  min-height: 400px;
  max-height: 700px;
  overflow: hidden;
}

.post-hero-section .post-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.85) 0%, rgba(27, 58, 92, 0.7) 50%, rgba(10, 22, 40, 0.85) 100%);
}

.post-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 2rem;
}

@media (min-width: 768px) {
  .post-hero-content {
    padding: 3rem;
  }
}

@media (min-width: 1024px) {
  .post-hero-content {
    padding: 4rem;
  }
}

.post-hero-content .post-categories {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.post-hero-content .post-category-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  color: #FFFFFF;
  background-color: var(--color-brass);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.post-hero-content .post-category-badge:hover {
  opacity: 0.8;
  color: #FFFFFF;
}

.post-hero-content .post-hero-date {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.post-hero-content h1 {
  color: #FFFFFF;
  font-size: clamp(1.875rem, 4vw, 3rem);
  margin-bottom: 0;
}

/* Post Hero Breadcrumb */
.post-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.post-hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.post-hero-breadcrumb a:hover {
  color: var(--color-brass);
}

.post-hero-breadcrumb svg {
  opacity: 0.5;
}

.post-hero-breadcrumb .current {
  color: rgba(255, 255, 255, 0.5);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Post Hero Meta Row */
.post-hero-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.post-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.post-hero-meta-item svg {
  color: var(--color-brass);
}

.post-hero-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-brass);
  opacity: 0.5;
}

/* Post hero without image */
.post-noimage-hero {
  background: linear-gradient(135deg, var(--color-royal-blue) 0%, var(--color-navy) 100%);
  padding: 6rem 0 4rem;
}

/* --- Post Tags --- */
.post-tags-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.post-tags-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-royal-blue);
  margin-bottom: 1rem;
}

.post-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.post-tags-list a {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  text-decoration: none;
  transition: all var(--transition-base);
}

.post-tags-list a:hover {
  border-color: var(--color-brass);
  color: var(--color-brass);
}

/* --- Share Buttons --- */
.share-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.share-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-royal-blue);
  margin-bottom: 1rem;
}

.share-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: #FFFFFF;
  transition: opacity var(--transition-base);
  text-decoration: none;
}

.share-button:hover {
  opacity: 0.8;
  color: #FFFFFF;
}

.share-button svg {
  width: 20px;
  height: 20px;
}

.share-button--facebook { background-color: #1877F2; }
.share-button--twitter { background-color: #0A1628; }
.share-button--linkedin { background-color: #0A66C2; }
.share-button--whatsapp { background-color: #25D366; }

/* --- Author Bio Card --- */
.author-bio-card {
  margin-top: 3rem;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.author-bio-card .author-bio-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .author-bio-card .author-bio-inner {
    flex-direction: row;
    align-items: flex-start;
  }
}

.author-bio-card .author-avatar {
  flex-shrink: 0;
}

.author-bio-card .author-avatar img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-brass);
  border-offset: 2px;
}

.author-bio-card .author-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-royal-blue);
  margin-bottom: 0.5rem;
}

.author-bio-card .author-description {
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.author-bio-card .author-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-brass);
  text-decoration: none;
}

.author-bio-card .author-link:hover {
  text-decoration: underline;
}

.author-bio-card .author-link svg {
  width: 16px;
  height: 16px;
}

/* --- Related Posts Grid --- */
.related-posts-section {
  margin-top: 4rem;
}

.related-posts-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 2rem;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.related-post-card .related-post-thumbnail {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.related-post-card .related-post-thumbnail img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.related-post-card:hover .related-post-thumbnail img {
  transform: scale(1.05);
}

.related-post-card .related-post-date {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-bottom: 0.5rem;
}

.related-post-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.related-post-card h3 a {
  color: var(--color-royal-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}

.related-post-card h3 a:hover {
  color: var(--color-brass);
}

.related-post-card .related-post-excerpt {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Post Content Area --- */
.post-content-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .post-content-area {
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
  }
}

.post-main {
  min-width: 0;
}

.post-sidebar {
  min-width: 0;
}

/* --- Page Content Card --- */
.page-content-card {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .page-content-card {
    padding: 3rem;
  }
}

@media (min-width: 1024px) {
  .page-content-card {
    padding: 4rem;
  }
}

/* --- Blog Archive Components --- */
.blog-hero-section {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-royal-blue) 0%, var(--color-navy) 100%);
  padding: 5rem 0;
}

.category-filter-bar {
  background-color: var(--color-ivory);
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.category-filter-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.category-filter-link {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-base);
  color: var(--color-muted-foreground);
  border: 1px solid var(--color-border);
}

.category-filter-link:hover {
  border-color: var(--color-brass);
  color: var(--color-brass);
}

.category-filter-link.active {
  color: #FFFFFF;
  background-color: var(--color-royal-blue);
  border-color: var(--color-royal-blue);
}

/* Featured article card */
.featured-article-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .featured-article-card {
    grid-template-columns: 1fr 1fr;
  }
}

.featured-article-card .featured-thumbnail {
  overflow: hidden;
}

.featured-article-card .featured-thumbnail img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  transition: transform 0.5s ease;
}

@media (min-width: 1024px) {
  .featured-article-card .featured-thumbnail img {
    height: 100%;
  }
}

.featured-article-card:hover .featured-thumbnail img {
  transform: scale(1.05);
}

.featured-article-card .featured-body {
  padding: 2rem;
}

@media (min-width: 1024px) {
  .featured-article-card .featured-body {
    padding: 3rem;
  }
}

.featured-article-card .featured-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  color: #FFFFFF;
  background-color: var(--color-brass);
}

.featured-article-card h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.featured-article-card h2 a {
  color: var(--color-royal-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}

.featured-article-card h2 a:hover {
  color: var(--color-brass);
}

/* Blog archive card */
.blog-archive-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all var(--transition-luxury);
}

.blog-archive-card:hover {
  box-shadow: var(--shadow-xl);
}

.blog-archive-card .card-thumbnail {
  overflow: hidden;
}

.blog-archive-card .card-thumbnail img {
  width: 100%;
  height: 13rem;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-archive-card:hover .card-thumbnail img {
  transform: scale(1.05);
}

.blog-archive-card .card-thumbnail-placeholder {
  width: 100%;
  height: 13rem;
  background: var(--color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
}

.blog-archive-card .card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-archive-card .card-category {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.blog-archive-card .card-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.blog-archive-card .card-title a {
  color: var(--color-royal-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}

.blog-archive-card .card-title a:hover {
  color: var(--color-brass);
}

.blog-archive-card .card-excerpt {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}

.blog-archive-card .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.blog-archive-card .card-meta .card-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-archive-card .card-meta .card-author img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
}

.blog-archive-card .card-meta .card-author span {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

.blog-archive-card .card-meta time {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

/* --- Pagination Navigation --- */
.pagination-nav {
  margin-top: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 1rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  transition: all var(--transition-base);
}

.pagination-link:hover {
  border-color: var(--color-brass);
  color: var(--color-brass);
}

.pagination-link svg {
  width: 16px;
  height: 16px;
}

.pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
  background-color: var(--color-royal-blue);
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 4rem 0;
}

.empty-state svg {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  color: var(--color-border);
}

.empty-state h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--color-muted-foreground);
  margin-bottom: 1.5rem;
}

/* --- WhatsApp CTA Section --- */
.whatsapp-cta-section {
  background-color: var(--color-royal-blue);
  padding: 4rem 0;
}

.whatsapp-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background-color: rgba(197, 165, 90, 0.2);
  color: var(--color-brass);
  margin: 0 auto 1.5rem;
}

.whatsapp-cta-icon svg {
  width: 40px;
  height: 40px;
}

.whatsapp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  font-size: 1.125rem;
  font-weight: 600;
  color: #FFFFFF;
  background-color: #25D366;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.whatsapp-cta-btn:hover {
  opacity: 0.9;
  color: #FFFFFF;
}

.whatsapp-cta-btn svg {
  width: 24px;
  height: 24px;
}

/* --- Business Hours Table --- */
.business-hours-table {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.business-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.business-hours-row:last-child {
  border-bottom: none;
}

.business-hours-day {
  font-weight: 500;
  color: var(--color-royal-blue);
}

.business-hours-time {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.business-hours-time--closed {
  color: var(--color-destructive);
  font-weight: 500;
}

.business-hours-today {
  background-color: rgba(197, 165, 90, 0.08);
}

.business-hours-today .business-hours-day {
  font-weight: 700;
}

.business-hours-today-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  color: #FFFFFF;
  background-color: var(--color-brass);
  margin-left: 0.5rem;
}

/* --- Breadcrumb Navigation --- */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-nav a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--transition-base);
}

.breadcrumb-nav a:hover {
  color: #FFFFFF;
}

.breadcrumb-nav .breadcrumb-current {
  color: #FFFFFF;
}

/* --- Two Column Section (image + text) --- */
.two-col-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .two-col-section {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

/* --- Cards Grid (2-col, 3-col, 4-col) --- */
.cards-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .cards-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem;
  }
}

.cards-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .cards-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

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

/* --- Section backgrounds --- */
.bg-ivory { background-color: var(--color-ivory); }
.bg-royal-gradient {
  background: linear-gradient(135deg, var(--color-royal-blue) 0%, var(--color-navy) 100%);
}

/* --- Image Placeholder --- */
.image-placeholder {
  background: var(--color-beige);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted-foreground);
  font-size: 1rem;
}

.image-placeholder--tall {
  height: 500px;
}

.image-placeholder--medium {
  height: 450px;
}

.image-placeholder--map {
  height: 400px;
  min-height: 400px;
}

/* --- Contact Form & Map Grid --- */
.contact-form-map-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .contact-form-map-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.contact-map-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 100%;
  min-height: 400px;
}

.contact-map-wrapper iframe {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 0;
}

.contact-map-placeholder {
  background: var(--color-beige);
  border-radius: var(--radius-xl);
  height: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contact-map-placeholder svg {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  color: var(--color-border);
}

.contact-map-placeholder p {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

/* --- Page Links (multi-page posts) --- */
.page-links {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-links .page-links-label {
  font-weight: 500;
  color: var(--color-royal-blue);
  margin-right: 0.5rem;
}

.page-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  text-decoration: none;
  transition: all var(--transition-base);
}

.page-links a:hover {
  border-color: var(--color-brass);
  color: var(--color-brass);
}

/* ==========================================================================
   26. WooCommerce Overrides
   ========================================================================== */
.woocommerce .site-main {
  padding: var(--spacing-3xl) 0;
}

.woocommerce .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.woocommerce .product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
}

.woocommerce .product .price {
  color: var(--color-royal-blue);
  font-weight: 700;
}

.woocommerce .product .price del {
  color: var(--color-muted-foreground);
  font-weight: 400;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-radius: var(--radius-lg);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all var(--transition-base);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--color-brass);
  color: var(--color-navy);
}

.woocommerce .woocommerce-breadcrumb {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  margin-bottom: 2rem;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-royal-blue);
  text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--color-brass);
}

.woocommerce span.onsale {
  background: var(--color-brass);
  color: var(--color-navy);
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  min-width: auto;
  min-height: auto;
  line-height: 1.5;
}

.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-navy);
}

.woocommerce div.product p.price {
  font-size: 1.5rem;
  color: var(--color-royal-blue);
}

.woocommerce .quantity .qty {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem;
}

.woocommerce-cart .wc-proceed-to-checkout a.button {
  background: var(--color-brass);
  color: var(--color-navy);
  font-size: 1rem;
  padding: 1rem 2rem;
}

.woocommerce-cart .wc-proceed-to-checkout a.button:hover {
  background: var(--color-gold);
}

/* ==========================================================================
   27. 404 Page
   ========================================================================== */
.error-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-4xl) 0;
}

.error-404-content h1 {
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 700;
  color: var(--color-brass);
  line-height: 1;
  margin-bottom: 0;
}

.error-404-content h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.error-404-content p {
  font-size: 1.125rem;
  color: var(--color-muted-foreground);
  max-width: 500px;
  margin: 0 auto 2rem;
}

.error-404-search {
  max-width: 400px;
  margin: 0 auto 2rem;
}

/* ==========================================================================
   28. Search
   ========================================================================== */
.search-results .page-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.search-results .page-header h1 {
  font-size: 2rem;
}

.search-results .search-form {
  max-width: 500px;
  margin: 2rem auto;
}

/* ==========================================================================
   29. Gallery
   ========================================================================== */
.gallery-grid {
  display: grid;
  gap: 1rem;
}

.gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-luxury);
}

.gallery-item:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-luxury);
}

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

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

.gallery-caption {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  text-align: center;
  padding: 0.5rem;
}

/* Lightbox */
.wp-lightbox-overlay {
  background: rgba(10, 22, 40, 0.95);
}

/* ==========================================================================
   30. Accessibility
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-brass);
  color: var(--color-navy);
  padding: 0.75rem 1.5rem;
  z-index: 100000;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .luxury-card:hover {
    transform: none;
  }

  .img-zoom:hover img {
    transform: none;
  }

  .stagger-children > * {
    opacity: 1;
    animation: none;
  }
}

/* High Contrast */
@media (prefers-contrast: high) {
  :root {
    --color-border: #0A1628;
    --color-muted-foreground: #132240;
  }

  .btn-outline {
    border-width: 2px;
  }
}

/* ==========================================================================
   Category Mobile Fix
   ========================================================================== */
/* Category mobile: single card scrollable */
@media (max-width: 768px) {
  .categories-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1rem;
    scroll-padding-left: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .categories-grid .category-card {
    min-width: 75vw;
    max-width: 75vw;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .category-card .category-name {
    font-size: 1.25rem;
    white-space: normal;
    word-wrap: break-word;
  }
  .category-card .category-desc,
  .category-card .category-count {
    font-size: 0.8125rem;
    white-space: normal;
    word-wrap: break-word;
  }
  .categories-grid::-webkit-scrollbar {
    height: 4px;
  }
  .categories-grid::-webkit-scrollbar-track {
    background: var(--color-beige);
    border-radius: 2px;
  }
  .categories-grid::-webkit-scrollbar-thumb {
    background: var(--color-brass);
    border-radius: 2px;
  }
}

/* ==========================================================================
   Feature Card White (Why Choose Section)
   ========================================================================== */
.feature-card-white {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  transition: all var(--transition-luxury);
}
.feature-card-white:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-luxury);
  border-color: rgba(197, 165, 90, 0.3);
}
.feature-card-white-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: var(--color-beige);
  color: var(--color-brass);
  margin-bottom: 1.25rem;
  transition: all var(--transition-base);
}
.feature-card-white:hover .feature-card-white-icon {
  background: var(--color-brass);
  color: var(--color-navy);
}
.feature-card-white h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
.feature-card-white p {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
}

/* ==========================================================================
   Blog View All Link
   ========================================================================== */
.blog-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}
.blog-view-all-link:hover {
  color: var(--color-brass);
}
.blog-view-all-link svg {
  transition: transform var(--transition-base);
}
.blog-view-all-link:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Blog Card Author/Date
   ========================================================================== */
.blog-card-author-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  margin-bottom: 0.75rem;
}
.blog-card-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border);
}
.blog-card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: var(--color-brass);
  color: var(--color-navy);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
  z-index: 2;
}

/* ==========================================================================
   404 Page Styles
   ========================================================================== */
.error-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
}
.error-404-content {
  max-width: 600px;
}
.error-404 .error-code {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-brass) 0%, var(--color-gold) 50%, var(--color-brass-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}
.error-404 h1 {
  margin-bottom: 1rem;
}
.error-404 p {
  font-size: 1.125rem;
  color: var(--color-muted-foreground);
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.error-404 .error-search {
  max-width: 400px;
  margin: 0 auto 2rem;
  display: flex;
  gap: 0.5rem;
}
.error-404 .error-search input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
}
.error-404 .error-search button {
  padding: 0.75rem 1.5rem;
  background: var(--color-navy);
  color: var(--color-ivory);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}
.error-404 .error-search button:hover {
  background: var(--color-brass);
}
.error-404 .error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Full Width Page Template
   ========================================================================== */
.page-template-template-fullwidth .site-content {
  max-width: 100%;
}

/* ==========================================================================
   Blog Hero Section (Archive Page)
   ========================================================================== */
.blog-hero-section {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 5rem 0;
}
.blog-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}
.blog-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,42,74,0.88) 0%, rgba(27,42,74,0.72) 50%, rgba(27,42,74,0.85) 100%);
}
.blog-hero-decoration {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}
.blog-hero-decoration--top-right {
  top: 0;
  right: 0;
  width: 24rem;
  height: 24rem;
  margin-right: -12rem;
  margin-top: -12rem;
  background: radial-gradient(circle, var(--color-brass) 0%, transparent 70%);
  opacity: 0.12;
}
.blog-hero-decoration--bottom-left {
  bottom: 0;
  left: 0;
  width: 16rem;
  height: 16rem;
  margin-left: -8rem;
  margin-bottom: -8rem;
  background: radial-gradient(circle, var(--color-brass) 0%, transparent 70%);
  opacity: 0.12;
}
.blog-hero-badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-brass);
  margin-bottom: 1rem;
  position: relative;
  padding: 0.375rem 1.25rem;
  border: 1px solid rgba(197,165,114,0.4);
  border-radius: var(--radius-full);
}
.blog-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.blog-hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

/* Hero Featured Post Link */
.blog-hero-featured {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin-top: 2rem;
  padding: 1.25rem 2rem;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-xl);
  max-width: 600px;
  width: 100%;
  transition: all 0.3s ease;
}
.blog-hero-featured:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(197,165,114,0.5);
  transform: translateY(-2px);
}
.blog-hero-featured-cat {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-brass);
  margin-bottom: 0.5rem;
}
.blog-hero-featured-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-hero-featured-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}
.blog-hero-featured-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}

/* Hero Breadcrumb */
.blog-hero-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  margin-top: 2rem;
}
.blog-hero-breadcrumb a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.3s;
}
.blog-hero-breadcrumb a:hover {
  color: #FFFFFF;
}
.blog-hero-breadcrumb .breadcrumb-sep {
  color: rgba(255,255,255,0.3);
}
.blog-hero-breadcrumb .breadcrumb-current {
  color: #FFFFFF;
}

/* ==========================================================================
   Category Filter Bar
   ========================================================================== */
.category-filter-bar {
  background-color: #FFFFFF;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.category-filter-links {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-filter-links::-webkit-scrollbar {
  display: none;
}
.category-filter-link {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  color: var(--color-muted-foreground);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.category-filter-link:hover {
  border-color: var(--color-brass);
  color: var(--color-brass);
}
.category-filter-link.active {
  color: #FFFFFF;
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}
.cat-filter-count {
  font-size: 0.6875rem;
  opacity: 0.75;
  margin-left: 0.125rem;
}

/* ==========================================================================
   Blog Layout & Sidebar
   ========================================================================== */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
}
.blog-layout.no-sidebar {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}
.blog-main {
  min-width: 0;
}
.blog-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* ==========================================================================
   Blog List Card — Horizontal Layout (Reference Image Style)
   ========================================================================== */
.blog-list-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  margin-bottom: 1.5rem;
}
.blog-list-card:hover {
  box-shadow: 0 12px 32px rgba(27,42,74,0.1);
  transform: translateY(-3px);
  border-color: rgba(197,165,114,0.3);
}

/* Card Image */
.blog-list-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  height: 100%;
  min-height: 200px;
}
.blog-list-card-image a {
  display: block;
  width: 100%;
  height: 100%;
}
.blog-list-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.blog-list-card:hover .blog-list-card-image img {
  transform: scale(1.06);
}

/* Card Body */
.blog-list-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.75rem;
}

/* Card Categories */
.blog-list-card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.blog-list-card-category {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
  background: rgba(197,165,114,0.1);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.3s;
}
.blog-list-card-category:hover {
  background: var(--color-brass);
  color: #FFFFFF;
}

/* Card Title */
.blog-list-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.blog-list-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
.blog-list-card-title a:hover {
  color: var(--color-brass);
}

/* Card Excerpt */
.blog-list-card-excerpt {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Footer */
.blog-list-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.blog-list-card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}
.blog-list-card-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.blog-list-card-meta .meta-item svg {
  width: 14px;
  height: 14px;
  color: var(--color-brass);
  flex-shrink: 0;
}

/* Card Read More */
.blog-list-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  transition: all 0.3s;
}
.blog-list-card-readmore:hover {
  color: var(--color-brass);
}
.blog-list-card-readmore svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}
.blog-list-card-readmore:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
   Sidebar Widgets
   ========================================================================== */
.sidebar-widget {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.sidebar-widget .widget-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-brass);
}

/* Categories List */
.sidebar-widget .cat-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-navy);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all 0.3s;
}
.sidebar-widget .cat-list a:last-child {
  border-bottom: none;
}
.sidebar-widget .cat-list a:hover {
  color: var(--color-brass);
  padding-left: 0.25rem;
}
.sidebar-widget .cat-list .cat-count {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  background: var(--color-ivory);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  min-width: 1.5rem;
  text-align: center;
}

/* Search Widget */
.sidebar-widget .search-form {
  display: flex;
  gap: 0.5rem;
}
.sidebar-widget .search-form .search-field {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.3s;
  background: var(--color-ivory);
}
.sidebar-widget .search-form .search-field:focus {
  border-color: var(--color-brass);
  background: #FFFFFF;
}
.sidebar-widget .search-form .search-submit {
  padding: 0.625rem 1.125rem;
  background: var(--color-navy);
  color: var(--color-ivory);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: background 0.3s;
}
.sidebar-widget .search-form .search-submit:hover {
  background: var(--color-brass);
}

/* Recent Post Widget */
.recent-post-item {
  display: flex;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-border);
}
.recent-post-item:last-child {
  border-bottom: none;
}
.recent-post-thumb {
  flex-shrink: 0;
  display: block;
  width: 70px;
  height: 70px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.recent-post-thumb img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform 0.3s;
}
.recent-post-item:hover .recent-post-thumb img {
  transform: scale(1.05);
}
.recent-post-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.recent-post-item .rp-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-post-item .rp-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
.recent-post-item .rp-title a:hover {
  color: var(--color-brass);
}
.recent-post-item .rp-date {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

/* Tags Cloud Widget */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-cloud-link {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-navy);
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.3s;
}
.tag-cloud-link:hover {
  background: var(--color-brass);
  color: #FFFFFF;
  border-color: var(--color-brass);
}

/* Social Share */
.social-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.social-share-label {
  font-weight: 600;
  color: var(--color-navy);
  margin-right: 0.5rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  background: transparent;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}
.share-btn:hover {
  background: var(--color-brass);
  color: #fff;
  border-color: var(--color-brass);
}
.share-btn svg {
  width: 18px;
  height: 18px;
}

/* Related Posts */
.related-posts {
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Sidebar CTA Card */
.sidebar-cta {
  background: var(--color-navy);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  color: var(--color-ivory);
}
.sidebar-cta h4 {
  color: var(--color-ivory);
  margin-bottom: 0.75rem;
}
.sidebar-cta p {
  color: var(--color-beige);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* ==========================================================================
   Single Post Hero Section
   ========================================================================== */
.single-post-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 5rem 0;
}
.single-post-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.single-post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,42,74,0.9) 0%, rgba(27,42,74,0.75) 50%, rgba(27,42,74,0.88) 100%);
}
.single-post-hero-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}
.single-post-hero-deco--top-right {
  top: 0;
  right: 0;
  width: 24rem;
  height: 24rem;
  margin-right: -12rem;
  margin-top: -12rem;
  background: radial-gradient(circle, var(--color-brass) 0%, transparent 70%);
  opacity: 0.1;
}
.single-post-hero-deco--bottom-left {
  bottom: 0;
  left: 0;
  width: 16rem;
  height: 16rem;
  margin-left: -8rem;
  margin-bottom: -8rem;
  background: radial-gradient(circle, var(--color-brass) 0%, transparent 70%);
  opacity: 0.1;
}

/* Breadcrumb */
.single-post-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.single-post-breadcrumb a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.3s;
}
.single-post-breadcrumb a:hover {
  color: #FFFFFF;
}
.single-post-breadcrumb .breadcrumb-sep {
  color: rgba(255,255,255,0.3);
}
.single-post-breadcrumb .breadcrumb-current {
  color: #FFFFFF;
}

/* Hero Categories */
.single-post-hero-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.single-post-hero-cat {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-brass);
  background: rgba(197,165,114,0.15);
  padding: 0.375rem 1rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.3s;
  border: 1px solid rgba(197,165,114,0.3);
}
.single-post-hero-cat:hover {
  background: var(--color-brass);
  color: #FFFFFF;
  border-color: var(--color-brass);
}

/* Hero Title */
.single-post-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Meta */
.single-post-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.single-post-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.single-post-meta-item svg {
  width: 15px;
  height: 15px;
  color: var(--color-brass);
  flex-shrink: 0;
}
.single-post-meta-item a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.3s;
}
.single-post-meta-item a:hover {
  color: var(--color-brass);
}
.single-post-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

/* Hero Social Share */
.single-post-hero-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.5rem;
}
.single-post-hero-share .share-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-right: 0.375rem;
}
.hero-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
  transition: all 0.3s;
  text-decoration: none;
}
.hero-share-btn:hover {
  background: var(--color-brass);
  color: #FFFFFF;
  border-color: var(--color-brass);
}
.hero-share-btn svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Single Post Content Styling
   ========================================================================== */
.single-post-article {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.single-post-content {
  padding: 2.5rem 0;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--color-navy);
}
.single-post-content h1,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.single-post-content h5,
.single-post-content h6 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.single-post-content h2 {
  font-size: 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-border);
  margin-top: 2.5rem;
}
.single-post-content h3 {
  font-size: 1.375rem;
}
.single-post-content p {
  margin-bottom: 1.25rem;
}
.single-post-content img {
  border-radius: var(--radius-lg);
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}
.single-post-content a {
  color: var(--color-royal-blue);
  text-decoration: underline;
  text-decoration-color: rgba(197,165,114,0.4);
  text-underline-offset: 2px;
  transition: all 0.3s;
}
.single-post-content a:hover {
  color: var(--color-brass);
  text-decoration-color: var(--color-brass);
}
.single-post-content blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid var(--color-brass);
  background: var(--color-ivory);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic;
  color: var(--color-navy);
}
.single-post-content blockquote p {
  margin-bottom: 0;
  font-size: 1.0625rem;
}
.single-post-content ul,
.single-post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.single-post-content ul {
  list-style: none;
}
.single-post-content ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.single-post-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brass);
}
.single-post-content ol li {
  margin-bottom: 0.5rem;
}
.single-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.single-post-content table th,
.single-post-content table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  text-align: left;
}
.single-post-content table th {
  background: var(--color-navy);
  color: #FFFFFF;
  font-weight: 600;
}
.single-post-content table tr:nth-child(even) {
  background: var(--color-ivory);
}
.single-post-content pre {
  background: var(--color-navy);
  color: var(--color-ivory);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}
.single-post-content code {
  background: var(--color-ivory);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.875em;
  color: var(--color-brass);
}
.single-post-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.single-post-content .wp-caption {
  max-width: 100%;
  margin: 1.5rem 0;
}
.single-post-content .wp-caption-text {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ==========================================================================
   Single Post Tags
   ========================================================================== */
.single-post-tags {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  margin-top: 2rem;
}
.single-post-tags .tags-label {
  font-weight: 600;
  color: var(--color-navy);
  font-size: 0.9375rem;
  padding-top: 0.25rem;
}
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-pill {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-navy);
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.3s;
}
.tag-pill:hover {
  background: var(--color-brass);
  color: #FFFFFF;
  border-color: var(--color-brass);
}

/* ==========================================================================
   Single Post Share Bar
   ========================================================================== */
.single-post-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-ivory);
  border-radius: var(--radius-xl);
  margin-top: 2rem;
  border: 1px solid var(--color-border);
}
.share-bar-label {
  font-weight: 600;
  color: var(--color-navy);
  font-size: 0.9375rem;
}
.share-bar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.share-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: #FFFFFF;
  transition: all 0.3s;
  border: none;
}
.share-bar-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.share-bar-btn--facebook {
  background: #1877F2;
}
.share-bar-btn--facebook:hover {
  background: #1565C0;
  transform: translateY(-1px);
}
.share-bar-btn--twitter {
  background: #14171A;
}
.share-bar-btn--twitter:hover {
  background: #000000;
  transform: translateY(-1px);
}
.share-bar-btn--linkedin {
  background: #0A66C2;
}
.share-bar-btn--linkedin:hover {
  background: #084E96;
  transform: translateY(-1px);
}
.share-bar-btn--whatsapp {
  background: #25D366;
}
.share-bar-btn--whatsapp:hover {
  background: #1DA851;
  transform: translateY(-1px);
}

/* ==========================================================================
   Author Bio Box
   ========================================================================== */
.author-box {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--color-ivory);
  border-radius: var(--radius-xl);
  margin-top: 2rem;
  border: 1px solid var(--color-border);
}
.author-box-avatar {
  flex-shrink: 0;
}
.author-box-avatar img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--color-brass);
}
.author-box-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.author-box-name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0;
}
.author-box-role {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  font-weight: 500;
}
.author-box-bio {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.author-box-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.3s;
}
.author-box-link:hover {
  color: var(--color-brass);
}
.author-box-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}
.author-box-link:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Related Posts Section
   ========================================================================== */
.related-posts-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.related-posts-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.related-post-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.related-post-card:hover {
  box-shadow: 0 12px 32px rgba(27,42,74,0.1);
  transform: translateY(-3px);
  border-color: rgba(197,165,114,0.3);
}
.related-post-image {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.related-post-image a {
  display: block;
  width: 100%;
  height: 100%;
}
.related-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.related-post-card:hover .related-post-image img {
  transform: scale(1.06);
}
.related-post-body {
  padding: 1.25rem;
}
.related-post-cat {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
  margin-bottom: 0.5rem;
  text-decoration: none;
  transition: color 0.3s;
}
.related-post-cat:hover {
  color: var(--color-navy);
}
.related-post-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.related-post-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
.related-post-title a:hover {
  color: var(--color-brass);
}
.related-post-date {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

/* ==========================================================================
   Single Post Navigation (Prev/Next)
   ========================================================================== */
.single-post-navigation {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.single-post-navigation .nav-links {
  display: contents;
}
.single-post-navigation .nav-previous,
.single-post-navigation .nav-next {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all 0.3s;
}
.single-post-navigation .nav-previous:hover,
.single-post-navigation .nav-next:hover {
  border-color: var(--color-brass);
  box-shadow: 0 4px 16px rgba(27,42,74,0.08);
}
.single-post-navigation .nav-next {
  text-align: right;
  justify-content: flex-end;
}
.single-post-navigation .post-nav-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: #FFFFFF;
  transition: background 0.3s;
}
.single-post-navigation .post-nav-icon svg {
  width: 18px;
  height: 18px;
}
.single-post-navigation a:hover .post-nav-icon {
  background: var(--color-brass);
}
.single-post-navigation .post-nav-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.single-post-navigation .post-nav-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
}
.single-post-navigation .post-nav-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s;
}
.single-post-navigation a:hover .post-nav-title {
  color: var(--color-brass);
}

/* ==========================================================================
   31. Print Styles
   ========================================================================== */
@media print {
  .top-bar,
  .main-header,
  .mobile-menu-sidebar,
  .mobile-menu-overlay,
  .site-footer,
  .whatsapp-float,
  .sidebar,
  .pagination,
  .post-navigation,
  .comments-area,
  .comment-respond {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .entry-content {
    max-width: 100%;
  }

  .entry-content img {
    max-width: 300px;
  }
}

/* ==========================================================================
   32. Responsive - Tablet (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-card.featured {
    grid-column: span 2;
    grid-row: span 1;
  }

  .brand-story-grid {
    gap: 2rem;
  }

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

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

  .blog-card.featured {
    grid-column: span 2;
  }

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

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

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

  .social-feed-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .page-layout-sidebar {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding-left: 0;
    padding-top: 2rem;
  }

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

  .primary-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .brand-story-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    flex-direction: row;
    padding-left: 50px;
    padding-right: 0;
    text-align: left;
  }

  .timeline-dot {
    left: 20px;
    transform: translateX(-50%);
  }

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

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-sidebar {
    position: static;
  }
  .blog-list-card {
    grid-template-columns: 220px 1fr;
  }
  .blog-hero-section {
    min-height: 40vh;
    padding: 4rem 0;
  }
  .blog-hero-featured {
    max-width: 500px;
  }

  /* --- Added Tablet Enhancements --- */
  .categories-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .mission-vision-grid {
    grid-template-columns: 1fr;
  }

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

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

  .benefit-card {
    padding: 1.5rem;
  }

  .benefit-card-icon {
    width: 3rem;
    height: 3rem;
  }

  .benefit-card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .benefit-card-title {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   33. Responsive - Mobile (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --spacing-4xl: 3rem;
    --spacing-5xl: 4rem;
  }

  /* Site is full-width on all viewports */
  .site {
    width: 100%;
  }

  .top-bar .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
  }

  .top-bar-left {
    flex-direction: column;
    gap: 0.375rem;
  }

  .top-bar .social-links {
    display: none;
  }

  .main-header .container {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    gap: 1rem;
  }

  .site-logo .logo-text {
    font-size: 1.375rem;
  }

  .hero-section.hero-lg {
    min-height: 90vh;
  }

  .hero-content h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .hero-content .hero-description {
    font-size: 1rem;
  }

  .hero-slider-arrow {
    width: 40px;
    height: 40px;
  }

  .hero-slider-prev {
    left: 1rem;
  }

  .hero-slider-next {
    right: 1rem;
  }

  .hero-slider-dot {
    width: 32px;
  }

  .hero-slider-dot.active {
    width: 48px;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .category-card {
    aspect-ratio: 3 / 4;
  }

  .category-card.featured {
    grid-column: span 2;
  }

  .brand-story-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .brand-story-image::after {
    display: none;
  }

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

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card.featured {
    grid-column: span 1;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-content {
    flex-direction: column;
    text-align: center;
  }

  .newsletter-form {
    max-width: 100%;
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

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

  .footer-legal {
    justify-content: center;
  }

  .cta-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

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

  .about-values {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .post-navigation {
    grid-template-columns: 1fr;
  }

  .post-navigation .nav-next {
    text-align: left;
  }

  .comment.depth-2,
  .comment.depth-3 {
    margin-left: 1.5rem;
  }

  .comment-form .form-row {
    grid-template-columns: 1fr;
  }

  .hero-slider-nav {
    bottom: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-hero {
    min-height: 30vh;
  }

  .whatsapp-float {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }

  .blog-list-card {
    grid-template-columns: 1fr;
  }
  .blog-list-card-image {
    aspect-ratio: 16/10;
    height: auto;
    min-height: 180px;
  }
  .blog-list-card-body {
    padding: 1.25rem;
  }
  .blog-list-card-title {
    font-size: 1.125rem;
  }
  .blog-list-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .blog-hero-section {
    min-height: 45vh;
    padding: 3.5rem 0;
  }
  .blog-hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  .blog-hero-featured {
    padding: 1rem 1.25rem;
  }
  .blog-hero-featured-title {
    font-size: 1rem;
  }
  .blog-hero-breadcrumb {
    flex-wrap: wrap;
  }
  .related-posts-grid {
    grid-template-columns: 1fr;
  }

  /* Single Post Responsive */
  .single-post-hero {
    min-height: 45vh;
    padding: 3.5rem 0;
  }
  .single-post-hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  .single-post-hero-meta {
    gap: 0.625rem;
    font-size: 0.8125rem;
  }
  .author-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .author-box-header {
    justify-content: center;
  }
  .single-post-navigation {
    grid-template-columns: 1fr;
  }
  .single-post-share-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .share-bar-buttons {
    flex-wrap: wrap;
  }
  .category-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .category-filter-link {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* --- Added Mobile Enhancements --- */

  /* Category section: single card horizontal scroll for .categories-grid--4 */
  .categories-grid--4 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1rem;
    padding-left: 0;
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .categories-grid--4::-webkit-scrollbar {
    display: none;
  }

  .categories-grid--4 > .category-card {
    flex: 0 0 80vw;
    max-width: 80vw;
    scroll-snap-align: center;
    min-width: 280px;
    aspect-ratio: 3 / 4;
  }

  /* Ensure category text displays properly on mobile */
  .categories-grid--4 .category-content {
    padding: 1.25rem;
  }

  .categories-grid--4 .category-name {
    font-size: 1.125rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .categories-grid--4 .category-desc {
    font-size: 0.8125rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
  }

  .categories-grid--4 .category-link {
    font-size: 0.8125rem;
    /* Make link visible on mobile since hover isn't available */
    opacity: 1;
    transform: translateY(0);
  }

  .categories-grid--4 .category-overlay {
    background: linear-gradient(to top, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.3) 50%, transparent 100%);
  }

  /* Craft process grid → 1 column */
  .craft-process-grid {
    grid-template-columns: 1fr;
  }

  /* Sustainability pillars → 1 column */
  .sustainability-pillars {
    grid-template-columns: 1fr;
  }

  /* Blog layout → single column */
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
  }

  /* WhatsApp CTA section → centered */
  .whatsapp-cta-section {
    padding: 3rem 0;
    text-align: center;
  }

  .whatsapp-cta-title {
    font-size: 1.5rem;
  }

  .whatsapp-cta-text {
    font-size: 0.9375rem;
  }

  .whatsapp-cta-button {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
  }

  /* Page hero sections → smaller text, less padding */
  .page-hero-section {
    padding: 2.5rem 0;
  }

  .page-hero-title {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }

  .page-hero-subtitle {
    font-size: 1rem;
  }

  /* mv-card-navy → full width, stacked */
  .mv-card-navy {
    padding: 1.5rem;
  }

  .mv-card-heading {
    font-size: 1.25rem;
  }

  .mv-card-icon-wrap {
    width: 3rem;
    height: 3rem;
  }

  /* Blog filter row → stacked vertically (already flex-direction: column by default) */
  .blog-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-search-wrap {
    max-width: 100%;
  }

  /* Info cards → 1 or 2 columns */
  .info-card {
    padding: 1.25rem;
  }

  .info-card-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .info-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .info-card-title {
    font-size: 0.9375rem;
  }

  .info-card-text {
    font-size: 0.8125rem;
  }

  /* Sustainability features → 1 column */
  .sustainability-features {
    grid-template-columns: 1fr;
  }

  /* CTA buttons row → stacked */
  .cta-buttons-row {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .cta-buttons-row .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Form rows → stacked */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Section headers smaller on mobile */
  .section-header h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .section-header p {
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   34. Responsive - Small Mobile (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --spacing-4xl: 2rem;
    --spacing-5xl: 3rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-section.hero-lg {
    min-height: 80vh;
  }

  .hero-slider-nav {
    bottom: 1rem;
  }

  .hero-slider-arrow {
    width: 36px;
    height: 36px;
  }

  .hero-slider-prev {
    left: 0.75rem;
  }

  .hero-slider-next {
    right: 0.75rem;
  }

  .hero-content h1 {
    font-size: 1.75rem;
  }

  .hero-content .hero-buttons {
    flex-direction: column;
  }

  .hero-content .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }

  .category-card.featured {
    grid-column: span 1;
  }

  .brand-story-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cta-features {
    grid-template-columns: 1fr;
  }

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

  .team-grid {
    grid-template-columns: 1fr;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .blog-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .mobile-menu-sidebar {
    width: 100%;
    max-width: 100vw;
  }

  .product-card-body {
    padding: 1rem;
  }

  .woocommerce .products {
    grid-template-columns: 1fr;
  }

  .error-404-content h1 {
    font-size: 5rem;
  }

  .pagination {
    flex-wrap: wrap;
  }

  /* --- Added Small Mobile Enhancements --- */

  /* Even smaller hero text */
  .hero-content h1 {
    font-size: 1.5rem;
  }

  .hero-content .hero-description {
    font-size: 0.9375rem;
  }

  .page-hero-title {
    font-size: 1.5rem;
  }

  .page-hero-section {
    padding: 2rem 0;
  }

  /* Full-width buttons */
  .btn {
    width: 100%;
    justify-content: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .btn-sm {
    width: auto;
  }

  /* Stacked form rows */
  .form-row,
  .comment-form .form-row,
  .namayah-form .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Smaller section padding */
  section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

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

  .section-header h2 {
    font-size: 1.375rem;
  }

  /* Category grid scroll on small mobile */
  .categories-grid--4 > .category-card {
    flex: 0 0 85vw;
    max-width: 85vw;
    min-width: 260px;
  }

  .categories-grid--4 .category-name {
    font-size: 1rem;
  }

  .categories-grid--4 .category-desc {
    font-size: 0.75rem;
  }

  /* Full-width info cards */
  .grid.grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .info-card {
    padding: 1rem;
  }

  /* Smaller benefit cards */
  .benefit-card {
    padding: 1.25rem;
  }

  .benefit-card-title {
    font-size: 1rem;
  }

  .benefit-card-text {
    font-size: 0.8125rem;
  }

  /* Smaller footer */
  .footer-grid {
    gap: 1.5rem;
  }

  /* WhatsApp CTA compact */
  .whatsapp-cta-section {
    padding: 2rem 0;
  }

  .whatsapp-cta-title {
    font-size: 1.25rem;
  }

  .whatsapp-cta-icon {
    width: 3.5rem;
    height: 3.5rem;
  }

  .whatsapp-cta-icon svg {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* mv-card-navy compact */
  .mv-card-navy {
    padding: 1.25rem;
  }

  .mv-card-heading {
    font-size: 1.125rem;
  }

  /* Blog list card compact */
  .blog-list-card .blog-card-body {
    padding: 1rem;
  }

  .blog-list-card .blog-card-title {
    font-size: 1.0625rem;
  }

  /* Sustainability features compact */
  .sustainability-feature {
    gap: 0.5rem;
  }

  .sustainability-feature-icon {
    width: 2rem;
    height: 2rem;
  }
}

/* ==========================================================================
   Additional WordPress Specific Styles
   ========================================================================== */

/* Alignment classes */
.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

.alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Captions */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.wp-caption img {
  display: block;
}

.wp-caption-text {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  text-align: center;
  padding: 0.5rem 0;
  font-style: italic;
}

/* Screen reader text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--color-brass);
  clip: auto !important;
  clip-path: none;
  color: var(--color-navy);
  display: block;
  font-size: 1rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* WordPress gallery */
.gallery {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

.gallery-item {
  text-align: center;
}

.gallery-icon img {
  border-radius: var(--radius-md);
}

/* Sticky post */
.sticky .blog-card {
  border-color: var(--color-brass);
}

.sticky .blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brass), var(--color-gold), var(--color-brass));
}

/* Password protected post */
.post-password-form {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--color-beige);
  border-radius: var(--radius-xl);
  text-align: center;
}

.post-password-form p {
  margin-bottom: 1rem;
}

.post-password-form input[type="password"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

/* More link */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  text-decoration: none;
  margin-top: 0.5rem;
}

.more-link:hover {
  color: var(--color-brass);
}

/* Avatar */
.avatar {
  border-radius: var(--radius-full);
}

/* wp-embed-responsive */
.wp-embed-responsive .wp-block-embed {
  position: relative;
  padding-top: 56.25%;
}

.wp-embed-responsive .wp-block-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Customizer preview adjustments */
.customize-preview .hero-section {
  transition: all 0.3s ease;
}

/* Admin bar adjustments */
.admin-bar .main-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .main-header {
    top: 46px;
  }
}

/* ==========================================================================
   35. Inner Page Hero Sections
   ========================================================================== */
.page-hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1B3A5C 0%, #0A1628 100%);
  padding: 6rem 0;
  text-align: center;
}

.page-hero-section .container {
  position: relative;
  z-index: 10;
}

.page-hero-badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-brass);
  margin-bottom: 1rem;
}

.page-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.page-hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.page-hero-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
}

.page-hero-breadcrumb a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color var(--transition-base);
}

.page-hero-breadcrumb a:hover {
  color: #FFFFFF;
}

.page-hero-breadcrumb .current {
  color: #FFFFFF;
}

.page-hero-decoration {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.page-hero-decoration--top-right {
  top: 0;
  right: 0;
  width: 24rem;
  height: 24rem;
  margin-right: -12rem;
  margin-top: -12rem;
  background: radial-gradient(circle, rgba(197,165,90,0.1) 0%, transparent 70%);
}

.page-hero-decoration--bottom-left {
  bottom: 0;
  left: 0;
  width: 16rem;
  height: 16rem;
  margin-left: -8rem;
  margin-bottom: -8rem;
  background: radial-gradient(circle, rgba(197,165,90,0.1) 0%, transparent 70%);
}

/* ==========================================================================
   36. Info Cards (Contact, About)
   ========================================================================== */
.info-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--color-royal-blue);
  transition: box-shadow var(--transition-base);
}

.info-card:hover {
  box-shadow: var(--shadow-xl);
}

.info-card--brass-top {
  border-top-color: var(--color-brass);
}

.info-card-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.info-card-icon--navy {
  background-color: rgba(27,58,92,0.1);
  color: var(--color-royal-blue);
}

.info-card-icon--brass {
  background-color: rgba(197,165,90,0.1);
  color: var(--color-brass);
}

.info-card-icon svg {
  width: 2rem;
  height: 2rem;
}

.info-card-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin-bottom: 0.5rem;
}

.info-card-text {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  line-height: 1.6;
}

.info-card-text a {
  color: var(--color-muted-foreground);
  text-decoration: none;
  transition: color var(--transition-base);
}

.info-card-text a:hover {
  color: var(--color-brass);
}

/* ==========================================================================
   37. Benefit Cards (Wholesale)
   ========================================================================== */
.benefit-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base);
}

.benefit-card:hover {
  box-shadow: var(--shadow-xl);
}

.benefit-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  background-color: rgba(27,58,92,0.08);
}

.benefit-card-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-royal-blue);
}

.benefit-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin-bottom: 0.75rem;
}

.benefit-card-text {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
}

/* ==========================================================================
   38. Feature Icon Cards (About Craftsmanship)
   ========================================================================== */
.feature-icon-card {
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  transition: border-color var(--transition-base);
}

.feature-icon-card:hover {
  border-color: rgba(255,255,255,0.3);
}

.feature-icon-card .card-icon-wrap {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, rgba(197,165,90,0.2), rgba(197,165,90,0.05));
}

.feature-icon-card .card-icon-wrap svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-brass);
}

.feature-icon-card h3 {
  color: #FFFFFF;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.feature-icon-card p {
  color: rgba(255,255,255,0.7);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ==========================================================================
   39. Timeline Section
   ========================================================================== */
.timeline-container {
  position: relative;
  max-width: 50rem;
  margin: 0 auto;
}

.timeline-center-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--color-brass), transparent);
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item--left .timeline-content {
  width: 50%;
  padding-right: 3rem;
  text-align: right;
}

.timeline-item--right .timeline-content {
  width: 50%;
  padding-left: 3rem;
  text-align: left;
  margin-left: auto;
}

.timeline-content {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid rgba(197,165,90,0.3);
  transition: border-color var(--transition-base);
}

.timeline-content:hover {
  border-color: rgba(197,165,90,0.6);
}

.timeline-year {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-brass);
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.timeline-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}

.timeline-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}

.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color-brass);
  box-shadow: 0 0 0 4px rgba(197,165,90,0.3);
  z-index: 10;
}

.timeline-spacer {
  width: 50%;
}

/* ==========================================================================
   40. Mission / Vision Cards
   ========================================================================== */
.mv-card {
  padding: 2rem 3rem;
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--color-royal-blue);
}

.mv-card--brass {
  border-top-color: var(--color-brass);
}

.mv-card-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.mv-card-icon svg {
  width: 2rem;
  height: 2rem;
}

.mv-card-icon--navy {
  background-color: rgba(27,58,92,0.1);
  color: var(--color-royal-blue);
}

.mv-card-icon--brass {
  background-color: rgba(197,165,90,0.1);
  color: var(--color-brass);
}

.mv-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.mv-card p {
  color: var(--color-muted-foreground);
  line-height: 1.8;
}

/* ==========================================================================
   41. Form Styles (Contact, Wholesale)
   ========================================================================== */
.namayah-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.namayah-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.namayah-form .form-group {
  display: flex;
  flex-direction: column;
}

.namayah-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--color-royal-blue);
}

.namayah-form label .required {
  color: #DC2626;
}

.namayah-form input[type="text"],
.namayah-form input[type="email"],
.namayah-form input[type="tel"],
.namayah-form select,
.namayah-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-foreground);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.namayah-form input:focus,
.namayah-form select:focus,
.namayah-form textarea:focus {
  outline: none;
  border-color: var(--color-brass);
  box-shadow: 0 0 0 3px rgba(197,165,90,0.15);
}

.namayah-form textarea {
  resize: vertical;
  min-height: 120px;
}

.namayah-form select {
  appearance: auto;
}

.namayah-form .form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.namayah-form .form-consent input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brass);
}

.namayah-form .form-consent label {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  margin-bottom: 0;
  font-weight: 400;
}

.namayah-form .form-submit {
  margin-top: 0.5rem;
}

.namayah-form .form-submit .btn {
  width: 100%;
}

.form-card {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: 2rem 3rem;
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   42. FAQ Accordion
   ========================================================================== */
.faq-item {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  margin-bottom: 1rem;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-toggle {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  font-weight: 500;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: color var(--transition-base);
}

.faq-toggle:hover {
  color: var(--color-brass);
}

.faq-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-brass);
  transition: transform 0.3s ease;
  margin-left: 1rem;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1.5rem;
}

.faq-item.active .faq-content {
  max-height: 500px;
  padding-bottom: 1.25rem;
}

.faq-content p {
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}

/* ==========================================================================
   43. Prose / Content Typography
   ========================================================================== */
.prose {
  max-width: 65ch;
  line-height: 1.8;
  color: var(--color-muted-foreground);
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h2 {
  font-size: 1.75rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.prose h3 {
  font-size: 1.375rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose h4 {
  font-size: 1.125rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose p {
  margin-bottom: 1.25rem;
}

.prose a {
  color: var(--color-brass);
  text-decoration: none;
}

.prose a:hover {
  text-decoration: underline;
}

.prose ul, .prose ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: 0.375rem;
}

.prose img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: 1.5rem 0;
}

.prose blockquote {
  border-left: 3px solid var(--color-brass);
  background: var(--color-beige);
  padding: 1rem 1.5rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic;
  margin: 1.5rem 0;
}

.prose pre {
  background: var(--color-navy);
  color: rgba(255,255,255,0.9);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.prose table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 1.5rem 0;
}

.prose th {
  background: var(--color-beige);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-royal-blue);
  border-bottom: 1px solid var(--color-border);
}

.prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
}

/* ==========================================================================
   44. Blog Archive Cards
   ========================================================================== */
.blog-archive-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--transition-base);
}

.blog-archive-card:hover {
  box-shadow: var(--shadow-xl);
}

.blog-archive-card .card-thumbnail {
  overflow: hidden;
}

.blog-archive-card .card-thumbnail img {
  width: 100%;
  height: 13rem;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-archive-card:hover .card-thumbnail img {
  transform: scale(1.05);
}

.blog-archive-card .card-thumbnail-placeholder {
  width: 100%;
  height: 13rem;
  background: var(--color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-archive-card .card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-archive-card .card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.blog-archive-card .card-category {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
}

.blog-archive-card .card-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.blog-archive-card .card-title a {
  color: var(--color-royal-blue);
  text-decoration: none;
}

.blog-archive-card .card-title a:hover {
  color: var(--color-brass);
}

.blog-archive-card .card-excerpt {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}

.blog-archive-card .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.blog-archive-card .card-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-archive-card .card-author img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
}

.blog-archive-card .card-author-name {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

.blog-archive-card .card-date {
  font-size: 0.75rem;
  color: rgba(107,114,128,0.7);
}

/* Category Filter Bar */
.category-filter-bar {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-ivory);
}

.category-filter-bar .container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.category-filter-link {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
  border: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
}

.category-filter-link:hover {
  border-color: var(--color-brass);
  color: var(--color-brass);
}

.category-filter-link.active {
  background-color: var(--color-royal-blue);
  color: #FFFFFF;
  border-color: var(--color-royal-blue);
}

/* Featured Article Card */
.featured-article-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.featured-article-card .card-thumbnail {
  overflow: hidden;
}

.featured-article-card .card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 300px;
  transition: transform 0.5s ease;
}

.featured-article-card:hover .card-thumbnail img {
  transform: scale(1.05);
}

.featured-article-card .card-body {
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-article-card .featured-badge {
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background-color: var(--color-brass);
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   45. Single Post Styles
   ========================================================================== */
.post-hero-section {
  position: relative;
  overflow: hidden;
  height: 60vh;
  min-height: 400px;
  max-height: 700px;
}

.post-hero-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,22,40,0.9) 0%, rgba(10,22,40,0.4) 50%, transparent 100%);
}

.post-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 2rem;
}

.post-hero-content .post-categories {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.post-hero-content .post-category-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background-color: var(--color-brass);
  color: #FFFFFF;
  text-decoration: none;
}

.post-hero-content .post-date {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}

.post-hero-content h1 {
  color: #FFFFFF;
  font-size: clamp(1.875rem, 4vw, 3rem);
}

.post-noimage-hero {
  padding: 4rem 0;
  background: linear-gradient(135deg, #1B3A5C 0%, #0A1628 100%);
}

/* Post Meta */
.post-meta-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.post-meta-bar .meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.post-meta-bar svg {
  width: 1rem;
  height: 1rem;
}

/* Tags */
.post-tags {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.post-tags h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.post-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.post-tags-list a {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  text-decoration: none;
  transition: all var(--transition-base);
}

.post-tags-list a:hover {
  border-color: var(--color-brass);
  color: var(--color-brass);
}

/* Share Buttons */
.share-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.share-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.share-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.share-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.share-button:hover {
  opacity: 0.8;
  color: #FFFFFF;
}

.share-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.share-button--facebook { background-color: #1877F2; }
.share-button--twitter { background-color: #0A1628; }
.share-button--linkedin { background-color: #0A66C2; }
.share-button--whatsapp { background-color: #25D366; }

/* Author Bio */
.author-bio-card {
  margin-top: 3rem;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.author-bio-card .author-avatar {
  flex-shrink: 0;
}

.author-bio-card .author-avatar img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 3px solid var(--color-brass);
}

.author-bio-card .author-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-royal-blue);
  margin-bottom: 0.5rem;
}

.author-bio-card .author-description {
  font-size: 0.9375rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.author-bio-card .author-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-brass);
  text-decoration: none;
}

.author-bio-card .author-link:hover {
  text-decoration: underline;
}

/* Related Posts */
.related-posts-section {
  margin-top: 4rem;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.related-post-card .card-thumbnail {
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.related-post-card .card-thumbnail img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.related-post-card:hover .card-thumbnail img {
  transform: scale(1.05);
}

.related-post-card .card-date {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-bottom: 0.5rem;
}

.related-post-card .card-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.related-post-card .card-title a {
  color: var(--color-royal-blue);
  text-decoration: none;
}

.related-post-card .card-title a:hover {
  color: var(--color-brass);
}

.related-post-card .card-excerpt {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  margin-top: 0.5rem;
}

/* Post Content Layout */
.post-content-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
}

.post-main {
  min-width: 0;
}

.post-sidebar {
  min-width: 0;
}

/* ==========================================================================
   46. Pagination Navigation
   ========================================================================== */
.pagination-nav {
  margin-top: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  text-decoration: none;
  transition: all var(--transition-base);
}

.pagination-link:hover {
  border-color: var(--color-brass);
  color: var(--color-brass);
}

.pagination-link.current {
  background-color: var(--color-royal-blue);
  color: #FFFFFF;
  border-color: var(--color-royal-blue);
  font-weight: 600;
}

.pagination-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.pagination-arrow svg {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   47. Business Hours Table
   ========================================================================== */
.business-hours-table {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.business-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.business-hours-row:last-child {
  border-bottom: none;
}

.business-hours-row.today {
  background-color: rgba(197,165,90,0.08);
}

.business-hours-day {
  font-weight: 500;
  color: var(--color-royal-blue);
}

.business-hours-row.today .business-hours-day {
  font-weight: 700;
}

.business-hours-today-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-brass);
  color: #FFFFFF;
  margin-left: 0.5rem;
}

.business-hours-time {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.business-hours-time.closed {
  color: #DC2626;
  font-weight: 500;
}

/* ==========================================================================
   48. WhatsApp CTA Section
   ========================================================================== */
.whatsapp-cta-section {
  padding: 4rem 0;
  background-color: var(--color-royal-blue);
  text-align: center;
}

.whatsapp-cta-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background-color: rgba(197,165,90,0.2);
}

.whatsapp-cta-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-brass);
}

.whatsapp-cta-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.whatsapp-cta-text {
  color: rgba(255,255,255,0.7);
  max-width: 35rem;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.whatsapp-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  background-color: #25D366;
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.whatsapp-cta-button:hover {
  opacity: 0.9;
  color: #FFFFFF;
}

.whatsapp-cta-button svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ==========================================================================
   49. Sustainability Features Grid
   ========================================================================== */
.sustainability-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.sustainability-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sustainability-feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(197,165,90,0.15);
}

.sustainability-feature-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-brass);
}

.sustainability-feature-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin-bottom: 0.125rem;
}

.sustainability-feature-text {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

/* ==========================================================================
   50. Story Image with Badge
   ========================================================================== */
.story-image-wrapper {
  position: relative;
}

.story-image-wrapper img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}

.story-image-badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.5rem;
  text-align: center;
  border-bottom: 3px solid var(--color-brass);
}

.story-image-badge .badge-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-royal-blue);
}

.story-image-badge .badge-label {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   51. Category Card (Wholesale dark bg)
   ========================================================================== */
.wholesale-category-card {
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  transition: border-color var(--transition-base);
}

.wholesale-category-card:hover {
  border-color: rgba(255,255,255,0.3);
}

.wholesale-category-card .card-image {
  position: relative;
  height: 14rem;
  overflow: hidden;
}

.wholesale-category-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.wholesale-category-card:hover .card-image img {
  transform: scale(1.1);
}

.wholesale-category-card .card-image-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(107,114,128,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
}

.wholesale-category-card .card-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.wholesale-category-card .card-body {
  padding: 1.5rem;
}

.wholesale-category-card .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}

.wholesale-category-card .card-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}

.wholesale-category-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-brass);
  text-decoration: none;
  transition: gap var(--transition-base);
}

.wholesale-category-card:hover .card-link {
  gap: 0.5rem;
}

.wholesale-category-card .card-link svg {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   52. Empty State
   ========================================================================== */
.empty-state {
  text-align: center;
  padding: 4rem 0;
}

.empty-state svg {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
  color: var(--color-border);
}

.empty-state h2 {
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--color-muted-foreground);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   53. Content Card (Default page)
   ========================================================================== */
.content-card {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: 2rem 3rem;
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   54. CTA Buttons Row
   ========================================================================== */
.cta-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   55. Responsive - Inner Pages
   ========================================================================== */
@media (max-width: 1024px) {
  .page-hero-section {
    padding: 4rem 0;
  }

  .featured-article-card {
    grid-template-columns: 1fr;
  }

  .featured-article-card .card-body {
    padding: 2rem;
  }

  .post-content-layout {
    grid-template-columns: 1fr;
  }

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

  .timeline-center-line {
    left: 1.5rem;
  }

  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 3.5rem;
  }

  .timeline-item--left .timeline-content,
  .timeline-item--right .timeline-content {
    width: 100%;
    text-align: left;
    padding: 0;
  }

  .timeline-item--right .timeline-content {
    margin-left: 0;
  }

  .timeline-dot {
    left: 1.5rem;
    transform: translateX(-50%);
  }

  .timeline-spacer {
    display: none;
  }

  .sustainability-features {
    grid-template-columns: 1fr;
  }

  .story-image-badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 1rem;
    display: inline-block;
  }
}

@media (max-width: 768px) {
  .page-hero-section {
    padding: 3rem 0;
  }

  .page-hero-title {
    font-size: 2rem;
  }

  .namayah-form .form-row {
    grid-template-columns: 1fr;
  }

  .info-card {
    padding: 1.5rem;
  }

  .form-card {
    padding: 1.5rem;
  }

  .content-card {
    padding: 1.5rem;
  }

  .mv-card {
    padding: 1.5rem;
  }

  .author-bio-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .related-posts-grid {
    grid-template-columns: 1fr;
  }

  .featured-article-card .card-body {
    padding: 1.5rem;
  }

  .cta-buttons-row {
    flex-direction: column;
  }

  .benefit-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .page-hero-section {
    padding: 2.5rem 0;
  }

  .page-hero-title {
    font-size: 1.75rem;
  }

  .page-hero-subtitle {
    font-size: 1rem;
  }

  .share-buttons {
    flex-wrap: wrap;
  }

  .category-filter-bar .container {
    gap: 0.5rem;
  }

  .category-filter-link {
    font-size: 0.8125rem;
    padding: 0.375rem 1rem;
  }

  .pagination-nav {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   35. New Component Styles (v1.0.3 additions)
   ========================================================================== */

/* Hero Badge with Pulse Dot */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(197, 165, 90, 0.1);
  border: 1px solid rgba(197, 165, 90, 0.3);
  border-radius: var(--radius-full);
  margin-bottom: 2rem;
  color: var(--color-brass);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-body);
}

/* Categories Grid - 4 columns */
.categories-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Category Card with description */
.category-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
  text-decoration: none;
}

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

.category-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem;
  z-index: 2;
}

.category-name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ivory);
  margin-bottom: 0.25rem;
  transition: color 0.3s ease;
}

.category-card:hover .category-name {
  color: var(--color-brass);
}

.category-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 240, 0.6);
  margin-bottom: 0.5rem;
}

.category-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-brass);
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: all 0.3s ease;
}

.category-card:hover .category-link {
  opacity: 1;
  transform: translateY(0);
}

/* Brand Story Glass Badge */
.brand-story-glass-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 240, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 165, 90, 0.2);
  border-radius: var(--radius-lg);
  z-index: 2;
}

.glass-badge-circle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-brass);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.glass-badge-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-navy);
}

.glass-badge-title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.125rem;
}

.glass-badge-subtitle {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

/* Feature Card White (Why Choose Us - beige bg) */
.feature-card-white {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2rem;
  border: 1px solid var(--color-beige-warm);
  transition: all 0.3s ease;
}

.feature-card-white:hover {
  border-color: rgba(197, 165, 90, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(10, 22, 40, 0.08);
}

.feature-card-white-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xl);
  background: rgba(10, 22, 40, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.feature-card-white:hover .feature-card-white-icon {
  background: var(--color-brass);
  color: var(--color-navy);
}

.feature-card-white h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.feature-card-white p {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Blog Section Header with View All */
.blog-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.blog-view-all-link {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-brass);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: color 0.3s ease;
  text-decoration: none;
}

@media (min-width: 768px) {
  .blog-view-all-link {
    display: flex;
  }
}

.blog-view-all-link:hover {
  color: var(--color-navy);
}

.blog-card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: rgba(197, 165, 90, 0.9);
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.blog-card-author-date {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-bottom: 0.75rem;
}

.blog-card-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(197, 165, 90, 0.5);
}

/* Testimonial Card Dark (Navy bg with backdrop-blur) */
.testimonial-card-dark {
  background: rgba(19, 34, 64, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(197, 165, 90, 0.1);
  border-radius: var(--radius-xl);
  padding: 2rem;
  transition: border-color 0.3s ease;
}

.testimonial-card-dark:hover {
  border-color: rgba(197, 165, 90, 0.3);
}

.testimonial-card-dark .testimonial-rating {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.testimonial-quote-icon {
  margin-bottom: 0.75rem;
}

.testimonial-card-text {
  color: rgba(255, 255, 240, 0.7);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.testimonial-card-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(197, 165, 90, 0.1);
}

.testimonial-card-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(197, 165, 90, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brass);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.testimonial-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ivory);
  margin-bottom: 0.125rem;
}

.testimonial-card-role {
  font-size: 0.75rem;
  color: rgba(255, 255, 240, 0.5);
}

/* Wholesale Stats Grid */
.wholesale-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

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

.wholesale-stat {
  text-align: center;
}

.wholesale-stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-brass);
  margin-bottom: 0.25rem;
}

.wholesale-stat-label {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

/* Social Feed Grid - responsive (mobile first) */
/* Base: 2 columns - defined earlier in file. These are the desktop overrides. */
@media (min-width: 768px) {
  .social-feed-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .social-feed-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
  }
}

/* Social feed item - already defined above, this is the variant with xl radius */
.social-feed-item-xl {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.social-feed-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-feed-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.social-feed-overlay span {
  color: var(--color-ivory);
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-feed-item:hover .social-feed-overlay {
  background: rgba(10, 22, 40, 0.6);
}

.social-feed-item:hover .social-feed-overlay span {
  opacity: 1;
}

/* Social Pill Buttons */
.social-buttons-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.social-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border: 1px solid rgba(10, 22, 40, 0.2);
  border-radius: var(--radius-full);
  color: var(--color-navy);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-pill-btn:hover {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
}

.social-pill-btn svg {
  width: 16px;
  height: 16px;
}

/* About Timeline */
.about-timeline {
  position: relative;
  padding: 2rem 0;
}

.about-timeline-line {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-brass), var(--color-gold), var(--color-brass-light));
}

@media (min-width: 768px) {
  .about-timeline-line {
    left: 50%;
    transform: translateX(-50%);
  }
}

.about-timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.about-timeline-item:last-child {
  margin-bottom: 0;
}

.about-timeline-dot {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-brass);
  border: 4px solid var(--color-ivory);
  box-shadow: 0 0 8px rgba(197, 165, 90, 0.3);
  z-index: 2;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .about-timeline-dot {
    left: 50%;
  }
}

.about-timeline-content {
  margin-left: 3rem;
  max-width: 28rem;
}

@media (min-width: 768px) {
  .about-timeline-item--left .about-timeline-content {
    margin-left: 0;
    margin-right: auto;
    text-align: right;
    padding-right: 3rem;
    width: 50%;
  }

  .about-timeline-item--right .about-timeline-content {
    margin-left: auto;
    padding-left: 3rem;
    width: 50%;
  }
}

.about-timeline-year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-brass);
  display: block;
  margin-bottom: 0.5rem;
}

.about-timeline-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.about-timeline-desc {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Mission Vision Cards (Navy with decorative accents) */
.mv-card-navy {
  position: relative;
  background: var(--color-navy);
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.mv-card-navy:hover {
  transform: translateY(-4px);
}

.mv-card-accent {
  position: absolute;
  width: 8rem;
  height: 8rem;
  background: rgba(197, 165, 90, 0.05);
  border-radius: 50%;
  pointer-events: none;
}

.mv-card-accent--top-right {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.mv-card-accent--bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

.mv-card-accent--top-left {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.mv-card-accent--bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
}

.mv-card-content {
  position: relative;
  z-index: 2;
}

.mv-card-icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xl);
  background: rgba(197, 165, 90, 0.1);
  border: 1px solid rgba(197, 165, 90, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brass);
  margin-bottom: 1.5rem;
  transition: background 0.3s ease;
}

.mv-card-navy:hover .mv-card-icon-wrap {
  background: rgba(197, 165, 90, 0.2);
}

.mv-card-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-ivory);
  margin-bottom: 1rem;
}

.mv-card-divider {
  width: 3rem;
  height: 2px;
  background: linear-gradient(to right, var(--color-brass), var(--color-gold));
  margin-bottom: 1.5rem;
}

.mv-card-text {
  color: rgba(255, 255, 240, 0.7);
  line-height: 1.8;
  margin-bottom: 0;
}

/* Craft Image Cards (About page) */
.craft-image-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.craft-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.craft-image-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
}

.craft-image-content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-ivory);
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.craft-image-card:hover .craft-image-content h3 {
  color: var(--color-brass);
}

.craft-image-content p {
  font-size: 0.875rem;
  color: rgba(255, 255, 240, 0.6);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Craft Process Section */
.craft-process-wrap {
  background: var(--color-beige);
  border-radius: var(--radius-2xl);
  padding: 2rem 2rem 3rem;
}

@media (min-width: 768px) {
  .craft-process-wrap {
    padding: 2rem 3rem 4rem;
  }
}

.craft-process-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}

@media (min-width: 640px) {
  .craft-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.craft-process-step {
  text-align: center;
}

.craft-process-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.craft-process-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brass);
  transition: all 0.3s ease;
}

.craft-process-step:hover .craft-process-circle {
  background: var(--color-brass);
  color: var(--color-navy);
}

.craft-process-number {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-brass);
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.craft-process-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.craft-process-desc {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Sustainability Pillar Cards */
.sustainability-pillar-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2rem;
  border: 1px solid var(--color-beige-warm);
  text-align: center;
  transition: all 0.3s ease;
}

.sustainability-pillar-card:hover {
  border-color: rgba(197, 165, 90, 0.3);
}

.sustainability-pillar-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--color-navy);
  transition: all 0.3s ease;
}

.sustainability-pillar-card:hover .sustainability-pillar-icon {
  background: rgba(197, 165, 90, 0.1);
  color: var(--color-brass);
}

.sustainability-pillar-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.sustainability-pillar-divider {
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(to right, var(--color-brass), var(--color-gold));
  margin: 0 auto 1.25rem;
}

.sustainability-pillar-desc {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Blog Featured Card (Blog List page) */
.blog-featured-card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 10px 15px -3px rgba(10, 22, 40, 0.05);
  border: 1px solid var(--color-beige-warm);
  transition: all 0.3s ease;
}

.blog-featured-card:hover {
  box-shadow: 0 20px 40px rgba(10, 22, 40, 0.1);
}

@media (min-width: 1024px) {
  .blog-featured-card {
    grid-template-columns: 1fr 1fr;
  }
}

.blog-featured-image {
  position: relative;
}

.blog-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 300px;
}

.blog-featured-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .blog-featured-body {
    padding: 2.5rem 3rem;
  }
}

.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.blog-featured-badge {
  padding: 0.25rem 0.75rem;
  background: rgba(197, 165, 90, 0.1);
  border: 1px solid rgba(197, 165, 90, 0.4);
  color: var(--color-brass);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.blog-featured-meta time {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.blog-featured-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .blog-featured-title {
    font-size: 2rem;
  }
}

.blog-featured-title a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-featured-title a:hover {
  color: var(--color-brass);
}

.blog-featured-excerpt {
  color: var(--color-muted-foreground);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Blog Filter Bar */
.blog-filter-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .blog-filter-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.blog-search-wrap {
  position: relative;
  width: 100%;
  max-width: 20rem;
  display: flex;
  align-items: center;
}

.blog-search-wrap svg {
  position: absolute;
  left: 0.75rem;
  z-index: 2;
  pointer-events: none;
}

.blog-search-wrap .search-form {
  width: 100%;
}

.blog-search-wrap .search-form .search-field {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 2.5rem;
  background: #FFFFFF;
  border: 1px solid var(--color-beige-warm);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--color-navy);
  transition: border-color 0.3s ease;
}

.blog-search-wrap .search-form .search-field:focus {
  border-color: var(--color-brass);
  outline: none;
  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.1);
}

.blog-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-category-pill {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  background: #FFFFFF;
  color: var(--color-navy);
  border: 1px solid var(--color-beige-warm);
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-category-pill:hover,
.blog-category-pill.active {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
  box-shadow: 0 4px 6px rgba(10, 22, 40, 0.15);
}

/* Blog Newsletter Form (dark bg) */
.blog-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .blog-newsletter-form {
    flex-direction: row;
  }
}

.blog-newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--color-navy-light);
  border: 1px solid rgba(197, 165, 90, 0.3);
  border-radius: var(--radius-lg);
  color: var(--color-ivory);
  font-size: 0.9375rem;
}

.blog-newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 240, 0.4);
}

.blog-newsletter-form input[type="email"]:focus {
  border-color: var(--color-brass);
  outline: none;
  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
}

/* CTA Buttons Row */
.cta-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

@media (min-width: 640px) {
  .cta-buttons-row {
    flex-direction: row;
  }
}

/* Mission Vision Grid responsive */
.mission-vision-grid {
  gap: 2rem;
}

@media (max-width: 767px) {
  .mission-vision-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Craftsmanship Images responsive */
.craftsmanship-images {
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .craftsmanship-images {
    grid-template-columns: 1fr !important;
  }
}

/* Sustainability Pillars responsive */
.sustainability-pillars {
  gap: 2rem;
}

@media (max-width: 767px) {
  .sustainability-pillars {
    grid-template-columns: 1fr !important;
  }
}

/* Categories Grid 4-col responsive */
@media (max-width: 767px) {
  .categories-grid--4 {
    /* Override: use horizontal scroll instead of 2-col grid on mobile */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .categories-grid--4::-webkit-scrollbar {
    display: none;
  }

  .categories-grid--4 > .category-card {
    flex: 0 0 80vw;
    max-width: 80vw;
    scroll-snap-align: center;
    min-width: 280px;
  }

  /* Ensure category text is readable */
  .categories-grid--4 .category-content {
    padding: 1.25rem;
  }

  .categories-grid--4 .category-name {
    font-size: 1.125rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .categories-grid--4 .category-desc {
    font-size: 0.8125rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
  }

  .categories-grid--4 .category-link {
    font-size: 0.8125rem;
    opacity: 1;
    transform: translateY(0);
  }

  .categories-grid--4 .category-overlay {
    background: linear-gradient(to top, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.3) 50%, transparent 100%);
  }
}

@media (max-width: 480px) {
  .categories-grid--4 > .category-card {
    flex: 0 0 85vw;
    max-width: 85vw;
    min-width: 260px;
  }

  .categories-grid--4 .category-name {
    font-size: 1rem;
  }

  .categories-grid--4 .category-desc {
    font-size: 0.75rem;
  }
}

/* Blog Grid responsive - uses original base definition in Section 14
   and responsive overrides in Sections 32/33 */

/* Page Hero Badge */
.page-hero-badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  background: rgba(197, 165, 90, 0.15);
  border: 1px solid rgba(197, 165, 90, 0.3);
  border-radius: var(--radius-full);
  color: var(--color-brass);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Inline Flex utility for CTA badges */
.inline-flex {
  display: inline-flex;
}

/* ==========================================================================
   35. Comprehensive Mobile Responsive Grid Fixes
   ========================================================================== */

/* ---- Tablet & below (max-width: 1024px) ---- */
@media (max-width: 1024px) {

  /* Why Choose Us - 2 columns on tablet */
  #why-choose .grid.grid-cols-3,
  #why-choose .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Testimonials - 1 column on tablet, scrollable */
  #testimonials .grid.grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Contact page info cards - 2 columns on tablet */
  .page-template-page-contact .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Contact form & map - stack on tablet */
  .page-template-page-contact .grid.grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Categories grid 4-col - 2 columns on tablet */
  .categories-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Mobile (max-width: 768px) ---- */
@media (max-width: 768px) {

  /* Force all utility grid classes to responsive on mobile */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .grid.grid-cols-3 {
    grid-template-columns: 1fr;
  }

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

  /* Categories - Horizontal scrollable on mobile */
  .categories-grid--4 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1rem;
    padding-left: 0;
    padding-right: 0;
    scroll-padding-left: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .categories-grid--4::-webkit-scrollbar {
    display: none;
  }

  .categories-grid--4 > .category-card {
    flex: 0 0 80vw;
    max-width: 80vw;
    scroll-snap-align: center;
    min-width: 280px;
    aspect-ratio: 3 / 4;
  }

  /* Category text display fix for mobile (scoped to categories-grid--4) */
  .categories-grid--4 .category-content {
    padding: 1.25rem;
  }

  .categories-grid--4 .category-name {
    font-size: 1.125rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .categories-grid--4 .category-desc {
    font-size: 0.8125rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
  }

  .categories-grid--4 .category-link {
    font-size: 0.8125rem;
    opacity: 1;
    transform: translateY(0);
  }

  .categories-grid--4 .category-overlay {
    background: linear-gradient(to top, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.3) 50%, transparent 100%);
  }

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

  /* Why Choose Us - single column on mobile */
  #why-choose .grid.grid-cols-3,
  #why-choose .features-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .feature-card-white {
    padding: 1.5rem;
  }

  /* Testimonials - Horizontal scrollable on mobile */
  #testimonials .grid.grid-cols-3 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1.5rem;
    padding-bottom: 1rem;
    scroll-padding-left: 0;
  }

  #testimonials .grid.grid-cols-3 > * {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: center;
  }

  #testimonials .grid.grid-cols-3 > .testimonial-card-dark {
    min-width: 280px;
  }

  #testimonials .testimonial-card-dark {
    min-width: 0;
  }

  .testimonial-card-dark {
    padding: 1.5rem;
  }

  .testimonial-card-text {
    font-size: 0.875rem;
    padding-left: 0;
  }

  /* Contact page info cards - 2 columns on mobile */
  .page-template-page-contact .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* About page grids */
  .craft-process-grid.grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .sustainability-pillars.grid.grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .mission-vision-grid.grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .craftsmanship-images.grid.grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .info-card {
    padding: 1.25rem;
  }

  .info-card-icon {
    width: 3rem;
    height: 3rem;
  }

  .info-card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .info-card-title {
    font-size: 1rem;
  }

  .info-card-text {
    font-size: 0.8125rem;
  }

  /* Contact form & map - stacked on mobile */
  .page-template-page-contact .grid.grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Social Feed Grid - 2 columns on mobile */
  .social-feed-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem;
  }

  /* Blog section header - stack on mobile */
  .blog-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem !important;
  }

  .blog-view-all-link {
    display: flex;
  }

  /* Hero buttons - wrap on mobile */
  .hero-buttons {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .hero-buttons .btn {
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
  }

  /* Fix decorative circles from overflowing */
  #testimonials > div:first-child > div {
    width: 200px !important;
    height: 200px !important;
  }

  /* Section headers */
  .section-header h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* CTA buttons row */
  .cta-buttons-row {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .cta-buttons-row .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Page hero responsive */
  .page-hero-section {
    padding: 3rem 0;
  }

  .page-hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  /* Form row responsive */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Business hours table */
  .business-hours-row {
    flex-direction: row;
    padding: 0.75rem 0;
  }
}

/* ---- Small Mobile (max-width: 480px) ---- */
@media (max-width: 480px) {

  /* Contact page info cards - single column on small mobile */
  .page-template-page-contact .grid.grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .info-card {
    padding: 1.25rem;
  }

  /* Testimonial cards - full width on small mobile */
  #testimonials .grid.grid-cols-3 > .testimonial-card-dark {
    flex: 0 0 92vw;
    max-width: 92vw;
    min-width: 260px;
  }

  /* Social Feed Grid - 2 columns on small mobile */
  .social-feed-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
  }

  /* Feature cards compact */
  .feature-card-white {
    padding: 1.25rem;
  }

  .feature-card-white-icon {
    width: 3rem;
    height: 3rem;
  }

  .feature-card-white h3 {
    font-size: 1.125rem;
  }

  /* Hero buttons stack vertically on small mobile */
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Blog hero compact on small mobile */
  .blog-hero-section {
    min-height: 35vh;
    padding: 2.5rem 0;
  }
  .blog-hero-featured {
    padding: 0.875rem 1rem;
  }
  .blog-list-card-image {
    min-height: 160px;
  }
  .blog-list-card-body {
    padding: 1rem;
  }
  .blog-list-card-categories {
    margin-bottom: 0.5rem;
  }
  .blog-list-card-title {
    font-size: 1rem;
  }
  .blog-list-card-excerpt {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
  .blog-list-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }

  /* Single Post Small Mobile */
  .single-post-hero {
    min-height: 35vh;
    padding: 2.5rem 0;
  }
  .single-post-hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .single-post-content {
    padding: 1.5rem 0;
    font-size: 1rem;
  }
  .single-post-content h2 {
    font-size: 1.375rem;
  }
  .single-post-content h3 {
    font-size: 1.125rem;
  }
  .single-post-hero-share {
    flex-wrap: wrap;
    justify-content: center;
  }
  .share-bar-btn span {
    display: none;
  }
  .share-bar-btn {
    padding: 0.5rem 0.75rem;
  }
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
  .author-box {
    padding: 1.25rem;
  }
  .author-box-avatar img {
    width: 60px;
    height: 60px;
  }

  /* Generic grid utility classes - small mobile */
  .grid-cols-2 { grid-template-columns: 1fr; }
  .grid-cols-3 { grid-template-columns: 1fr; }
  .grid-cols-4 { grid-template-columns: 1fr; }
  .grid-cols-5 { grid-template-columns: 1fr; }
  .grid-cols-6 { grid-template-columns: 1fr; }
}

/* ---- Global overflow prevention ---- */
section {
  overflow-x: hidden;
}

/* Reset max-width for full-width elements within boxed layout */
html, body, section, .hero-slide, .page-hero-section,
.top-bar, .site-footer, .newsletter-section {
  max-width: none;
}

/* Full-width site wrapper - sections go edge-to-edge, content is contained */
.site {
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

/* Container keeps its content max-width for proper centering */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.container-wide {
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
}

/* Specific fix: images and media should never overflow */
img, video, svg, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Fix for inline SVGs in icons (preserve sizing) */
.info-card-icon svg,
.feature-card-white-icon svg,
.header-btn svg,
.social-pill-btn svg,
.blog-card-read-more svg,
.category-link svg,
.testimonial-card-dark svg,
.testimonial-card-avatar,
.testimonial-rating svg,
.hero-badge svg {
  max-width: none;
}

/* Fix specific wide elements */
.hero-slide {
  background-size: cover;
  background-position: center;
}

/* Custom scrollbar for testimonials on mobile */
#testimonials .grid.grid-cols-3::-webkit-scrollbar {
  height: 4px;
}

#testimonials .grid.grid-cols-3::-webkit-scrollbar-track {
  background: rgba(197, 165, 90, 0.1);
  border-radius: 2px;
}

#testimonials .grid.grid-cols-3::-webkit-scrollbar-thumb {
  background: var(--color-brass);
  border-radius: 2px;
}