/*
Theme Name: Lunology Theme
Theme URI: 
Author: Lunology
Author URI: 
Description: Lunology Custom WordPress Theme converted from HTML project.
Version: 1.0.57
Text Domain: lunology
*/

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ── CSS Custom Properties (Theme) ─────────────────────────── */
:root {
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', -apple-system, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;

  /* Light Theme */
  --background: #ffffff;
  --foreground: #0f0f0f;
  --card: rgba(76, 85, 120, 0.03);
  --card-foreground: #0f0f0f;
  --popover: #ffffff;
  --popover-foreground: #0f0f0f;
  --primary: #3d4461;
  --primary-foreground: #ffffff;
  --banner-bg: #3d4461;
  --banner-foreground: #ffffff;
  --secondary: #d4d4d8;
  --secondary-foreground: #0f0f0f;
  --muted: rgba(76, 85, 120, 0.06);
  --muted-foreground: #52525b;
  --accent: #3d4461;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: rgba(76, 85, 120, 0.2);
  --input-background: rgba(76, 85, 120, 0.04);
  --ring: #3d4461;
  --radius: 0.5rem;

  --nav-height: 80px;
}

/* Dark Theme */
html.dark {
  --background: #0a0a12;
  --foreground: #f5f5f7;
  --card: rgba(76, 85, 120, 0.08);
  --card-foreground: #f5f5f7;
  --popover: #1a1a24;
  --popover-foreground: #f5f5f7;
  --primary: #4c5578;
  --primary-foreground: #ffffff;
  --banner-bg: #1a1a24;
  --banner-foreground: #f5f5f7;
  --secondary: #e6e6e6;
  --secondary-foreground: #0a0a12;
  --muted: rgba(230, 230, 230, 0.1);
  --muted-foreground: rgba(245, 245, 247, 0.6);
  --accent: #4c5578;
  --accent-foreground: #ffffff;
  --destructive: #d4183d;
  --border: rgba(76, 85, 120, 0.2);
  --input-background: rgba(76, 85, 120, 0.1);
  --ring: #4c5578;

  --message-bg: color-mix(in srgb, #1a8a5a 20%, transparent);
  --message-color: #2ecc71;
  --error-bg: color-mix(in srgb, #c0392b 20%, transparent);
  --error-color: #e74c3c;
  --info-bg: color-mix(in srgb, #1565c0 20%, transparent);
  --info-color: #3498db;
}

/* ── Arabic font override ───────────────────────────────────── */
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] label,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: var(--font-arabic);
}

/* ── Arabic RTL Arrows ──────────────────────────────────────── */
html[dir="rtl"] .hero-cta svg,
html[dir="rtl"] .btn svg {
  transform: scaleX(-1);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  line-height: 1.3;
  font-weight: 500;
}

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

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: 1rem;
}

ul,
ol {
  list-style: none;
}

/* ── Layout Utility ─────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

.page-wrapper {
  padding-top: var(--nav-height);
  min-height: 100vh;
}

/* ── Skip Link ──────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  left: -9999px;
  top: 1rem;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  z-index: 1000;
  font-weight: 500;
}

.skip-link:focus {
  left: 1rem;
}

.pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.mt-50 {
  margin-top: 50px;
}

/* ── Navigation ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(var(--background-rgb, 255 255 255), 0.9);
  background-color: color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  height: var(--nav-height);
}

body.admin-bar .nav {
  top: 32px;
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

@media (min-width: 640px) {
  .nav-inner {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .nav-inner {
    padding: 0 2rem;
  }
}

.nav-logo img,
.custom-logo-link img {
  height: 48px;
  width: auto;
  max-height: 48px;
  object-fit: contain;
}

/* Desktop nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

.nav-link {
  position: relative;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  color: var(--foreground);
  transition: color 0.2s;
}

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

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

/* WP Menu overrides */
.primary-menu-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-menu-list li a {
  position: relative;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  color: var(--foreground);
  transition: color 0.2s;
}

.primary-menu-list li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 0.3s;
}

.primary-menu-list li a:hover::after {
  width: 100%;
}

.nav-icon-btn {
  padding: 0.5rem;
  color: var(--foreground);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.nav-icon-btn:hover {
  color: var(--primary);
}

/* Mobile nav toggles */
.nav-mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav-mobile-actions {
    display: none;
  }
}

/* ── Mega Menu ──────────────────────────────────────────────── */
.mega-menu-wrapper {
  position: relative;
}

.mega-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  color: var(--foreground);
  transition: color 0.2s;
  padding: 0.25rem 0;
}

.mega-menu-trigger:hover {
  color: var(--primary);
}

.mega-menu-trigger svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.mega-menu-wrapper.open .mega-menu-trigger svg {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: 650px;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 100;
}

.mega-menu-wrapper.open .mega-menu,
.mega-menu-wrapper:hover .mega-menu,
.mega-menu-wrapper:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1.5rem;
  gap: 1.5rem;
}

.mega-menu-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
  padding: 0 0.5rem;
}

.mega-menu-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  transition: background 0.15s;
  color: var(--foreground);
}

.mega-menu-product:hover {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}

.mega-menu-product-name {
  font-size: 0.875rem;
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s;
}

.mega-menu-product:hover .mega-menu-product-name {
  color: var(--primary);
}

.mega-menu-product-sub {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.mega-menu-divider {
  border-left: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  padding-left: 1.5rem;
}

.mega-menu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
  transition: background 0.15s, color 0.15s;
}

.mega-menu-link:hover {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
  color: var(--primary);
}

.mega-menu-link svg {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  transition: transform 0.2s;
}

.mega-menu-link:hover svg {
  transform: rotate(-90deg) translateY(-2px);
}

/* ── Cart Badge ─────────────────────────────────────────────── */
.cart-btn-wrapper {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 50%;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-badge.hidden {
  display: none;
}

/* ── Cart Dropdown ──────────────────────────────────────────── */
.cart-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 384px;
  max-width: calc(100vw - 2rem);
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 200;
  display: none;
}

@media (max-width: 640px) {
  .cart-dropdown {
    position: fixed;
    top: var(--nav-height);
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
  }
}

html[dir="rtl"] .cart-dropdown {
  right: auto;
  left: 0;
}

.cart-dropdown.open {
  display: block;
  animation: dropIn 0.2s ease;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }

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

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 30%, transparent);
}

.cart-header h3 {
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-header h3 svg {
  width: 20px;
  height: 20px;
}

.cart-close {
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: background 0.15s;
  color: var(--foreground);
}

.cart-close:hover {
  background: var(--muted);
}

.cart-items {
  max-height: 384px;
  overflow-y: auto;
}

.cart-empty {
  padding: 2rem;
  text-align: center;
  color: var(--muted-foreground);
}

.cart-empty svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  opacity: 0.3;
}

.cart-items-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cart-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.cart-item:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.cart-item-img {
  width: 80px;
  height: 80px;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--muted);
}

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

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.qty-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  transition: border-color 0.15s, background 0.15s;
}

.qty-btn:hover {
  border-color: var(--primary);
  background: var(--muted);
}

.qty-btn svg {
  width: 12px;
  height: 12px;
}

.qty-value {
  font-size: 0.875rem;
  width: 32px;
  text-align: center;
}

.cart-item-price {
  font-size: 0.875rem;
  text-align: end;
}

.cart-item-vat {
  font-size: 0.625rem;
  color: var(--muted-foreground);
}

.cart-item-remove {
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: var(--foreground);
  transition: background 0.15s, color 0.15s;
}

.cart-item-remove:hover {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
}

.cart-item-remove svg {
  width: 16px;
  height: 16px;
}

.cart-footer {
  padding: 1rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 30%, transparent);
}

.cart-total {
  margin-bottom: 1rem;
}

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

.cart-total-label {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.cart-total-amount {
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

.cart-vat-note {
  font-size: 0.625rem;
  color: var(--muted-foreground);
  text-align: end;
  margin-top: 2px;
}

.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 0.75rem;
  font-weight: 500;
  transition: box-shadow 0.2s;
}

.cart-checkout-btn:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 20%, transparent);
}

.cart-checkout-btn svg {
  width: 16px;
  height: 16px;
}

/* ── Mobile Menu ────────────────────────────────────────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

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

.mobile-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 90%;
  max-width: 360px;
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -25px 0 50px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html[dir="rtl"] .mobile-menu {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
}

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

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to right, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
  flex-shrink: 0;
}

.mobile-menu-header img {
  height: 40px;
  width: auto;
}

.mobile-menu-close {
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: var(--foreground);
  transition: background 0.15s;
}

.mobile-menu-close:hover {
  background: var(--muted);
}

.mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

.mobile-menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1rem;
}

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

.mobile-nav-link,
.mobile-menu-nav li a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: var(--foreground);
  transition: background 0.15s;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-menu-nav li a:hover {
  background: var(--muted);
}

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

.mobile-settings-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  border-radius: 0.5rem;
  color: var(--foreground);
  transition: background 0.15s;
  margin-bottom: 0.25rem;
}

.mobile-settings-btn:hover {
  background: var(--muted);
}

.mobile-settings-btn svg {
  width: 20px;
  height: 20px;
}

.mobile-menu-footer {
  padding: 1.25rem;
  border-top: 1px solid var(--border);
  background: linear-gradient(to right, color-mix(in srgb, var(--muted) 20%, transparent), transparent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-footer span {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.social-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.social-link {
  color: var(--muted-foreground);
  transition: color 0.2s;
}

.social-link:hover {
  color: var(--primary);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

/* ── Hero Section ───────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 3rem 0 5rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--primary) 10%, transparent), var(--background) 100%);
  pointer-events: none;
}

.hero-stars {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--foreground);
  border-radius: 50%;
  animation: twinkle var(--duration, 4s) infinite var(--delay, 0s);
}

@keyframes twinkle {

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

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

.hero-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .hero-inner {
    padding: 0 1.5rem;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.hero-text {
  text-align: center;
  animation: fadeSlideIn 1s ease both;
}

@media (min-width: 1024px) {
  .hero-text {
    text-align: start;
  }
}

html[dir="rtl"] .hero-text {
  text-align: center;
}

@media (min-width: 1024px) {
  html[dir="rtl"] .hero-text {
    text-align: right;
  }
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-sparkle {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  animation: float 3s ease-in-out infinite;
}

@media (min-width: 1024px) {
  .hero-sparkle {
    justify-content: flex-start;
  }
}

html[dir="rtl"] .hero-sparkle {
  justify-content: center;
}

@media (min-width: 1024px) {
  html[dir="rtl"] .hero-sparkle {
    justify-content: flex-start;
  }
}

.hero-sparkle svg {
  width: 48px;
  height: 48px;
  color: var(--primary);
}

@media (max-width: 640px) {
  .hero-sparkle svg {
    width: 40px;
    height: 40px;
  }
}

@keyframes float {

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

  50% {
    transform: translateY(-10px);
  }
}

.hero-title {
  font-size: clamp(3rem, 8vw, 5rem);
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
}

@media (min-width: 768px) {
  .hero-title {
    font-size: clamp(3.5rem, 9vw, 6rem);
  }
}

@media (min-width: 1280px) {
  .hero-title {
    font-size: 5rem;
  }
}

.hero-tagline {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--muted-foreground);
  margin-bottom: 3rem;
  line-height: 1.7;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .hero-tagline {
    margin-left: 0;
  }
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 9999px;
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: 500;
  transition: transform 0.3s, box-shadow 0.3s;
}

.hero-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--primary) 30%, transparent);
}

.hero-cta svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}

.hero-cta:hover svg {
  transform: translateX(4px);
}

/* Moon Visual */
.hero-moon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  height: 400px;
}

@media (min-width: 640px) {
  .hero-moon-container {
    height: 500px;
  }
}

@media (min-width: 1024px) {
  .hero-moon-container {
    height: 600px;
    justify-content: flex-end;
  }
}

.hero-moon {
  position: relative;
  width: 256px;
  height: 256px;
  animation: moonFloat 12s ease-in-out infinite;
}

@media (min-width: 640px) {
  .hero-moon {
    width: 320px;
    height: 320px;
  }
}

@media (min-width: 1024px) {
  .hero-moon {
    width: 384px;
    height: 384px;
  }
}

@keyframes moonFloat {

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

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

.moon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(76, 85, 120, 0.3);
  box-shadow: 0 0 40px rgba(76, 85, 120, 0.4), inset 0 0 40px rgba(76, 85, 120, 0.2);
  animation: moonPulse 4s ease-in-out infinite;
}

html.dark .moon-ring {
  border-color: rgba(76, 85, 120, 0.3);
  box-shadow: 0 0 40px rgba(76, 85, 120, 0.4), inset 0 0 40px rgba(76, 85, 120, 0.2);
}

.moon-outer-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(76, 85, 120, 0.4);
  opacity: 0.2;
  animation: moonSpin 20s linear infinite, moonScalePulse 6s ease-in-out infinite;
}

@keyframes moonPulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.02)
  }
}

@keyframes moonSpin {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes moonScalePulse {

  0%,
  100% {
    opacity: 0.2;
    transform: rotate(0deg) scale(1)
  }

  50% {
    opacity: 0.25;
    transform: rotate(180deg) scale(1.05)
  }
}

.moon-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(200, 210, 255, 0.4), rgba(76, 85, 120, 0.2) 50%, transparent 70%);
  filter: blur(40px);
  animation: moonGlowPulse 8s ease-in-out infinite;
}

@keyframes moonGlowPulse {

  0%,
  100% {
    opacity: 0.3
  }

  50% {
    opacity: 0.5
  }
}

.moon-surface {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(76, 85, 120, 0.2), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(76, 85, 120, 0.15), transparent 40%);
  opacity: 0.4;
}

.moon-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(76, 85, 120, 0.3), rgba(76, 85, 120, 0.08));
  animation: moonBaseGlow 6s ease-in-out infinite;
}

@keyframes moonBaseGlow {

  0%,
  100% {
    opacity: 0.3
  }

  50% {
    opacity: 0.4
  }
}

.moon-crater {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  background: rgba(76, 85, 120, 0.15);
}

.crater-1 {
  top: 25%;
  left: 33%;
  width: 48px;
  height: 48px;
}

.crater-2 {
  top: 50%;
  right: 33%;
  width: 32px;
  height: 32px;
}

.crater-3 {
  bottom: 33%;
  left: 50%;
  width: 40px;
  height: 40px;
}

.hero-orb {
  position: absolute;
  bottom: 25%;
  left: 25%;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 70%, rgba(76, 85, 120, 0.4), transparent);
  filter: blur(50px);
  opacity: 0.1;
  pointer-events: none;
  animation: orbFloat 10s ease-in-out infinite;
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-20px, 40px) scale(1.15);
  }
}

/* ── Global Section Spacing System ────────────────────────────── */
:root {
  --section-py: 3rem;
  --section-px: 1rem;
  --section-py-sm: 2rem;
}

@media (min-width: 768px) {
  :root {
    --section-py: 4.5rem;
    --section-px: 1.5rem;
    --section-py-sm: 3rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-py: 6rem;
    --section-px: 2rem;
    --section-py-sm: 4rem;
  }
}

.section,
.page-banner,
.about-preview,
.featured-products,
.philosophy-section,
.newsletter-section,
.about-hero,
.lunology-page-header,
.lunology-cart-section,
.lunology-checkout-section,
.shop-hero {
  padding: var(--section-py) var(--section-px) !important;
}

.section-sm,
.moon-widget,
.pre-footer,
.about-section,
.elements-balance-section,
.bio-shop-section,
.bio-app-section {
  padding: var(--section-py-sm) var(--section-px) !important;
}

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

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--muted-foreground);
  font-size: 1rem;
}

p#featured-subtitle {
  margin-bottom: 2.5rem;
}

/* Appear on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ── Banner (used on inner pages) ──────────────────────────── */
.page-banner {
  position: relative;
  background-color: var(--banner-bg);
  color: var(--banner-foreground);
  text-align: center;
  overflow: hidden;
}

.page-banner::before {
  content: '';
  position: absolute;
  top: 25%;
  right: 25%;
  width: 384px;
  height: 384px;
  background: white;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.1;
  pointer-events: none;
}

.page-banner h1 {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
}

.page-banner p {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* ── About Preview ──────────────────────────────────────────── */
.about-preview {
  position: relative;
}

.about-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--background), color-mix(in srgb, var(--primary) 5%, transparent), var(--background));
  pointer-events: none;
}

.about-preview-inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.about-preview h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2rem;
}

.about-preview p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.2s;
}

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

.btn-primary:hover {
  box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 25%, transparent);
}

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

.btn-outline:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 20%, transparent);
}

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

.btn-ghost:hover {
  background: var(--muted);
}

.btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.btn:hover svg {
  transform: translateX(4px);
}

/* ── Product Card ───────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}

@media (min-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .products-grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.product-card {
  display: block;
  color: var(--foreground);
}

.product-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: border-color 0.2s, box-shadow 0.3s;
  margin-bottom: 0.75rem;
  background: var(--muted);
}

.product-card:hover .product-card-image {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--primary) 10%, transparent);
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

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

.product-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--background) 90%, transparent), color-mix(in srgb, var(--background) 20%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

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

.product-out-of-stock {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-out-of-stock span {
  padding: 0.375rem 0.75rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.75rem;
}

.product-card-subcategory {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.product-card-name {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.5vw, 1.2rem);
  transition: color 0.2s;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card:hover .product-card-name {
  color: var(--primary);
}

.product-card-desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.product-card-price {
  font-size: 0.875rem;
}

.product-card-vat {
  font-size: 0.625rem;
  color: var(--muted-foreground);
  margin-top: 1px;
}

.featured-products {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--primary) 5%, transparent));
}

.featured-products.has-custom-bg {
  background-color: var(--section-bg);
  background-image: none;
}

html.dark .featured-products.has-custom-bg {
  background-color: color-mix(in srgb, var(--muted) 30%, transparent);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--primary) 5%, transparent));
}

.featured-products .products-grid {
  margin-bottom: 3rem;
}

section.featured-products .section-subtitle {
  margin-bottom: 30px;
}

/* ── Philosophy Section ─────────────────────────────────────── */
.philosophy-section {
  position: relative;
  overflow: hidden;
}

