/*
Theme Name: Iran Decor Hookah
Theme URI: https://irandecor-hookah.com/
Author: Iran Decor
Description: قالب اختصاصی فروشگاهی ووکامرس برای صادرات و تولیدی قلیان ایران دکور. طراحی الگانت با تم دود و اخگر، واکنش‌گرا در تمام اندازه‌ها.
Version: 1.0.0
Text Domain: irandecor-hookah
Tags: woocommerce, rtl, custom-menu, responsive
*/

:root {
  --bg-void: #14100D;
  --bg-panel: #1C1611;
  --bg-panel-2: #221A14;
  --ember: #C9762F;
  --ember-bright: #E89A4C;
  --brass: #B99A64;
  --brass-dim: #8A7451;
  --smoke: #E9E1D3;
  --smoke-dim: #B8AC98;
  --wine: #5B2018;
  --wine-bright: #7A2C20;
  --line: rgba(185, 154, 100, 0.18);
  --font-display: 'IRANSans', Tahoma, 'Segoe UI', Arial, sans-serif;
  --font-body: 'IRANSans', Tahoma, 'Segoe UI', Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-void);
  color: var(--smoke);
  font-family: var(--font-body);
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(201, 118, 47, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 20%, rgba(91, 32, 24, 0.15), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(185, 154, 100, 0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

a {
  text-decoration: none;
  color: inherit;
}

a:visited {
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: var(--font-body);
}

/* === TOP UTILITY BAR === */
.topbar {
  background: #14100D;
  border-bottom: 1px solid rgba(185, 154, 100, 0.18);
  font-size: 13px;
  color: #B8AC98;
  position: relative;
  z-index: 100;
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  border: none !important;
  color: var(--smoke-dim);
}

.topbar-right a {
  color: var(--smoke-dim);
}

.topbar-right a:visited {
  color: var(--ember-bright);
}

.topbar a {
  color: var(--smoke-dim);
}

.topbar a:hover {
  color: var(--ember-bright);
}

.topbar a:visited {
  color: var(--ember-bright);
}

.topbar .divider {
  width: 1px;
  height: 12px;
  background: rgba(185, 154, 100, 0.18);
}

.topbar-icon {
  width: 14px;
  height: 14px;
  opacity: .8;
  vertical-align: -2px;
  margin-left: 4px;
}

/* === HEADER === */
header#site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(20, 16, 13, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(185, 154, 100, 0.18);
}

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

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

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1.5px solid var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(185, 154, 100, 0.06);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.brand-mark::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(185, 154, 100, 0.18);
  border-radius: 13px;
}

.brand-mark svg {
  width: 22px;
  height: 22px;
  color: var(--ember-bright);
}

.brand-text h1,
.brand-text p {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: #E9E1D3;
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 0;
}

.brand-text span {
  font-size: 10.5px;
  color: var(--brass);
  letter-spacing: 3px;
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}

nav.mainnav ul {
  display: flex;
  gap: 38px;
  align-items: center;
}

nav.mainnav li {
  position: relative;
}

nav.mainnav a {
  font-size: 15px;
  font-weight: 500;
  color: #B8AC98;
  position: relative;
  padding: 8px 0;
  transition: color .25s;
  display: inline-block;
}

nav.mainnav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}

nav.mainnav a:hover,
nav.mainnav .current-menu-item a {
  color: #E9E1D3;
}

nav.mainnav a:hover::after,
nav.mainnav .current-menu-item a::after {
  transform: scaleX(1);
}

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

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ember-bright) !important;
  transition: all .25s;
  position: relative;
  background: none;
}

.icon-btn:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

.cart-count {
  position: absolute;
  top: -4px;
  left: -4px;
  background: var(--ember);
  color: #14100D;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(185, 154, 100, 0.18);
  align-items: center;
  justify-content: center;
  color: #E9E1D3;
  cursor: pointer;
  background: transparent;
}

/* mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 8, 6, 0.6);
  backdrop-filter: blur(4px);
  display: none;
}

.mobile-nav.open {
  display: block;
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 82%;
  max-width: 340px;
  background: #1C1611;
  border-left: 1px solid rgba(185, 154, 100, 0.18);
  padding: 30px 26px;
  transform: translateX(100%);
  transition: transform .35s ease;
  overflow-y: auto;
}

.mobile-nav.open .mobile-nav-panel {
  transform: translateX(0);
}

.mobile-nav-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(185, 154, 100, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E9E1D3;
  margin-bottom: 30px;
  background: transparent;
  cursor: pointer;
}

.mobile-nav ul li {
  border-bottom: 1px solid rgba(185, 154, 100, 0.18);
}

.mobile-nav ul a {
  display: block;
  padding: 16px 4px;
  font-size: 16px;
  color: #E9E1D3;
}

/* === HERO === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 50px 0 0;
  background: #0a0705;
}

.hero-cinematic {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Blurred old-cafe/lounge photo backdrop */
.hero-bg-photo {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center 35%;
  filter: blur(7px) saturate(1.15) brightness(.55);
  transform: scale(1.08);
  animation: heroBgDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroBgDrift {
  0% {
    transform: scale(1.08) translate(0, 0);
  }

  100% {
    transform: scale(1.14) translate(-1.5%, -1%);
  }
}

.hero-bg-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 7, 5, 0.94) 0%, rgba(10, 7, 5, 0.78) 32%, rgba(10, 7, 5, 0.4) 58%, rgba(10, 7, 5, 0.72) 100%),
    linear-gradient(180deg, rgba(8, 6, 4, 0.55) 0%, rgba(8, 6, 4, 0.15) 30%, rgba(8, 6, 4, 0.35) 70%, rgba(6, 4, 3, 0.9) 100%);
  z-index: 1;
}

.hero-cinematic::before {
  /* warm amber/wine color wash on top of the photo, ties it to the brand palette */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 55% 65% at 82% 38%, rgba(201, 118, 47, 0.28), transparent 60%),
    radial-gradient(ellipse 70% 55% at 100% 70%, rgba(91, 32, 24, 0.42), transparent 65%),
    radial-gradient(ellipse 40% 40% at 8% 12%, rgba(232, 154, 76, 0.12), transparent 60%);
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-lamp {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  z-index: 1;
  animation: emberPulse 8s ease-in-out infinite;
}

.hero-lamp-a {
  width: 260px;
  height: 260px;
  left: 6%;
  top: 14%;
  background: radial-gradient(circle, rgba(232, 154, 76, 0.35), transparent 70%);
}

.hero-lamp-b {
  width: 340px;
  height: 340px;
  left: 22%;
  top: 58%;
  background: radial-gradient(circle, rgba(232, 154, 76, 0.22), transparent 70%);
  animation-delay: 2.5s;
}

.hero-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(to top, rgba(10, 7, 5, 0.95), transparent);
  z-index: 1;
}

.hero-floor::before {
  content: '';
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 52%;
  height: 70%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(201, 118, 47, 0.32), transparent 72%);
  filter: blur(6px);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 220px 70px rgba(0, 0, 0, 0.65);
}

@keyframes emberPulse {

  0%,
  100% {
    opacity: .7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.smoke-wisp {
  position: fixed;
  width: 2px;
  background: linear-gradient(to top, transparent, rgba(233, 225, 211, 0.25), transparent);
  bottom: 0;
  border-radius: 50%;
  filter: blur(3px);
  animation: rise linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes rise {
  0% {
    transform: translateY(0) translateX(0) scaleX(1);
    opacity: 0;
  }

  10% {
    opacity: .5;
  }

  90% {
    opacity: .15;
  }

  100% {
    transform: translateY(-620px) translateX(40px) scaleX(3);
    opacity: 0;
  }
}

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--brass);
  margin-bottom: 24px;
  opacity: 0;
  animation: heroFadeUp .9s ease .1s forwards;
}

.eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--brass);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.22;
  font-weight: 800;
  color: var(--smoke);
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.hero-title span {
  display: block;
  opacity: 0;
  animation: heroFadeUp .9s ease forwards;
}