.philosophy-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: var(--primary);
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.05;
  pointer-events: none;
}

.philosophy-inner {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.philosophy-inner h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2rem;
}

.philosophy-inner p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ── Newsletter Section ─────────────────────────────────────── */
.newsletter-section {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
  border-top: 1px solid var(--border);
  text-align: center;
}

.newsletter-inner {
  max-width: 40rem;
  margin: 0 auto;
}

.newsletter-inner h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}

.newsletter-inner p {
  color: var(--muted-foreground);
  margin-bottom: 2rem;
}

.newsletter-form {
  max-width: 28rem;
  margin: 0 auto;
}

.newsletter-row p {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  max-width: 100%;
}

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

.newsletter-input {
  flex: 1;
  padding: 0.875rem 1.5rem;
  background: var(--input-background);
  border: 2px solid var(--border);
  border-radius: 9999px;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.newsletter-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}

.newsletter-input.error {
  border-color: var(--destructive);
}

.newsletter-submit {
  padding: 0.875rem 2rem;
  flex-shrink: 0;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 9999px;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
}

.newsletter-submit:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px color-mix(in srgb, var(--primary) 30%, transparent);
}

.field-error {
  font-size: 0.75rem;
  color: var(--destructive);
  margin-top: 0.25rem;
  text-align: start;
}

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

html.dark .field-success {
  color: #4ade80;
}

/* ── Moon Phase Widget ──────────────────────────────────────── */
.moon-widget {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--muted) 20%, transparent), transparent);
}

.moon-widget-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.moon-widget-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.5rem;
}

.moon-widget-subtitle {
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
}

.moon-phases-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 0.5rem;
  margin-bottom: 2rem;
}

.moon-phase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 0.75rem;
  transition: background 0.2s;
  flex: 0 0 auto;
}

.moon-phase-item:hover {
  background: var(--muted);
}

.moon-phase-item.active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.moon-phase-svg {
  width: 48px;
  height: 48px;
}

.moon-phase-name {
  font-size: 0.65rem;
  text-align: center;
  color: var(--muted-foreground);
  max-width: 64px;
}

.moon-phase-item.active .moon-phase-name {
  color: var(--primary);
}

.moon-phase-detail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  max-width: 40rem;
  margin: 0 auto;
  transition: all 0.3s;
}

.moon-phase-detail h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

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

/* ── Pre-Footer Features ────────────────────────────────────── */
.pre-footer {
  background: linear-gradient(to bottom, var(--background), color-mix(in srgb, var(--muted) 20%, transparent), var(--background));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pre-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 3rem;
  text-align: center;
}

@media (min-width: 768px) {
  .pre-footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {}

.feature-icon-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.feature-icon-glow {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 50%;
  filter: blur(24px);
  transition: background 0.5s;
}

.feature-card:hover .feature-icon-glow {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
}

.feature-icon-box {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.feature-card:hover .feature-icon-box {
  transform: scale(1.1) rotate(3deg);
}

.feature-icon-box svg {
  width: 40px;
  height: 40px;
  color: var(--primary);
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  margin-bottom: 0.75rem;
  transition: color 0.2s;
}

.feature-card:hover h3 {
  color: var(--primary);
}

.feature-card p {
  color: var(--muted-foreground);
  line-height: 1.7;
  max-width: 20rem;
  margin: 0 auto;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  position: relative;
  background: linear-gradient(to bottom, var(--background), color-mix(in srgb, var(--muted) 30%, transparent));
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 30px;
}

.footer::before,
.footer::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--primary);
  filter: blur(150px);
  opacity: 0.05;
  pointer-events: none;
}

.footer::before {
  top: 25%;
  left: 25%;
  width: 384px;
  height: 384px;
}

.footer::after {
  bottom: 25%;
  right: 25%;
  width: 384px;
  height: 384px;
}

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

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
  }
}

.footer-brand h3 {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: var(--muted-foreground);
  line-height: 1.6;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer-socials .social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--muted);
  color: var(--foreground);
  transition: all 0.3s ease;
}

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

.footer-socials .social-link:hover {
  background: var(--foreground);
  color: var(--background);
  transform: translateY(-2px);
}

.mobile-menu-socials {
  margin-top: 2rem;
  padding-bottom: 2rem;
}

.footer-brand p {
  max-width: 28rem;
}

.footer-col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  background: none;
  width: 100%;
  cursor: default;
}

.footer-col-title svg {
  width: 16px;
  height: 16px;
  display: none;
  transition: transform 0.2s;
}

@media (max-width: 767px) {
  .footer-col-title {
    cursor: pointer;
  }

  .footer-col-title svg {
    display: block;
  }

  .footer-col-title.open svg {
    transform: rotate(180deg);
  }
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 767px) {
  .footer-links {
    display: none;
  }

  .footer-links.open {
    display: flex;
  }
}

.footer-link,
.footer-links li a {
  color: var(--muted-foreground);
  transition: color 0.2s;
  font-size: 0.9375rem;
  text-decoration: none;
  display: inline-block;
}

.footer-link:hover,
.footer-links li a:hover {
  color: var(--foreground);
}

.footer-contact {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .footer-contact {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-contact-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 768px) {
  .footer-contact-links {
    flex-direction: row;
  }
}

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.2s;
}

.footer-contact-link:hover {
  color: var(--foreground);
}

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

.footer-cr {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-align: center;
}

@media (min-width: 768px) {
  .footer-cr {
    text-align: end;
  }
}

.payment-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.payment-title {
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

.payment-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.payment-icon {
  width: 64px;
  height: 40px;
  background: white;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0.8;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.payment-icon:hover {
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.payment-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-copyright {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ── Shop Page ──────────────────────────────────────────────── */
.shop-filters-bar {
  z-index: 40;
  background: color-mix(in srgb, var(--background) 95%, transparent);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 1rem 0;
}

.shop-filters-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .shop-filters-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  transition: all 0.15s;
  background: var(--muted);
  color: var(--foreground);
  border: 2px solid transparent;
}

.filter-btn:hover {
  background: color-mix(in srgb, var(--muted) 80%, transparent);
}

.filter-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

.mobile-filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  font-size: 0.875rem;
  color: var(--foreground);
  transition: border-color 0.2s;
}

@media (min-width: 1024px) {
  .mobile-filter-toggle {
    display: none;
  }
}

.mobile-filter-toggle:hover {
  border-color: var(--primary);
}

.sort-wrapper {
  position: relative;
}

.sort-select {
  padding: 0.5rem 2.25rem 0.5rem 1rem;
  background: var(--muted);
  border: 2px solid transparent;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s;
}

.sort-select:hover {
  border-color: var(--primary);
}

.sort-chevron {
  position: absolute;
  end: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--muted-foreground);
  pointer-events: none;
}

.shop-product-count {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

.shop-empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--muted-foreground);
  font-size: 1.125rem;
}

/* ── Product Detail Page ────────────────────────────────────── */
.breadcrumb-bar {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  background-color: var(--banner-bg);
  color: var(--banner-foreground);
}

.breadcrumb-bar .container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

.breadcrumb-sep {
  opacity: 0.6;
}

.breadcrumb-link {
  transition: opacity 0.15s;
}

.breadcrumb-link:hover {
  opacity: 1;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .product-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.product-gallery {}

.product-main-img {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  cursor: pointer;
  margin-bottom: 1rem;
}

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

.product-main-img:hover .img-zoom-icon {
  opacity: 1;
}

.img-zoom-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
}

.product-main-img:hover .img-zoom-icon {
  background: rgba(0, 0, 0, 0.1);
}

.img-zoom-icon svg {
  width: 32px;
  height: 32px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
}

.product-main-img:hover .img-zoom-icon svg {
  opacity: 1;
}

.product-discount-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--destructive);
  color: var(--destructive-foreground);
  font-size: 0.875rem;
}

.product-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.product-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s;
}

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

.product-thumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.product-thumb:hover:not(.active) {
  border-color: var(--border);
}

.product-info {}

@media (min-width: 1024px) {
  .product-info {
    position: sticky;
    top: calc(var(--nav-height) + 1.5rem);
  }
}

.product-subcategory-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.product-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
}

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

.stars {
  display: flex;
  align-items: center;
}

.star-icon {
  width: 16px;
  height: 16px;
}

.star-icon.filled {
  fill: var(--primary);
  color: var(--primary);
}

.star-icon.empty {
  color: var(--border);
}

.rating-text {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.product-price-block {
  margin-bottom: 1rem;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.price-current {
  font-family: var(--font-heading);
  font-size: 2.5rem;
}

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

.price-vat {
  font-size: 0.7rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

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

.in-stock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #16a34a;
}

html.dark .in-stock {
  color: #4ade80;
}

.in-stock svg {
  width: 16px;
  height: 16px;
}

.out-of-stock {
  font-size: 0.875rem;
  color: var(--destructive);
}

.stock-count {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.product-sku {
  font-size: 0.65rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

.product-short-desc {
  padding: 1.5rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.variants-section {
  margin-bottom: 1.5rem;
}

.variants-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.variant-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  transition: all 0.15s;
  color: var(--foreground);
}

.variant-btn:hover {
  border-color: var(--primary);
  background: var(--muted);
}

.variant-btn.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 20%, transparent);
}

.qty-section {
  margin-bottom: 1.5rem;
}

.qty-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.qty-btn-lg {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  transition: border-color 0.15s, background 0.15s;
}

.qty-btn-lg:hover {
  border-color: var(--primary);
  background: var(--muted);
}

.qty-display {
  width: 64px;
  text-align: center;
  font-size: 1.125rem;
}

.product-actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 480px) {

  .btn-add-cart,
  .btn-buy-now {
    padding: 0.8rem 0.5rem !important;
    font-size: 0.9rem;
  }
}

.product-actions-row {
  display: flex;
  flex: 1;
  gap: 0.75rem;
  min-width: 0;
}

.btn-add-cart,
.btn-buy-now {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-add-cart {
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn-add-cart:hover {
  box-shadow: 0 15px 30px color-mix(in srgb, var(--primary) 20%, transparent);
}

.btn-buy-now {
  border: 2px solid var(--border);
  color: var(--foreground);
  background: var(--input-background);
}

.btn-buy-now:hover {
  background: var(--muted);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.btn-add-cart svg,
.btn-buy-now svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-add-cart:disabled,
.btn-buy-now:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-favorite {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: all 0.15s;
  color: var(--foreground);
}

.btn-favorite:hover {
  border-color: var(--primary);
  background: var(--muted);
}

.btn-favorite.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

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

.btn-favorite.active svg {
  fill: currentColor;
}

.variant-hint {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-align: center;
}

/* Tabs */
.tabs-wrapper {
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .tabs-wrapper {
    margin-top: 6rem;
  }
}

.tabs-nav {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.tab-btn {
  padding-bottom: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  color: var(--muted-foreground);
  transition: color 0.2s;
}

.tab-btn.active {
  color: var(--foreground);
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.2s;
}

.tab-btn.active::after {
  transform: scaleX(1);
}

.tab-btn:hover {
  color: var(--foreground);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-description {
  padding: 2rem;
  background: linear-gradient(135deg, var(--card), var(--card), color-mix(in srgb, var(--muted) 30%, transparent));
  border-radius: 1rem;
  border: 1px solid var(--border);
  max-width: 56rem;
}

.tab-description p {
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.tab-description p:last-child {
  margin-bottom: 0;
}

.tab-features {
  padding: 2rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--accent) 5%, transparent), var(--card));
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  max-width: 56rem;
}

.features-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .features-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--background) 50%, transparent);
  backdrop-filter: blur(4px);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.feature-item:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.feature-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-check svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.feature-item span {
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  line-height: 1.6;
}

.tab-specs {
  padding: 2rem;
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid var(--border);
  max-width: 48rem;
}

.spec-row {
  display: flex;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.spec-row:last-child {
  border-bottom: none;
}

.spec-row:hover {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  margin: 0 -1rem;
  padding: 1rem;
}

.spec-key {
  width: 33%;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 90%, transparent);
}

.spec-val {
  width: 67%;
  color: color-mix(in srgb, var(--foreground) 70%, transparent);
}

/* Related Products */
.related-products {
  margin-top: 6rem;
}

.related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.related-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.related-header a {
  font-size: 0.875rem;
  color: var(--primary);
  transition: opacity 0.2s;
}

.related-header a:hover {
  opacity: 0.7;
}

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

@media (min-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lightbox.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem;
  border-radius: 9999px;
  color: white;
  transition: background 0.15s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lightbox-close svg {
  width: 24px;
  height: 24px;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0.92);
  }

  to {
    transform: scale(1);
  }
}

/* ── Checkout Page ──────────────────────────────────────────── */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .checkout-grid {
    grid-template-columns: 1fr 380px;
    align-items: start;
  }
}

.checkout-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.checkout-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 30%, transparent);
}

.checkout-section-header svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.checkout-section-header h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
}

.checkout-section-body {
  padding: 1.5rem;
}

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

@media (min-width: 640px) {
  .form-row.two-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-row:last-child {
  margin-bottom: 0;
}

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

.form-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-input,
.form-textarea,
.form-select {
  padding: 0.75rem 1rem;
  background: var(--input-background);
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: var(--destructive);
}

.form-textarea {
  resize: none;
}

.form-select {
  appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.checkout-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.checkout-tab {
  flex: 1;
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.checkout-tab.active {
  color: var(--foreground);
  border-bottom-color: var(--primary);
}

.checkout-tab:hover {
  color: var(--foreground);
}

.payment-option {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  cursor: pointer;
  margin-bottom: 0.75rem;
  transition: border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.payment-option.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.payment-option:hover:not(.selected) {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.payment-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.payment-option-label {
  font-weight: 500;
}

.payment-option-icons {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.payment-option-icons img {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.order-summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
}

.order-summary h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.order-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.order-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.order-item-img {
  width: 64px;
  height: 64px;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
}

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

.order-item-info {
  flex: 1;
  min-width: 0;
}

.order-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-item-qty {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.order-item-price {
  font-size: 0.875rem;
  font-weight: 500;
}

.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.price-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
}

.price-line.total {
  font-weight: 600;
  font-size: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

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

.price-value {}

.vat-note {
  font-size: 0.7rem;
  color: var(--muted-foreground);
}

.place-order-btn {
  width: 100%;
  padding: 1rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: box-shadow 0.2s, transform 0.1s;
}

.place-order-btn:hover {
  box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 30%, transparent);
}

.place-order-btn:active {
  transform: scale(0.99);
}

.place-order-btn svg {
  width: 20px;
  height: 20px;
}

.order-empty {
  text-align: center;
  padding: 2rem;
  color: var(--muted-foreground);
  font-size: 1rem;
}

.order-empty a {
  color: var(--primary);
  text-decoration: underline;
}

/* ── FAQ Page ───────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 20%, transparent);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  text-align: start;
  transition: background 0.15s;
  color: var(--foreground);
}

.faq-question:hover {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
}

.faq-question-text {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  padding-right: 2rem;
}

html[dir="rtl"] .faq-question-text {
  padding-right: 0;
  padding-left: 2rem;
}

.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s;
  opacity: 0;
}

.faq-item.open .faq-answer {
  max-height: 500px;
  opacity: 1;
}

.faq-answer-inner {
  padding: 0 1.5rem 1.5rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

.faq-cta {
  margin-top: 4rem;
  text-align: center;
  padding: 2rem;
  background: color-mix(in srgb, var(--card) 30%, transparent);
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.faq-cta h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.faq-cta p {
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

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

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 30%, transparent);
  transition: border-color 0.2s;
  color: var(--foreground);
  margin-bottom: 1.25rem;
}

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

.contact-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.contact-info-card:hover .contact-icon-wrap {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.contact-icon-wrap svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.contact-info-title {
  font-family: var(--font-heading);
  margin-bottom: 0.25rem;
}

.contact-info-value {
  color: var(--muted-foreground);
}

.contact-hours {
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.contact-hours h3 {
  font-family: var(--font-heading);
  margin-bottom: 0.75rem;
}

.contact-hours p {
  color: var(--muted-foreground);
  line-height: 1.7;
}

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

.contact-form-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  transition: box-shadow 0.2s;
}

.contact-form-submit:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 20%, transparent);
}

.contact-form-submit svg {
  width: 20px;
  height: 20px;
}

/* ── About Page ─────────────────────────────────��───────────── */
.vision-card {
  padding: 2rem;
  background: color-mix(in srgb, var(--card) 30%, transparent);
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .philosophy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.philosophy-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.philosophy-dot-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.philosophy-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
}

/* ── Elements Page ──────────────────────────────────────────── */
.elements-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.element-card {
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .element-card {
    flex-direction: row;
  }
}

.element-card.water {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
}

.element-card.air {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(99, 102, 241, 0.2));
}

.element-card.fire {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
}

.element-card.earth {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2));
}

.element-card.ether {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2));
}

.element-icon-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--background) 80%, transparent);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.element-icon-wrap svg {
  width: 32px;
  height: 32px;
  color: var(--primary);
}

.element-content {}

.element-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.element-desc {
  color: var(--muted-foreground);
  line-height: 1.7;
}

/* ── BioGeometry Page ───────────────────────────────────────── */
.biogeometry-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .biogeometry-principles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.principle-card {
  padding: 1.5rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card) 50%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  transition: box-shadow 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.principle-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.principle-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.principle-icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.principle-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.principle-desc {
  color: var(--muted-foreground);
  line-height: 1.7;
}

.applications-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.application-card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--background) 50%, transparent);
  border: 1px solid var(--border);
}

.application-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.application-desc {
  color: var(--muted-foreground);
  line-height: 1.7;
}

.biogeometry-closing {
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
  border: 1px solid var(--border);
}

.biogeometry-closing h2 {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  margin-bottom: 1.5rem;
}

.biogeometry-closing p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.7;
  max-width: 48rem;
  margin: 0 auto;
}

/* ── Policy Pages ───────────────────────────────────────────── */
.policy-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.policy-section h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.policy-section p {
  color: var(--muted-foreground);
  line-height: 1.7;
}