.hero-title span:nth-child(1) {
  animation-delay: .22s;
}

.hero-title span:nth-child(2) {
  animation-delay: .36s;
}

.hero-title span:nth-child(3) {
  animation-delay: .5s;
}

.hero-title em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, var(--ember-bright), var(--brass));
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

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

.hero p {
  font-size: 16.5px;
  line-height: 2;
  color: var(--smoke-dim);
  max-width: 440px;
  margin-bottom: 38px;
  opacity: 0;
  animation: heroFadeUp .9s ease .62s forwards;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 50px;
  opacity: 0;
  animation: heroFadeUp .9s ease .74s forwards;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 3px;
  transition: all .3s;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--ember), var(--ember-bright));
  color: #171210;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}

.btn-primary:hover::after {
  transform: translateX(120%);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(201, 118, 47, 0.5);
}

.btn-outline {
  border-color: var(--brass-dim);
  color: var(--smoke);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--brass);
  background: rgba(185, 154, 100, 0.06);
}

.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp .9s ease .86s forwards;
}

.hero-stats div {
  border-left: 1px solid var(--line);
  padding-left: 26px;
}

.hero-stats div:last-child {
  padding-left: 0;
  border: none;
}

.hero-stats b {
  display: block;
  font-size: 27px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ember-bright);
  margin-bottom: 4px;
}

.hero-stats span {
  font-size: 12.5px;
  color: var(--smoke-dim);
  letter-spacing: .3px;
}

/* ===== HERO VISUAL — bigger, more dramatic hookah ===== */
.hero-visual {
  position: relative;
  height: 100%;
  min-height: 720px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
  perspective: 1400px;
}

.hero-visual-glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: 88%;
  height: 150px;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(201, 118, 47, 0.5), transparent 72%);
  filter: blur(12px);
  z-index: 1;
  animation: heroGlowBreathe 6s ease-in-out infinite;
}

.hero-visual-glow--2 {
  width: 60%;
  height: 100px;
  bottom: 14%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(232, 154, 76, 0.35), transparent 70%);
  filter: blur(20px);
  animation-delay: 1.5s;
}

@keyframes heroGlowBreathe {

  0%,
  100% {
    opacity: .75;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

.hero-product-wrap {
  position: relative;
  z-index: 2;
  animation: heroFloat 6s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes heroFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-14px) rotate(.5deg);
  }
}

.hero-product-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-product-img {
  position: relative;
  max-height: 760px;
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 60px 80px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 60px rgba(201, 118, 47, 0.15));
  opacity: 0;
  transform: scale(.88) translateY(30px);
  animation: heroProductReveal 1.3s cubic-bezier(.16, 1, .3, 1) .25s forwards;
}

@keyframes heroProductReveal {
  0% {
    opacity: 0;
    transform: scale(.88) translateY(30px);
  }

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

/* small drifting sparks/embers around the product for extra drama */
.hero-spark {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ember-bright), transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: heroSparkFloat 5s ease-in-out infinite;
}

.hero-spark-a {
  width: 6px;
  height: 6px;
  left: 28%;
  bottom: 30%;
  animation-delay: .4s;
}

.hero-spark-b {
  width: 4px;
  height: 4px;
  left: 66%;
  bottom: 52%;
  animation-delay: 1.8s;
}

.hero-spark-c {
  width: 5px;
  height: 5px;
  left: 58%;
  bottom: 22%;
  animation-delay: 3.1s;
}

@keyframes heroSparkFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(.6);
  }

  15% {
    opacity: 1;
  }

  70% {
    opacity: .5;
  }

  100% {
    opacity: 0;
    transform: translateY(-140px) scale(1.3);
  }
}

/* Soft heartbeat-like pulse rings around the hookah — very thin, very low
   opacity, slow outward fade. Centered explicitly (top/left/transform)
   rather than relying on the flex alignment of .hero-visual, since that
   container aligns items to the bottom (align-items:flex-end) and would
   otherwise pin the rings to the floor instead of around the product. */
.hero-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  border: 1.5px solid rgba(233, 225, 211, 0.5);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: heroPulseBeat 4s ease-out infinite;
  will-change: transform, opacity;
  transform: translateZ(0) scale(1);
}

.hero-pulse-ring--1 {
  animation-delay: 0s;
}

.hero-pulse-ring--2 {
  border-color: rgba(232, 154, 76, 0.45);
  animation-delay: 1.33s;
}

.hero-pulse-ring--3 {
  border-color: rgba(201, 118, 47, 0.4);
  animation-delay: 2.66s;
}

@keyframes heroPulseBeat {
  0% {
    transform: translateZ(0) scale(1);
    opacity: 0;
  }

  15% {
    opacity: .9;
  }

  60% {
    opacity: .35;
  }

  100% {
    transform: translateZ(0) scale(3.1);
    opacity: 0;
  }
}

@media (max-width:1080px) {
  .hero-pulse-ring {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-pulse-ring,
  .hero-product-wrap,
  .hero-bg-photo,
  .hero-visual-glow,
  .hero-spark {
    animation: none;
  }

  .hero-product-img {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-title span,
  .hero p,
  .hero-ctas,
  .eyebrow,
  .hero-stats {
    opacity: 1;
    animation: none;
  }
}

/* scroll cue at the bottom of the hero */
.hero-scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--smoke-dim);
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0;
  animation: heroFadeUp .9s ease 1.1s forwards;
}

.hero-scroll-cue-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, var(--brass), transparent);
  position: relative;
  overflow: hidden;
}

.hero-scroll-cue-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom, transparent, var(--ember-bright), transparent);
  animation: heroScrollDrip 2.2s ease-in-out infinite;
}

@keyframes heroScrollDrip {
  0% {
    top: -60%;
  }

  100% {
    top: 100%;
  }
}

@media (max-width:1080px) {
  .hero-scroll-cue {
    display: none;
  }
}

/* === SECTION HEADER === */
.section {
  padding: 110px 0;
  position: relative;
}

/* #products immediately follows .cats-strip-light with the exact same
   background and no border between them — they read as one continuous
   light zone, so the usual 110px top padding here was stacking with
   cats-strip-light's own bottom padding into an oversized, unjustified
   gap in the middle of a single visual block. */
#products {
  padding-top: 30px;
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}

.section-eyebrow {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--brass);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--brass-dim);
}

.section-eyebrow .eyebrow-ornament {
  width: 16px;
  height: 16px;
  color: var(--ember-bright);
  flex-shrink: 0;
}

.section-header h3,
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 800;
  color: var(--wine) !important;
  margin-bottom: 28px;
  position: relative;
  padding-bottom: 34px;
  letter-spacing: .2px;
}

.section-header p {
  color: var(--smoke-dim);
  font-size: 15.5px;
  line-height: 1.9;
}

/* Ornamental flourish divider — a thin gold line tapering into a small
   diamond, echoing the eyebrow ornament above the heading. Implemented as a
   background-image so it drops onto every section heading automatically. */
.section-header h2::after,
.section-header h3::after,
.about-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='18' viewBox='0 0 170 18'%3E%3Cline x1='0' y1='9' x2='62' y2='9' stroke='%23B99A64' stroke-width='1'/%3E%3Cline x1='108' y1='9' x2='170' y2='9' stroke='%23B99A64' stroke-width='1'/%3E%3Ccircle cx='72' cy='9' r='2' fill='%23B99A64'/%3E%3Ccircle cx='98' cy='9' r='2' fill='%23B99A64'/%3E%3Crect x='79' y='2' width='12' height='12' fill='%23E89A4C' transform='rotate(45 85 8)'/%3E%3C/svg%3E");
}

/* === CATEGORY STRIP === */
.cats-strip {
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}

.cat-card {
  background: var(--bg-panel);
  padding: 44px 30px;
  text-align: center;
  transition: background .3s;
  position: relative;
  overflow: hidden;
}

.cat-card:hover {
  background: var(--bg-panel-2);
}

.cat-card .cat-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ember-bright);
  transition: all .3s;
}

.cat-card:hover .cat-icon {
  border-color: var(--ember);
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(201, 118, 47, 0.25);
}

.cat-card .cat-icon svg {
  width: 26px;
  height: 26px;
}

.cat-card .cat-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.cat-card h4 {
  font-size: 17px;
  color: var(--smoke);
  margin-bottom: 8px;
  font-weight: 600;
}

.cat-card span {
  font-size: 12.5px;
  color: var(--smoke-dim);
}

/* === PRODUCTS === */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.product-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: all .35s;
  position: relative;
}

.product-card:hover {
  border-color: var(--brass-dim);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
}

.product-media {
  position: relative;
  aspect-ratio: 1/1;
  background: linear-gradient(160deg, #1F1712, #171210);
  overflow: hidden;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.product-card:hover .product-media img {
  transform: scale(1.07);
}

.product-tag {
  position: absolute;
  top: 14px;
  right: 0;
  background: var(--wine);
  color: #E9E1D3;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 16px 6px 12px;
  letter-spacing: .3px;
  border-radius: 20px 0 0 20px;
  z-index: 2;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.4);
}

.product-wish {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a2f22;
  border: none;
  opacity: 0;
  transition: all .25s;
  z-index: 2;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35);
}

.product-card:hover .product-wish {
  opacity: 1;
}

.product-wish:hover {
  color: var(--wine);
}

.product-wish svg {
  width: 15px;
  height: 15px;
}

.product-info {
  padding: 20px 22px 22px;
}

.product-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.product-cat {
  font-size: 11.5px;
  color: var(--brass);
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-cat::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--ember-bright);
  font-size: 11px;
}

.product-rating svg {
  width: 12px;
  height: 12px;
}

.product-info h4,
.product-info h2 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--smoke);
  margin-bottom: 14px;
  line-height: 1.5;
}

.product-info h4 a,
.product-info h2 a {
  color: inherit;
}

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.product-price b {
  font-size: 19px;
  color: var(--ember-bright);
  font-family: var(--font-body);
  font-weight: 800;
}

.product-price s,
.product-price del {
  font-size: 12.5px;
  color: var(--smoke-dim);
  margin-right: 8px;
}

.product-price ins {
  text-decoration: none;
}

.add-cart-btn {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--brass-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--smoke);
  font-size: 13.5px;
  font-weight: 600;
  transition: all .25s;
  background: transparent;
  cursor: pointer;
}

.add-cart-btn:hover {
  background: linear-gradient(135deg, var(--ember), var(--ember-bright));
  border-color: var(--ember);
  color: #14100D;
}

.add-cart-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- section-light variant tweaks for the professional card look --- */
.section-light .product-tag {
  box-shadow: 0 6px 14px -4px rgba(20, 16, 13, 0.25);
}

.section-light .add-cart-btn {
  border-color: rgba(20, 16, 13, 0.18);
  color: #1c1611;
}

.section-light .add-cart-btn:hover {
  color: #14100D;
}

/* === PRODUCT SLIDER === */
.products-slider-wrap {
  position: relative;
}

.products-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 12px;
}

.products-slider::-webkit-scrollbar {
  display: none;
}

.products-slider .product-card {
  flex: 0 0 270px;
  scroll-snap-align: start;
}

.slider-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(20, 16, 13, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  color: #1c1611;
  box-shadow: 0 14px 30px -10px rgba(20, 16, 13, 0.3);
  transition: all .25s;
}

.slider-arrow:hover {
  background: var(--ember-bright);
  color: #171210;
  border-color: var(--ember-bright);
}

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

.slider-arrow.prev {
  right: -8px;
}

.slider-arrow.next {
  left: -8px;
}

@media (max-width:900px) {
  .slider-arrow {
    /* display: none; */
  }
}

.section-footer {
  text-align: center;
  margin-top: 56px;
}

/* === STORY / ABOUT === */
.story {
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.story-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.story-media {
  position: relative;
  max-width: 100%;
}

.story-media img {
  width: 100%;
  border-radius: 2px;
  filter: sepia(.15) saturate(1.05);
}

.story-media::before {
  content: '';
  position: absolute;
  inset: -16px;
  border: 1px solid var(--line);
  z-index: -1;
}

.story-media-tag {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: var(--bg-void);
  border: 1px solid var(--brass-dim);
  padding: 20px 26px;
  text-align: center;
}

.story-media-tag b {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--ember-bright);
}

.story-media-tag span {
  font-size: 12px;
  color: var(--smoke-dim);
  letter-spacing: .5px;
}

.story-content h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  color: var(--smoke);
  margin-bottom: 22px;
  line-height: 1.4;
}

.story-content p {
  color: var(--smoke-dim);
  line-height: 2;
  font-size: 15.5px;
  margin-bottom: 28px;
}

.story-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 34px;
}

.story-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.story-point .pt-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--brass-dim);
  color: var(--ember-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-point .pt-icon svg {
  width: 17px;
  height: 17px;
}

.story-point h5 {
  font-size: 14.5px;
  color: var(--smoke);
  margin-bottom: 4px;
  font-weight: 600;
}

.story-point p {
  font-size: 12.5px;
  color: var(--smoke-dim);
  margin: 0;
  line-height: 1.7;
}

/* === WHY US STRIP === */
.features {
  background: var(--bg-void);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.feature-item {
  background: var(--bg-void);
  padding: 38px 28px;
  text-align: center;
}

.feature-item svg {
  width: 30px;
  height: 30px;
  color: var(--ember-bright);
  margin-bottom: 16px;
}

.feature-item h5 {
  font-size: 15px;
  color: var(--smoke);
  margin-bottom: 8px;
  font-weight: 600;
}

.feature-item p {
  font-size: 12.5px;
  color: var(--smoke-dim);
  line-height: 1.8;
}

/* === FLAVORS BANNER === */
.flavor-banner {
  position: relative;
  padding: 100px 0;
  background:
    radial-gradient(ellipse 70% 100% at 80% 50%, rgba(91, 32, 24, 0.4), transparent 60%),
    linear-gradient(135deg, #1B140F, #14100D);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.flavor-content {
  max-width: 560px;
  position: relative;
  z-index: 2;
}

.flavor-content .section-eyebrow {
  justify-content: flex-start;
}

.flavor-content .section-eyebrow::after {
  display: none;
}

.flavor-content h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--smoke);
  margin-bottom: 20px;
  line-height: 1.4;
}

.flavor-content p {
  color: var(--smoke-dim);
  line-height: 2;
  margin-bottom: 30px;
  font-size: 15.5px;
}

.flavor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.flavor-tags span {
  border: 1px solid var(--brass-dim);
  padding: 8px 18px;
  font-size: 13px;
  color: var(--smoke-dim);
  transition: all .25s;
  display: inline-block;
}

.flavor-tags span:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}

/* === TESTIMONIALS === */
.testimonials {
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.test-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  padding: 34px;
}

.test-stars {
  color: var(--ember-bright);
  font-size: 14px;
  margin-bottom: 18px;
  letter-spacing: 2px;
}

.test-card p {
  color: var(--smoke-dim);
  line-height: 1.95;
  font-size: 14.5px;
  margin-bottom: 24px;
}

.test-person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.test-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--ember-bright);
  font-size: 17px;
}

.test-person b {
  display: block;
  font-size: 14px;
  color: var(--smoke);
}

.test-person span {
  font-size: 12px;
  color: var(--smoke-dim);
}

/* === NEWSLETTER / CTA === */
.cta-strip {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--wine), #3D140F);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-strip h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  color: #E9E1D3;
  margin-bottom: 16px;
}