/* ── Order Confirmation ─────────────────────────────────────── */
.order-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.order-confirm-icon svg {
  width: 44px;
  height: 44px;
  color: var(--banner-foreground);
}

.order-confirm-details {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(12px);
  padding: 1.5rem 2rem;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--primary) 5%, transparent);
}

.order-number-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.order-number {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  letter-spacing: 0.05em;
  word-break: break-all;
  margin-bottom: 2rem;
}

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

.order-info-card {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 0.75rem;
  padding: 1rem;
}

.order-info-card-label {
  font-size: 0.65rem;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}

.order-info-card-val {
  font-size: 1.25rem;
  font-weight: 500;
}

.order-next-steps {
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--card) 40%, transparent);
  padding: 1.5rem 1.75rem;
}

.order-next-steps h2 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.order-next-steps h2 svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

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

.next-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.next-step-item svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── 404 Page ───────────────────────────────────────────────── */
.not-found {
  padding-top: var(--nav-height);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + 2rem) 1rem 2rem;
}

.not-found-inner {
  max-width: 40rem;
  text-align: center;
}

.not-found-num {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 20vw, 14rem);
  line-height: 1;
  opacity: 0.1;
}

.not-found-orb {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  filter: blur(48px);
  animation: pulse 2s ease-in-out infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.not-found-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
}

.not-found-desc {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  max-width: 28rem;
  margin: 0 auto 3rem;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.5
  }
}

/* ── Scroll-to-Top ──────────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(16px);
}

html[dir="rtl"] .scroll-top-btn {
  right: auto;
  left: 2rem;
}

.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 30%, transparent);
}

.scroll-top-btn svg {
  width: 20px;
  height: 20px;
}

/* ── Utility Classes ────────────────────────────────────────── */
.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;
}

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

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

.flex {
  display: flex;
}

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

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

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

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.space-y>*+* {
  margin-top: 1.5rem;
}

/* Hidden utilities */
.hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .md-hidden {
    display: none !important;
  }

  .md-block {
    display: block !important;
  }

  .md-flex {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .md-only-block {
    display: none !important;
  }

  .footer-socials .social-link {
    margin-bottom: 30px;
  }
}

/* Background muted section */
.bg-muted-section {
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── EXACT Moon Phase Widget Custom CSS ── */
.moon-widget-new {
  padding: 2.5rem 1rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--muted) 20%, transparent), var(--background));
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.moon-widget-new-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.moon-widget-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.moon-widget-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  margin-bottom: 0.75rem;
}

.moon-location-select-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.map-pin-icon {
  width: 14px;
  height: 14px;
  color: var(--muted-foreground);
}

.moon-select-container {
  position: relative;
}

.moon-location-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s;
  outline: none;
  font-family: inherit;
}

.moon-location-select:hover,
.moon-location-select:focus {
  border-color: var(--primary);
}

.moon-location-select:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.select-chevron {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--muted-foreground);
  pointer-events: none;
}

html[dir="rtl"] .moon-location-select {
  padding: 0.375rem 0.75rem 0.375rem 2rem;
}

html[dir="rtl"] .select-chevron {
  right: auto;
  left: 0.5rem;
}

.moon-live-data {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.moon-scroll-wrapper {
  position: relative;
  margin: 0 -1rem;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .moon-scroll-wrapper {
    margin: 0;
    padding: 0;
  }
}

.moon-scroll-area {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.75rem;
}

.moon-cards-container {
  display: flex;
  gap: 0.75rem;
  min-width: max-content;
  margin: 0 auto;
  justify-content: center;
  padding: 0 1rem;
}

@media (max-width: 1024px) {
  .moon-cards-container {
    justify-content: flex-start;
  }
}

.moon-card-wrap {
  flex-shrink: 0;
  width: 128px;
}

.moon-card {
  position: relative;
  background: color-mix(in srgb, var(--card) 50%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 0.75rem;
  padding: 0.75rem;
  transition: all 0.3s;
}

.moon-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--primary) 5%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--primary) 5%, transparent);
}

.moon-visual-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: transform 0.3s;
}

.moon-card:hover .moon-visual-wrap {
  transform: scale(1.05);
}

.moon-phase-h3 {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2rem;
  color: var(--foreground);
}

.moon-details {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.moon-time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.moon-time-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

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

.moon-house-row {
  text-align: center;
  padding-top: 0.375rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.moon-house-text {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 500;
}

.moon-fade-left,
.moon-fade-right {
  position: absolute;
  top: 0;
  bottom: 0.75rem;
  width: 1.5rem;
  pointer-events: none;
}

.moon-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--background), color-mix(in srgb, var(--background) 80%, transparent), transparent);
}

.moon-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--background), color-mix(in srgb, var(--background) 80%, transparent), transparent);
}

@media (min-width: 640px) {

  .moon-fade-left,
  .moon-fade-right {
    width: 3rem;
  }
}

.smooth-scroll {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 30%, transparent) transparent;
}

.smooth-scroll::-webkit-scrollbar {
  height: 4px;
}

.smooth-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.smooth-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 10px;
}

.smooth-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 50%, transparent);
}

/* ── EXACT About Page Custom CSS ── */
.pt-20 {
  padding-top: 5rem;
}

.about-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--banner-bg);
  color: var(--banner-foreground);
  text-align: center;
}

.about-hero-blur {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 24rem;
  height: 24rem;
  background: white;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.1;
  pointer-events: none;
}

.about-hero-inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  z-index: 1;
}

.about-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 3.75rem);
  margin-bottom: 1.5rem;
}

.about-hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
}

.about-section {}

.about-container {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.about-block-title {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  margin-bottom: 1.5rem;
}

.about-text {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.about-vision-card {
  padding: 2rem;
  background-color: color-mix(in srgb, var(--card) 30%, transparent);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.about-philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .about-philosophy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-philosophy-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-icon-inner {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--primary);
}

.about-philosophy-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

.about-philosophy-desc {
  color: var(--muted-foreground);
}

.about-cta-section {
  text-align: center;
  padding: 3rem 0;
}

.about-cta-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

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

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

.btn-primary-pill {
  padding: 1rem 2rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: 9999px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.btn-primary-pill:hover {
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.btn-outline-pill {
  padding: 1rem 2rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--foreground);
}

.btn-outline-pill:hover {
  background-color: var(--muted);
}

/* ── EXACT Elements Page Custom CSS ── */
.elements-hero-blur-2 {
  position: absolute;
  bottom: 25%;
  left: 25%;
  width: 24rem;
  height: 24rem;
  background: white;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.1;
  pointer-events: none;
}

.elements-intro-title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.elements-intro-desc {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.625;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.elements-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 0rem;
}

.element-card {
  position: relative;
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .element-card {
    flex-direction: row;
    align-items: flex-start;
  }
}

.element-icon-wrap {
  flex-shrink: 0;
}

.element-icon-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--background) 80%, transparent);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.element-icon-svg {
  width: 2rem;
  height: 2rem;
  color: var(--primary);
}

.element-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.element-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
}

.element-desc {
  color: var(--muted-foreground);
  line-height: 1.625;
}

/* Custom Gradients for Elements */
/*.element-water {
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
}

.element-air {
  background: linear-gradient(to bottom right, rgba(14, 165, 233, 0.2), rgba(99, 102, 241, 0.2));
}

.element-fire {
  background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
}

.element-earth {
  background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2));
}

.element-ether {
  background: linear-gradient(to bottom right, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2));
}
.element-mind {
  background: linear-gradient(to bottom right, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2));
}*/

.element-water {
  background: linear-gradient(to bottom right,
      rgba(59, 130, 246, 0.2),
      rgba(6, 182, 212, 0.2));
}

.element-air {
  background: linear-gradient(to bottom right,
      rgba(191, 219, 254, 0.2),
      rgba(147, 197, 253, 0.2));
}

.element-fire {
  background: linear-gradient(to bottom right,
      rgba(249, 115, 22, 0.2),
      rgba(239, 68, 68, 0.2));
}

.element-earth {
  background: linear-gradient(to bottom right,
      rgba(34, 197, 94, 0.2),
      rgba(16, 185, 129, 0.2));
}

.element-ether {
  background: linear-gradient(to bottom right,
      rgba(168, 85, 247, 0.2),
      rgba(99, 102, 241, 0.2));
}

/*
.element-mind {
  background: linear-gradient(
    to bottom right,
    rgba(236, 72, 153, 0.2),
    rgba(244, 114, 182, 0.2)
  );
}*/

.element-mind {
  background: linear-gradient(to bottom right,
      rgba(250, 204, 21, 0.2),
      rgba(245, 158, 11, 0.2));
}

.elements-balance-section {
  background-color: color-mix(in srgb, var(--muted) 30%, transparent);
}

/* ── EXACT BioGeometry Page Custom CSS ── */
.bg-card-50 {
  background-color: color-mix(in srgb, var(--card) 50%, transparent);
}

.bio-principle-card {
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: color-mix(in srgb, var(--card) 50%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  transition: all 0.3s;
}

.bio-principle-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.bio-principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}

.bio-principle-wrap {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-direction: column;
}

@media (min-width: 768px) {
  .bio-principle-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bio-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bio-shop-section {
  background-color: color-mix(in srgb, var(--muted) 20%, transparent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bio-shop-header {
  text-align: center;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.bio-shop-title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
}

.bio-shop-desc {
  color: var(--muted-foreground);
  max-width: 42rem;
  line-height: 1.625;
  text-align: center;
  margin: 0 auto;
}

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

@media (min-width: 640px) {
  .bio-shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .bio-shop-grid {
    gap: 1.5rem;
    grid-template-columns: repeat(5, 1fr);
  }
}

.bio-product-card {
  display: block;
  group: hover;
}

.bio-product-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  aspect-ratio: 1/1;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: all 0.3s;
}

.bio-product-card:hover .bio-product-img-wrap {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

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

.bio-product-card:hover .bio-product-img {
  transform: scale(1.05);
}

.bio-product-cat {
  font-size: 0.625rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .bio-product-cat {
    font-size: 0.75rem;
  }
}

.bio-product-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  transition: color 0.3s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .bio-product-title {
    font-size: 1.2rem;
  }
}

.bio-product-card:hover .bio-product-title {
  color: var(--primary);
}

.bio-product-price {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.bio-product-vat {
  font-size: 0.625rem;
  color: var(--muted-foreground);
}

.bio-app-section {
  background-color: color-mix(in srgb, var(--muted) 30%, transparent);
}

.bio-app-card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: color-mix(in srgb, var(--background) 50%, transparent);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.bio-app-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.bio-app-desc {
  color: var(--muted-foreground);
  line-height: 1.625;
}

.bio-closing {
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  background: linear-gradient(to bottom right, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
  border: 1px solid var(--border);
  margin-top: 4rem;
}

.bio-closing-title {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  margin-bottom: 1.5rem;
}

/* ── EXACT Shop Page Custom CSS ── */
.shop-hero {
  position: relative;
  padding: 4rem 1rem 5rem;
  background-color: var(--banner-bg);
  color: var(--banner-foreground);
}

.shop-hero-inner {
  max-width: 80rem;
  margin: 0 auto;
  text-align: center;
}

.shop-hero-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .shop-hero-title {
    font-size: 3.5rem;
  }
}

.shop-hero-subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
}

.shop-filters-bar {
  z-index: 40;
  background-color: color-mix(in srgb, var(--background) 95%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 1rem;
}

body.admin-bar .shop-filters-bar {
  top: 7rem;
}

.shop-filters-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .shop-filters-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.shop-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.shop-filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  background-color: var(--muted);
  border: none;
  cursor: pointer;
  color: var(--foreground);
  transition: all 0.3s;
}

.shop-filter-btn:hover {
  background-color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.shop-filter-btn.active {
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shop-sort-wrap {
  position: relative;
}

.shop-sort-select {
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  background-color: var(--muted);
  border: 2px solid transparent;
  cursor: pointer;
  color: var(--foreground);
  appearance: none;
  transition: all 0.3s;
  width: 100%;
}

@media (min-width: 1024px) {
  .shop-sort-select {
    width: auto;
  }
}

.shop-sort-select:hover,
.shop-sort-select:focus {
  border-color: var(--primary);
  outline: none;
}

.shop-sort-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-foreground);
}

.shop-products-section {
  padding: 2rem 1rem 4rem;
}

.shop-products-header {
  max-width: 80rem;
  margin: 0 auto 1.5rem;
  color: var(--muted-foreground);
  font-size: 1rem;
}

.shop-grid {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 1.5rem;
  }
}

@media (min-width: 1280px) {
  .shop-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pd-related-wrap .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Use .bio-product-card for shop item wrap */
.shop-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--background) 90%, transparent), color-mix(in srgb, var(--background) 20%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.bio-product-card:hover .shop-card-overlay {
  opacity: 1;
}

.shop-card-content {
  padding-top: 0.25rem;
}

.shop-card-title {
  -webkit-line-clamp: 1;
}

.shop-card-desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.shop-card-price-wrap {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.shop-card-price {
  font-size: 0.875rem;
  color: var(--foreground);
  margin: 0;
}

.shop-card-vat {
  font-size: 0.625rem;
  line-height: 1;
  margin: 0;
}

/* ── Product Detail Page ── */
.pd-breadcrumb {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--banner-bg);
  color: var(--banner-foreground);
}

.pd-breadcrumb-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.9;
  flex-wrap: wrap;
}

.pd-breadcrumb a {
  transition: opacity 0.3s;
}

.pd-breadcrumb a:hover {
  opacity: 1;
  text-decoration: underline;
}

.pd-section {
  padding: 2rem 1rem 4rem;
  max-width: 80rem;
  margin: 0 auto;
}

.pd-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
  transition: color 0.3s;
}

.pd-back-link:hover {
  color: var(--foreground);
}

.pd-back-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s;
}

.pd-back-link:hover svg {
  transform: translateX(-0.25rem);
}

.pd-grid {
  display: flex;
  gap: 2rem;
}

.pd-images {
  max-width: 50%;
  flex-basis: 50%;
}

@media (min-width: 1024px) {
  .pd-grid {
    gap: 3rem;
  }
}

.pd-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 1;
  background-color: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.pd-image-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-image-zoom {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.pd-image-wrap:hover .pd-image-zoom {
  opacity: 1;
}

.pd-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.pd-thumb-btn {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
}

.pd-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-thumb-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.pd-info-col {
  position: sticky;
  top: 6rem;
  align-self: start;
  max-width: 50%;
  flex-basis: 50%;
}

.pd-subcat {
  font-size: 0.75rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.pd-title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.pd-images {
  max-width: 50%;
  flex-basis: 50%;
}

@media (max-width: 991px) {
  .pd-grid {
    flex-direction: column;
  }

  .pd-images,
  .pd-info-col {
    max-width: 100%;
    flex-basis: 100%;
  }
}

@media (min-width: 768px) {
  .pd-title {
    font-size: 3rem;
  }
}

.pd-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.pd-stars {
  display: flex;
  gap: 0.25rem;
  color: var(--primary);
}

.pd-stars svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.pd-reviews {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.pd-price {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  margin: 0;
}

.pd-price-orig {
  font-size: 1.5rem;
  color: var(--muted-foreground);
  text-decoration: line-through;
  margin: 0;
}

.pd-vat-note {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.pd-stock {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pd-stock-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #16a34a;
}

.pd-stock-status.out {
  color: #dc2626;
}

.pd-stock-count {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.pd-sku {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

.pd-short-desc {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(to bottom right, color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.pd-qty-section {
  margin-bottom: 1.5rem;
}

.pd-section-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}

.pd-qty-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pd-qty-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--foreground);
}

.pd-qty-btn:hover {
  border-color: var(--primary);
  background: var(--muted);
}

.pd-qty-input {
  width: 4rem;
  text-align: center;
  font-size: 1.125rem;
  background: transparent;
  border: none;
  font-weight: 500;
  color: var(--foreground);
}

.pd-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

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

@media (max-width: 480px) {
  .pd-btn {
    padding: 1rem 0.5rem !important;
    font-size: 0.9rem !important;
  }
}

.pd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  flex: 1;
  font-size: 1rem;
}

.pd-btn-fav-wrap {
  flex: 0 0 auto;
  display: flex;
}

.pd-btn-fav-wrap .yith-wcwl-add-to-wishlist {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
}

.pd-btn-fav-wrap .yith-wcwl-add-to-wishlist>div {
  display: flex;
  height: 100%;
}

.pd-btn-fav-wrap .yith-wcwl-add-to-wishlist a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  transition: all 0.3s;
  color: var(--foreground) !important;
  text-decoration: none !important;
  height: 100%;
  box-sizing: border-box;
}

.pd-btn-fav-wrap .yith-wcwl-add-to-wishlist a:hover {
  border-color: var(--primary);
}

.pd-btn-fav-wrap .yith-wcwl-add-to-wishlist a i {
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-btn-fav-wrap .yith-wcwl-add-to-wishlist span {
  display: none !important;
}

.woocommerce button.button.alt.pd-btn-add,
.pd-btn-add {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: none !important;
  border-radius: 0.75rem !important;
}

.pd-btn-add:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
  opacity: 0.95;
}

.woocommerce div.product form.cart .button {
  display: flex;
}

.woocommerce button.button.pd-btn-buy,
.pd-btn-buy {
  background: var(--input-background) !important;
  color: var(--foreground) !important;
  border: 2px solid var(--border) !important;
  border-radius: 0.75rem !important;
}

.woocommerce button.button.pd-btn-buy:hover,
.pd-btn-buy:hover {
  background: var(--muted) !important;
  color: var(--foreground) !important;
  border-color: var(--primary) !important;
}

.pd-btn-fav {
  flex: none;
  width: 3.5rem;
  padding: 0;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.3s;
}

.pd-btn-fav:hover {
  border-color: var(--primary);
  background: var(--muted);
}

.pd-btn-fav.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.pd-btn-fav svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pd-tabs-wrap {
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .pd-tabs-wrap {
    margin-top: 6rem;
  }
}

.pd-tabs-header {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.pd-tabs-header::-webkit-scrollbar {
  display: none;
}

.pd-tab-btn {
  padding-bottom: 1rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
  white-space: nowrap;
}

.pd-tab-btn:hover {
  color: var(--foreground);
}

.pd-tab-btn.active {
  color: var(--foreground);
  font-weight: 500;
}

.pd-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
}

.pd-tab-content {
  display: none;
  /*max-width: 56rem;*/
}

.pd-tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.pd-desc-box {
  padding: 2rem;
  border-radius: 1rem;
  background: linear-gradient(to bottom right, var(--card), color-mix(in srgb, var(--muted) 30%, transparent));
  border: 1px solid var(--border);
}

.pd-desc-box p {
  margin-bottom: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.pd-desc-box p:last-child {
  margin-bottom: 0;
}

.pd-related-wrap {
  margin-top: 6rem;
}

.pd-related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.pd-related-title {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  margin: 0;
}

@media (min-width: 768px) {
  .pd-related-title {
    font-size: 2.25rem;
  }
}

/* Product Detail Related Cards */
.pd-related-card {
  display: block;
  text-decoration: none;
}

.pd-related-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: all 0.3s;
}

.pd-related-card:hover .pd-related-img-wrap {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px color-mix(in srgb, var(--primary) 10%, transparent);
}

.pd-related-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.pd-related-card:hover .pd-related-img-wrap img {
  transform: scale(1.1);
}

.pd-related-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--background) 60%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.pd-related-card:hover .pd-related-overlay {
  opacity: 1;
}

.pd-related-name {
  font-size: 1.125rem;
  font-weight: 500;
  font-family: var(--font-heading);
  margin: 0 0 0.25rem 0;
  color: var(--foreground);
  transition: color 0.3s;
}

@media (min-width: 768px) {
  .pd-related-name {
    font-size: 1.25rem;
  }
}

.pd-related-card:hover .pd-related-name {
  color: var(--primary);
}

.pd-related-price {
  font-size: 1rem;
  color: var(--muted-foreground);
  font-weight: 500;
  margin: 0;
}

/* Lightbox */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.pd-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.pd-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.3s;
}

.pd-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pd-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  transform: scale(0.9);
  transition: transform 0.3s;
}