.cta-strip p {
  color: rgba(233, 225, 211, 0.75);
  margin-bottom: 34px;
  font-size: 15.5px;
}

.cta-form {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  gap: 0;
  border: 1px solid rgba(233, 225, 211, 0.25);
}

.cta-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 20px;
  color: #E9E1D3;
  font-family: var(--font-body);
  font-size: 14px;
}

.cta-form input::placeholder {
  color: rgba(233, 225, 211, 0.5);
}

.cta-form input:focus {
  outline: none;
}

.cta-form button {
  background: var(--ember-bright);
  color: #171210;
  border: none;
  padding: 16px 30px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* === FOOTER === */
footer#site-footer {
  background: #14100D;
  padding-top: 80px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(185, 154, 100, 0.18);
}

.footer-brand .brand {
  margin-bottom: 20px;
}

.footer-brand p {
  color: #B8AC98;
  font-size: 14px;
  line-height: 2;
  margin-bottom: 24px;
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(185, 154, 100, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B8AC98;
  transition: all .25s;
}

.footer-socials a:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}

.footer-socials svg {
  width: 16px;
  height: 16px;
}

.footer-col h6 {
  font-family: var(--font-display);
  font-size: 17px;
  color: #E9E1D3;
  margin-bottom: 22px;
  font-weight: 700;
}

.footer-col ul li {
  margin-bottom: 13px;
}

.footer-col a {
  font-size: 14px;
  color: #B8AC98;
  transition: color .25s;
}

.footer-col a:hover {
  color: var(--ember-bright);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #B8AC98;
  margin-bottom: 16px;
  line-height: 1.8;
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  color: var(--ember-bright);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-bottom {
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #B8AC98;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom img {
  height: 44px;
  opacity: .85;
}

.footer-bottom-payments {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* === floating whatsapp / contact button === */
.float-contact {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 250;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ember), var(--ember-bright));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(201, 118, 47, 0.6);
}

.float-contact svg {
  width: 26px;
  height: 26px;
  color: #171210;
}

/* === RESPONSIVE === */
@media (max-width:1080px) {
  nav.mainnav {
    display: none;
  }

  .burger {
    display: flex;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    height: 440px;
    min-height: 0;
    order: -1;
  }

  .hero-product-img {
    max-height: 420px;
  }

  .hero-scroll-cue {
    display: none;
  }

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

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

  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-media {
    max-width: 440px;
    margin: 0 auto;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .test-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .container {
    padding: 0 18px;
  }

  .topbar-left span {
    display: none;
  }

  .header-inner {
    height: 76px;
  }

  .brand-text h1,
  .brand-text p {
    font-size: 19px;
  }

  .hero {
    min-height: auto;
    padding: 60px 0 50px;
  }

  .hero-visual {
    height: 340px;
  }

  .hero-product-img {
    max-height: 320px;
  }

  .hero-stats {
    gap: 22px;
    flex-wrap: wrap;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .products-slider .product-card {
    flex: 0 0 78vw;
  }

  .cats-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 64px 0;
  }

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

  .features-grid {
    grid-template-columns: 1fr;
  }

  .cta-form {
    flex-direction: column;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* === LIGHT / CREAM SECTIONS (catalog area, matches reference design) === */
.section-light {
  background: var(--smoke);
  color: #241d15;
}

.section-light .section-eyebrow {
  color: var(--ember);
}

.section-light .section-eyebrow::before,
.section-light .section-eyebrow::after {
  background: var(--brass-dim);
}

.section-light .section-header h2,
.section-light .section-header h3 {
  color: #1c1611;
}

.section-light .section-header p {
  color: #6b6156;
}

/* category cards on light bg — luxury framed tiles */
.cats-strip-light {
  background: var(--smoke);
  padding: 110px 0 20px;
}

.cats-strip-light .cats-grid {
  background: transparent;
  gap: 26px;
}

.cats-strip-light .cat-card {
  background: #171210;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  padding: 0;
  aspect-ratio: 1/1.05;
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(185, 154, 100, 0.35);
  box-shadow: 0 30px 60px -30px rgba(20, 16, 13, 0.35);
  transition: border-color .35s, box-shadow .35s, transform .35s;
}

.cats-strip-light .cat-card:hover {
  border-color: var(--ember);
  box-shadow: 0 40px 80px -30px rgba(20, 16, 13, 0.5), 0 0 0 1px rgba(201, 118, 47, 0.25);
  transform: translateY(-8px);
}

.cats-strip-light .cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
  transition: transform .6s, opacity .3s;
}

.cats-strip-light .cat-card:hover img {
  transform: scale(1.1);
  opacity: .6;
}

.cats-strip-light .cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.94) 0%, rgba(10, 8, 6, 0.2) 62%, transparent 100%);
  z-index: 1;
}

/* corner ornament — small gold bracket, luxury frame detail */
.cats-strip-light .cat-card::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 26px;
  height: 26px;
  border-top: 1px solid var(--brass);
  border-right: 1px solid var(--brass);
  opacity: .7;
  z-index: 2;
  transition: opacity .3s;
}

.cats-strip-light .cat-card:hover::after {
  opacity: 1;
  border-color: var(--ember-bright);
}

.cats-strip-light .cat-card .cat-body {
  position: relative;
  z-index: 2;
  padding: 32px 28px;
  width: 100%;
}

.cats-strip-light .cat-card .cat-index {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--brass);
  margin-bottom: 10px;
}

.cats-strip-light .cat-card h4 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: var(--smoke);
  margin-bottom: 12px;
  line-height: 1.4;
}

.cats-strip-light .cat-card span.cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--brass);
  letter-spacing: .3px;
  padding-top: 14px;
  border-top: 1px solid rgba(185, 154, 100, 0.25);
  width: 100%;
  transition: color .25s;
}

.cats-strip-light .cat-card:hover span.cat-link {
  color: var(--ember-bright);
}

.cats-strip-light .cat-card span.cat-link svg {
  width: 13px;
  height: 13px;
  transition: transform .25s;
}

.cats-strip-light .cat-card:hover span.cat-link svg {
  transform: translateX(-4px);
}

/* products on light bg — white cards */
.section-light .product-card {
  background: #fff;
  border: 1px solid rgba(20, 16, 13, 0.08);
}

.section-light .product-media {
  background: #f4f0e8;
}

.section-light .product-info h4,
.section-light .product-info h2 {
  color: #1c1611;
}

.section-light .product-price s,
.section-light .product-price del {
  color: #9a9184;
}

.section-light .add-cart-btn {
  border-color: rgba(20, 16, 13, 0.18);
  color: #1c1611;
}

.section-light .product-card:hover {
  border-color: var(--brass-dim);
  box-shadow: 0 24px 50px -24px rgba(20, 16, 13, 0.25);
}

.section-light .btn-outline {
  border-color: rgba(20, 16, 13, 0.25);
  color: #1c1611;
}

.section-light .btn-outline:hover {
  border-color: var(--ember);
  background: rgba(201, 118, 47, 0.06);
}

/* ===== ABOUT / WHY-US SPLIT (dark, image right) ===== */
.about-split {
  background: var(--bg-void);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 110px 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: 100px;
  align-items: center;
}

.about-content .section-eyebrow {
  justify-content: flex-start;
  margin-bottom: 22px;
}

.about-content .section-eyebrow::after {
  display: none;
}

.about-content h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 48px);
  color: var(--smoke);
  margin-bottom: 30px;
  line-height: 1.5;
  position: relative;
  padding-bottom: 32px;
}

.about-content h3::after {
  left: 0;
  transform: none;
}

.about-content p {
  color: var(--smoke-dim);
  line-height: 2.15;
  font-size: 16px;
  margin-bottom: 38px;
  max-width: 520px;
}

.about-checklist {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 42px;
}

.about-checklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--smoke);
}

.about-checklist svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ember-bright);
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  padding: 4px;
}

.about-media {
  position: relative;
  padding: 18px;
}

.about-media::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--brass-dim);
  z-index: 0;
}

.about-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 3px;
  filter: sepia(.1) saturate(1.05);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.about-media-tag {
  position: absolute;
  z-index: 2;
  bottom: -6px;
  left: -6px;
  background: var(--bg-void);
  border: 1px solid var(--brass-dim);
  padding: 22px 28px;
  text-align: center;
}

.about-media-tag b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--ember-bright);
}

.about-media-tag span {
  font-size: 12px;
  color: var(--smoke-dim);
  letter-spacing: .5px;
}

/* ===== BLOG TEASER (light, replaces Instagram strip) ===== */
.blog-teaser {
  background: var(--smoke);
  padding: 110px 0;
}

.blog-teaser .section-header h2,
.blog-teaser .section-header h3 {
  color: #1c1611;
}

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

.blog-card {
  background: #fff;
  border: 1px solid rgba(20, 16, 13, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: all .35s;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  border-color: var(--brass-dim);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -24px rgba(20, 16, 13, 0.25);
}

.blog-card-media {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: #f4f0e8;
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.07);
}

.blog-card-date {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #171210;
  color: var(--smoke);
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: .3px;
}

.blog-card-body {
  padding: 24px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-cat {
  font-size: 11.5px;
  color: var(--ember);
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.blog-card-cat::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
}

.blog-card-body h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: #1c1611;
  margin-bottom: 12px;
  line-height: 1.6;
}

.blog-card-body h3 a {
  color: inherit;
}

.blog-card-body h3 a:hover {
  color: var(--ember);
}

.blog-card-excerpt {
  color: #6b6156;
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 20px;
  flex: 1;
}

.blog-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1c1611;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 16, 13, 0.08);
}

.blog-card-more svg {
  width: 14px;
  height: 14px;
  transition: transform .25s;
}

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

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


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

  .about-media {
    max-width: 480px;
    margin: 0 auto;
    order: -1;
  }

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

@media (max-width:640px) {
  .cats-strip-light .cats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* WooCommerce base resets for shop/product pages (kept minimal here; homepage-focused theme) */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  list-style: none;
}

.woocommerce ul.products li.product {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 0;
  list-style: none;
}

/* =========================================================
   BLOG ARCHIVE (dark) — /blog listing, category/tag archives
   ========================================================= */
.blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 20px;
}

.blog-card--archive {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: all .35s;
  display: flex;
  flex-direction: column;
}

.blog-card--archive:hover {
  border-color: var(--brass-dim);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
}

.blog-card--archive .blog-card-media {
  background: linear-gradient(160deg, #1F1712, #171210);
}

.blog-card--archive .blog-card-date {
  background: var(--wine);
  color: var(--smoke);
}

.blog-card--archive .blog-card-body h3 {
  color: var(--smoke);
}

.blog-card--archive .blog-card-body h3 a {
  color: inherit;
}

.blog-card--archive .blog-card-excerpt {
  color: var(--smoke-dim);
}

.blog-card--archive .blog-card-more {
  color: var(--smoke);
  border-top-color: var(--line);
}

.blog-card--archive:hover .blog-card-more {
  color: var(--ember-bright);
}

.idh-pagination {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.idh-pagination .page-numbers {
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.idh-pagination a.page-numbers,
.idh-pagination span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--smoke-dim);
  font-size: 13.5px;
  transition: all .2s;
}

.idh-pagination a.page-numbers:hover,
.idh-pagination span.page-numbers.current {
  background: linear-gradient(135deg, var(--ember), var(--ember-bright));
  border-color: var(--ember);
  color: #14100D;
}

.idh-pagination span.dots {
  border: none;
  background: none;
  color: var(--smoke-dim);
}

.blog-empty {
  text-align: center;
  padding: 100px 20px;
  max-width: 440px;
  margin: 0 auto;
}

.blog-empty svg {
  width: 60px;
  height: 60px;
  color: var(--brass-dim);
  margin: 0 auto 24px;
}

.blog-empty h2 {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--smoke);
  margin-bottom: 12px;
}

.blog-empty p {
  color: var(--smoke-dim);
  margin-bottom: 28px;
  font-size: 14.5px;
  line-height: 1.9;
}

/* =========================================================
   SINGLE POST (dark)
   ========================================================= */
.post-single-wrap {
  max-width: 840px;
  margin: 0 auto;
}

.post-single-thumb {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 36px;
  border: 1px solid var(--line);
  aspect-ratio: 16/8;
  background: var(--bg-panel);
}

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

.post-single-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--smoke-dim);
}

.post-single-meta .post-cat {
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-single-meta .post-cat::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
}

.post-single-meta svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-left: 4px;
}

.post-single-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  color: var(--smoke);
  margin-bottom: 30px;
  line-height: 1.5;
}

.post-single-content {
  color: var(--smoke-dim);
  line-height: 2.15;
  font-size: 16px;
}

.post-single-content p {
  margin-bottom: 24px;
}

.post-single-content h2,
.post-single-content h3 {
  font-family: var(--font-display);
  color: var(--smoke);
  margin: 40px 0 20px;
  line-height: 1.6;
}

.post-single-content h2 {
  font-size: 26px;
}

.post-single-content h3 {
  font-size: 21px;
}

.post-single-content ul,
.post-single-content ol {
  margin: 0 0 24px;
  padding-right: 24px;
}

.post-single-content li {
  margin-bottom: 10px;
}

.post-single-content img {
  border-radius: 8px;
  margin: 24px 0;
}

.post-single-content a {
  color: var(--ember-bright);
  text-decoration: underline;
}

.post-single-content blockquote {
  border-right: 3px solid var(--ember);
  padding: 6px 24px;
  margin: 28px 0;
  color: var(--smoke);
  font-style: italic;
  background: rgba(185, 154, 100, 0.06);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.post-tags a {
  border: 1px solid var(--line);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  color: var(--smoke-dim);
  transition: all .2s;
}

.post-tags a:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}

.post-author-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 44px;
  padding: 28px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.post-author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--brass-dim);
}

.post-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-author-info b {
  display: block;
  font-size: 15.5px;
  color: var(--smoke);
  margin-bottom: 6px;
}

.post-author-info p {
  font-size: 13.5px;
  color: var(--smoke-dim);
  line-height: 1.8;
  margin: 0;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}

.post-nav-item {
  padding: 22px 24px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .25s;
}

.post-nav-item:hover {
  border-color: var(--brass-dim);
}

.post-nav-item span {
  display: block;
  font-size: 12px;
  color: var(--brass);
  margin-bottom: 8px;
}

.post-nav-item b {
  display: block;
  font-size: 14.5px;
  color: var(--smoke);
  line-height: 1.6;
}

.post-nav-item--next {
  text-align: left;
}

.related-posts {
  margin-top: 70px;
}

.related-posts .section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

@media (max-width:900px) {
  .blog-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-nav {
    grid-template-columns: 1fr;
  }
}

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

/* =========================================================
   ABOUT US PAGE (dark)
   ========================================================= */
.about-hero {
  position: relative;
  padding: 90px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 85% 20%, rgba(201, 118, 47, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(91, 32, 24, 0.25), transparent 60%),
    var(--bg-void);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.about-hero .idh-breadcrumb {
  justify-content: center;
  margin-bottom: 22px;
}

.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  color: var(--smoke);
  margin-bottom: 20px;
  line-height: 1.3;
}

.about-hero p {
  color: var(--smoke-dim);
  font-size: 16px;
  line-height: 2;
  max-width: 620px;
  margin: 0 auto;
}

.about-story {
  padding: 120px 0;
  background: var(--bg-void);
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.about-story-media {
  position: relative;
  padding: 18px;
}

.about-story-media::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--brass-dim);
}

.about-story-media img {
  position: relative;
  width: 100%;
  border-radius: 3px;
  filter: sepia(.1) saturate(1.05);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.about-story-content h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  color: var(--smoke);
  margin-bottom: 28px;
  line-height: 1.5;
  position: relative;
  padding-bottom: 30px;
}