.pd-lightbox.open img {
  transform: scale(1);
}

/* WooCommerce Single Product Fixes */
.pd-qty-controls .quantity {
  display: contents;
}

.pd-qty-controls .quantity input[type="number"] {
  -moz-appearance: textfield;
}

.pd-qty-controls .quantity input[type="number"]::-webkit-outer-spin-button,
.pd-qty-controls .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Style Native WooCommerce Gallery to match pd-images */
.woocommerce-product-gallery {
  position: relative;
  width: 100%;
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
  display: block;
}

.woocommerce-product-gallery__image {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 1;
  background-color: rgba(0, 0, 0, 0.05);
}

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

.woocommerce-product-gallery__image:first-child .zoomImg {
  cursor: crosshair;
}

/* Thumbnails */
.flex-control-nav.flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.flex-control-nav.flex-control-thumbs li {
  margin: 0 !important;
  width: calc(25% - 0.5625rem) !important;
  float: none !important;
  clear: none !important;
}

.flex-control-nav.flex-control-thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
  opacity: 1 !important;
}

.flex-control-nav.flex-control-thumbs img.flex-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* Fix variations table */
table.variations {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

table.variations th,
table.variations td {
  padding: 0.5rem 0;
  border: none;
}

table.variations th {
  text-align: left;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  width: 30%;
  font-weight: normal;
}

body.language-ar table.variations th {
  text-align: right;
}

table.variations select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  font-size: 1rem;
  cursor: pointer;
  appearance: none;
}

table.variations .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--destructive);
}

.wcgs-carousel .spswiper-slide,
#wpgs-gallery .wcgs-thumb.spswiper-slide img {
  border: 1px solid #dddddd;
  border-radius: 12px;
}

.wcgs-carousel .spswiper-slide img,
.gallery-navigation-carousel .wcgs-thumb,
#wpgs-gallery .wcgs-thumb.spswiper-slide img {
  border-radius: 12px !important;
}

/* Feature List Styles */
.pd-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.pd-feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background-color: var(--input-background);
  /* Very light background matching screenshot */
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--foreground);
  font-size: 1rem;
}

.pd-feature-icon {
  color: var(--foreground);
  flex-shrink: 0;
}

/* Reviews Tab Styles */
.pd-reviews-wrap #reviews {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.pd-reviews-wrap #comments h2,
.pd-reviews-wrap #review_form_wrapper h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--foreground);
}

.pd-reviews-wrap ol.commentlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pd-reviews-wrap ol.commentlist li.review {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.pd-reviews-wrap ol.commentlist li.review:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pd-reviews-wrap .comment_container {
  display: flex;
  gap: 1rem;
}

.pd-reviews-wrap .comment_container img.avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
  background: var(--muted);
}

.pd-reviews-wrap .comment-text {
  flex: 1;
}

.pd-reviews-wrap .star-rating {
  font-size: 0.875rem;
  color: #fbbf24;
  /* gold */
  margin-bottom: 0.5rem;
}

.pd-reviews-wrap .meta {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.pd-reviews-wrap .meta strong {
  color: var(--foreground);
  font-weight: 500;
}

.pd-reviews-wrap .description p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--foreground);
}

.pd-reviews-wrap .comment-respond {
  background: var(--card);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.pd-reviews-wrap .comment-reply-title {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  color: var(--foreground);
}

.pd-reviews-wrap .comment-form-rating {
  margin-bottom: 1rem;
}

.pd-reviews-wrap .stars a {
  color: #fbbf24;
  font-size: 1.25rem;
  text-decoration: none;
}

.pd-reviews-wrap .comment-form p {
  margin-bottom: 1rem;
}

.pd-reviews-wrap .comment-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
}

.pd-reviews-wrap .comment-form input[type="text"],
.pd-reviews-wrap .comment-form input[type="email"],
.pd-reviews-wrap .comment-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  font-family: inherit;
}

.pd-reviews-wrap .comment-form input[type="submit"] {
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.pd-reviews-wrap .comment-form input[type="submit"]:hover {
  opacity: 0.9;
}

div#tab-reviews {
  max-width: 100%;
}

/* ============================================================
   WooCommerce Checkout Layout & Styling
   ============================================================ */

/* 1. Layout */
.woocommerce-checkout .woocommerce {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .woocommerce-checkout .woocommerce {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0 2rem;
    align-items: start;
  }

  body.woocommerce-checkout.woocommerce-order-received .woocommerce {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout .woocommerce-notices-wrapper {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  /* Left Column */
  .woocommerce-checkout .lunology-checkout-account-block {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .woocommerce-checkout .woocommerce-form-coupon-toggle {
    grid-column: 1 / 2;
    grid-row: 3;
  }

  .woocommerce-checkout .woocommerce-form-coupon {
    grid-column: 1 / 2;
    grid-row: 4;
  }

  .woocommerce-checkout form.checkout {
    display: contents;
  }

  .woocommerce-checkout form.checkout #customer_details {
    grid-column: 1 / 2;
  }

  /* Right Column */
  .woocommerce-checkout form.checkout .lunology-order-summary-card {
    grid-column: 2 / 3;
    grid-row: 2 / 6;
  }
}

/* 2. Form Cards & Headings */
.woocommerce-checkout h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--foreground);
}

.woocommerce-checkout .lunology-checkout-account-block,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout .lunology-order-summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 2rem;
}

/* Remove default box styling from forms inside our custom blocks */
.woocommerce-checkout .lunology-checkout-account-block .woocommerce-form-login,
.woocommerce-checkout .lunology-checkout-account-block .woocommerce-form-register {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Custom Account Tabs */
.checkout-account-tabs {
  display: flex;
  gap: 0.5rem;
  background: var(--input-background);
  padding: 0.5rem;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
}

.checkout-tab-btn {
  flex: 1;
  padding: 0.875rem 1rem;
  border: none;
  background: transparent;
  color: var(--foreground);
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.9375rem;
}

.checkout-tab-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.checkout-tab-content {
  display: none;
}

.checkout-tab-content.active {
  display: block;
}

/* Ensure sections inside billing stack */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: 100%;
  float: none;
}

.woocommerce-checkout .col2-set .col-2 {
  margin-top: 2rem;
}

/* ---------------------------------------------------------
   FORCE WOOCOMMERCE CHECKOUT GRID (Overrides JS changes)
   --------------------------------------------------------- */
.woocommerce-billing-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.5rem 1rem !important;
}

#billing_first_name_field {
  order: -10 !important;
}

#billing_last_name_field {
  order: -9 !important;
}

#billing_email_field {
  order: -8 !important;
}

#billing_phone_field {
  order: -7 !important;
}

.woocommerce-billing-fields__field-wrapper .form-row {
  margin-bottom: 0 !important;
  width: 100% !important;
  float: none !important;
  clear: none !important;
  padding: 0 !important;
}

/* 50% Columns */
#billing_first_name_field,
#billing_last_name_field,
#billing_email_field,
#billing_phone_field,
#billing_district_field {
  grid-column: span 3 !important;
}

/* 100% Columns */
#billing_country_field,
#billing_address_1_field,
#billing_national_short_address_field,
#billing_address_2_field,
#billing_company_field {
  grid-column: span 6 !important;
}

/* Remaining 50% Columns */
#billing_city_field,
#billing_state_field,
#billing_postcode_field {
  grid-column: span 3 !important;
}

@media (max-width: 575px) {
  .woocommerce-billing-fields__field-wrapper .form-row {
    grid-column: span 6 !important;
  }
}

/* ---------------------------------------------------------
   3. Inputs & Labels
   --------------------------------------------------------- */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea,
:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__rendered,
:where(.woocommerce) .select2-container .select2-dropdown {
  padding: 0.875rem 1rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  background-color: #4c55780a !important;
  color: var(--foreground) !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  transition: all 0.3s !important;
  box-shadow: none !important;
}


:where(.woocommerce) .select2-container .select2-selection {
  border-radius: 0.5rem !important;
  background-color: #4c55780a !important;
  color: var(--foreground) !important;
}

:where(.woocommerce) .select2-container .select2-selection {
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
}

.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout form .form-row textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.woocommerce-checkout label {
  display: flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  color: var(--foreground) !important;
}

/* Label Icons via CSS to survive JS overwrites */
#billing_first_name_field label::before,
#billing_last_name_field label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

#billing_email_field label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

#billing_phone_field label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

html.dark #billing_first_name_field label::before,
html.dark #billing_last_name_field label::before,
html.dark #billing_email_field label::before,
html.dark #billing_phone_field label::before {
  filter: invert(1) brightness(1.5);
}

.woocommerce-checkout label .required {
  color: var(--destructive) !important;
  text-decoration: none !important;
  font-weight: bold !important;
  margin-left: 0.25rem !important;
}

/* 4. Order Review */
.lunology-order-summary-title {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--foreground);
}

.lunology-checkout-products {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
}

.checkout-product-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.checkout-product-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.checkout-product-image {
  position: relative;
}

.checkout-product-remove,
.checkout-product-remove:visited,
.checkout-product-remove:active {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  color: var(--muted-foreground) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  line-height: 0;
  width: 24px;
  height: 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: none;
  transition: all 0.2s ease;
  z-index: 10;
}

.checkout-product-remove:hover {
  background-color: transparent !important;
  color: var(--foreground) !important;
  transform: scale(1.1);
}

.checkout-product-image .product-thumbnail {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0.5rem;
  background: var(--card);
}

.checkout-product-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.checkout-product-title {
  font-weight: 500;
  color: var(--foreground);
}

.checkout-product-qty,
.checkout-product-vat-note {
  color: var(--muted-foreground);
}

.checkout-product-price {
  font-weight: 600;
  color: var(--foreground);
}

.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
  padding: 0.5rem 0;
  border: none;
  color: var(--muted-foreground);
}

.woocommerce-checkout-review-order-table tfoot th {
  font-weight: 500;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td,
.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 1.125rem;
  color: var(--foreground) !important;
}

.woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* 5. Payment Box & Place Order Button */
#payment {
  background: transparent !important;
  border-radius: 0;
}

#payment ul.payment_methods {
  border-bottom: 1px solid var(--border);
  padding: 0 0 1rem 0;
  margin: 0 0 1rem 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  margin-bottom: 1rem !important;
  gap: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex: 0 0 1.25rem !important;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  margin: 0 !important;
  margin-top: 0.125rem !important;
  position: relative;
  cursor: pointer;
  outline: none;
  background: var(--background);
  transition: border-color 0.2s ease;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"]:checked {
  border-color: var(--primary);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 0.625rem;
  background: var(--primary);
  border-radius: 50%;
}

.language-ar .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] {
  margin: 0 !important;
  margin-top: 0.125rem !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  flex: 1 1 0% !important;
  margin: -3px 0 0 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  cursor: pointer;
  font-weight: 500;
  flex-wrap: wrap !important;
}

.language-ar .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  margin: 0 0.75rem 0 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
  max-height: 28px;
  object-fit: contain;
}

@media screen and (max-width: 480px) {
  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
    flex-basis: 100% !important;
    margin-top: 0.25rem !important;
    margin-left: 0 !important;
  }
}

.woocommerce-checkout #payment div.payment_box {
  flex: 0 0 100% !important;
  background: var(--input-background);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 0.5rem !important;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  width: 100%;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--input-background) !important;
}

.woocommerce-checkout #place_order,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button {
  width: 100%;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.woocommerce-checkout #place_order:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover {
  opacity: 0.9;
  background: var(--primary);
  color: var(--primary-foreground);
}

.lunology-checkout-account-block,
.woocommerce-checkout #customer_details .col-1 {
  background: #4c557808 !important;
}

.woocommerce-shipping-methods label {
  justify-content: flex-end;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  border: none;
}

.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  font-weight: 400;
  font-size: .875rem;
  padding: 2px 12px;
}

tr.order-total th,
tr.order-total td {
  border-top: 1px solid #dddddd !important;
  padding-top: 10px !important;
  font-weight: 600 !important;
  font-size: 1rem !important
}

.woocommerce ul#shipping_method .amount {
  font-weight: 400;
}

body.language-ar .woocommerce table.shop_table tbody th,
body.language-ar .woocommerce table.shop_table tfoot td,
body.language-ar .woocommerce table.shop_table tfoot th {
  text-align: right;
}

body.language-ar .woocommerce-shipping-methods label {
  justify-content: flex-start;
}



@media (min-width: 1024px) {
  .woocommerce-checkout .woocommerce {
    display: grid;
    gap: 0 2rem;
    align-items: start;
  }
}


p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  font-weight: 500;
}


/* ================================================
   WooCommerce My Account - Custom CSS
   Paste into: Appearance > Customize > Additional CSS
   or your child theme's style.css
   ================================================ */

/* ---------- WRAPPER ---------- */
.woocommerce-account .woocommerce {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ---------- SIDEBAR NAV ---------- */
.woocommerce-MyAccount-navigation {
  width: 240px;
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, padding-left 0.2s;
  gap: 10px;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--input-background);
  color: var(--primary);
  padding-left: 26px;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
  padding-left: 20px;
}

/* ---------- MAIN CONTENT AREA ---------- */
.woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ---------- DASHBOARD WELCOME ---------- */
.woocommerce-MyAccount-content p:first-child {
  font-size: 15px;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* ---------- ORDERS TABLE ---------- */
.woocommerce-orders-table,
.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 16px;
}

.woocommerce-orders-table thead,
.shop_table thead {
  background: var(--input-background);
  border-radius: 8px;
}

.woocommerce-orders-table th,
.shop_table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--foreground);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border);
}

.woocommerce-orders-table td,
.shop_table td {
  padding: 14px 16px;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.woocommerce-orders-table tr:hover td,
.shop_table tr:hover td {
  background: var(--input-background);
}

/* ---------- ORDER STATUS BADGES ---------- */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark,
mark.order-status {
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  background: transparent;
}

mark.order-status.status-completed,
.woocommerce-orders-table mark.status-completed {
  background: #e6f9f0;
  color: #1a8a5a;
}

mark.order-status.status-processing,
.woocommerce-orders-table mark.status-processing {
  background: #fff8e1;
  color: #b07a00;
}

mark.order-status.status-pending,
.woocommerce-orders-table mark.status-pending {
  background: #f0f0f0;
  color: #555;
}

mark.order-status.status-cancelled,
.woocommerce-orders-table mark.status-cancelled {
  background: #fdecea;
  color: #c0392b;
}

mark.order-status.status-on-hold,
.woocommerce-orders-table mark.status-on-hold {
  background: #e8f4ff;
  color: #1565c0;
}

mark.order-status.status-refunded,
.woocommerce-orders-table mark.status-refunded {
  background: #f3e5f5;
  color: #7b1fa2;
}

/* ---------- BUTTONS ---------- */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button,
.woocommerce-MyAccount-content input[type="submit"] {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 2px 8px rgba(74, 74, 244, 0.18);
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  background: #3737d4;
  color: var(--primary-foreground);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(74, 74, 244, 0.28);
}

.woocommerce-MyAccount-content .button.alt {
  background: var(--input-background);
  color: var(--primary);
  box-shadow: none;
}

.woocommerce-MyAccount-content .button.alt:hover {
  background: var(--border);
  color: #3737d4;
}

/* ---------- FORM FIELDS ---------- */
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-form-login,
.woocommerce-MyAccount-content .woocommerce-form-register {
  max-width: 560px;
}

.woocommerce-MyAccount-content .form-row {
  margin-bottom: 20px;
}

.woocommerce-MyAccount-content .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-MyAccount-content .form-row textarea,
.woocommerce-MyAccount-content .form-row select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--foreground);
  background: var(--background);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-sizing: border-box;
}

.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row textarea:focus,
.woocommerce-MyAccount-content .form-row select:focus {
  border-color: var(--primary);
  background: var(--background);
  box-shadow: 0 0 0 3px rgba(74, 74, 244, 0.12);
}

/* ---------- SECTION HEADINGS ---------- */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