.about-story-content h2::after {
  left: 0;
  transform: none;
}

.about-story-content p {
  color: var(--smoke-dim);
  line-height: 2.15;
  font-size: 16px;
  margin-bottom: 24px;
}

.about-values {
  padding: 110px 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

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

.about-value-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  padding: 40px 32px;
  text-align: center;
  transition: border-color .3s, transform .3s;
}

.about-value-card:hover {
  border-color: var(--brass-dim);
  transform: translateY(-6px);
}

.about-value-card .value-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ember-bright);
}

.about-value-card .value-icon svg {
  width: 26px;
  height: 26px;
}

.about-value-card h4 {
  font-size: 17px;
  color: var(--smoke);
  margin-bottom: 12px;
  font-weight: 700;
}

.about-value-card p {
  font-size: 14px;
  color: var(--smoke-dim);
  line-height: 1.9;
}

.about-team {
  padding: 120px 0;
  background: var(--bg-void);
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

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

.team-card-photo {
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
  background: linear-gradient(160deg, #1F1712, #171210);
  border: 1px solid var(--line);
}

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

.team-card b {
  display: block;
  font-size: 15.5px;
  color: var(--smoke);
  margin-bottom: 4px;
}

.team-card span {
  font-size: 12.5px;
  color: var(--brass);
}

@media (max-width:1080px) {
  .about-story-grid {
    grid-template-columns: 1fr;
  }

  .about-story-media {
    max-width: 480px;
    margin: 0 auto;
    order: -1;
  }

  .about-values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-team-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:640px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-team-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CONTACT US PAGE (dark)
   ========================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 60px;
  align-items: start;
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-info-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: border-color .25s;
}

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

.contact-info-card .info-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ember-bright);
}

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

.contact-info-card h5 {
  font-size: 14.5px;
  color: var(--smoke);
  margin-bottom: 8px;
  font-weight: 700;
}

.contact-info-card p {
  font-size: 13.5px;
  color: var(--smoke-dim);
  line-height: 1.85;
  margin: 0;
}

.contact-info-card a {
  color: inherit;
}

.contact-info-card a:hover {
  color: var(--ember-bright);
}

.contact-socials {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.contact-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--smoke-dim);
  transition: all .25s;
}

.contact-socials a:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}

.contact-socials svg {
  width: 18px;
  height: 18px;
}

.contact-form-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 40px;
}

.contact-form-panel h3 {
  font-family: var(--font-display);
  font-size: 23px;
  color: var(--smoke);
  margin-bottom: 10px;
}

.contact-form-panel>p {
  color: var(--smoke-dim);
  font-size: 14px;
  margin-bottom: 30px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.contact-form-row.full {
  grid-template-columns: 1fr;
}

.contact-form-group label {
  display: block;
  font-size: 13.5px;
  color: var(--smoke);
  margin-bottom: 8px;
  font-weight: 500;
}

.contact-form-group input,
.contact-form-group textarea {
  width: 100%;
  background: var(--bg-void);
  border: 1px solid var(--line);
  color: var(--smoke);
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
}

.contact-form-group input:focus,
.contact-form-group textarea:focus {
  outline: none;
  border-color: var(--ember);
}

.contact-form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form-submit {
  margin-top: 8px;
}

.contact-form-note {
  font-size: 12.5px;
  color: var(--smoke-dim);
  margin-top: 16px;
}

.contact-form-success {
  background: rgba(90, 150, 90, 0.12);
  border: 1px solid rgba(90, 150, 90, 0.4);
  color: #8fce8f;
  padding: 18px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 14px;
}

.contact-map {
  margin-top: 70px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.contact-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  filter: grayscale(.3) invert(.92) contrast(.9);
}

@media (max-width:1080px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-panel {
    padding: 26px;
  }
}

/* =========================================================
   COMMENTS (dark) — used on single.php via comments_template()
   ========================================================= */
.idh-comments {
  margin-top: 60px;
  padding-top: 50px;
  border-top: 1px solid var(--line);
}

.idh-comments-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--smoke);
  margin-bottom: 30px;
}

.idh-comment-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.idh-comment-list .children {
  list-style: none;
  margin-top: 24px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.idh-comment-list li {
  list-style: none;
}

.comment-body {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  gap: 16px;
}

.comment-body .avatar {
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--brass-dim);
}

.comment-body .comment-meta {
  margin-bottom: 10px;
}

.comment-body .fn {
  font-style: normal;
  font-weight: 700;
  color: var(--smoke);
  font-size: 14.5px;
}

.comment-body .comment-metadata {
  font-size: 12px;
  color: var(--smoke-dim);
  margin-top: 2px;
}

.comment-body .comment-metadata a {
  color: inherit;
}

.comment-body .comment-content p {
  color: var(--smoke-dim);
  font-size: 14px;
  line-height: 1.9;
  margin-top: 8px;
}

.comment-body .reply a {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--brass);
  border: 1px solid var(--line);
  padding: 5px 14px;
  border-radius: 20px;
  transition: all .2s;
}

.comment-body .reply a:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}

.idh-comments-closed {
  color: var(--smoke-dim);
  font-size: 14px;
  padding: 20px 0;
}

.idh-comment-form {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px;
}

.idh-comment-form>h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--smoke);
  margin-bottom: 22px;
}

.idh-comment-form .comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.idh-comment-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.idh-comment-field--half {
  flex: 1 1 calc(50% - 9px);
  min-width: 220px;
}

.idh-comment-field--full {
  flex: 1 1 100%;
}

.idh-comment-field label {
  font-size: 13.5px;
  color: var(--smoke);
  font-weight: 500;
}

.idh-comment-field input,
.idh-comment-field textarea {
  background: var(--bg-void);
  border: 1px solid var(--line);
  color: var(--smoke);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  width: 100%;
}

.idh-comment-field input:focus,
.idh-comment-field textarea:focus {
  outline: none;
  border-color: var(--ember);
}

.idh-comment-form .form-submit {
  flex: 1 1 100%;
  margin-top: 4px;
}

.idh-comment-form .form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  background: linear-gradient(135deg, var(--ember), var(--ember-bright));
  color: #171210;
  transition: all .3s;
  font-family: var(--font-body);
}

.idh-comment-form .form-submit input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(201, 118, 47, 0.5);
}

.idh-comment-form .comment-reply-title small a {
  color: var(--brass);
  font-size: 12px;
  margin-right: 10px;
}

@media (max-width:640px) {
  .idh-comment-field--half {
    flex: 1 1 100%;
  }

  .comment-body {
    flex-direction: column;
  }
}

/* =========================================================
   PAGE HEADER BANNER (breadcrumb + title) — always loaded,
   used on shop/product/cart/checkout/account AND blog/single
   post/about pages, regardless of WooCommerce being active.
   ========================================================= */
.shop-container {
  padding-top: 56px;
  padding-bottom: 100px;
}

.shop-page-header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  padding: 44px 0 40px;
  position: relative;
}

.shop-page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  color: var(--smoke);
  margin: 10px 0 8px;
}

.shop-page-header p {
  color: var(--smoke-dim);
  font-size: 14.5px;
  max-width: 640px;
}

.idh-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--smoke-dim);
}

.idh-breadcrumb a {
  color: var(--brass);
}

.idh-breadcrumb a:hover {
  color: var(--ember-bright);
}

.idh-breadcrumb span {
  color: var(--smoke-dim);
}

/* =========================================================
   LIGHT MODE — every page except the homepage
   ---------------------------------------------------------
   The header, topbar, mobile-nav-drawer and footer were just
   converted to fixed dark colors above (so they always match
   the brand regardless of page), which frees these five
   variables to be safely remapped here for interior pages.
   Every shop/product/cart/checkout/blog/post/about/contact
   component already reads these same variables, so they all
   re-skin themselves consistently in one place.
   ========================================================= */