/* ---------- ADDRESSES ---------- */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.woocommerce-Address {
  background: var(--input-background);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.woocommerce-Address-title h3 {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}

.woocommerce-Address address {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.8;
  font-style: normal;
}

/* ---------- NOTICES / ALERTS ---------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid transparent;
}

.woocommerce-message {
  background: var(--message-bg, #e6f9f0);
  color: var(--message-color, #1a8a5a);
  border-left-color: var(--message-color, #1a8a5a);
  max-width: 1280px;
  margin: 0 auto;
  margin-top: 50px;
}

.woocommerce-error {
  background: var(--error-bg, #fdecea);
  color: var(--error-color, #c0392b);
  border-left-color: var(--error-color, #c0392b);
}

.woocommerce-info {
  background: var(--info-bg, #e8f4ff);
  color: var(--info-color, #1565c0);
  border-left-color: var(--info-color, #1565c0);
}

/* ---------- DOWNLOADS TABLE ---------- */
.woocommerce-MyAccount-downloads .woocommerce-table {
  font-size: 14px;
}

/* ---------- PAGINATION ---------- */
.woocommerce-pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  justify-content: center;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #e0e0e0;
  color: #444;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.woocommerce-pagination ul li a:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.woocommerce-pagination ul li span.current {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.woocommerce-account .woocommerce::after,
.woocommerce-account .woocommerce::before {
  content: " ";
  display: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
    gap: 20px;
  }

  .woocommerce-MyAccount-navigation {
    width: 100%;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    gap: 6px;
  }

  .woocommerce-MyAccount-navigation ul li {
    border-bottom: none;
  }

  .woocommerce-MyAccount-navigation ul li a {
    padding: 8px 14px;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 13px;
  }

  .woocommerce-MyAccount-navigation ul li.is-active a {
    padding-left: 14px;
  }

  .woocommerce-MyAccount-content {
    padding: 20px;
  }

  .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }

  .woocommerce-orders-table th,
  .woocommerce-orders-table td {
    padding: 10px 10px;
    font-size: 13px;
  }

  .pd-related-title {
    font-size: 1.4rem;
  }
}

.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-form-login,
.woocommerce-MyAccount-content .woocommerce-form-register {
  max-width: 100%;
}

.woocommerce-checkout #payment ul.payment_methods li img {
  max-width: 260px !important;
}

div#customer_details .col-2 {
  display: none;
}

html[dir="rtl"] .pd-qty-section .pd-qty-controls {
  direction: rtl !important;
}


.woocommerce-page table.cart td.actions .coupon {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
  min-width: 300px;
  padding: 10px;
  height: 51px;
  border-radius: 12px;
}

.woocommerce .cart .button,
.woocommerce .cart input.button {
  float: none;
  margin-top: 0;
}

:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button {
  float: right !important;
  width: 200px !important;
  background: #3e4461 !important;
  color: #ffffff !important;
  padding: 18px !important;
}

#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
  background: #3e4461;
  border-radius: 12px;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals h2 {
  margin-bottom: 30px;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
  width: 100px;
  box-shadow: none;
}

div#wpgs-gallery {
  max-width: 600px !important;
}

.cfvsw-swatches-container {
  float: left;
  margin-right: 15px;
}

.woocommerce-message::before,
.woocommerce-info::before {
  display: none !important;
}

.checkout-product-item.cart_item dl.variation,
.checkout-product-info dl.variation,
.mini-cart-item-details dl.variation,
.mini-cart-item-info dl.variation,
.mini-cart-item-title~dl.variation {
  display: flex;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 4px;
  margin-bottom: 4px;
}

.checkout-product-item.cart_item dl.variation dt,
.checkout-product-info dl.variation dt,
.mini-cart-item-details dl.variation dt,
.mini-cart-item-info dl.variation dt,
.mini-cart-item-title~dl.variation dt {
  font-weight: 500;
  color: var(--foreground);
}

.checkout-product-item.cart_item dl.variation p,
.checkout-product-info dl.variation p,
.mini-cart-item-details dl.variation p,
.mini-cart-item-info dl.variation p,
.mini-cart-item-title~dl.variation p {
  margin: 0;
}

body.woocommerce-checkout .woocommerce a.remove:hover {
  background-color: transparent !important;
  color: var(--foreground) !important;
}

body.woocommerce-checkout button[name="apply_coupon"] {
  margin-top: 0 !important;
}

dt.variation-Giftwrappingthisproduct {
  color: #4CAF50 !important;
}

.woocommerce ul.cart_list li dl,
.woocommerce ul.product_list_widget li dl {
  padding-left: 0;
  border: none;
}

a.button.wc-forward {
  background: #3e4461;
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* ===== Order Received Page ===== */

/* ── Thank you notice ── */
.woocommerce-notice--success {
  background: var(--message-bg, #eaf3de);
  color: var(--message-color, #2e5e10);
  border: none;
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ── Order meta overview ── */
ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

ul.woocommerce-order-overview li {
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px !important;
}

ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 5px;
  font-size: 0.9rem;
  color: var(--foreground);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  word-break: break-all;
}

.woocommerce-order>p {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

/* ── Order details section ── */
.woocommerce-order-details {
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.woocommerce-order-details__title {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem !important;
  border: none !important;
}

/* ── Order table ── */
table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table.woocommerce-table--order-details thead th {
  font-size: 0.68rem;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  padding: 0 0 0.75rem;
  border-bottom: 0.5px solid var(--border);
  text-align: left;
}

table.woocommerce-table--order-details thead .product-total {
  text-align: right;
}

/* Product rows */
table.woocommerce-table--order-details tbody td {
  padding: 0.9rem 0;
  border-bottom: 0.5px solid var(--border);
  vertical-align: top;
  color: var(--foreground);
}

table.woocommerce-table--order-details .product-name a {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
}

table.woocommerce-table--order-details .product-name a:hover {
  color: #2e5e10;
}

table.woocommerce-table--order-details .product-quantity {
  font-weight: 400;
  color: var(--muted-foreground);
  font-size: 0.85rem;
  margin-left: 4px;
}

/* Item meta list (gift wrapping etc.) */
table.woocommerce-table--order-details .wc-item-meta {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

table.woocommerce-table--order-details .wc-item-meta li {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: baseline;
}

table.woocommerce-table--order-details .wc-item-meta-label {
  font-weight: 500;
  color: var(--foreground);
}

table.woocommerce-table--order-details .wc-item-meta p {
  display: inline;
  margin: 0;
}

table.woocommerce-table--order-details .product-total {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Tfoot totals ── */
table.woocommerce-table--order-details tfoot tr th,
table.woocommerce-table--order-details tfoot tr td {
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  border: none;
  font-weight: 400;
  background: none;
}

table.woocommerce-table--order-details tfoot tr th {
  text-align: left;
}

table.woocommerce-table--order-details tfoot tr td {
  text-align: right;
}

table.woocommerce-table--order-details tfoot tr:nth-last-child(2) th,
table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground);
  padding-top: 0.75rem;
  border-top: 0.5px solid var(--border);
}

/* Includes VAT note */
table.woocommerce-table--order-details .includes_tax {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 400;
  margin-top: 2px;
}

/* Last row (Payment method in tfoot) */
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  padding-top: 0.25rem;
}

/* ── Billing address section ── */
.woocommerce-customer-details {
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

.woocommerce-column__title {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem !important;
  border: none !important;
}

.woocommerce-customer-details address {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--muted-foreground);
  line-height: 1.8;
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin: 4px 0 0;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  ul.woocommerce-order-overview {
    grid-template-columns: 1fr;
  }
}

.woocommerce ul.order_details::after,
.woocommerce ul.order_details::before {
  display: none;
}

.hero-biogeometry {
  background: linear-gradient(180deg,
      #5d4f66 0%,
      #4a345e 45%,
      #281534 100%);
}

.biogeometry-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 1rem;
}

.biogeometry-hero-logo img {
  max-width: 250px;
}

.bio-shop-section .btn-primary-pill {
  background: #291435;
}

.bio-shop-grid .bio-product-card .bio-product-cat {
  background: #291435;
  font-size: 0.7rem;
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  border-radius: 1rem;
  padding: 0.1rem 0.5rem;
  color: #fff;
  display: none;
}

@keyframes giftSparkle {

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

  50% {
    transform: scale(1.15) rotate(15deg);
    opacity: 1;
  }
}

@keyframes giftPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(216, 90, 48, .35);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(216, 90, 48, 0);
  }
}

@keyframes giftFloat {

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

  50% {
    transform: translateY(-2px);
  }
}

.yayextra-option-field-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 18px 26px;
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 90, 48, .06), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(186, 117, 23, .08), transparent 50%),
    linear-gradient(135deg, #FFF8F2 0%, #FBE9DF 100%);
  border: 1px solid #F5C4B3;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(120, 40, 15, .04),
    0 8px 24px -8px rgba(216, 90, 48, .18),
    inset 0 1px 0 rgba(255, 255, 255, .6);
  max-width: fit-content;
  overflow: hidden;
}

/* Corner ribbon */
.yayextra-option-field-wrap::before {
  content: "";
  position: absolute;
  top: -32px;
  right: -32px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #D85A30 0%, #993C1D 100%);
  transform: rotate(45deg);
  opacity: .12;
  pointer-events: none;
}

/* Animated sparkle in corner */
.yayextra-option-field-wrap::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 14px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D85A30'%3E%3Cpath d='M12 0l2.4 9.6L24 12l-9.6 2.4L12 24l-2.4-9.6L0 12l9.6-2.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: giftSparkle 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* Title row */
.yayextra-option-field-name {
  flex-basis: 100%;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Gift icon badge */
.yayextra-option-field-name::before {
  content: "";
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #FCE3D6 0%, #F5C4B3 100%);
  border-radius: 8px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(216, 90, 48, .15);
  animation: giftFloat 3s ease-in-out infinite;
}

.yayextra-option-field-name::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 4px 0 0 4px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23993C1D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v10H4V12'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* Gradient title text */
.yayextra-option-field-name span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  background: linear-gradient(135deg, #993C1D 0%, #D85A30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hide native radios */
.yayextra-option-field-wrap input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.yayextra-option-field-wrap>div>span {
  display: flex;
}

.yayextra-option-field-wrap>div:not(.yayextra-option-field-name) {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Pill labels */
.yayextra-option-field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid #F5C4B3;
  font-size: 14px;
  font-weight: 500;
  color: #5C2614;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 1px 2px rgba(120, 40, 15, .05);
}

.yayextra-option-field-label::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #E5B5A2;
  background: #fff;
  flex-shrink: 0;
  transition: all .2s ease;
}

.yayextra-option-field-label:hover {
  border-color: #D85A30;
  background: #FFF6F2;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(216, 90, 48, .15);
}

/* Selected — gradient fill with pulsing glow */
.yayextra-option-field-wrap>div:has(input[type="radio"]:checked) .yayextra-option-field-label {
  background: linear-gradient(135deg, #D85A30 0%, #B84620 100%);
  border-color: #993C1D;
  color: #fff;
  font-weight: 600;
  box-shadow:
    0 4px 12px -2px rgba(216, 90, 48, .5),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: giftPulse 2s ease-out infinite;
}

.yayextra-option-field-wrap>div:has(input[type="radio"]:checked) .yayextra-option-field-label::before {
  background: #fff;
  border-color: #fff;
  box-shadow: inset 0 0 0 3px #D85A30, 0 0 0 2px rgba(255, 255, 255, .4);
}

.shop-card-price-wrap {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.bio-product-cat-insideimg {
  background: #291435;
  font-size: 0.7rem;
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  border-radius: 1rem;
  padding: 0.1rem 0.5rem;
  color: #fff;
  z-index: 10;
}

.language-ar .bio-product-cat-insideimg {
  left: auto;
  right: 0.5rem;
}

.pd-section .woocommerce-variation-add-to-cart .yayextra-option-field-name {
  flex-basis: auto;
}

.pd-section .woocommerce-variation-add-to-cart .yayextra-option-field-wrap>div>span {
  display: flex;
}

.language-ar .mega-menu-wrapper .mega-menu-inner .mega-menu-link svg {
  transform: rotate(90deg);
}


@media screen and (max-width:576px) {

  #billing_first_name_field,
  #billing_last_name_field,
  #billing_city_field,
  #billing_state_field,
  #billing_postcode_field,
  #billing_email_field,
  #billing_phone_field,
  #billing_district_field {
    grid-column: span 6 !important;
  }
}

@media screen and (max-width:480px) {
  .woocommerce-checkout #payment ul.payment_methods li img {
    max-width: 180px !important;
  }
}

.woocommerce-error::before {
  display: none !important;
}

body.woocommerce-checkout ul.woocommerce-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

p#billing_phone_field .optional {
  display: none;
}


label[for="billing_phone"]::after {
  content: " *";
  color: #e2401c;
  font-weight: 700;
}

a.outofstock {
  cursor: default;
}

a.outofstock .bio-product-cat-insideimg {
  filter: grayscale(100%);
  background: #AAA;
}

a.outofstock .outofstock-label.bio-product-cat {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: red;
  border-radius: 1rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  color: #fff;
}

a.outofstock .bio-product-img-wrap img.bio-product-img {
  filter: grayscale(100%);
}

a.outofstock .shop-card-content {
  opacity: 0.5;
}

.lunology-vat-notice {
  background: var(--background);
  border-radius: 100px;
  padding: 0.5rem;
  border: 1px solid var(--border);
}

.checkout-product-image .product-thumbnail {
  border: 1px solid var(--border);
}

.lunology-checkout-products {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
  padding: 0.5rem;
  background: var(--background);
  border-radius: 0.5rem;
}

.checkout-product-item.cart_item .checkout-product-info {
  gap: 0;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border-radius: 10px;
}

body.woocommerce-account .woocommerce-notices-wrapper:empty {
  display: none;
}

body.woocommerce-account .woocommerce .woocommerce-notices-wrapper {
  width: 100%
}

.woocommerce .woocommerce-message {
  margin-top: 1rem;
  margin-bottom: 1rem
}

.lunology-checkout-account-block {
  display: none;
}

@media screen and (max-width: 767px) {

  .woocommerce-checkout .lunology-checkout-account-block,
  .woocommerce-checkout .woocommerce-form-coupon,
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2,
  .woocommerce-checkout .lunology-order-summary-card {
    padding: 1rem;
  }
}

/* ---------- FULL PAGE SEARCH OVERLAY ---------- */
.lunology-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--background);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.search-overlay-close {
  position: absolute;
  top: 30px;
  right: 30px;
  background: none;
  border: none;
  color: var(--foreground);
  cursor: pointer;
  padding: 10px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}

html[dir="rtl"] .search-overlay-close {
  right: auto;
  left: 30px;
}

.search-overlay-close:hover {
  transform: rotate(90deg);
  opacity: 1;
}

.search-overlay-content {
  width: 100%;
  max-width: 800px;
  padding: 0 24px;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.4s ease 0.1s, opacity 0.4s ease 0.1s;
  opacity: 0;
}

.lunology-search-overlay.open .search-overlay-content {
  transform: translateY(0);
  opacity: 1;
}

.search-overlay-form {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  transition: border-color 0.3s ease;
}

.search-overlay-form:focus-within {
  border-color: var(--primary);
}

.search-overlay-input {
  width: 100%;
  background: transparent;
  border: none;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--foreground);
  padding: 10px 60px 10px 10px;
  outline: none;
  font-family: inherit;
}

.search-overlay-input::-webkit-search-cancel-button {
  display: none;
}

.search-overlay-input::placeholder {
  color: var(--muted-foreground);
  opacity: 0.5;
}

.search-overlay-submit {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 10px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

html[dir="rtl"] .search-overlay-submit {
  right: auto;
  left: 10px;
}

html[dir="rtl"] .search-overlay-input {
  padding: 10px 10px 10px 60px;
}

.search-overlay-submit:hover {
  opacity: 1;
}

.search-overlay-hint {
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .search-overlay-input {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 1200px) {
  .nav-links {
    gap: 1rem;
  }
}

/* ---------- WOOCOMMERCE RETURN TO SHOP BUTTON ---------- */
.woocommerce .return-to-shop a.button.wc-backward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: var(--primary);
  color: var(--primary-foreground) !important;
  border-radius: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  margin-top: 1.5rem;
}

.woocommerce .return-to-shop a.button.wc-backward:hover {
  opacity: 0.9;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
  background: var(--primary);
  color: var(--primary-foreground) !important;
}

/* ---------- VARIATION SWATCHES ---------- */
.cfvsw-swatches-option {
  border-color: var(--border) !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
}

.cfvsw-swatches-option:hover {
  border-color: var(--primary) !important;
  background: var(--muted) !important;
}

.cfvsw-swatches-option.selected,
.cfvsw-swatches-option.selected:hover,
.cfvsw-swatches-option.cfvsw-selected-swatch,
.cfvsw-swatches-option.cfvsw-selected-swatch:hover {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.cfvsw-selected-swatch {
  color: var(--foreground);
}

.cfvsw-swatches-option.cfvsw-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

body.single-product .woocommerce-notices-wrapper {
  max-width: 1280px;
  margin: 15px auto;
  padding: 0 1rem;
}

form.checkout_coupon.woocommerce-form-coupon .form-row {
  margin-bottom: 0;
}

/* ---------- SEARCH SUGGESTIONS ---------- */
.search-suggestions {
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.search-suggestions.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-suggestions::-webkit-scrollbar {
  width: 6px;
}
.search-suggestions::-webkit-scrollbar-track {
  background: transparent;
}
.search-suggestions::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--card);
  text-decoration: none;
  color: var(--foreground) !important;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.suggestion-item:hover {
  background: var(--input-background);
  border-color: var(--primary);
}

.suggestion-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.5rem;
  background: var(--background);
}

.suggestion-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}
html[dir="rtl"] .suggestion-details {
  text-align: right;
}

.suggestion-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--foreground);
}

.suggestion-price {
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 500;
}

.suggestion-message {
  text-align: center;
  padding: 2rem;
  color: var(--muted-foreground);
  font-size: 1.1rem;
}

.suggestion-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  gap: 0.75rem;
  color: var(--muted-foreground);
}
.suggestion-loading svg {
  animation: spin 1s linear infinite;
}

/* ===== Mobile menu collapsible section (Books & Journals) — 2026-07-02 ===== */
#mobile-menu .menu-item-has-children > a{
   display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
#mobile-menu .menu-item-has-children > a::after{
   content:""; flex:0 0 auto; width:7px; height:7px; margin-inline-start:10px;
   border-right:2px solid currentColor; border-bottom:2px solid currentColor;
   transform:translateY(-2px) rotate(45deg); transition:transform .25s ease; opacity:.55;
}
#mobile-menu .menu-item-has-children.open > a::after{ transform:translateY(1px) rotate(-135deg); }
#mobile-menu .sub-menu{
   list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .3s ease;
}
#mobile-menu .menu-item-has-children.open > .sub-menu{ max-height:300px; }
#mobile-menu .sub-menu > li > a{ padding-inline-start:34px; font-size:15px; opacity:.75; }

/* ===== Footer polish — 2026-07-02 ===== */
.footer-contact-link{ transition:color .2s ease; }
.footer-contact-link:hover{ color:var(--foreground); }
.footer-socials a{ transition:transform .2s ease, opacity .2s ease; }
.footer-socials a:hover{ transform:translateY(-2px); opacity:.85; }


/* ===== RTL mobile drawer open fix — 2026-07-02 (theme bug: html[dir=rtl] .mobile-menu specificity overrode .open) ===== */
html[dir="rtl"] .mobile-menu.open{ transform: translateX(0px); }