body.page-light {
  background: #F5F1E7;
}

body.page-light::before {
  /* the warm ember glow overlay was designed for the dark homepage;
     it looks muddy over a light page, so it's simply turned off here */
  display: none;
}

body.page-light,
body.page-light .site-main,
body.page-light .shop-page-header {
  --bg-void: #F5F1E7;
  --bg-panel: #FFFFFF;
  --bg-panel-2: #FBF8F1;
  --smoke: #1C1611;
  --smoke-dim: #6B6156;
  --line: rgba(28, 22, 17, 0.10);
}

body.page-light .site-main {
  color: var(--smoke);
}

/* one spot relied on var(--smoke) as a light-colored label on a fixed dark
   wine badge — force it back to a light color specifically in light mode */
body.page-light .blog-card--archive .blog-card-date {
  color: #F5F1E7;
}

/* fixed dark placeholder gradients (image-loading fallback colors) —
   lightened so they don't look like black holes before the image paints */
body.page-light .product-gallery-main,
body.page-light .blog-card--archive .blog-card-media,
body.page-light .team-card-photo {
  background: linear-gradient(160deg, #EFE9DC, #E2D9C4);
}

/* subtle page texture instead of the dark ember glow, and softer shadows
   since white cards need a bit more visual separation on a light bg */
body.page-light .shop-page-header {
  box-shadow: 0 1px 0 rgba(28, 22, 17, 0.06);
}

body.page-light .product-card,
body.page-light .blog-card--archive,
body.page-light .shop-sidebar .widget,
body.page-light #order_review,
body.page-light .woocommerce-MyAccount-content,
body.page-light .woocommerce-MyAccount-navigation ul,
body.page-light .post-author-box,
body.page-light .post-nav-item,
body.page-light .idh-comment-form,
body.page-light .comment-body,
body.page-light .about-value-card,
body.page-light .contact-info-card,
body.page-light .contact-form-panel,
body.page-light .cart-summary-box,
body.page-light .wc_payment_method {
  box-shadow: 0 2px 14px -4px rgba(28, 22, 17, 0.08);
}

/* =========================================================
   SEARCH OVERLAY
   ========================================================= */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 8, 6, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.search-overlay.open {
  opacity: 1;
  visibility: visible;
}

.search-overlay-close {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(233, 225, 211, 0.25);
  background: transparent;
  color: #E9E1D3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s;
}

.search-overlay-close:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}

.search-overlay-form {
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--brass-dim);
  padding-bottom: 18px;
}

.search-overlay-form svg {
  width: 24px;
  height: 24px;
  color: var(--brass);
  flex-shrink: 0;
}

.search-overlay-form input[type="search"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 22px;
  color: #E9E1D3;
  font-family: var(--font-body);
}

.search-overlay-form input[type="search"]::placeholder {
  color: rgba(233, 225, 211, 0.4);
}

.search-overlay-form button {
  background: linear-gradient(135deg, var(--ember), var(--ember-bright));
  color: #171210;
  border: none;
  padding: 12px 26px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .25s;
  flex-shrink: 0;
}

.search-overlay-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(201, 118, 47, 0.5);
}

.search-overlay-hint {
  font-size: 12.5px;
  color: rgba(233, 225, 211, 0.4);
}

@media (max-width:640px) {
  .search-overlay-form {
    max-width: 100%;
  }

  .search-overlay-form input[type="search"] {
    font-size: 17px;
  }
}

/* =========================================================
   SEARCH RESULTS (mixed products + posts)
   ========================================================= */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 20px;
}

@media (max-width:900px) {
  .search-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .search-results-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   404 PAGE
   ========================================================= */
.error-404-wrap {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 110px 20px 120px;
}

.error-404-code {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 10vw, 110px);
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, var(--ember), var(--brass));
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 10px;
}

.error-404-wrap h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--smoke);
  margin-bottom: 14px;
}

.error-404-wrap>p {
  color: var(--smoke-dim);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 34px;
}

.error-404-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 6px 6px 18px;
  margin-bottom: 34px;
}

.error-404-search svg {
  width: 18px;
  height: 18px;
  color: var(--smoke-dim);
  flex-shrink: 0;
}

.error-404-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--smoke);
  font-size: 14px;
  font-family: var(--font-body);
  padding: 10px 0;
}

.error-404-search input::placeholder {
  color: var(--smoke-dim);
}

.error-404-search button {
  background: linear-gradient(135deg, var(--ember), var(--ember-bright));
  color: #171210;
  border: none;
  padding: 11px 22px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .25s;
  flex-shrink: 0;
}

.error-404-search button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(201, 118, 47, 0.5);
}

.error-404-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}


/***************************************THE FIXED SHOP ARCHIVE PAGE********************************************/
/* PREMIUM SHOP — visual layer only; grid-template-columns values below are
   deliberately kept identical to the working values (260px 1fr / repeat(3,1fr)) */

/* ===== HERO ===== */
.idh-shop-hero{
  position:relative;
  padding:120px 0 90px;
  background:
    radial-gradient(circle at center, rgba(201,118,47,.18), transparent 45%),
    #120e0b;
  text-align:center;
  overflow:hidden;
}
.idh-shop-hero-glow{
  position:absolute;border-radius:50%;
  filter:blur(60px);pointer-events:none;
  opacity:.55;
}
.idh-shop-hero-glow--a{width:320px;height:320px;top:-80px;right:8%;background:radial-gradient(circle,rgba(232,154,76,.4),transparent 70%);}
.idh-shop-hero-glow--b{width:280px;height:280px;bottom:-100px;left:6%;background:radial-gradient(circle,rgba(91,32,24,.5),transparent 70%);}

.idh-shop-breadcrumb{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;color:#B8AC98;margin-bottom:26px;
}
.idh-shop-breadcrumb a{color:#B99A64;transition:color .2s;}
.idh-shop-breadcrumb a:hover{color:#E89A4C;}
.idh-shop-breadcrumb span{color:#7d7364;}

.idh-shop-heading{position:relative;z-index:1;}
.idh-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12.5px;letter-spacing:4px;color:#B99A64;
  margin-bottom:6px;
}
.idh-eyebrow::before,.idh-eyebrow::after{content:'';width:28px;height:1px;background:#8A7451;}

.idh-shop-heading h1{
  font-family:var(--font-display);
  font-size:clamp(34px,4.6vw,58px);
  font-weight:800;
  margin:18px 0 20px;
  color:#f3e8d4;
  position:relative;
  padding-bottom:30px;
}
.idh-shop-heading h1::after{
  content:'';
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:150px;height:16px;
  background-repeat:no-repeat;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='16' viewBox='0 0 150 16'%3E%3Cline x1='0' y1='8' x2='55' y2='8' stroke='%23B99A64' stroke-width='1'/%3E%3Cline x1='95' y1='8' x2='150' y2='8' stroke='%23B99A64' stroke-width='1'/%3E%3Ccircle cx='63' cy='8' r='2' fill='%23B99A64'/%3E%3Ccircle cx='87' cy='8' r='2' fill='%23B99A64'/%3E%3Crect x='69' y='2' width='12' height='12' fill='%23E89A4C' transform='rotate(45 75 8)'/%3E%3C/svg%3E");
}
.idh-shop-heading p{
  color:#b8ac98;max-width:560px;margin:0 auto;
  font-size:15.5px;line-height:1.9;
}

/* ===== TOOLBAR ===== */
.idh-shop-area{padding:70px 0 90px;}
.idh-shop-controls{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  margin-bottom:40px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 22px;
}
.idh-result{font-size:13.5px;color:var(--smoke-dim);}
.idh-order select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:var(--bg-void)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B99A64' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat left 14px center;
  border:1px solid var(--line);color:var(--smoke);
  padding:10px 40px 10px 16px;border-radius:8px;font-size:13.5px;cursor:pointer;
  transition:border-color .2s;
  font-family: 'IRANSans', Tahoma, 'Segoe UI', Arial, sans-serif;
}
.idh-order select:hover{border-color:var(--brass-dim);}
.idh-order select:focus{outline:none;border-color:var(--ember);}
.idh-order select::-ms-expand{display:none;}

/* ===== LAYOUT — grid-template-columns intentionally unchanged ===== */
.idh-shop-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:50px;
  align-items:flex-start;
}

/* ===== SIDEBAR WIDGETS ===== */
.idh-shop-sidebar{display:flex;flex-direction:column;gap:22px;position:sticky;top:112px;}

.idh-filter-card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  padding:26px;
  border-radius:16px;
  transition:border-color .3s, box-shadow .3s;
}
.idh-filter-card:hover{border-color:var(--brass-dim);}
.idh-filter-card h3{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:15px;font-weight:700;
  color:var(--ember-bright);
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.idh-filter-card h3 svg{width:18px;height:18px;flex-shrink:0;color:var(--brass);}

.idh-cat-list{display:flex;flex-direction:column;gap:2px;}
.idh-cat-list li{list-style:none;}
.idh-cat-list li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:8px;
  color:var(--smoke-dim);font-size:14px;
  transition:all .2s;
}
.idh-cat-list li a:hover,
.idh-cat-list li.is-active a{
  color:var(--ember-bright);background:rgba(201,118,47,.1);
}
.idh-cat-list li a em{
  font-style:normal;font-size:11px;color:var(--brass-dim);
  background:rgba(185,154,100,.14);
  border-radius:20px;padding:1px 9px;
}
.idh-cat-list li.is-active a em{color:var(--ember-bright);background:rgba(201,118,47,.16);}
.idh-cat-list .idh-empty-note{padding:10px 4px;color:var(--brass-dim);font-size:13px;}