/* ===== Header live search (Zid-style) — 2026-07-03 ===== */
.header-search{ position:relative; }
.header-search-form{ display:flex; align-items:center; gap:.5rem; background:var(--muted); border:1px solid var(--border); border-radius:999px; padding:.45rem .85rem; transition:border-color .2s, box-shadow .2s; }
.header-search-form:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.header-search-ic{ flex:0 0 auto; opacity:.55; }
.header-search-input{ border:0; outline:0; background:transparent; color:var(--foreground); font-size:.88rem; font-family:inherit; width:150px; transition:width .22s ease; }
.header-search-form:focus-within .header-search-input{ width:210px; }
.header-search-input::placeholder{ color:var(--muted-foreground); }
.header-search-cancel{ display:none; }
.header-search-results{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; width:320px; max-width:90vw; background:var(--background); border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.28); overflow-y:auto; max-height:min(70vh,430px); z-index:10001; display:none; }
.header-search-results.open{ display:block; }
.hs-group-title{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-foreground); padding:.6rem .9rem .25rem; }
.hs-item{ display:flex; align-items:center; gap:.7rem; padding:.5rem .9rem; text-decoration:none; color:var(--foreground); }
.hs-item:hover, .hs-item.active{ background:var(--muted); }
.hs-item img, .hs-item-cat{ width:38px; height:38px; border-radius:8px; flex:0 0 auto; object-fit:cover; }
.hs-item-cat{ display:flex; align-items:center; justify-content:center; color:var(--primary); background:color-mix(in srgb, var(--primary) 14%, transparent); }
.hs-item-txt{ flex:1 1 auto; min-width:0; }
.hs-item-name{ display:block; font-size:.87rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-item-meta{ display:block; font-size:.72rem; color:var(--muted-foreground); margin-top:1px; }
.hs-empty, .hs-loading{ padding:1rem .9rem; color:var(--muted-foreground); font-size:.85rem; text-align:center; }
.header-search--mobile{ display:none; }
@media (max-width:900px){ .header-search-input{ width:110px; } .header-search-form:focus-within .header-search-input{ width:150px; } }
@media (max-width:767px){
  #header-search{ display:none; }
  .header-search--mobile{ display:block; position:fixed; top:0; inset-inline:0; z-index:10002; background:var(--background); border-bottom:1px solid var(--border); padding:.7rem 1rem; transform:translateY(-100%); transition:transform .28s ease; box-shadow:0 8px 24px rgba(0,0,0,.2); }
  .header-search--mobile.active{ transform:translateY(0); }
  .header-search--mobile .header-search-input{ width:100%; flex:1 1 auto; }
  .header-search--mobile .header-search-results{ position:static; width:auto; margin-top:.6rem; border:0; box-shadow:none; border-radius:10px; }
  .header-search-cancel{ display:inline-block; border:0; background:transparent; color:var(--primary); font-size:.85rem; font-family:inherit; cursor:pointer; white-space:nowrap; padding:0 .2rem; }
}

/* RTL mobile drawer: open from the RIGHT — 2026-07-03 */
html[dir="rtl"] .mobile-menu{ left:auto; right:0; border-right:0; border-left:1px solid var(--border); transform:translateX(100%); }
html[dir="rtl"] .mobile-menu.open{ transform:translateX(0px); }

/* search result price line — 2026-07-03 */
.hs-item-price{ color:var(--foreground); }
.hs-item-price .woocommerce-Price-amount{ font-weight:600; }
.hs-item-price del{ opacity:.5; margin-inline-end:4px; font-weight:400; }
.hs-item-price ins{ text-decoration:none; }


/* ===== Tamara widget spacing on product page — 2026-07-03 ===== */
.pd-info-col tamara-widget { display: block; margin-bottom: 24px; }

/* ===== Uniform theme (light/dark) switch transition — 2026-07-03 =====
   During toggle, <html> gets .theme-switching so every element fades its
   colors together (same duration + delay) instead of section-by-section. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: background-color 0.5s ease, background-image 0.5s ease,
                border-color 0.5s ease, color 0.5s ease, fill 0.5s ease,
                stroke 0.5s ease, box-shadow 0.5s ease !important;
    transition-delay: 0s !important;
}


/* ===== RTL fix for Contact Form 7 on Arabic pages — 2026-07-03 =====
   CF7 outputs the form dir="ltr" (site locale is en), so labels/fields
   aligned left on the Arabic contact page. Force RTL on Arabic pages. */
html[dir="rtl"] .wpcf7,
html[dir="rtl"] .wpcf7 .wpcf7-form,
html[dir="rtl"] .contact-form { direction: rtl; text-align: right; }
html[dir="rtl"] .contact-form .form-label,
html[dir="rtl"] .contact-form .form-input,
html[dir="rtl"] .contact-form .form-textarea,
html[dir="rtl"] .contact-form .wpcf7-form-control { direction: rtl; text-align: right; }


/* ===== Contact form label color — was near-invisible #d4d4d8 in light mode — 2026-07-03 ===== */
.contact-form .form-label { color: var(--muted-foreground); }


/* ===== Unify Arabic fonts (RTL) — 2026-07-03 =====
   --font-heading (Cormorant Garamond) & --font-body (Jost) are Latin-only;
   on Arabic pages headings fell back to an off-brand serif. Remap both to
   the Arabic brand stack so every var(--font-*) usage is IBM Plex Sans Arabic. */
html[dir="rtl"] {
    --font-heading: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
    --font-body: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
}


/* ===== WooCommerce coupon/form-row RTL alignment — 2026-07-03 =====
   Site locale is en so woocommerce-rtl.css isn't loaded; .form-row on the
   coupon area stayed text-align:left on the Arabic checkout. */
html[dir="rtl"] .woocommerce form .form-row,
html[dir="rtl"] .woocommerce-checkout .form-row,
html[dir="rtl"] .woocommerce-cart .form-row { text-align: right; }


/* ===== Justify long-form content text (tidy line edges) — 2026-07-03 ===== */
.entry-content p,
.entry-content li { text-align: justify; text-justify: inter-word; }


/* ===== Justify prose on About (قصتنا) & BioGeometry — 2026-07-03 =====
   Only the left/start-aligned body prose; centered intro/closing statements
   (.elements-intro-desc/.bio-shop-desc) are left centered by design. */
.about-text,
.about-text p,
.element-desc,
.bio-app-desc { text-align: justify; text-justify: inter-word; }


/* ===== Elements-of-life cards as product collections — 2026-07-03 ===== */
.element-card { position: relative; }
.element-badge {
    position: absolute; inset-inline-end: 20px; top: 20px;
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600; letter-spacing: .03em;
    padding: 4px 12px; border-radius: 999px;
    background: var(--muted); color: var(--foreground);
    border: 1px solid var(--border);
}
.element-badge-soon { background: transparent; color: var(--muted-foreground); }
.element-cta {
    display: flex; align-items: center; justify-content: flex-start; gap: 7px;
    margin-top: 18px; font-weight: 600; font-size: 14px; color: var(--foreground);
}
.element-cta-arrow { transition: transform .28s ease; flex-shrink: 0; }
html[dir="rtl"] .element-cta-arrow { transform: scaleX(-1); }
.element-card.element-has-link {
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.element-card.element-has-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(61,68,97,.14);
    border-color: rgba(61,68,97,.30);
}
.element-card.element-has-link:hover .element-cta-arrow { transform: translateX(5px); }
html[dir="rtl"] .element-card.element-has-link:hover .element-cta-arrow { transform: scaleX(-1) translateX(5px); }
.element-card.element-soon { cursor: default; }
.element-card.element-soon .element-icon-circle,
.element-card.element-soon .element-title,
.element-card.element-soon .element-desc { opacity: .8; }


/* ===== Pre-Order ===== */
.lunology-preorder-tag{display:inline-block;font-size:.7rem;font-weight:600;line-height:1;padding:4px 9px;border-radius:999px;background:var(--muted,rgba(76,85,120,.08));color:var(--foreground,#0f0f0f);border:1px solid var(--border,rgba(76,85,120,.2));margin-inline-start:8px;vertical-align:middle;letter-spacing:.2px;}
.lunology-preorder-note{margin:1.1rem 0;padding:1rem 1.25rem;border:1px solid var(--border,rgba(76,85,120,.2));border-radius:14px;background:var(--card,rgba(76,85,120,.03));color:var(--foreground,#0f0f0f);line-height:1.9;font-size:.95rem;}
.lunology-preorder-note strong{color:var(--foreground,#0f0f0f);}
html[dir="rtl"] .lunology-preorder-note{text-align:right;}

/* Hide Tamara BNPL promo on pre-order contexts (gateway is hidden at checkout) */

/* Pre-order dynamic availability window (product page) */
.pd-preorder-window{margin:.7rem 0 0;padding:.7rem 1rem;border-radius:12px;background:var(--card,rgba(76,85,120,.03));border:1px solid var(--border,rgba(76,85,120,.2));color:var(--foreground,#0f0f0f);font-size:.9rem;line-height:1.85;}
html[dir="rtl"] .pd-preorder-window{text-align:right;}


/* ===== WooCommerce notices — Lunology rebranded notices ===== */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
    position: relative !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    border: 1px solid var(--border, rgba(76,85,120,.18)) !important;
    border-top: 1px solid var(--border, rgba(76,85,120,.18)) !important;
    border-inline-start: 4px solid var(--primary, #3d4461) !important;
    border-radius: 14px !important;
    background: var(--card, #ffffff);
    color: var(--foreground, #0f0f0f);
    padding: 15px 20px !important;
    margin: 0 0 1.1rem !important;
    font-size: .95rem;
    line-height: 1.85;
    list-style: none !important;
    box-shadow: 0 8px 30px rgba(15,15,15,.06);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    content: "" !important;
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    flex: 0 0 24px;
    width: 24px; height: 24px;
    margin: 0 !important;
    border-radius: 50%;
    background-color: var(--primary, #3d4461);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}
.woocommerce-message { background: rgba(63,157,109,.09); border-inline-start-color: #3f9d6d !important; }
.woocommerce-message::before { background-color: #3f9d6d; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.woocommerce-info { background: rgba(76,85,120,.07); border-inline-start-color: var(--primary,#3d4461) !important; }
.woocommerce-info::before { background-color: var(--primary,#3d4461); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.6' r='.7' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); }
.woocommerce-error { background: rgba(192,87,107,.09); border-inline-start-color: #c0576b !important; flex-direction: row; }
.woocommerce-error::before { background-color: #c0576b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='17' r='.7' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    margin-inline-start: auto !important;
    background: var(--primary, #3d4461) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 22px !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover { filter: brightness(1.12); }
/* spacing between pre-order window box and description */
.pd-preorder-window { margin-bottom: 1.1rem; }


/* notice-icon-visibility: force the rebranded icon badge to render */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: inline-block !important; visibility: visible !important; opacity: 1 !important; }

/* RTL variation swatch alignment: right-align size/color swatches like the rest of the Arabic layout */
html[dir="rtl"] .cfvsw-swatches-container{width:100% !important;justify-content:flex-start !important;}
html[dir="rtl"] .variable-items-wrapper{justify-content:flex-end !important;}


/* ─── LUN CART LAYOUT: balanced two-column cart (items + sticky totals sidebar) ─── */
.woocommerce-cart .cart-collaterals .cart_totals{ float:none; width:100%; }
.woocommerce-cart .cart-collaterals{ width:100%; }
@media (min-width:981px){
  .woocommerce-cart .woocommerce{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    column-gap:36px; row-gap:24px; align-items:start;
  }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-cart .woocommerce > .woocommerce-info,
  .woocommerce-cart .woocommerce > .cross-sells{ grid-column:1 / -1; }
  .woocommerce-cart .woocommerce-cart-form{ grid-column:1; min-width:0; }
  .woocommerce-cart .cart-collaterals{ grid-column:2; min-width:0; position:sticky; top:90px; }
  .woocommerce-cart .cart-collaterals .cart_totals{
    background:#fff; border:1px solid rgba(61,68,97,.12); border-radius:16px; padding:20px 22px;
    box-shadow:0 10px 30px rgba(27,29,42,.06);
  }
}


/* ===== Hero scroll offset — 2026-07-04 ===== */
#lunaMoon { scroll-margin-top: 90px; }
/* ===== BioGeometry shop — sub-category groups + show-more — 2026-07-04 ===== */
.bio-shop-groups{display:flex;flex-direction:column;gap:2.75rem;}
.bio-shop-group.is-collapsed{display:none;}
.bio-group-title{font-family:var(--font-heading);font-size:1.4rem;font-weight:600;text-align:start;margin:0 0 1.25rem;color:var(--foreground,#2b3049);}
.bio-group-title::after{content:"";display:block;width:46px;height:2px;margin-top:.55rem;margin-inline-start:0;background:#cbb27e;opacity:.55;border-radius:2px;}
.bio-show-more{cursor:pointer;border:none;display:inline-flex;align-items:center;gap:.5rem;}
@media (min-width:1024px){.bio-shop-groups{gap:3.25rem;}}
@media (max-width:600px){.bio-group-title{font-size:1.15rem;margin-bottom:1rem;}}


/* ===== Theme toggle — soft glow spreading from centre to the sides via View Transitions (no overlay) — 2026-07-04 ===== */
@keyframes lun-theme-open {
    from { -webkit-mask-size: 0% 100%;     mask-size: 0% 100%; }
    to   { -webkit-mask-size: 340% 100%; mask-size: 340% 100%; }
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) {
    z-index: 1;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 30%, #000 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 30%, #000 70%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    animation: lun-theme-open 1.5s cubic-bezier(0.35, 0, 0.15, 1) both;
}
@media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; -webkit-mask-image: none; mask-image: none; } }


/* ===================== LUN CHECKOUT — address book + modal ===================== */
.lun-address-book { margin: 0 0 1.5rem; }
.lun-ab-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.lun-ab-loading, .lun-ab-empty { color: var(--muted-foreground, #6b7280); font-size: .95rem; padding: .5rem 0; }
.lun-ab-card { display: flex; align-items: flex-start; gap: .75rem; border: 1.5px solid rgba(43,48,73,.14); border-radius: 14px; padding: 1rem 1.1rem; cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s; background: #fff; }
.lun-ab-card:hover { border-color: rgba(203,178,126,.7); }
.lun-ab-card.is-selected { border-color: #2b3049; box-shadow: 0 0 0 3px rgba(43,48,73,.08); background: #fbfaf7; }
.lun-ab-radio { margin-top: .15rem; accent-color: #2b3049; width: 18px; height: 18px; flex: 0 0 auto; }
.lun-ab-card-body { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 auto; min-width: 0; }
.lun-ab-card-title { font-weight: 700; color: #2b3049; display: flex; align-items: center; gap: .5rem; }
.lun-ab-default { font-style: normal; font-size: .68rem; font-weight: 700; background: rgba(203,178,126,.2); color: #8a6d2f; padding: .1rem .5rem; border-radius: 999px; }
.lun-ab-card-line { color: #3a3f57; font-size: .92rem; }
.lun-ab-card-sub { color: var(--muted-foreground, #6b7280); font-size: .85rem; }
.lun-ab-card-actions { display: flex; gap: .35rem; flex: 0 0 auto; align-self: center; }
.lun-ab-card-actions button { background: none; border: none; cursor: pointer; font-size: .82rem; color: #6b7280; padding: .25rem .5rem; border-radius: 8px; font-family: inherit; }
.lun-ab-card-actions button:hover { background: rgba(43,48,73,.06); color: #2b3049; }
.lun-ab-del.is-confirm { color: #b3261e; font-weight: 700; }
.lun-ab-add { display: inline-flex; align-items: center; gap: .5rem; background: none; cursor: pointer; border: 1.5px dashed rgba(43,48,73,.3); border-radius: 12px; padding: .7rem 1.1rem; color: #2b3049; font-weight: 600; font-family: inherit; font-size: .95rem; transition: border-color .18s, background .18s; }
.lun-ab-add:hover { border-color: #cbb27e; background: rgba(203,178,126,.08); }
.lun-ab-add-plus { font-size: 1.2rem; line-height: 1; }
.lun-ab-hidden-field { display: none !important; }

body.lun-modal-open { overflow: hidden; }
.lun-addr-modal { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lun-addr-modal[hidden] { display: none !important; }
.lun-addr-modal__overlay { position: absolute; inset: 0; background: rgba(15,17,28,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.lun-addr-modal__box { position: relative; background: #fff; border-radius: 18px; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; padding: 1.6rem 1.6rem 1.8rem; box-shadow: 0 24px 70px rgba(15,17,28,.35); }
.lun-addr-modal__x { position: absolute; inset-inline-start: 1rem; top: 1rem; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #6b7280; }
.lun-addr-modal__x:hover { color: #2b3049; }
.lun-addr-modal__title { text-align: center; font-size: 1.25rem; font-weight: 700; color: #2b3049; margin: 0 0 1.3rem; }
.lun-addr-form { display: flex; flex-direction: column; gap: 1rem; }
.lun-addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lun-addr-f { display: flex; flex-direction: column; gap: .4rem; }
.lun-addr-f > span { font-size: .9rem; font-weight: 600; color: #2b3049; }
.lun-addr-f > span b { color: #cbb27e; }
.lun-addr-f input, .lun-addr-f select { width: 100%; border: 1.5px solid rgba(43,48,73,.18); border-radius: 12px; padding: .7rem .85rem; font-family: inherit; font-size: .95rem; background: #fff; color: #2b3049; box-sizing: border-box; }
.lun-addr-f input:focus, .lun-addr-f select:focus { outline: none; border-color: #2b3049; box-shadow: 0 0 0 3px rgba(43,48,73,.08); }
.lun-addr-hint { color: var(--muted-foreground, #6b7280); font-size: .78rem; }
.lun-addr-err { background: rgba(179,38,30,.08); color: #b3261e; border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; }
.lun-addr-err[hidden] { display: none; }
.lun-addr-submit { margin-top: .3rem; background: #2b3049; color: #fff; border: none; border-radius: 12px; padding: .85rem 1rem; font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .18s; }
.lun-addr-submit:hover { background: #3d4461; }
.lun-addr-submit:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) { .lun-addr-grid { grid-template-columns: 1fr; } }


/* ===================== LUN login gate ===================== */
.lun-login-gate { display: flex; justify-content: center; padding: 2rem 1rem 4rem; }
.lun-login-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid rgba(43,48,73,.1); border-radius: 20px; padding: 2.4rem 2rem; text-align: center; box-shadow: 0 18px 50px rgba(15,17,28,.08); }
.lun-login-badge { width: 60px; height: 60px; border-radius: 50%; background: rgba(203,178,126,.16); color: #2b3049; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; }
.lun-login-title { font-size: 1.4rem; font-weight: 700; color: #2b3049; margin: 0 0 .6rem; }
.lun-login-sub { color: var(--muted-foreground, #6b7280); font-size: .95rem; line-height: 1.7; margin: 0 0 1.6rem; }
.lun-login-form .woocommerce-form-login { border: none; padding: 0; margin: 0; }
.lun-login-form .form-row { margin-bottom: 1rem; text-align: start; }
.lun-login-form label { display: block; font-weight: 600; color: #2b3049; font-size: .9rem; margin-bottom: .35rem; }
.lun-login-form input[type=text], .lun-login-form input[type=password], .lun-login-form input[type=email] { width: 100%; border: 1.5px solid rgba(43,48,73,.18); border-radius: 12px; padding: .75rem .85rem; font-family: inherit; font-size: .95rem; box-sizing: border-box; }
.lun-login-form input:focus { outline: none; border-color: #2b3049; box-shadow: 0 0 0 3px rgba(43,48,73,.08); }
.lun-login-form .woocommerce-form-login__submit, .lun-login-form button[type=submit] { width: 100%; background: #2b3049; color: #fff; border: none; border-radius: 12px; padding: .85rem 1rem; font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: .3rem; transition: background .18s; }
.lun-login-form .woocommerce-form-login__submit:hover, .lun-login-form button[type=submit]:hover { background: #3d4461; }
.lun-login-form .woocommerce-form-login__rememberme { font-weight: 400; font-size: .85rem; color: #6b7280; display: inline-flex; align-items: center; gap: .4rem; }
.lun-login-form .lost_password { font-size: .85rem; margin-top: .6rem; text-align: start; }
.lun-login-form .lost_password a { color: #8a6d2f; }
.lun-login-divider { display: flex; align-items: center; gap: .8rem; color: #9aa0b0; font-size: .85rem; margin: 1.4rem 0; }
.lun-login-divider::before, .lun-login-divider::after { content: ''; flex: 1; height: 1px; background: rgba(43,48,73,.12); }
.lun-login-register { display: block; border: 1.5px solid #2b3049; color: #2b3049; border-radius: 12px; padding: .8rem 1rem; font-weight: 700; text-decoration: none; transition: background .18s, color .18s; }
.lun-login-register:hover { background: #2b3049; color: #fff; }


/* ===================== LUN CHECKOUT — staged Zid layout ===================== */
#billing_country_field, #billing_city_field, #billing_national_short_address_field,
#billing_address_1_field, #billing_district_field, #billing_building_no_field,
#billing_national_address_field, #billing_state_field, #billing_postcode_field { display: none !important; }
.lunology-billing-title { display: none !important; }

.woocommerce-billing-fields {
  background: #fff; border: 1px solid rgba(43,48,73,.1); border-radius: 18px;
  padding: 1.6rem 1.6rem 1.4rem; box-shadow: 0 10px 30px rgba(15,17,28,.05);
}
.lun-stage-head {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.1rem; font-weight: 700; color: #2b3049; margin: 0 0 1.1rem;
}
.lun-stage-num {
  width: 28px; height: 28px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; background: #2b3049; color: #fff;
  border-radius: 50%; font-size: .9rem; font-weight: 700; line-height: 1;
}
#lun-address-book { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(43,48,73,.08); }

.woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.woocommerce-billing-fields__field-wrapper .form-row { margin: 0; width: auto; float: none; grid-column: span 1; padding: 0; }
.woocommerce-billing-fields__field-wrapper label { display: block; font-weight: 600; color: #2b3049; font-size: .88rem; margin-bottom: .3rem; }
.woocommerce-billing-fields__field-wrapper .input-text,
.woocommerce-billing-fields__field-wrapper input[type=text],
.woocommerce-billing-fields__field-wrapper input[type=email],
.woocommerce-billing-fields__field-wrapper input[type=tel] {
  width: 100%; border: 1.5px solid rgba(43,48,73,.18); border-radius: 12px; padding: .7rem .85rem;
  font-family: inherit; font-size: .95rem; box-sizing: border-box;
}
.woocommerce-billing-fields__field-wrapper .input-text:focus { outline: none; border-color: #2b3049; box-shadow: 0 0 0 3px rgba(43,48,73,.08); }
@media (max-width: 600px) { .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } }

.lun-pay-head { margin: 1.4rem 0 1rem; padding-top: 1.3rem; border-top: 1px solid rgba(43,48,73,.08); }


/* ===================== LUN order note toggle ===================== */
.lun-note { margin-top: 1.3rem; }
.lun-note-toggle { display: inline-flex; align-items: center; gap: .5rem; background: none; border: none; cursor: pointer; color: #2b3049; font-weight: 600; font-family: inherit; font-size: .95rem; padding: .3rem 0; }
.lun-note-toggle .lun-note-plus { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(43,48,73,.3); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; transition: transform .2s; }
.lun-note-toggle.is-open .lun-note-plus { transform: rotate(45deg); }
.lun-note-body { margin-top: .7rem; }
.lun-note-body[hidden] { display: none; }
.lun-note-text { width: 100%; border: 1.5px solid rgba(43,48,73,.18); border-radius: 12px; padding: .7rem .85rem; font-family: inherit; font-size: .95rem; box-sizing: border-box; resize: vertical; }
.lun-note-text:focus { outline: none; border-color: #2b3049; box-shadow: 0 0 0 3px rgba(43,48,73,.08); }

/* Newsletter email input: align placeholder to right on Arabic (RTL), left on English (LTR) */
html[dir="rtl"] .newsletter-input { text-align: right; }
html[dir="ltr"] .newsletter-input { text-align: left; }

/* Mobile menu social buttons — tidy row: remove stray mobile margin, add separator, larger tap targets, aligned to menu side */
.mobile-menu-socials { gap: 0.85rem; justify-content: flex-start; align-items: center; margin-top: 1.5rem; padding: 1.25rem 0 1rem; border-top: 1px solid var(--border); }
.mobile-menu-socials .social-link { margin-bottom: 0 !important; width: 40px; height: 40px; }
.mobile-menu-socials .social-link svg { width: 18px; height: 18px; }


/* ============================================================================
   LUNOLOGY CART PAGE (matches checkout, responsive, RTL + light/dark) 2026-07-05
   ============================================================================ */
.lunology-cart { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.lunology-cart-heading { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; margin: 0 0 1.5rem; color: var(--foreground); }
.lunology-cart-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.lunology-cart-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.lunology-cart-items { background: var(--background); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem 1.25rem 0.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* Cart item row: reuse .checkout-product-item; add stepper + price row */
.lunology-cart-item .checkout-product-info { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; width: 100%; }
.lunology-cart-item .checkout-product-title { flex: 1 1 100%; font-size: 0.95rem; }
.lunology-cart-item .checkout-product-price { order: 3; margin-inline-start: auto; font-size: 0.95rem; }
.lunology-cart-item .lunology-cart-qty-ctrl { order: 2; }
.lunology-cart-item .checkout-product-image .product-thumbnail { width: 84px; height: 84px; }

/* Quantity stepper (mirrors mini-cart) */
.lunology-cart-qty-ctrl { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 100px; background: var(--background); overflow: hidden; }
.lunology-cart-qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; background: transparent; color: var(--foreground); cursor: pointer; transition: background .15s; padding: 0; }
.lunology-cart-qty-btn:hover { background: var(--muted); }
.lunology-cart-qty-btn svg { width: 15px; height: 15px; }
.lunology-cart-qty-val { min-width: 36px; text-align: center; font-weight: 600; font-size: 0.9rem; color: var(--foreground); }

/* Summary card */
.lunology-cart-aside { min-width: 0; }
.lunology-cart-summary-card { background: var(--background); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.lunology-cart-summary-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; margin: 0 0 1rem; color: var(--foreground); }
.lunology-cart-totals { width: 100%; border-collapse: collapse; border: 0; margin: 0; background: transparent; }
.lunology-cart-totals th, .lunology-cart-totals td { text-align: start; padding: 0.5rem 0; font-size: 0.9rem; font-weight: 400; color: var(--muted-foreground); border: 0; background: transparent; }
.lunology-cart-totals td { text-align: end; color: var(--foreground); font-weight: 500; }
.lunology-cart-totals .cart-discount td { color: var(--primary); }
.lunology-cart-totals .order-total th, .lunology-cart-totals .order-total td { font-size: 1.05rem; font-weight: 700; color: var(--foreground); padding-top: 0.85rem; border-top: 1px solid var(--border); }
.lunology-cart-summary-card .lunology-vat-notice { margin: 0.85rem 0; font-size: 0.75rem; text-align: center; color: var(--muted-foreground); }
.lunology-cart-checkout-actions { margin-top: 1rem; }
.lunology-cart-checkout-actions .wc-proceed-to-checkout { padding: 0; }
.lunology-cart-checkout-actions a.checkout-button { margin: 0 !important; }

/* Coupon */
.lunology-cart-coupon { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lunology-coupon-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: transparent; border: 0; padding: 0.9rem 1rem; cursor: pointer; color: var(--foreground); font-size: 0.95rem; font-family: inherit; }
.lunology-coupon-toggle svg { color: var(--muted-foreground); flex: 0 0 auto; }
.lunology-coupon-fields { display: flex; gap: 0.5rem; padding: 0 1rem 1rem; }
.lunology-coupon-fields[hidden] { display: none; }
.lunology-coupon-fields input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; background: var(--background); color: var(--foreground); font-family: inherit; font-size: 0.9rem; }
.lunology-coupon-fields .button { border-radius: 10px; white-space: nowrap; }

/* Suggestions */
.lunology-cart-suggestions { margin-top: 2.5rem; }
.lunology-cart-suggestions-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; margin: 0 0 1.1rem; color: var(--foreground); }
.lunology-cart-suggestions-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1rem; }
.lunology-suggest-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem; background: var(--background); transition: transform .15s, box-shadow .15s; }
.lunology-suggest-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.lunology-suggest-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; background: var(--card); }
.lunology-suggest-title { font-size: 0.82rem; margin-top: 0.55rem; font-weight: 500; line-height: 1.3; color: var(--foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lunology-suggest-price { font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem; color: var(--primary); }

/* Empty state */
.lunology-cart-empty-inner { max-width: 480px; margin: 3rem auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; }
.lunology-cart-empty-icon { color: var(--muted-foreground); opacity: 0.45; }
.lunology-cart-empty-title { font-family: var(--font-heading); font-size: 1.8rem; margin: 0; color: var(--foreground); }
.lunology-cart-empty-text { color: var(--muted-foreground); margin: 0; line-height: 1.6; }
.lunology-cart-empty-btn { margin-top: 0.5rem; }

/* Loading state */
.lunology-cart.is-updating .lunology-cart-items,
.lunology-cart.is-updating .lunology-cart-summary { opacity: 0.55; pointer-events: none; transition: opacity .15s; }

/* Neutralise leftover default Woo cart layout inside our cart */
.lunology-cart .cart-collaterals { width: auto; float: none; }
.lunology-cart form.woocommerce-cart-form { margin: 0; }

/* Desktop two-column with sticky summary */
@media (min-width: 901px) {
	.lunology-cart-grid { grid-template-columns: minmax(0,1fr) 360px; gap: 2rem; }
	.lunology-cart-aside { position: sticky; top: 100px; }
}

/* Mobile refinements */
@media (max-width: 900px) {
	.lunology-cart { padding: 1.25rem 1rem 3rem; }
	.lunology-cart-items { padding: 1rem 1rem 0.25rem; border-radius: 14px; }
	.lunology-cart-item .checkout-product-image .product-thumbnail { width: 72px; height: 72px; }
	.lunology-cart-qty-btn { width: 40px; height: 40px; }
	.lunology-cart-qty-val { min-width: 40px; }
	.lunology-cart-suggestions-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.85rem; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
	.lunology-cart-suggestions-row .lunology-suggest-card { flex: 0 0 46%; scroll-snap-align: start; }
}


/* ---- LUNOLOGY CART PAGE OVERRIDES v2 (button + remove color) ---- */
.lunology-cart-checkout-actions a.checkout-button,
.lunology-cart-checkout-actions a.checkout-button.alt {
	background: var(--primary) !important;
	color: var(--primary-foreground) !important;
	border: 0 !important;
}
.lunology-cart-checkout-actions a.checkout-button:hover,
.lunology-cart-checkout-actions a.checkout-button.alt:hover {
	background: var(--primary) !important;
	opacity: 0.92 !important;
}
.lunology-cart-remove.remove,
.lunology-cart .checkout-product-remove.remove {
	color: var(--muted-foreground) !important;
	background: transparent !important;
}
.lunology-cart-remove.remove:hover,
.lunology-cart .checkout-product-remove.remove:hover {
	color: var(--foreground) !important;
	background: transparent !important;
}

/* proceed button full width */
.lunology-cart-checkout-actions a.checkout-button,
.lunology-cart-checkout-actions a.checkout-button.alt {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
	padding: 1em 1.25em !important;
	font-size: 1.05em !important;
	border-radius: 12px !important;
	margin: 0 !important;
}

/* cart full grid span: theme sets .woocommerce{display:grid}; let our cart use full width */
.woocommerce > .lunology-cart { grid-column: 1 / -1 !important; justify-self: stretch !important; width: 100%; }
body.woocommerce-cart .woocommerce { display: block; }


/* ============================================================================
   LUNOLOGY PRODUCT Q&A / comments (name + comment, threaded) 2026-07-06
   ============================================================================ */
.lunology-qa-comment { list-style: none; margin: 0 0 1rem; }
.lunology-qa-comment .children { list-style: none; margin: 1rem 0 0; padding-inline-start: 2.4rem; }
.lunology-qa-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.lunology-qa-avatar img { width: 46px; height: 46px; border-radius: 50%; display: block; }
.lunology-qa-body { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 0.85rem 1rem; }
.lunology-qa-comment.is-staff > .lunology-qa-item > .lunology-qa-body { background: rgba(61,68,97,0.06); border-color: var(--primary); }
.lunology-qa-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.lunology-qa-author { font-weight: 600; color: var(--foreground); font-size: 0.95rem; }
.lunology-qa-badge { font-size: 0.7rem; font-weight: 600; background: var(--primary); color: var(--primary-foreground); padding: 0.12rem 0.5rem; border-radius: 100px; }
.lunology-qa-date { font-size: 0.75rem; color: var(--muted-foreground); margin-inline-start: auto; }
.lunology-qa-text { color: var(--foreground); font-size: 0.92rem; line-height: 1.6; }
.lunology-qa-text p:last-child { margin-bottom: 0; }
.lunology-qa-pending { display: block; font-size: 0.78rem; color: #b8860b; margin-bottom: 0.35rem; }
.lunology-qa-actions { margin-top: 0.5rem; }
.lunology-qa-actions a, .woocommerce-Reviews .comment-reply-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.lunology-qa-actions a:hover { text-decoration: underline; }
.woocommerce-Reviews-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: var(--foreground); margin-bottom: 1.1rem; }
.woocommerce-noreviews { color: var(--muted-foreground); background: var(--card); border: 1px dashed var(--border); border-radius: 12px; padding: 1rem 1.15rem; }
#reviews #respond .comment-reply-title, #reviews #reply-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.85rem; color: var(--foreground); }
.lunology-qa-field { margin-bottom: 0.85rem; }
.lunology-qa-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--foreground); }
.lunology-qa-field input, .lunology-qa-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; background: var(--background); color: var(--foreground); font-family: inherit; font-size: 0.9rem; }
.lunology-qa-field textarea { min-height: 110px; resize: vertical; }
#reviews .form-submit .submit { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 100px; padding: 0.7rem 1.75rem; font-weight: 600; cursor: pointer; }
#reviews .form-submit .submit:hover { opacity: 0.92; }


/* ============================================================================
   LUNOLOGY ORDER RECEIVED (thank-you) page 2026-07-06
   ============================================================================ */
body.woocommerce-order-received .entry-header,
body.woocommerce-order-received .woocommerce-thankyou-order-received { display: none; }
body.woocommerce-order-received .woocommerce-order { max-width: 820px; margin: 0 auto; }

.lunology-ty-header { text-align: center; padding: 2rem 1.25rem 1.5rem; }
.lunology-ty-check { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(46,160,90,0.12); color: #2ea05a; margin-bottom: 1rem; }
.lunology-ty-title { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 600; color: var(--foreground); margin: 0 0 0.5rem; }
.lunology-ty-sub { color: var(--muted-foreground); font-size: 1rem; margin: 0; }
.lunology-ty-sub strong { color: var(--primary); font-weight: 700; }

ul.woocommerce-order-overview { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; border: 0; }
ul.woocommerce-order-overview li { display: flex; flex-direction: column; gap: 0.3rem; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 0.95rem 1.1rem; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); margin: 0; }
ul.woocommerce-order-overview li strong { font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--foreground); font-weight: 600; }

.woocommerce-order-details, .woocommerce-customer-details { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.35rem 1.5rem; margin-bottom: 1.25rem; }
.woocommerce-order-details__title, .woocommerce-customer-details h2, .woocommerce-column__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--foreground); margin: 0 0 1rem; }

.woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 0.7rem 0.25rem; text-align: start; border: 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.woocommerce-table--order-details thead th { font-size: 0.8rem; color: var(--muted-foreground); font-weight: 600; }
.woocommerce-table--order-details td.product-total, .woocommerce-table--order-details th.product-total { text-align: end; white-space: nowrap; }
.woocommerce-table--order-details .product-name, .woocommerce-table--order-details .product-name a { color: var(--foreground); font-weight: 500; text-decoration: none; }
.woocommerce-table--order-details tfoot th { text-align: start; color: var(--muted-foreground); font-weight: 600; }
.woocommerce-table--order-details tfoot td { text-align: end; color: var(--foreground); font-weight: 600; }
.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td { font-size: 1.05rem; color: var(--primary); border-bottom: 0; }
.woocommerce-table--order-details .wc-item-meta { list-style: none; margin: 0.35rem 0 0; padding: 0; font-size: 0.82rem; color: var(--muted-foreground); }
.woocommerce-table--order-details .wc-item-meta li, .woocommerce-table--order-details .wc-item-meta p { margin: 0; }

.woocommerce-customer-details .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 0; }
.woocommerce-customer-details .woocommerce-column, .woocommerce-customer-details address { margin: 0; }
.woocommerce-customer-details address { font-style: normal; line-height: 1.7; color: var(--foreground); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.15rem; background: var(--background); }
.woocommerce-customer-details .woocommerce-customer-details--phone, .woocommerce-customer-details .woocommerce-customer-details--email { margin: 0.4rem 0 0; color: var(--muted-foreground); }
body.woocommerce-order-received .woocommerce-order > p { color: var(--muted-foreground); text-align: center; }


/* ============================================================================
   LUNOLOGY CART — unified delivery address (2026-07-06)
   ============================================================================ */
.lunology-cart-delivery { display: flex; align-items: center; gap: 0.7rem; background: var(--background); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.9rem; margin-bottom: 1rem; }
.lunology-cart-delivery__pin { color: var(--primary); display: inline-flex; flex-shrink: 0; }
.lunology-cart-delivery__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.lunology-cart-delivery__label { font-size: 0.72rem; color: var(--muted-foreground); }
.lunology-cart-delivery__city { font-size: 0.95rem; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lun-cart-addr-toggle { flex-shrink: 0; background: transparent; border: 1px solid var(--primary); color: var(--primary); border-radius: 100px; padding: 0.35rem 0.95rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.lun-cart-addr-toggle:hover { background: var(--primary); color: var(--primary-foreground); }
.lun-cart-addr-login { flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.lun-cart-addr-login:hover { text-decoration: underline; }

.lun-cart-addr-drawer[hidden] { display: none; }
.lun-cart-addr-drawer { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lun-cart-addr-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.lun-cart-addr-drawer__box { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--background); border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem 1.4rem; box-shadow: 0 20px 60px rgba(0,0,0,0.28); }
.lun-cart-addr-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.lun-cart-addr-drawer__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--foreground); margin: 0; }
.lun-cart-addr-drawer__x { background: transparent; border: 0; font-size: 1.7rem; line-height: 1; color: var(--muted-foreground); cursor: pointer; padding: 0 0.25rem; }
body.lun-cart-addr-open { overflow: hidden; }
.lun-cart-addr-drawer__body .lun-stage-head { display: none; }
.lun-cart-addr-drawer__body #lun-address-book { margin: 0; }
/* ensure the add/edit modal stacks above the cart drawer */
#lun-addr-modal { z-index: 100050; }


/* ---- Address book + modal dark-mode fixes (shared: cart drawer + checkout) 2026-07-06 ---- */
html.dark .lun-ab-card { background: rgba(76,85,120,0.16); border-color: var(--border); }
html.dark .lun-ab-card .lun-ab-card-title { color: var(--foreground); }
html.dark .lun-addr-modal__box { background: var(--background); color: var(--foreground); border: 1px solid var(--border); }
html.dark #lun-addr-form input,
html.dark #lun-addr-form select,
html.dark #lun-addr-form textarea { background: rgba(76,85,120,0.14); color: var(--foreground); border-color: var(--border); }
html.dark #lun-addr-form input::placeholder,
html.dark #lun-addr-form textarea::placeholder { color: var(--muted-foreground); }
html.dark #lun-addr-form label { color: var(--muted-foreground); }



/* ===== Lunology: gift-wrapping option price + live total (added 2026-07) ===== */
.yayextra-option-field-label .lun-opt-price {
  font-weight: 600;
  font-size: 0.9em;
  opacity: 0.85;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
.lun-giftwrap-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 2px;
  font-size: 0.95rem;
  flex-wrap: wrap;
}
.lun-giftwrap-total .lun-gt-label { opacity: 0.7; }
.lun-giftwrap-total .lun-gt-value { font-weight: 700; }
.lun-giftwrap-total.has-extra .lun-gt-value { color: #b5451f; }


/* ===== Lunology: language-switch logo glow reveal (2026-07) ===== */
@keyframes lun-logo-reveal {
  0%   { opacity: 0.15; -webkit-mask-size: 0% 0%; mask-size: 0% 0%; filter: drop-shadow(0 0 0 rgba(179,168,224,0)); }
  55%  { filter: drop-shadow(0 0 16px rgba(179,168,224,0.95)); }
  100% { opacity: 1; -webkit-mask-size: 320% 320%; mask-size: 320% 320%; filter: drop-shadow(0 0 0 rgba(179,168,224,0)); }
}
.lun-lang-logo.lang-switching {
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 78%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  animation: lun-logo-reveal 1.1s cubic-bezier(0.25, 1, 0.3, 1);
  will-change: mask-size, filter, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .lun-lang-logo.lang-switching { animation: none; -webkit-mask-image: none; mask-image: none; }
}


/* === LUN GIFTWRAP (order-level toggle row) === */
.lun-giftwrap-row td {
  padding: 12px 4px !important;
  border-top: 1px dashed var(--border, rgba(0,0,0,0.12));
}
.lun-giftwrap-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}
.lun-giftwrap-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--primary);
  cursor: pointer;
}
.lun-gw-text { display: flex; flex-direction: column; gap: 3px; }
.lun-gw-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lun-gw-badge {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.lun-gw-desc { font-size: 0.78rem; color: var(--muted-foreground); }
html.dark .lun-giftwrap-row td { border-top-color: rgba(255,255,255,0.14); }
/* === /LUN GIFTWRAP === */


/* === LUN CHECKOUT dark-mode card fix + clean address (order-received) === */
html.dark .woocommerce-billing-fields {
  background: var(--popover) !important;
  border-color: var(--border) !important;
}
html.dark .woocommerce-billing-fields input,
html.dark .woocommerce-billing-fields select,
html.dark #order_review input {
  border-color: var(--border) !important;
}
.woocommerce-customer-details address { line-height: 1.5; }
.lun-addr-line { display: block; margin-bottom: 4px; }
.lun-addr-name { font-size: 1.02rem; }
.lun-addr-nsa {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--muted-foreground);
}
.lun-addr-nsa bdi {
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: 0.02em;
}
/* === /LUN CHECKOUT dark-mode card fix === */


/* === LUN THANKYOU ADDRESS RTL (Arabic order-received / account) === */
html[dir="rtl"] .woocommerce-customer-details address { text-align: right; }
html[dir="rtl"] .woocommerce-customer-details--phone,
html[dir="rtl"] .woocommerce-customer-details--email {
  padding-left: 0 !important;
  padding-right: 1.5em !important;
  text-align: right !important;
}
html[dir="rtl"] .woocommerce-customer-details--phone::before,
html[dir="rtl"] .woocommerce-customer-details--email::before {
  margin-left: 0.62em !important;
  margin-right: -1.5em !important;
}
/* === /LUN THANKYOU ADDRESS RTL === */


/* =========================================================================
   LUNOLOGY — dark mode fixes (Batch 4, 2026-07-15)
   ========================================================================= */

/* Native form controls.
   Chrome renders the <select> option popup itself (OS layer, not the page), so
   no selector can colour it — it follows `color-scheme`. Without this the popup
   is painted white while the options inherit the theme's near-white text,
   giving white-on-white. Nothing else in the stylesheet sets color-scheme. */
html.dark  { color-scheme: dark; }
html:not(.dark) { color-scheme: light; }

/* Variation swatches (plugin: woo-variation-swatches).
   The plugin never declares its --wvs-* properties; it reads them with
   hardcoded #fff / #000 fallbacks. Defining them here is therefore enough —
   they inherit down from body.woo-variation-swatches, and no !important or
   specificity fight is needed (theme CSS also loads after the plugin's). */
html.dark .woo-variation-swatches {
	--wvs-item-background-color: var(--background);
	--wvs-item-text-color: var(--foreground);
	--wvs-item-box-shadow: 0 0 0 1px rgba(245, 245, 247, 0.25);

	--wvs-hover-item-background-color: var(--popover);
	--wvs-hover-item-text-color: var(--foreground);
	--wvs-hover-item-box-shadow: 0 0 0 2px rgba(245, 245, 247, 0.45);

	--wvs-selected-item-background-color: var(--popover);
	--wvs-selected-item-text-color: var(--foreground);
	--wvs-selected-item-box-shadow: 0 0 0 2px var(--foreground);

	--wvs-tooltip-background-color: var(--popover);
	--wvs-tooltip-text-color: var(--foreground);
}

/* Sort dropdown: keep the closed control consistent with the now-dark popup. */
html.dark select.shop-sort-select option,
html.dark select option {
	background-color: var(--popover);
	color: var(--foreground);
}

/* RTL order/checkout tables.
   woocommerce-rtl.css never loads (the site locale stays en_US while /ar is a
   URL-prefix system), so core's LTR text-align survives into RTL pages and
   leaves the order-pay table left-aligned inside a dir="rtl" container. */
html[dir="rtl"] .woocommerce table.shop_table,
html[dir="rtl"] .woocommerce table.shop_table th,
html[dir="rtl"] .woocommerce table.shop_table td {
	text-align: right;
}
html[dir="rtl"] .woocommerce table.shop_table tfoot th,
html[dir="rtl"] .woocommerce table.shop_table tfoot td {
	text-align: right;
}


/* =========================================================================
   LUNOLOGY — Saudi Riyal symbol webfont (Batch 6, 2026-07-15)

   Font:      Saudi-Riyal-Font by Emran Alhaddad
   Licence:   SIL Open Font License 1.1  —  https://scripts.sil.org/OFL
   Source:    https://github.com/emran-alhaddad/Saudi-Riyal-Font
   Copyright (c) Emran Alhaddad. Attribution retained per the OFL.

   Why embedded: U+20C1 (Unicode 17) is absent from older Android/iOS system
   fonts, which would render the price as a tofu box. Windows 11 DOES have it,
   so this cannot be QA'd on the owner's own machine — test on an old phone.
   Inlined as a data URI (1.2 KB) because the WP Theme File Editor cannot
   create new files, and it saves an HTTP request.

   unicode-range is MANDATORY, not an optimisation: this icon font also maps
   A, B, C and D to EMPTY zero-width glyphs. Measured without the range,
   "ABCD" renders 0px wide — it would silently delete every uppercase A/B/C/D
   on the site (SAR -> SR, BGCQ -> GCQ). Confining it to U+20C1 neutralises
   that entirely.
   ========================================================================= */
@font-face {
	font-family: 'saudi_riyal';
	src: url(data:font/woff2;base64,d09GMgABAAAAAAT0AA0AAAAAC2QAAASeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGhgGYACCZhEICocEhXcLGgABNgIkAzAEIAWHLgeBBRvVCSCOwnEvSojJ5ORhKiWep9/bPPc32mdnUaW+wXeJKlVIJCg8CIfcQWViVHSETJeZqNqErgZPp/28VaAy13pTkXvNQZv4IHCbHD9In+dyevP5Cfy7K+slmC3ybGwuLx2T18L1PKA2pnPbFCvQCdbLLSJq0N0AB31thACv29f9APD1k6ZUJ0tAD4aoQDO8bhmyFC1UI+oCuAO15AO2Q8G5MwSqDefwClCi9Be6wX9nQPsMEKAeA1AQUIMaLCGACzQCljAqQE+OwoCjcu0D6kv8/x/sl6sfkIpP/3/9/WpgdgoEQAeYoIR0QACkAlSghuJ31w3LAXyr/P+vAvSAOTCAzAK5B6CBQzRNhcGgGoYLL+dYrlnFKgu9iOcEj646uXaI2W3sJ9lTI4EetCRQAgulmH6SYMZBziQb1xBipCaQaS6l0vWRWr1q1aFDnTA52r1fr8fUTpXKWvLQ4KnSwb0+PppFHxtVC1at2uXrO9JOSIUWTzV+QWdXLT0K2uhG0jpJEiZs6WjSR9KuG9Zv1u+P2q1UujpcsT1L3dNzqhQszNevVtPHSYnHKlXoGEWtDpi6yX/duUgVJGGvzwIypcpt/Ni4Jly1atcq32n6zc+V4+ld7k6gz53h7vgOHLKN10L3KkUS7kouYUcPhGVony1zOi//ctkTdm/3kAqubk+P0MptoSFlXH1d5ZyIwuAyWX7+z+picypWzAjs1xCbVaGJLgqt5qqbqg/Y6ntEjm76aneF9Yjvano5HXrdrjSkllfHmVOk+o/IY8O89mBNc9Lbwcoe28z7DRmFzSmN4wbrT5X+B/E2SdMQn2S1PFaUu1OkJfIXKxVt+w1pFa2xjdll47yrvsvczl7/4ETotcmj56Zkzxs3b+7w0ZMNx9wX7srQ8rIsghhH+yj839cG7rwS/FVUQnWXgYUdjUP+HL5C8fybvBJ6ZQRWMKOhfsi7ZqHZEz4e3TZxMtEqXR8kGN0n/5/a9jk9IKKiFlmPtlWvYKy8rF34efCtxR9snP0uNWnu7Jj8kj9HHV1INdJDNT2jhozoFXwqYPLE+VjfWDBpsq7FUrJmU3brXPVwppI6gm8PCAjcX9RU3FdX8KtcJcczkIBc+4K9C8ZdxNPL/LtD9KcF19fLgOpBtODVPMNO+5d0/C2p2BEBPefddskgYA8Aa9mMABgKQwChUg9RkbGjprcJDW9v0SJ+QccrQRhDkk6Os7mYoEtPTCIZQk6xo9ALyCFMI3lIDtjnGFLlm9EzZJUcNNIoAAUACL10ULSMoCUYAkaUk2BRfgAnwm+QoZJMytlMKIQkH0pUBpAqdhjUMjIGGlTuklr2MTzoI92UJ23+wONVGmQ40WC8UgM5iCwsRBYopXLQcHEwXzrQIVosogW4IRrFwqmv4ZzGEQ2Em8tRFmff4c5x4kDgmpXdKAOJhsMnRWOAIg8/SVZ+YGXZ5ee18vMkZYbYopod2PHxMh22lbggxy4aiTp8UzunkRxGMUliNsQgyayTKk8k+l05RzpGmT7YjNb5FSWKKTxHRVTCPj0ISoRIUaJDEZowhCWctufXnHPwkJG/e0pZDQA=) format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+20C1;
}

/* Scoped to the currency span only. wc_price() wraps the symbol in this span
   and nothing else, so this stack is consulted for U+20C1 and never touches
   the Arabic (IBM Plex) or English (Jost/Cormorant) type. */
.woocommerce-Price-currencySymbol {
	font-family: 'saudi_riyal', 'IBM Plex Sans Arabic', sans-serif;
}


/* =========================================================================
   LUNOLOGY — address modal: dark mode. 2026-07-16.
   The box already had a dark override, but the title and the field labels
   carry their own hardcoded #2b3049, which beats inheritance from the box —
   so on the dark background they rendered near-invisible (dark navy on
   #0a0a12). Only the pieces that were frozen are overridden here.
   ========================================================================= */
html.dark .lun-addr-modal__title,
html.dark .lun-addr-f > span {
	color: var(--foreground);
}

html.dark .lun-addr-modal__x:hover {
	color: var(--foreground);
}

/* Keep the required-marker readable against the dark box. */
html.dark .lun-addr-f > span b {
	color: #d8bd85;
}

/* The submit button is #2b3049 on #0a0a12 — technically legible but it sinks
   into the box. Lift it so the primary action still reads as a button. */
html.dark .lun-addr-submit {
	background: #3d4461;
	color: #ffffff;
}
html.dark .lun-addr-submit:hover {
	background: #4c5578;
}

/* National short address: the code is Latin (RQNA8818), so the pair stays LTR even
   inside the RTL modal — letters box first, digits box second, matching how the
   code is read and printed on the customer's ID card. */
.lun-nsa-split { display: flex; gap: .6rem; direction: ltr; }
.lun-nsa-split__box { flex: 1 1 50%; text-align: center; letter-spacing: .35em; text-indent: .35em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }
.lun-nsa-split__box::placeholder { letter-spacing: .2em; opacity: .45; text-transform: none; }
html.dark .lun-nsa-split__box::placeholder { color: rgba(245,245,247,.45); }

.lun-nsa-status { display: block; margin-top: .35rem; font-size: .82rem; opacity: .85; }
.lun-nsa-status.is-ok { color: #1f7a3d; }
html.dark .lun-nsa-status.is-ok { color: #6ee7a0; }