/* Price filter form */
.idh-price-form .idh-price-inputs{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
.idh-price-field{display:flex;flex-direction:column;gap:6px;}
.idh-price-field label{font-size:11.5px;color:var(--brass-dim);}
.idh-price-field input{
  background:var(--bg-void);border:1px solid var(--line);color:var(--smoke);
  padding:10px 12px;border-radius:8px;font-size:13px;width:100%;
  -moz-appearance:textfield;
}
.idh-price-field input::-webkit-outer-spin-button,
.idh-price-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.idh-price-field input:focus{outline:none;border-color:var(--ember);}
.idh-filter-submit{
  width:100%;background:transparent;border:1px solid var(--brass-dim);color:var(--smoke);
  padding:11px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);transition:all .25s;
}
.idh-filter-submit:hover{background:rgba(201,118,47,.12);border-color:var(--ember);color:var(--ember-bright);}

/* Promo card */
.idh-promo-card{
  border-radius:16px;overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-panel);
  transition:border-color .3s;
}
.idh-promo-card:hover{border-color:var(--brass-dim);}
.idh-promo-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.idh-promo-body{padding:22px;}
.idh-promo-body h4{font-size:15px;color:var(--smoke);margin-bottom:8px;font-family:var(--font-display);}
.idh-promo-body p{font-size:12.5px;color:var(--smoke-dim);line-height:1.8;margin-bottom:16px;}
.idh-promo-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--brass-dim);color:var(--smoke);
  padding:11px 14px;border-radius:8px;font-size:13px;font-weight:600;
  transition:all .25s;
}
.idh-promo-btn svg{width:15px;height:15px;}
.idh-promo-btn:hover{background:rgba(201,118,47,.12);border-color:var(--ember);color:var(--ember-bright);}

/* ===== PRODUCT GRID — grid-template-columns intentionally unchanged ===== */
.idh-products-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.idh-product-card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transition:transform .35s, border-color .35s, box-shadow .35s;
  display:flex;flex-direction:column;
}
.idh-product-card:hover{
  transform:translateY(-8px);
  border-color:var(--ember);
  box-shadow:0 30px 60px -24px rgba(28,22,17,.22);
}

.idh-product-image{
  position:relative;
  display:block;
  background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  aspect-ratio:1/1;
  padding:35px;
  overflow:hidden;
}
.idh-product-image-link{display:block;width:100%;height:100%;}
.idh-product-image img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .5s ease;
  filter:drop-shadow(0 18px 24px rgba(28,22,17,.18));
}
.idh-product-card:hover .idh-product-image img{transform:scale(1.06);}

.idh-product-flag{
  position:absolute;top:16px;right:0;
  font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:6px 16px 6px 14px;border-radius:20px 0 0 20px;
  color:#F5F1E7;
  background:linear-gradient(135deg,var(--wine),#3D140F);
  z-index:2;
}
.idh-product-flag--out{background:#5c5044;color:#ECE5D6;}

.idh-product-info{
  padding:24px 24px 26px;
  text-align:center;
  display:flex;flex-direction:column;flex:1;
}
.idh-product-cat{
  font-size:11px;letter-spacing:.6px;color:var(--brass);
  margin-bottom:8px;
}
.idh-product-rating{
  color:var(--ember-bright);font-size:12px;letter-spacing:2px;margin-bottom:10px;
}

.idh-product-info h2{
  font-size:16.5px;font-weight:700;
  min-height:48px;
  margin-bottom:4px;
  line-height:1.5;
}
.idh-product-info h2 a{color:var(--smoke);transition:color .2s;}
.idh-product-info h2 a:hover{color:var(--ember-bright);}

.idh-price{
  margin:6px 0 18px;
  color:var(--ember-bright);font-size:19px;font-weight:800;
  font-family:var(--font-display);
}
.idh-price del{
  font-size:13.5px;font-weight:500;color:var(--smoke-dim);
  margin-left:8px;text-decoration:line-through;
}
.idh-price ins{text-decoration:none;}

.idh-product-button{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:auto;
  padding:13px;
  border-radius:50px;
  background:linear-gradient(135deg,var(--ember),var(--ember-bright));
  color:#171210;
  font-size:13.5px;font-weight:700;
  transition:all .3s;
  position:relative;overflow:hidden;
}
.idh-product-button svg{width:16px;height:16px;flex-shrink:0;}
.idh-product-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -10px rgba(201,118,47,.55);
}
.idh-product-button--disabled{
  background:rgba(185,154,100,.14);color:var(--brass-dim);
  cursor:not-allowed;pointer-events:none;
}

/* ===== PAGINATION ===== */
.idh-shop-pagination{display:flex;justify-content:center;margin-top:56px;}
.idh-shop-pagination .page-numbers{
  list-style:none;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.idh-shop-pagination a.page-numbers,
.idh-shop-pagination span.page-numbers{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line);color:var(--smoke-dim);font-size:13.5px;
  transition:all .2s;
}
.idh-shop-pagination a.page-numbers:hover,
.idh-shop-pagination span.page-numbers.current{
  background:linear-gradient(135deg,#C9762F,#E89A4C);border-color:#C9762F;color:#14100D;
}

/* ===== EMPTY STATE ===== */
.idh-empty-state{
  text-align:center;padding:80px 20px;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;
}
.idh-empty-state svg{width:52px;height:52px;color:var(--brass-dim);margin:0 auto 20px;}
.idh-empty-state p{color:var(--smoke-dim);font-size:14.5px;}

@media(max-width:900px){

  .idh-shop-layout{
    grid-template-columns:1fr;
  }
  .idh-shop-sidebar{position:static;}

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

}



@media(max-width:600px){

  .idh-products-grid{
    grid-template-columns:1fr;
  }


  .idh-shop-heading h1{
    font-size:34px;
  }

  .idh-shop-controls{flex-direction:column;align-items:stretch;text-align:center;}

}

.section-footer .btn-outline {
  color: var(--wine-bright) !important;
}

.idh-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ember-bright) !important;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: border-color 0.25s, color 0.25s;
  white-space: nowrap;
}

.idh-lang-btn:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}