/**
 * Itsawan Supplement Styles
 * Critical styles from itsawan.com that complete the visual design
 * This file supplements globals.css with component-specific styles
 */


/* ============================================
   PARTNER LIST & PREVIEW POPUP
   ============================================ */

/* Partner list item styles */
.partner-list li {
  margin-bottom: 1rem;
}

.partner-list li:last-child {
  margin-bottom: 0;
}

.partner-list-item {
  display: inline;
  transition: all 0.2s ease;
}

/* Partner preview popup styles */
.index-preview {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 256px;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
  z-index: 1024;
  user-select: none;
  touch-action: none;
  pointer-events: none;
}

.index-preview__inner {
  width: 100%;
  cursor: grab;
  will-change: translate;
  margin: 0;
  padding: 0;
}

.index-preview__inner:active {
  cursor: grabbing;
}

.index-preview__media {
  overflow: hidden;
  border-radius: 0.75rem;
  transform: translateZ(0);
}

/* Base image structure */
.base-image {
  position: relative;
  width: 100%;
}

.base-image--fit img,
.base-image--fit video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
}

.base-image--cover img,
.base-image--cover video {
  object-fit: cover;
}

.base-image img,
.base-image video {
  width: 100%;
  backface-visibility: hidden;
  transform: translateZ(0);
  display: block;
}

.index-preview__inner img {
  transform: scale(1.02);
}

.index-preview .base-video {
  transform: scale(1.2);
  height: auto;
}

/* Caption with blur backdrop */
.index-preview figcaption {
  display: block;
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: calc(var(--scale) - 2rem);
}

.index-preview__inner:not(.index-preview--scaled) figcaption {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.index-preview figcaption .caption-inner {
  padding: 0.5rem 0.875rem;
  border-radius: 1rem;
  color: rgba(251, 251, 250, 0.6);
  transform-origin: bottom left;
  transform: scale(var(--counter-scale)) translate3d(1rem, -1rem, 0);
  background-color: hsla(0, 0%, 82.4%, 0.1);
  backdrop-filter: blur(200px);
  -webkit-backdrop-filter: blur(200px);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  width: fit-content;
  white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 767.98px) {
  .index-preview {
    width: 180px;
  }
}

/* Active partner button */
.base-button--filled {
  background-color: var(--awan-text);
  color: var(--awan-text-on-accent);
  font-weight: 600;
}

.base-button--filled:hover {
  background-color: var(--awan-text);
  color: var(--awan-text-on-accent);
}

.dark .base-button--filled {
  background-color: var(--awan-text-on-accent);
  color: var(--awan-text);
}

.dark .base-button--filled:hover {
  background-color: var(--awan-text-on-accent);
  color: var(--awan-text);
}

/* ============================================
   VIDEO CONTAINER & HERO STYLES
   ============================================ */

.index-entry {
  position: relative;
  width: 100%;
  height: 150vh;
  background: transparent;
}

.index-entry .index-entry-video,
.index-entry .index-entry-video--initial-vh {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
  z-index: 1;
}

.index-entry-video__inner {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  will-change: border-radius;
}

.index-entry-video__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,15,14,0.5);
  z-index: 2;
  pointer-events: none;
}

/* Hero Button Styles */
.index-entry .index-entry-video__mute-btn .base-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem 1.5rem;
  height: auto;
  min-height: 4.5rem;
  min-width: 7rem;
}

.base-button__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.base-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.base-button__label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Floating hint label */
.button-hint-label {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, calc(-50% - 5rem));
  z-index: 9;
  opacity: 0;
  animation: hintBreathingLoop 10s ease-in-out 1s infinite;
  will-change: transform, opacity;
}

.button-hint-label__text {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--awan-text-on-accent);
  background: rgba(13,15,14,0.7);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  text-align: center;
  transition: opacity 0.5s ease-out;
}

@supports (backdrop-filter: blur(8px)) {
  .button-hint-label__text {
    background: rgba(13,15,14,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.button-hint-label--hidden {
  opacity: 0 !important;
  pointer-events: none;
  animation-play-state: paused;
}

/* Breathing animation */
@keyframes hintBreathingLoop {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 4.8rem));
  }
  20% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 5rem));
  }
  50% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 5rem));
  }
  70% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 4.8rem));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 4.8rem));
  }
}

/* Button pulse animation */
@keyframes buttonPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

.index-entry-video__mute-btn .base-button {
  animation: buttonPulse 3s ease-in-out 2s infinite;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

/* Enhanced hover effects */
.index-entry-video__mute-btn .base-button:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 24px rgba(190,84,46,0.6),
    0 8px 32px rgba(13,15,14,0.3);
  background: rgba(190,84,46,0.15);
  border-color: rgba(190,84,46,0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-play-state: paused;
}

/* Ripple effect */
.index-entry-video__mute-btn .base-button::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(190,84,46,0.4);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.index-entry-video__mute-btn .base-button:active::before {
  animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
  0% {
    width: 0;
    height: 0;
    opacity: 0.6;
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
  }
}

/* Mute button positioning */
.index-entry .index-entry-video__mute-btn {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Headlines */
.index-entry .index-entry-video__headline {
  position: absolute;
  inset-inline-start: 50%;
  transform: translate(-50%, 0);
  z-index: 9;
  width: 100%;
  max-width: 600px;
  padding: 0 2rem;
  text-align: center;
}

.index-entry .index-entry-video__headline--top {
  top: 50%;
  transform: translate(-50%, calc(-50% - 120px));
}

.index-entry .index-entry-video__headline--bottom {
  top: 50%;
  transform: translate(-50%, calc(-50% + 120px));
}

.index-entry-video__headline-text {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015rem;
  color: var(--awan-text-on-accent);
  transform-origin: center center;
  will-change: transform, opacity;
  transition: opacity 0.3s ease-out;
}

.index-entry-video__headline-text--orange {
  color: var(--awan-accent);
}

/* Video transitions */
.video-container {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.8s ease-out;
  z-index: 1;
}

.video-container.video-fadeout {
  opacity: 0;
  pointer-events: none;
}

.image-slider {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in;
  z-index: 0;
}

.image-slider.slider-fadein {
  opacity: 1;
  z-index: 1;
}

.slider-image {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.slider-image.active {
  opacity: 1;
}

.base-video {
  position: relative;
  width: 100%;
}

.base-video--fit img,
.base-video--fit video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  object-fit: cover;
}

.base-video--cover img,
.base-video--cover video {
  object-fit: cover;
}

.base-video video {
  width: 100%;
}

/* ============================================
   INDEX CONTENT OVERLAP
   ============================================ */

.index-content {
  width: 100%;
  margin-top: -6rem;
}

.index-content__section {
  padding: 2rem 0;
}

.index-content__section:first-child {
  padding-top: 0;
}

/* ============================================
   GRID SYSTEM
   ============================================ */

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

.container-full {
  width: 100%;
  padding: 0 2rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

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

.col {
  flex: 1 0 0%;
  padding: 0 1rem;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-lg-3 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 1rem;
}

.col-lg-4 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 1rem;
}

@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

/* ============================================
   PARAGRAPH & MARK HIGHLIGHTING
   ============================================ */

.paragraph .content {
  color: #8A8880;
  font-size: 2rem;
  line-height: 1.8;
}

.dark .paragraph .content {
  color: var(--awan-text-muted);
}

.paragraph .content mark {
  background-color: transparent;
  color: currentColor;
  transition: color 0.3s ease;
}

.paragraph .content mark.focus {
  color: var(--awan-text);
  font-weight: 600;
}

.dark .paragraph .content mark.focus {
  color: var(--awan-accent);
}

/* Content spacing */
.content p + p,
.content p + h2,
.content p + h3,
.content h2 + p,
.content h3 + p,
.content ol + p,
.content ul + p {
  margin-top: 2rem;
}

/* ============================================
   LOGO STRIP ANIMATION
   ============================================ */

.logo-strip {
  width: 100%;
  min-height: 60px;
  margin: 0.5rem 0;
  overflow: hidden;
  position: relative;
}

.logo-strip-track {
  display: flex;
  gap: 2rem;
  animation: scroll-horizontal 24s linear infinite;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes scroll-horizontal {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll-horizontal-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

[dir='rtl'] .logo-strip-track {
  animation-name: scroll-horizontal-rtl;
}

@media (min-width: 768px) {
  .logo-strip-track {
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .logo-strip-track {
    gap: 4rem;
  }
}

.strip-item {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  flex-shrink: 0;
  padding: 0.5rem;
}

.strip-item__icon {
  width: clamp(40px, 8vw, 60px);
  height: clamp(40px, 8vw, 60px);
  flex-shrink: 0;
  object-fit: contain;
}

.strip-item__text {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: 500;
  color: var(--awan-text);
  white-space: nowrap;
}

.dark .strip-item__text {
  color: var(--awan-border);
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir='rtl'] .index-entry .index-entry-video__mute-btn {
  transform: translate(50%, -50%);
}

[dir='rtl'] .button-hint-label {
  animation-name: hintBreathingLoopRTL;
}

@keyframes hintBreathingLoopRTL {
  0% {
    opacity: 0;
    transform: translate(50%, calc(-50% - 4.8rem));
  }
  20% {
    opacity: 1;
    transform: translate(50%, calc(-50% - 5rem));
  }
  50% {
    opacity: 1;
    transform: translate(50%, calc(-50% - 5rem));
  }
  70% {
    opacity: 0;
    transform: translate(50%, calc(-50% - 4.8rem));
  }
  100% {
    opacity: 0;
    transform: translate(50%, calc(-50% - 4.8rem));
  }
}

[dir='rtl'] .index-entry .index-entry-video__headline {
  transform: translate(50%, 0);
}

[dir='rtl'] .index-entry .index-entry-video__headline--top {
  transform: translate(50%, calc(-50% - 120px));
}

[dir='rtl'] .index-entry .index-entry-video__headline--bottom {
  transform: translate(50%, calc(-50% + 120px));
}

/* ============================================
   RESPONSIVE MOBILE STYLES
   ============================================ */

@media (max-width: 767.98px) {
  .index-entry .index-entry-video__mute-btn .base-button {
    min-height: 4rem;
    min-width: 6rem;
    padding: 0.625rem 1.25rem;
  }

  .base-button__label {
    font-size: 0.75rem;
  }

  .button-hint-label {
    transform: translate(-50%, calc(-50% - 4.3rem));
  }

  .button-hint-label__text {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }

  .index-entry-video__headline-text {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
  }

  .index-entry .index-entry-video__headline--top {
    transform: translate(-50%, calc(-50% - 100px));
  }

  .index-entry .index-entry-video__headline--bottom {
    transform: translate(-50%, calc(-50% + 100px));
  }

  .index-entry .index-entry-video__headline {
    padding: 0 1.5rem;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.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;
}

@media (prefers-reduced-motion: reduce) {
  .index-entry-video__mute-btn .base-button,
  .button-hint-label,
  .logo-strip-track {
    animation: none;
  }

  .button-hint-label {
    opacity: 1;
  }

  * {
    transition-duration: 0.01ms;
  }
}

/* ── Sentences List ──────────────────────────────────────────────── */
.sentences-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sentences-list li {
  padding: 0.5rem 0;
}
.sentence-list-item {
  font-size: 1.6rem;
  color: #8A8880;
  transition:
    color 0.3s ease,
    font-weight 0.3s ease;
  cursor: default;
  display: block;
  line-height: 1.6;
  text-align: right;
}
.sentence-list-item.active {
  color: var(--awan-text);
  font-weight: 700;
  font-size: 1.6rem;
}
[data-theme='dark'] .sentence-list-item {
  color: var(--awan-text-muted);
}
[data-theme='dark'] .sentence-list-item.active {
  color: var(--awan-surface);
}

/* ── Partner Preview (floating video) ───────────────────────────── */
.index-preview {
  position: fixed;
  top: 50%;
  left: 4%;
  transform: translateY(-50%);
  z-index: 1000;
  pointer-events: none;
  width: 280px;
}
.index-preview__inner {
  border-radius: 12px;
  overflow: hidden;
  background: var(--awan-text);
  box-shadow: 0 20px 60px rgba(13,15,14,0.4);
}
.index-preview__media video {
  width: 100%;
  display: block;
  border-radius: 12px;
}
@media (max-width: 768px) {
  .index-preview {
    width: 180px;
    right: 2%;
  }
}

/* Reverse marquee direction for strip 2 */
.logo-strip-track--reverse {
  animation-name: scroll-horizontal-reverse;
}
[dir='rtl'] .logo-strip-track--reverse {
  animation-name: scroll-horizontal-rtl-reverse;
}
@keyframes scroll-horizontal-reverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes scroll-horizontal-rtl-reverse {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(0);
  }
}

/* Reduce global section padding to close whitespace gaps */
.about-section {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* ================================================
   MOBILE RESPONSIVE FIXES — comprehensive pass
   ================================================ */

/* --- HEADER: prevent logo from overlapping nav --- */
@media (max-width: 768px) {
  .main-header {
    padding: 0 0.75rem;
    height: 4rem;
  }
  .main-header__start img,
  .main-header__start svg,
  #branding img {
    height: 2rem;
    width: auto;
    max-width: 100px;
  }
  .main-header__end {
    gap: 0.35rem;
  }
  /* Hide language text label on mobile — keep globe only */
  .main-header__end [data-language-toggle] span {
    display: none !important;
  }
  /* Shrink theme/cart buttons */
  .main-header__end .base-button {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }
}

/* --- HERO: fix height on mobile --- */
@media (max-width: 768px) {
  .index-entry {
    height: 120vh;
  }
  .index-entry .index-entry-video,
  .index-entry .index-entry-video--initial-vh {
    padding: 0;
  }
  .index-entry-video__inner {
    border-radius: 0;
  }
  .index-entry-video__headline-text {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .index-entry-video__mute-btn {
    bottom: 2rem;
  }
  .button-hint-label {
    bottom: 2.5rem;
  }
}

/* --- ABOUT SECTION: single column on mobile --- */
@media (max-width: 768px) {
  .about-section .about-section__grid,
  .about-section > div > div[style*='grid-template-columns'],
  .about-section__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .paragraph .content {
    font-size: 1.25rem;
  }
}

/* --- BENEFITS SECTION: single column on mobile --- */
@media (max-width: 768px) {
  section[style*='grid-template-columns:1fr 1fr'] {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1rem;
  }
  /* Fix tag pills on mobile — keep them as pills */
  section[style*='grid-template-columns:1fr 1fr'] button {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
}

/* --- FEATURE CARDS: fix mobile layout --- */
@media (max-width: 767.98px) {
}

/* --- LOGO STRIP: ensure overflow hidden on mobile --- */
@media (max-width: 768px) {
  .logo-strip-wrapper {
    overflow: hidden;
  }
  .strip-item__text {
    font-size: 0.85rem;
  }
}

/* --- PARTNER LIST: single column on mobile --- */
@media (max-width: 768px) {
  .partner-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .partner-list-item {
    flex-direction: column;
    text-align: right;
  }
}

/* --- SENTENCES LIST: fix floating video on mobile --- */
@media (max-width: 768px) {
  .index-preview {
    display: none;
  }
  .sentences-list {
    padding: 1rem;
  }
  .sentence-list-item {
    font-size: 1.75rem;
  }
}

/* --- CONTACT/CTA SECTION: mobile padding --- */
@media (max-width: 768px) {
  .contact-section,
  section.index-content__section:last-child {
    padding: 3rem 1rem;
  }
}

/* ================================================
   DESKTOP FIXES
   ================================================ */

/* Fix header not showing language switcher when only 1 lang — show globe anyway */
.main-header__end [data-language-toggle] {
  display: inline-flex !important;
}

/* Fix "اشتري الآن" button text */
.base-button .base-button__text {
  white-space: nowrap;
}

/* About section heading color fix — should be dark not gray */
.paragraph > mark,
[data-paragraph] > mark {
  color: var(--awan-text);
  font-size: inherit;
}

/* Benefits section tag pills — inline wrap not vertical */
.benefits-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  justify-content: flex-start !important;
}

/* Ensure header stays on top of everything */
.main-header,
header.main-header {
  z-index: 9999 !important;
  background: var(--color-bg, var(--awan-bg)00);
}

/* Features cards: icon color */

/* "العلامات الرئيسية" title — match staging (orange) */

/* Scroll reveal: ensure elements start hidden */
.scroll-reveal-slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.scroll-reveal-slide-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* CTA bubble: frosted glass matching staging */
.index-entry-video__mute-btn .base-button {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(233,230,215,0.25) !important;
  border: 2px solid rgba(233,230,215,0.5) !important;
  border-radius: 3rem !important;
  color: var(--awan-text-on-accent) !important;
}

/* ================================================
   MOBILE RESPONSIVE FIXES — comprehensive pass
   ================================================ */

@media (max-width: 768px) {
  /* Header: prevent logo from overlapping nav */
  .main-header {
    padding: 0 0.75rem;
    height: 4rem;
  }
  .main-header__start img,
  #branding img {
    height: 1.75rem;
    width: auto;
    max-width: 100px;
  }
  .main-header__end {
    gap: 0.25rem;
  }

  /* Hero: shorter on mobile */
  .index-entry {
    height: 110vh;
  }
  .index-entry .index-entry-video,
  .index-entry .index-entry-video--initial-vh {
    padding: 0;
  }
  .index-entry-video__inner {
    border-radius: 0;
  }
  .index-entry-video__headline-text {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  /* About section: single column */
  .about-section .about-section__grid,
  .about-section__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .paragraph .content {
    font-size: 1.2rem;
    line-height: 1.6 !important;
  }

  /* Benefits inline section: collapse to single column */
  section > div[style*='grid-template-columns:1fr 1fr'],
  section > div[style*='grid-template-columns: 1fr 1fr'] {
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1rem;
  }

  /* Feature cards: stack image on top */

  /* Logo strip */
  .logo-strip-wrapper {
    overflow: hidden;
  }
  .strip-item__text {
    font-size: 0.8rem;
  }

  /* Partner list */
  .partner-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Sentences: hide floating video on mobile */
  .index-preview {
    display: none;
  }
  .sentences-list {
    padding: 0.5rem 1rem;
  }
  .sentence-list-item {
    font-size: 1.5rem;
    line-height: 2.2;
  }

  /* Contact CTA */
  .contact-section,
  section.index-content__section:last-child {
    padding: 3rem 1rem;
  }
}

/* ================================================
   DESKTOP STYLE FIXES — match staging
   ================================================ */

/* Header stays on top */
.main-header,
header.main-header {
  z-index: 9999 !important;
  background: var(--color-bg, var(--awan-bg)00);
}

/* Feature card icons — orange */

/* "العلامات الرئيسية" title — orange to match staging */

/* CTA bubble: frosted glass */
.index-entry-video__mute-btn .base-button {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(233,230,215,0.2) !important;
  border: 2px solid rgba(233,230,215,0.4) !important;
  border-radius: 3rem !important;
  color: var(--awan-text-on-accent) !important;
}

/* Scroll reveal: start hidden, animate in */
.scroll-reveal-slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.scroll-reveal-slide-up.revealed {
  opacity: 1;
  transform: translateY(0);
}
.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}
.delay-300 {
  transition-delay: 0.3s;
}

/* Scroll reveal fade variant */
.scroll-reveal-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.scroll-reveal-fade.revealed {
  opacity: 1;
}

/* Partner list: vertical center-aligned on mobile */
@media (max-width: 768px) {
  .partner-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
  }
  .partner-list-item {
    width: 100%;
    text-align: center;
  }
  .partner-list .base-button {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--awan-text);
    border-radius: 2rem;
    background: transparent;
  }
}

/* Fix feature card img on mobile — ensure full width */
@media (max-width: 768px) {
}

/* About section: ensure text takes full width on mobile */
@media (max-width: 768px) {
  .about-section {
    padding: 2rem 1rem;
  }
  .about-section .mx-auto {
    max-width: 100%;
    padding: 0;
  }
}

/* Logo strip mobile: ensure text doesn't clip */
@media (max-width: 768px) {
  .logo-strip {
    padding: 0.25rem 0;
  }
  .strip-item {
    gap: 0.5rem;
    min-width: max-content;
  }
  .strip-item__icon {
    font-size: 1rem;
  }
}

/* CRITICAL: Disable sticky card scroll effect on mobile */
@media (max-width: 768px) {
  .project-overlay {
    display: none !important;
  }
}

/* Logo strip mobile: reduce padding, ensure overflow hidden */
@media (max-width: 768px) {
  .logo-strip {
    padding: 0.75rem 0;
  }
  .logo-strip-track {
    gap: 2rem;
  }
  .strip-item__text {
    font-size: 0.85rem;
  }
  .strip-item {
    gap: 0.5rem;
  }
  .logo-strip-wrapper {
    margin: 1rem 0;
  }
}

/* Reduce partner-list section spacing on mobile */
@media (max-width: 768px) {
  .partner-list {
    margin: 0.5rem 0;
  }
  .partner-list li {
    margin: 0;
  }
}

/* Fix header spacer on mobile */
@media (max-width: 768px) {
  .main-header + div[style*='height:5rem'] {
    height: 4rem;
  }
}

/* Sentences: smaller font on mobile */
@media (max-width: 768px) {
  .sentence-list-item {
    font-size: 1.25rem;
    line-height: 2;
  }
}

/* Feature card stats: vertical on mobile (match staging) */
@media (max-width: 768px) {
  /* Hide description on mobile for cleaner cards */
}

/* Hero overlay: fix mobile stacking of headline + CTA + hint */
@media (max-width: 768px) {
  .index-entry-video__headline--top {
    transform: translate(-50%, calc(-50% - 130px)) !important;
  }
  [dir='rtl'] .index-entry-video__headline--top {
    transform: translate(50%, calc(-50% - 130px)) !important;
  }
  .index-entry-video__headline--bottom {
    transform: translate(-50%, calc(-50% + 130px)) !important;
  }
  [dir='rtl'] .index-entry-video__headline--bottom {
    transform: translate(50%, calc(-50% + 130px)) !important;
  }
  .button-hint-label {
    transform: translate(-50%, calc(-50% - 4rem)) !important;
  }
  [dir='rtl'] .button-hint-label {
    transform: translate(50%, calc(-50% - 4rem)) !important;
  }
  .index-entry-video__headline-text {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }
}

/* ================================================
   FINAL PARITY FIXES — 2026-03-02
   ================================================ */

/* 1. Hero: restore 200vh for full shrink animation */
.index-entry {
  height: 200vh !important;
}

/* 2. Hero sticky container: zero padding — full bleed */
.index-entry .index-entry-video--initial-vh,
.index-entry .index-entry-video {
  padding: 0 !important;
}
.index-entry-video__inner {
  border-radius: 0 !important;
}

/* 3. About section: bigger paragraphs, more padding */
.about-section {
  padding: 4rem 2rem !important;
}
.paragraph .content {
  font-size: 1.5rem !important;
  line-height: 1.55 !important;
  color: #8A8880 !important;
}
.paragraph .content mark.focus {
  color: var(--awan-text) !important;
  font-weight: 600 !important;
}

/* 4. Feature cards: keep stats HORIZONTAL on desktop, 3-col */

/* 5. Feature card icon — orange + proper size */

/* 6. "العلامات الرئيسية" — orange with colon */

/* 7. Logo strip: reduce padding, ensure FA icons render nicely */
.logo-strip {
  padding: 1rem 0;
}
.strip-item {
  gap: 0.75rem;
  min-width: max-content;
}
.strip-item__icon {
  flex-shrink: 0;
}
.logo-strip-track {
  gap: 3rem;
}
.logo-strip-wrapper {
  margin: 0.75rem 0;
}

/* 8. Sentences list: right-align, bigger font */
.sentences-list {
  list-style: none;
  padding: 0;
  margin: 0;
  direction: rtl;
  text-align: right;
}
.sentence-list-item {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--awan-border);
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0;
  margin: 0 0 4px;
}
.sentence-list-item.active {
  color: var(--awan-text);
  font-weight: 600;
}

/* 9. CTA button in contact section */
.contact-section .base-button,
.contact-cta-button {
  padding: 1rem 3rem !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  border-radius: 3rem !important;
  border: 2px solid var(--awan-text) !important;
  background: transparent !important;
  color: var(--awan-text) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.contact-section .base-button:hover {
  background: var(--awan-text);
  color: var(--awan-text-on-accent);
}

/* 10. Reduce gap between sections globally */
.index-content__section + .index-content__section,
.benefits-section + .index-content__section,
.benefits-section + section {
  margin-top: 0;
}

/* ================================================
   MOBILE FINAL FIXES
   ================================================ */

@media (max-width: 768px) {
  /* Hero: shorter on mobile */
  .index-entry {
    height: 130vh;
  }

  /* About: less padding on mobile */
  .about-section {
    padding: 2.5rem 1.25rem;
  }
  .paragraph .content {
    font-size: 1.25rem;
  }

  /* Feature cards stats: horizontal 3-col on mobile too */

  /* Description: 2-line clamp */

  /* Logo strip */
  .logo-strip {
    padding: 1rem 0;
  }
  .logo-strip-track {
    gap: 1.5rem;
  }
  .strip-item__text {
    font-size: 0.8rem;
  }

  /* Sentences smaller on mobile */
  .sentence-list-item {
    font-size: 1.4rem;
    line-height: 1.8;
  }
  .index-preview {
    display: none;
  }

  /* Benefits single column */
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .benefits-section {
    padding: 2rem 1rem;
  }
}

/* ================================================
   FINAL POLISH — logo-strip + hero headline
   ================================================ */

/* Strip group item (3 icons + heading) */
.strip-item--group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: max-content;
}
.strip-item__icons {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.strip-item__icons img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.strip-item--group .strip-item__text--highlight {
  font-size: 1rem;
  font-weight: 700;
  color: var(--awan-accent);
  text-align: center;
}

/* Strip icons: proper sizing */
.strip-item img.strip-item__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.logo-strip[data-strip='2'] .strip-item img.strip-item__icon {
  width: 40px;
  height: 40px;
}

/* Hero headline: match staging single-line size */
.index-entry-video__headline-text {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Bottom tagline on hero — smaller, don't compete with headline */
.index-entry-video__headline--bottom .index-entry-video__headline-text {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  white-space: normal;
  text-align: center;
}

/* Make the header box-shadow line cleaner (remove orange line) */
.main-header {
  box-shadow: 0 1px 0 rgba(13,15,14,0.07) !important;
  border-bottom: none !important;
}

/* Feature cards: icon visible on mobile too */
@media (max-width: 768px) {
  /* Stats: keep horizontal 3-col on mobile */
}

/* Logo strip variants — exact match to staging */
.strip-item--clustered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: max-content;
}
.strip-item__icon-group {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.strip-item__icon--small {
  width: 20px;
  height: 20px;
}
.strip-item__icon--large {
  width: 32px;
  height: 32px;
}

.strip-item--timeline {
  min-width: max-content;
}
.timeline-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.strip-item--minimalist {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: max-content;
}

.strip-item--feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: max-content;
}

.strip-item__text--bold {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--awan-foreground, var(--awan-text));
}

.strip-item__quote {
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--awan-text-dark-gray, var(--awan-text-muted));
}

/* Feature cards: ensure card inner bg is FULLY opaque — no bleed-through */

/* Remove the semi-transparent overlay that causes ghosting */

/* Project overlay — make it fully white to hide cards behind */
.project-overlay {
  position: absolute;
  inset: 0;
  background: var(--awan-background, var(--awan-bg));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
  pointer-events: none;
}

/* ===================================================
   SENTENCES LIST — clean, matches staging exactly
   =================================================== */
.sentences-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
  direction: rtl;
}

.sentences-list li {
  padding: 0;
  margin: 0 0 4px;
  cursor: default;
}

.sentences-list .sentence-text,
.sentences-list .sentence-list-item {
  font-size: 1.5rem;
  font-weight: 500;
  color: rgb(190, 192, 197);
  transition:
    color 0.35s ease,
    font-weight 0.25s ease;
  line-height: 1.4;
  display: inline;
}

.sentences-list li.active .sentence-text,
.sentences-list .sentence-list-item.active {
  color: var(--awan-text);
  font-weight: 600;
}

/* index-preview (injected by sentences-preview.js) */
.index-preview {
  display: block;
}
@media (max-width: 767.98px) {
  .index-preview {
    display: none;
  }
}

/* ===================================================
   FEATURE CARDS — opaque, no ghosting
   =================================================== */

/* ===================================================
   MOBILE CARDS — image top, stats horizontal
   =================================================== */
@media (max-width: 767.98px) {
}

/* ===================================================
   LOGO STRIP — variant styles
   =================================================== */
.strip-item--clustered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: max-content;
}
.strip-item__icon-group {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.strip-item__icon--small {
  width: 20px;
  height: 20px;
}
.strip-item__icon--large {
  width: 32px;
  height: 32px;
}
.strip-item--timeline {
  min-width: max-content;
}
.timeline-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.strip-item--minimalist {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: max-content;
}
.strip-item--feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: max-content;
}
.strip-item__text--bold {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--awan-foreground, var(--awan-text));
}
.strip-item__quote {
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--awan-text-dark-gray, var(--awan-text-muted));
}

/* ===================================================
   ABOUT — active pill
   =================================================== */
.use-case-pill.active,
.benefits-pill.active {
  background: var(--awan-text) !important;
  color: var(--awan-text-on-accent) !important;
  border-color: var(--awan-text) !important;
}

/* ===================================================
   ABOUT SECTION — scroll-highlight paragraphs
   =================================================== */
[dir="rtl"] .about-section .paragraph .content {
  direction: rtl;
  text-align: right;
}
[dir="ltr"] .about-section .paragraph .content {
  direction: ltr;
  text-align: left;
}
.about-section .paragraph .content p {
  margin-bottom: 1.5rem;
}
.about-section .paragraph .content mark {
  background: transparent;
  color: var(--awan-border);
  transition:
    color 0.5s ease,
    font-weight 0.3s ease;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.6;
}
.about-section .paragraph .content mark.focus {
  color: var(--awan-text);
  font-weight: 600;
}

/* Partner list pills — direction follows locale */
[dir="rtl"] .partner-list {
  direction: rtl;
}
[dir="ltr"] .partner-list {
  direction: ltr;
}
.use-case-pill:hover {
  background: var(--awan-text);
  color: var(--awan-text-on-accent);
}

/* ===================================================
   HERO — ensure min-height on mobile so tagline fits
   =================================================== */
@media (max-width: 767.98px) {
  .index-entry-video {
    min-height: 620px;
  }
  .index-entry-video__headline--bottom {
    transform: translate(-50%, calc(-50% + 140px)) !important;
  }
  .index-entry-video__headline--top {
    transform: translate(-50%, calc(-50% - 140px)) !important;
  }
}

/* ===================================================
   PARTNER LIST PILLS — force horizontal wrap on desktop
   =================================================== */
.partner-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  direction: rtl;
}
.partner-list li {
  margin-bottom: 0;
}

/* About section — center align text (matches staging) */
.about-section .paragraph .content {
  text-align: right;
  max-width: 800px;
  margin: 0 auto;
  direction: rtl;
}
.about-section .paragraph .content p {
  margin-bottom: 1rem;
}

/* ===================================================
   INDEX PREVIEW — force LEFT side in RTL context
   =================================================== */
.index-preview {
  right: 4%;
  left: auto;
  inset-inline-start: unset;
  inset-inline-end: unset;
}

/* ===================================================
   HERO BUTTON — match staging exactly
   =================================================== */
.base-button--variant-blur {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(233,230,215,0.15);
  border: 1px solid rgba(233,230,215,0.3);
  color: var(--awan-text-on-accent);
  border-radius: 9999px;
}
.base-button--size-large {
  padding: 1rem 1.75rem;
  font-size: 1.125rem;
  gap: 0.5rem;
}
.base-button--variant-blur .base-button__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.base-button--variant-blur .base-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.base-button--variant-blur:hover {
  background: rgba(233,230,215,0.25);
}

/* ===================================================
   ABOUT SECTION — right-align, match staging spacing
   =================================================== */
.about-section {
  padding: 4rem 2rem !important;
}
.about-section .paragraph {
  padding: 0;
}

/* ===================================================
   SENTENCES — prevent video overlay on list
   The .index-preview is fixed at right:4% (300px wide)
   Push sentences list left to not overlap
   =================================================== */
.sentences-list {
  padding-right: 320px;
}
@media (max-width: 767.98px) {
  .sentences-list {
    padding-right: 0;
  }
}

/* ===================================================
   CARDS — sticky stacking, all top:0 (matches staging)
   =================================================== */

/* ===================================================
   SENTENCES — caption styling (partner name)
   =================================================== */
.index-preview figcaption {
  font-size: 0.8rem;
  color: var(--awan-text-muted);
  padding: 6px 10px;
  text-align: center;
  direction: rtl;
}

/* Active sentence — pure black (matches staging) */
.sentences-list .sentence-list-item.active .sentence-text {
  color: var(--awan-text);
  font-weight: 600;
}

/* ===================================================
   CARDS — after-opacity CSS variable (matches staging)
   =================================================== */

/* ===================================================
   95% PARITY FIXES
   =================================================== */

/* 1. About section — reduce paragraph font size to match staging (18-20px) */
.about-section-exact p,
.about-section-exact .about-body p {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.75;
  max-width: 680px;
  margin-left: auto;
  margin-bottom: 1.25rem;
}

/* About heading — staging shows ~28-32px */
.about-section-exact h2,
.about-section-exact .about-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* 2. Logo strip — cap height to match staging (~350px max) */
.logo-strip-wrapper {
  max-height: 380px;
  overflow: hidden;
}

/* Each strip row height */
.logo-strip {
  height: 80px;
}

/* 3. Theme toggle — visible with icon color */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
}
.theme-toggle svg,
.theme-toggle .theme-toggle-icon {
  width: 20px;
  height: 20px;
  stroke: var(--awan-text);
  fill: none;
  stroke-width: 2;
}
.dark .theme-toggle svg,
.dark .theme-toggle .theme-toggle-icon {
  stroke: var(--awan-bg);
}

/* 4. Cart badge — show when count > 0 */
.cart-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  background: #ef4444;
  color: var(--awan-text-on-accent);
  border-radius: 999px;
  padding: 0 4px;
}

/* ===================================================
   CRITICAL FIXES — FINAL PARITY PASS
   =================================================== */

/* DARK MODE — html.dark overrides */
html.dark,
html.dark body,
.dark,
.dark body,
html[class*='dark'] body {
  background-color: var(--awan-text) !important;
  color: var(--awan-text-on-accent) !important;
}
html.dark .main-header,
.dark .main-header,
html[class*='dark'] .main-header {
  background: var(--awan-bg)00 !important;
  box-shadow: 0 1px 0 rgba(233,230,215,0) !important;
  color: var(--awan-text-on-accent)00 !important;
}
html.dark .main-header .header-btn,
.dark .main-header .header-btn {
  color: var(--awan-text-on-accent) !important;
}
html.dark .main-header .header-btn svg,
.dark .main-header .header-btn svg {
  stroke: var(--awan-bg) !important;
}
html.dark .about-section,
.dark .about-section {
  background: var(--awan-text) !important;
}
html.dark .contact-section,
.dark .contact-section {
  background: var(--awan-text);
}

/* HERO — full-bleed, break out of Zid container */
.index-entry {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  position: relative !important;
}

/* HERO SHRINK — ensure it renders on scroll */
[data-hero-container] {
  transform-origin: center top !important;
  will-change: transform !important;
}

/* SENTENCES — fix video preview loading state */
.index-preview {
  transition: opacity 0.4s ease;
}
.index-preview video {
  background: var(--awan-text);
  border-radius: 12px;
  display: block;
}

/* Sound trigger — visual feedback on active sentence */
.sentence-list-item.active {
  cursor: pointer;
}

/* LOGO STRIP — remove excess height */
.logo-strip-wrapper {
  max-height: 360px;
  overflow: hidden;
}

/* CTA SECTION spacing */
.contact-section {
  padding-bottom: 4rem;
}

/* Dark mode catch-all — override Zid's wrapper backgrounds */
html.dark #app,
html.dark .zid-app,
html.dark main,
html.dark [class*='page'],
html.dark [class*='content'],
html.dark .about-section .paragraph .content {
  background-color: var(--awan-text-on-accent)00 !important;
  color: var(--awan-text-on-accent) !important;
}
html.dark .paragraph .content mark {
  color: var(--awan-text-muted) !important;
}
html.dark .paragraph .content mark.focus {
  color: var(--awan-accent) !important;
}
html.dark .sentence-list-item {
  color: var(--awan-text-muted);
}
html.dark .sentence-list-item.active .sentence-text {
  color: var(--awan-text-on-accent);
}
html.dark .use-case-pill {
  border-color: var(--awan-text-muted);
  color: var(--awan-border);
}
html.dark .use-case-pill.active {
  background: var(--awan-bg);
  color: var(--awan-text);
  border-color: var(--awan-text-on-accent);
}
html.dark .base-button {
  border-color: var(--awan-text-muted) !important;
  color: var(--awan-text-on-accent) !important;
}
html.dark .logo-strip-wrapper {
  background: var(--awan-text);
}

/* ---- Feature card image: proper sizing on desktop ---- */
@media (min-width: 769px) {
}

/* ---- Header button colors: invert on dark mode ---- */
.main-header {
  color: var(--awan-text);
}
.dark .main-header {
  color: var(--awan-text-on-accent);
}
.header-btn {
  color: inherit;
}

/* ---- Theme toggle: sun/moon icon switching ---- */
/* Light mode: show moon (invite to go dark), hide sun */
.theme-icon-sun {
  display: none;
}
.theme-icon-moon {
  display: block;
}
/* Dark mode: show sun (invite to go light), hide moon */
.dark .theme-icon-sun {
  display: block;
}
.dark .theme-icon-moon {
  display: none;
}
/* Button subtle ring so it's always findable */
[data-theme-toggle] {
  outline: none;
}
[data-theme-toggle]:hover {
  background: rgba(233,230,215,0.2) !important;
}

/* ============================================================
   GLOBAL DARK MODE TEXT SAFETY NET — v78+
   Catches any remaining elements using unreadable dark grays
   ============================================================ */
html.dark {
  --awan-muted: var(--awan-text-muted);
  --awan-foreground: var(--awan-bg);
}

/* Figcaptions in dark */
html.dark figcaption { color: var(--awan-text-muted) !important; }

/* Any remaining hardcoded dark text in dark mode */
html.dark .text-muted,
html.dark [class*="-muted"],
html.dark [class*="-subtitle"],
html.dark [class*="-caption"] {
  color: var(--awan-text-muted) !important;
}

/* Light mode base button border stays dark */
html:not(.dark) .base-button {
  border-color: var(--awan-text);
  color: var(--awan-text);
}

/* extracted from categories.jinja — v164 */
.awan-cats-page { background:var(--awan-surface); min-height:60vh; padding-bottom:5rem; }
.dark .awan-cats-page { background:var(--awan-text); }

.awan-cats-container { max-width:1200px; margin:0 auto; padding:0 2rem; }

.awan-cats-hero {
  padding:5rem 0 3rem;
  border-bottom:1px solid rgba(13,15,14,.08);
  margin-bottom:3rem;
  background:linear-gradient(to bottom, rgba(190,84,46,.04), transparent);
}
.dark .awan-cats-hero { border-bottom-color:rgba(233,230,215,.08); }

.awan-cats-eyebrow { font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--awan-accent); margin:0 0 .75rem; }
.awan-cats-title { font-size:clamp(1.75rem,4vw,3rem); font-weight:700; color:var(--awan-text); margin:0 0 .5rem; line-height:1.2; }
.dark .awan-cats-title { color:var(--awan-surface); }
.awan-cats-sub { font-size:.875rem; color:#7A7870; margin:0; }

.awan-cats-body { padding:0 2rem; }

.awan-cats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1.5rem;
  margin-bottom:4rem;
}

.awan-cat-card {
  display:flex; flex-direction:column;
  border-radius:1.25rem; overflow:hidden;
  text-decoration:none;
  border:1px solid rgba(13,15,14,.08);
  background:var(--awan-surface);
  transition:transform .25s ease, box-shadow .25s ease;
}
.dark .awan-cat-card { background:var(--awan-text); border-color:rgba(233,230,215,.08); }
.awan-cat-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(13,15,14,.1); }
.dark .awan-cat-card:hover { box-shadow:0 12px 32px rgba(13,15,14,.4); }

.awan-cat-card-img { aspect-ratio:4/3; overflow:hidden; }
.awan-cat-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.awan-cat-card:hover .awan-cat-card-img img { transform:scale(1.04); }

.awan-cat-card-img--placeholder {
  display:flex; align-items:center; justify-content:center;
  background:rgba(190,84,46,.06); color:var(--awan-accent);
}
.dark .awan-cat-card-img--placeholder { background:rgba(190,84,46,.1); }

.awan-cat-card-body {
  padding:1rem 1.25rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.awan-cat-card-name { font-size:1rem; font-weight:600; color:var(--awan-text); }
.dark .awan-cat-card-name { color:var(--awan-surface); }
.awan-cat-card-count { font-size:.8125rem; color:#7A7870; }

.awan-cats-subcats { margin-bottom:3rem; }
.awan-cats-subcats-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.awan-cats-subcats-title { font-size:1.25rem; font-weight:700; color:var(--awan-text); margin:0; }
.dark .awan-cats-subcats-title { color:var(--awan-surface); }
.awan-cats-subcats-link { font-size:.875rem; font-weight:600; color:var(--awan-accent); text-decoration:none; transition:opacity .2s; }
.awan-cats-subcats-link:hover { opacity:.75; }

.awan-cats-empty { padding:4rem 0; text-align:center; color:#7A7870; }

@media(max-width:640px){
  .awan-cats-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .awan-cats-hero { padding:3rem 0 2rem; }
}

/* extracted from category.jinja — v164 */
.awan-cat-page { background:var(--awan-surface); min-height:60vh; padding-bottom:5rem; }
.dark .awan-cat-page { background:var(--awan-text); }

.awan-cat-page-container { max-width:1280px; margin:0 auto; padding:0 2rem; }

/* Hero */
.awan-cat-page-hero {
  position:relative; background:var(--awan-text); padding:5rem 0 3rem;
  margin-bottom:3rem;
}
.awan-cat-page-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(13,15,14,0.55), rgba(13,15,14,0.35));
  pointer-events:none;
}
.awan-cat-page-hero-inner { position:relative; z-index:1; }

.awan-cat-page-breadcrumb {
  display:flex; align-items:center; flex-wrap:wrap; gap:.375rem;
  font-size:.8125rem; color:rgba(233,230,215,0.65);
  margin-bottom:1rem;
}
.awan-cat-page-breadcrumb a { color:rgba(233,230,215,0.65); text-decoration:none; transition:color .2s; }
.awan-cat-page-breadcrumb a:hover { color:var(--awan-accent); }
.awan-cat-page-breadcrumb [aria-current] { color:var(--awan-surface); }

.awan-cat-page-title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:700; color:var(--awan-surface); margin:0 0 .625rem; }
.awan-cat-page-desc { font-size:1rem; color:rgba(233,230,215,0.75); margin:0 0 .5rem; max-width:600px; line-height:1.6; }
.awan-cat-page-count { font-size:.8125rem; color:rgba(233,230,215,0.5); margin:0; }

/* Body */
.awan-cat-page-body { padding:0 2rem 0; }

.awan-cat-page-subcats { margin-bottom:3rem; }

.awan-cat-page-products { display:flex; flex-direction:column; gap:1.5rem; }

.awan-cat-page-pagination { padding-top:2rem; }

.awan-cat-page-empty {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:4rem 0; text-align:center; color:#7A7870;
}

@media(max-width:640px){
  .awan-cat-page-hero { padding:3.5rem 0 2rem; }
  .awan-cat-page-body { padding:0 1rem 0; }
}

/* extracted from faqs.jinja — v164 */
.awan-faq-page {
  background: var(--awan-surface);
  min-height: 60vh;
  padding-bottom: 5rem;
}
.dark .awan-faq-page { background: var(--awan-text); }

.awan-faq-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem;
}

.awan-faq-header {
  padding: 5rem 0 3rem;
  border-bottom: 1px solid rgba(13,15,14,0.08);
  margin-bottom: 2.5rem;
}
.dark .awan-faq-header { border-bottom-color: rgba(233,230,215,0.08); }

.awan-faq-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--awan-accent);
  margin: 0 0 0.75rem;
}

.awan-faq-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--awan-text);
  margin: 0;
  line-height: 1.2;
}
.dark .awan-faq-title { color: var(--awan-surface); }

.awan-faq-body { padding: 0 2rem; }

.awan-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.awan-faq-item {
  border-bottom: 1px solid rgba(13,15,14,0.08);
}
.dark .awan-faq-item { border-bottom-color: rgba(233,230,215,0.08); }

.awan-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  font-size: 1rem;
  font-weight: 600;
  color: var(--awan-text);
  line-height: 1.5;
  transition: color 0.2s ease;
}
.dark .awan-faq-question { color: var(--awan-surface); }
.awan-faq-question:hover { color: var(--awan-accent); }
.awan-faq-item--open .awan-faq-question { color: var(--awan-accent); }

.awan-faq-icon {
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.25s ease;
  color: #7A7870;
}
.awan-faq-item--open .awan-faq-icon {
  transform: rotate(180deg);
  color: var(--awan-accent);
}

.awan-faq-answer {
  overflow: hidden;
}
.awan-faq-answer-inner {
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--awan-muted);
}
.dark .awan-faq-answer-inner { color: #7A7870; }
.awan-faq-answer-inner a { color: var(--awan-accent); text-decoration: underline; text-underline-offset: 3px; }

.awan-faq-empty {
  text-align: center;
  padding: 4rem 0;
  color: #7A7870;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 640px) {
  .awan-faq-header { padding: 3rem 0 2rem; }
  .awan-faq-question { font-size: 0.9375rem; }
}

/* extracted from page.jinja — v164 */
.awan-static-page {
  background: var(--awan-surface);
  min-height: 60vh;
  padding-bottom: 5rem;
}
.dark .awan-static-page { background: var(--awan-text); }

.awan-static-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem;
}

.awan-static-header {
  padding: 4rem 0 2.5rem;
  border-bottom: 1px solid rgba(13,15,14,0.08);
  margin-bottom: 3rem;
}
.dark .awan-static-header { border-bottom-color: rgba(233,230,215,0.08); }

.awan-static-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #7A7870;
  margin-bottom: 1rem;
}
.awan-static-breadcrumb a {
  color: #7A7870;
  text-decoration: none;
}
.awan-static-breadcrumb a:hover { color: var(--awan-accent); }

.awan-static-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--awan-text);
  line-height: 1.2;
  margin: 0;
}
.dark .awan-static-title { color: var(--awan-surface); }

/* Rich content */
.awan-static-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--awan-muted);
}
.dark .awan-static-body { color: #C9C5B3; }
.awan-static-body h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--awan-text);
  margin: 2.5rem 0 1rem;
}
.dark .awan-static-body h2 { color: var(--awan-surface); }
.awan-static-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--awan-text);
  margin: 2rem 0 0.75rem;
}
.dark .awan-static-body h3 { color: var(--awan-surface); }
.awan-static-body p { margin: 0 0 1.25rem; }
.awan-static-body a {
  color: var(--awan-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.awan-static-body ul, .awan-static-body ol {
  padding-inline-start: 1.5rem;
  margin: 0 0 1.25rem;
}
.awan-static-body li { margin-bottom: 0.375rem; }
.awan-static-body strong { color: var(--awan-text); }
.dark .awan-static-body strong { color: var(--awan-surface); }
.awan-static-body hr {
  border: none;
  border-top: 1px solid rgba(13,15,14,0.08);
  margin: 2rem 0;
}
.dark .awan-static-body hr { border-top-color: rgba(233,230,215,0.08); }
.awan-static-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.awan-static-body th, .awan-static-body td {
  padding: 0.625rem 1rem;
  border: 1px solid rgba(13,15,14,0.1);
  text-align: start;
}
.dark .awan-static-body th, .dark .awan-static-body td {
  border-color: rgba(233,230,215,0.1);
}
.awan-static-body th {
  background: rgba(190,84,46,0.08);
  font-weight: 600;
}

@media (max-width: 640px) {
  .awan-static-header { padding: 2.5rem 0 1.5rem; }
}

/* extracted from products.jinja — v164 */
@keyframes awan-spin{to{transform:rotate(360deg)}}

/* extracted from questions.jinja — v164 */
.awan-questions-page { background:var(--awan-surface); min-height:60vh; padding:3rem 0 5rem; }
.dark .awan-questions-page { background:var(--awan-text); }
.awan-questions-container { max-width:1100px; margin:0 auto; padding:0 2rem; }

.awan-questions-back { display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; font-weight:600; color:var(--awan-accent); text-decoration:none; margin-bottom:1.5rem; transition:gap .2s; }
.awan-questions-back:hover { gap:.625rem; }

.awan-questions-header { margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(13,15,14,.08); }
.dark .awan-questions-header { border-bottom-color:rgba(233,230,215,.08); }

.awan-questions-title { font-size:1.75rem; font-weight:700; color:var(--awan-text); margin:0; display:flex; align-items:center; gap:.75rem; }
.dark .awan-questions-title { color:var(--awan-surface); }
.awan-questions-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.75rem; height:1.75rem; padding:0 .375rem; background:var(--awan-accent); color:var(--awan-surface); font-size:.875rem; font-weight:700; border-radius:2rem; }

.awan-questions-grid { display:grid; grid-template-columns:320px 1fr; gap:3rem; align-items:start; }

/* Form card */
.awan-questions-form-card { position:sticky; top:5rem; background:var(--awan-surface); border:1px solid rgba(13,15,14,.08); border-radius:1.25rem; padding:1.5rem; }
.dark .awan-questions-form-card { background:var(--awan-text); border-color:rgba(233,230,215,.08); }

.awan-questions-form-title { font-size:1rem; font-weight:700; color:var(--awan-text); margin:0 0 .375rem; }
.dark .awan-questions-form-title { color:var(--awan-surface); }
.awan-questions-form-desc { font-size:.875rem; color:var(--awan-muted); margin:0 0 1.25rem; }

.awan-questions-form { display:flex; flex-direction:column; gap:1rem; }
.awan-form-field { display:flex; flex-direction:column; gap:.375rem; }
.awan-form-label { font-size:.8125rem; font-weight:600; color:var(--awan-text); }
.dark .awan-form-label { color:var(--awan-surface); }
.awan-form-label span { color:#ef4444; margin-inline-start:.125rem; }
.awan-form-input, .awan-form-textarea {
  width:100%; padding:.625rem .875rem; font-size:.875rem;
  border:1px solid rgba(13,15,14,.2); border-radius:.625rem;
  background:var(--awan-surface); color:var(--awan-text);
  transition:border-color .2s, box-shadow .2s;
  box-sizing:border-box;
}
.dark .awan-form-input, .dark .awan-form-textarea { background:var(--awan-text); border-color:rgba(233,230,215,.2); color:var(--awan-surface); }
.awan-form-input:focus, .awan-form-textarea:focus { outline:none; border-color:var(--awan-accent); box-shadow:0 0 0 3px rgba(190,84,46,.15); }
.awan-form-textarea { resize:vertical; }
.awan-form-check { display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--awan-muted); cursor:pointer; }
.dark .awan-form-check { color:#7A7870; }

.awan-questions-submit { width:100%; padding:.75rem; background:var(--awan-accent); color:var(--awan-surface); font-size:.9375rem; font-weight:700; border:none; border-radius:.625rem; cursor:pointer; transition:background .2s,transform .2s; }
.awan-questions-submit:hover { background:#e07810; transform:translateY(-1px); }

.awan-questions-msg { padding:.75rem 1rem; border-radius:.625rem; font-size:.875rem; }

/* Q&A items */
.awan-questions-list { display:flex; flex-direction:column; gap:0; }
.awan-qa-item { padding:1.5rem 0; border-bottom:1px solid rgba(13,15,14,.06); display:flex; flex-direction:column; gap:.875rem; }
.dark .awan-qa-item { border-bottom-color:rgba(233,230,215,.06); }

.awan-qa-q, .awan-qa-a { display:flex; align-items:flex-start; gap:.75rem; }
.awan-qa-a { padding-inline-start:1rem; }

.awan-qa-badge {
  flex-shrink:0; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:.875rem; font-weight:700;
}
.awan-qa-badge--q { background:var(--awan-accent); color:var(--awan-surface); }
.awan-qa-badge--a { background:var(--awan-text); color:var(--awan-surface); }
.dark .awan-qa-badge--a { background:var(--awan-surface); color:var(--awan-text); }

.awan-qa-text { font-size:.9375rem; color:var(--awan-text); line-height:1.6; margin:0; }
.dark .awan-qa-text { color:var(--awan-surface); }
.awan-qa-meta { font-size:.75rem; color:#7A7870; margin:.25rem 0 0; }
.awan-qa-pending { font-size:.875rem; color:#7A7870; font-style:italic; padding-inline-start:2.75rem; }
.awan-qa-imgs { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.awan-qa-img-wrap { width:4rem; height:4rem; border-radius:.5rem; overflow:hidden; }
.awan-qa-img-wrap img { width:100%; height:100%; object-fit:cover; }

.awan-questions-empty { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:4rem 0; text-align:center; color:#7A7870; }
.awan-questions-pagination { padding-top:2rem; }

@media(max-width:768px){
  .awan-questions-grid { grid-template-columns:1fr; }
  .awan-questions-form-card { position:static; }
}

/* extracted from reviews.jinja — v164 */
.awan-reviews-page {
  background: var(--awan-surface);
  min-height: 60vh;
  padding: 3rem 0 5rem;
}
.dark .awan-reviews-page { background: var(--awan-text); }

.awan-reviews-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.awan-reviews-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--awan-accent);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: gap 0.2s ease;
}
.awan-reviews-back:hover { gap: 0.625rem; }

.awan-reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(13,15,14,0.08);
}
.dark .awan-reviews-header { border-bottom-color: rgba(233,230,215,0.08); }

.awan-reviews-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--awan-text);
  margin: 0;
}
.dark .awan-reviews-title { color: var(--awan-surface); }

.awan-reviews-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--awan-accent);
  color: var(--awan-surface);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.awan-reviews-add-btn:hover { background: #e07810; transform: translateY(-1px); }

.awan-reviews-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}

/* Sidebar */
.awan-reviews-sidebar {
  position: sticky;
  top: 5rem;
  background: var(--awan-surface);
  border: 1px solid rgba(13,15,14,0.08);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.dark .awan-reviews-sidebar { background: var(--awan-text); border-color: rgba(233,230,215,0.08); }

.awan-reviews-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(13,15,14,0.08);
}
.dark .awan-reviews-avg { border-bottom-color: rgba(233,230,215,0.08); }

.awan-reviews-avg-score {
  font-size: 3rem;
  font-weight: 800;
  color: var(--awan-text);
  line-height: 1;
}
.dark .awan-reviews-avg-score { color: var(--awan-surface); }

.awan-reviews-avg-stars { display: flex; gap: 2px; }

.awan-reviews-avg-count {
  font-size: 0.8125rem;
  color: #7A7870;
}

.awan-reviews-bars { display: flex; flex-direction: column; gap: 0.5rem; }

.awan-reviews-bar-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--awan-muted);
}
.dark .awan-reviews-bar-row { color: #7A7870; }

.awan-reviews-bar-track {
  height: 6px;
  background: rgba(13,15,14,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.dark .awan-reviews-bar-track { background: rgba(233,230,215,0.1); }

.awan-reviews-bar-fill {
  height: 100%;
  background: var(--awan-accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.awan-reviews-no-rating {
  font-size: 0.875rem;
  color: #7A7870;
  text-align: center;
}

/* List */
.awan-reviews-list { display: flex; flex-direction: column; }

.awan-reviews-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(13,15,14,0.06);
}
.dark .awan-reviews-item { border-bottom-color: rgba(233,230,215,0.06); }
.awan-reviews-item:first-child { padding-top: 0; }

.awan-reviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 0;
  text-align: center;
  color: #7A7870;
}

.awan-reviews-pagination { padding-top: 2rem; }

@media (max-width: 768px) {
  .awan-reviews-grid { grid-template-columns: 1fr; }
  .awan-reviews-sidebar { position: static; }
}

/* extracted from categories.jinja (template) — v164 */
.awan-cats-page { background:var(--awan-surface); min-height:60vh; padding-bottom:5rem; }
.dark .awan-cats-page { background:var(--awan-text); }

.awan-cats-container { max-width:1200px; margin:0 auto; padding:0 2rem; }

.awan-cats-hero {
  padding:5rem 0 3rem;
  border-bottom:1px solid rgba(13,15,14,.08);
  margin-bottom:3rem;
  background:linear-gradient(to bottom, rgba(190,84,46,.04), transparent);
}
.dark .awan-cats-hero { border-bottom-color:rgba(233,230,215,.08); }

.awan-cats-eyebrow { font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--awan-accent); margin:0 0 .75rem; }
.awan-cats-title { font-size:clamp(1.75rem,4vw,3rem); font-weight:700; color:var(--awan-text); margin:0 0 .5rem; line-height:1.2; }
.dark .awan-cats-title { color:var(--awan-surface); }
.awan-cats-sub { font-size:.875rem; color:#7A7870; margin:0; }

.awan-cats-body { padding:0 2rem; }

.awan-cats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1.5rem;
  margin-bottom:4rem;
}

.awan-cat-card {
  display:flex; flex-direction:column;
  border-radius:1.25rem; overflow:hidden;
  text-decoration:none;
  border:1px solid rgba(13,15,14,.08);
  background:var(--awan-surface);
  transition:transform .25s ease, box-shadow .25s ease;
}
.dark .awan-cat-card { background:var(--awan-text); border-color:rgba(233,230,215,.08); }
.awan-cat-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(13,15,14,.1); }
.dark .awan-cat-card:hover { box-shadow:0 12px 32px rgba(13,15,14,.4); }

.awan-cat-card-img { aspect-ratio:4/3; overflow:hidden; }
.awan-cat-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.awan-cat-card:hover .awan-cat-card-img img { transform:scale(1.04); }

.awan-cat-card-img--placeholder {
  display:flex; align-items:center; justify-content:center;
  background:rgba(190,84,46,.06); color:var(--awan-accent);
}
.dark .awan-cat-card-img--placeholder { background:rgba(190,84,46,.1); }

.awan-cat-card-body {
  padding:1rem 1.25rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.awan-cat-card-name { font-size:1rem; font-weight:600; color:var(--awan-text); }
.dark .awan-cat-card-name { color:var(--awan-surface); }
.awan-cat-card-count { font-size:.8125rem; color:#7A7870; }

.awan-cats-subcats { margin-bottom:3rem; }
.awan-cats-subcats-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.awan-cats-subcats-title { font-size:1.25rem; font-weight:700; color:var(--awan-text); margin:0; }
.dark .awan-cats-subcats-title { color:var(--awan-surface); }
.awan-cats-subcats-link { font-size:.875rem; font-weight:600; color:var(--awan-accent); text-decoration:none; transition:opacity .2s; }
.awan-cats-subcats-link:hover { opacity:.75; }

.awan-cats-empty { padding:4rem 0; text-align:center; color:#7A7870; }

@media(max-width:640px){
  .awan-cats-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .awan-cats-hero { padding:3rem 0 2rem; }
}

/* extracted from category.jinja — v164 */
.awan-cat-page { background:var(--awan-surface); min-height:60vh; padding-bottom:5rem; }
.dark .awan-cat-page { background:var(--awan-text); }

.awan-cat-page-container { max-width:1280px; margin:0 auto; padding:0 2rem; }

.awan-cat-page-hero {
  position:relative; background:var(--awan-text); padding:5rem 0 3rem;
  margin-bottom:3rem;
}
.awan-cat-page-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(13,15,14,0.55), rgba(13,15,14,0.35));
  pointer-events:none;
}
.awan-cat-page-hero-inner { position:relative; z-index:1; }

.awan-cat-page-breadcrumb {
  display:flex; align-items:center; flex-wrap:wrap; gap:.375rem;
  font-size:.8125rem; color:rgba(233,230,215,0.65);
  margin-bottom:1rem;
}
.awan-cat-page-breadcrumb a { color:rgba(233,230,215,0.65); text-decoration:none; transition:color .2s; }
.awan-cat-page-breadcrumb a:hover { color:var(--awan-accent); }
.awan-cat-page-breadcrumb [aria-current] { color:var(--awan-surface); }

.awan-cat-page-title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:700; color:var(--awan-surface); margin:0 0 .625rem; }
.awan-cat-page-desc { font-size:1rem; color:rgba(233,230,215,0.75); margin:0 0 .5rem; max-width:600px; line-height:1.6; }
.awan-cat-page-count { font-size:.8125rem; color:rgba(233,230,215,0.5); margin:0; }

.awan-cat-page-body { padding:0 2rem 0; }

.awan-cat-page-subcats { margin-bottom:3rem; }

.awan-cat-page-products { display:flex; flex-direction:column; gap:1.5rem; }

.awan-cat-page-pagination { padding-top:2rem; }

.awan-cat-page-empty {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:4rem 0; text-align:center; color:#7A7870;
}

@media(max-width:640px){
  .awan-cat-page-hero { padding:3.5rem 0 2rem; }
  .awan-cat-page-body { padding:0 1rem 0; }
}

/* extracted from faqs.jinja — v164 */
.awan-faq-page {
  background: var(--awan-surface);
  min-height: 60vh;
  padding-bottom: 5rem;
}
.dark .awan-faq-page { background: var(--awan-text); }

.awan-faq-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem;
}

.awan-faq-header {
  padding: 5rem 0 3rem;
  border-bottom: 1px solid rgba(13,15,14,0.08);
  margin-bottom: 2.5rem;
}
.dark .awan-faq-header { border-bottom-color: rgba(233,230,215,0.08); }

.awan-faq-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--awan-accent);
  margin: 0 0 0.75rem;
}

.awan-faq-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--awan-text);
  margin: 0;
  line-height: 1.2;
}
.dark .awan-faq-title { color: var(--awan-surface); }

.awan-faq-body { padding: 0 2rem; }

.awan-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.awan-faq-item {
  border-bottom: 1px solid rgba(13,15,14,0.08);
}
.dark .awan-faq-item { border-bottom-color: rgba(233,230,215,0.08); }

.awan-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  font-size: 1rem;
  font-weight: 600;
  color: var(--awan-text);
  line-height: 1.5;
  transition: color 0.2s ease;
}
.dark .awan-faq-question { color: var(--awan-surface); }
.awan-faq-question:hover { color: var(--awan-accent); }
.awan-faq-item--open .awan-faq-question { color: var(--awan-accent); }

.awan-faq-icon {
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.25s ease;
  color: #7A7870;
}
.awan-faq-item--open .awan-faq-icon {
  transform: rotate(180deg);
  color: var(--awan-accent);
}

.awan-faq-answer {
  overflow: hidden;
}
.awan-faq-answer-inner {
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--awan-muted);
}
.dark .awan-faq-answer-inner { color: #7A7870; }
.awan-faq-answer-inner a { color: var(--awan-accent); text-decoration: underline; text-underline-offset: 3px; }

.awan-faq-empty {
  text-align: center;
  padding: 4rem 0;
  color: #7A7870;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 640px) {
  .awan-faq-header { padding: 3rem 0 2rem; }
  .awan-faq-question { font-size: 0.9375rem; }
}

/* extracted from page.jinja — v164 */
.awan-static-page {
  background: var(--awan-surface);
  min-height: 60vh;
  padding-bottom: 5rem;
}
.dark .awan-static-page { background: var(--awan-text); }

.awan-static-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem;
}

.awan-static-header {
  padding: 4rem 0 2.5rem;
  border-bottom: 1px solid rgba(13,15,14,0.08);
  margin-bottom: 3rem;
}
.dark .awan-static-header { border-bottom-color: rgba(233,230,215,0.08); }

.awan-static-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #7A7870;
  margin-bottom: 1rem;
}
.awan-static-breadcrumb a {
  color: #7A7870;
  text-decoration: none;
}
.awan-static-breadcrumb a:hover { color: var(--awan-accent); }

.awan-static-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--awan-text);
  line-height: 1.2;
  margin: 0;
}
.dark .awan-static-title { color: var(--awan-surface); }

.awan-static-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--awan-muted);
}
.dark .awan-static-body { color: #C9C5B3; }
.awan-static-body h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--awan-text);
  margin: 2.5rem 0 1rem;
}
.dark .awan-static-body h2 { color: var(--awan-surface); }
.awan-static-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--awan-text);
  margin: 2rem 0 0.75rem;
}
.dark .awan-static-body h3 { color: var(--awan-surface); }
.awan-static-body p { margin: 0 0 1.25rem; }
.awan-static-body a {
  color: var(--awan-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.awan-static-body ul, .awan-static-body ol {
  padding-inline-start: 1.5rem;
  margin: 0 0 1.25rem;
}
.awan-static-body li { margin-bottom: 0.375rem; }
.awan-static-body strong { color: var(--awan-text); }
.dark .awan-static-body strong { color: var(--awan-surface); }
.awan-static-body hr {
  border: none;
  border-top: 1px solid rgba(13,15,14,0.08);
  margin: 2rem 0;
}
.dark .awan-static-body hr { border-top-color: rgba(233,230,215,0.08); }
.awan-static-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.awan-static-body th, .awan-static-body td {
  padding: 0.625rem 1rem;
  border: 1px solid rgba(13,15,14,0.1);
  text-align: start;
}
.dark .awan-static-body th, .dark .awan-static-body td {
  border-color: rgba(233,230,215,0.1);
}
.awan-static-body th {
  background: rgba(190,84,46,0.08);
  font-weight: 600;
}

@media (max-width: 640px) {
  .awan-static-header { padding: 2.5rem 0 1.5rem; }
}

/* extracted from questions.jinja — v164 */
.awan-questions-page { background:var(--awan-surface); min-height:60vh; padding:3rem 0 5rem; }
.dark .awan-questions-page { background:var(--awan-text); }
.awan-questions-container { max-width:1100px; margin:0 auto; padding:0 2rem; }

.awan-questions-back { display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; font-weight:600; color:var(--awan-accent); text-decoration:none; margin-bottom:1.5rem; transition:gap .2s; }
.awan-questions-back:hover { gap:.625rem; }

.awan-questions-header { margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(13,15,14,.08); }
.dark .awan-questions-header { border-bottom-color:rgba(233,230,215,.08); }

.awan-questions-title { font-size:1.75rem; font-weight:700; color:var(--awan-text); margin:0; display:flex; align-items:center; gap:.75rem; }
.dark .awan-questions-title { color:var(--awan-surface); }
.awan-questions-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.75rem; height:1.75rem; padding:0 .375rem; background:var(--awan-accent); color:var(--awan-surface); font-size:.875rem; font-weight:700; border-radius:2rem; }

.awan-questions-grid { display:grid; grid-template-columns:320px 1fr; gap:3rem; align-items:start; }

.awan-questions-form-card { position:sticky; top:5rem; background:var(--awan-surface); border:1px solid rgba(13,15,14,.08); border-radius:1.25rem; padding:1.5rem; }
.dark .awan-questions-form-card { background:var(--awan-text); border-color:rgba(233,230,215,.08); }

.awan-questions-form-title { font-size:1rem; font-weight:700; color:var(--awan-text); margin:0 0 .375rem; }
.dark .awan-questions-form-title { color:var(--awan-surface); }
.awan-questions-form-desc { font-size:.875rem; color:var(--awan-muted); margin:0 0 1.25rem; }

.awan-questions-form { display:flex; flex-direction:column; gap:1rem; }
.awan-form-field { display:flex; flex-direction:column; gap:.375rem; }
.awan-form-label { font-size:.8125rem; font-weight:600; color:var(--awan-text); }
.dark .awan-form-label { color:var(--awan-surface); }
.awan-form-label span { color:#ef4444; margin-inline-start:.125rem; }
.awan-form-input, .awan-form-textarea {
  width:100%; padding:.625rem .875rem; font-size:.875rem;
  border:1px solid rgba(13,15,14,.2); border-radius:.625rem;
  background:var(--awan-surface); color:var(--awan-text);
  transition:border-color .2s, box-shadow .2s;
  box-sizing:border-box;
}
.dark .awan-form-input, .dark .awan-form-textarea { background:var(--awan-text); border-color:rgba(233,230,215,.2); color:var(--awan-surface); }
.awan-form-input:focus, .awan-form-textarea:focus { outline:none; border-color:var(--awan-accent); box-shadow:0 0 0 3px rgba(190,84,46,.15); }
.awan-form-textarea { resize:vertical; }
.awan-form-check { display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--awan-muted); cursor:pointer; }
.dark .awan-form-check { color:#7A7870; }

.awan-questions-submit { width:100%; padding:.75rem; background:var(--awan-accent); color:var(--awan-surface); font-size:.9375rem; font-weight:700; border:none; border-radius:.625rem; cursor:pointer; transition:background .2s,transform .2s; }
.awan-questions-submit:hover { background:#e07810; transform:translateY(-1px); }

.awan-questions-msg { padding:.75rem 1rem; border-radius:.625rem; font-size:.875rem; }

.awan-questions-list { display:flex; flex-direction:column; gap:0; }
.awan-qa-item { padding:1.5rem 0; border-bottom:1px solid rgba(13,15,14,.06); display:flex; flex-direction:column; gap:.875rem; }
.dark .awan-qa-item { border-bottom-color:rgba(233,230,215,.06); }

.awan-qa-q, .awan-qa-a { display:flex; align-items:flex-start; gap:.75rem; }
.awan-qa-a { padding-inline-start:1rem; }

.awan-qa-badge {
  flex-shrink:0; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:.875rem; font-weight:700;
}
.awan-qa-badge--q { background:var(--awan-accent); color:var(--awan-surface); }
.awan-qa-badge--a { background:var(--awan-text); color:var(--awan-surface); }
.dark .awan-qa-badge--a { background:var(--awan-surface); color:var(--awan-text); }

.awan-qa-text { font-size:.9375rem; color:var(--awan-text); line-height:1.6; margin:0; }
.dark .awan-qa-text { color:var(--awan-surface); }
.awan-qa-meta { font-size:.75rem; color:#7A7870; margin:.25rem 0 0; }
.awan-qa-pending { font-size:.875rem; color:#7A7870; font-style:italic; padding-inline-start:2.75rem; }
.awan-qa-imgs { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.awan-qa-img-wrap { width:4rem; height:4rem; border-radius:.5rem; overflow:hidden; }
.awan-qa-img-wrap img { width:100%; height:100%; object-fit:cover; }

.awan-questions-empty { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:4rem 0; text-align:center; color:#7A7870; }
.awan-questions-pagination { padding-top:2rem; }

@media(max-width:768px){
  .awan-questions-grid { grid-template-columns:1fr; }
  .awan-questions-form-card { position:static; }
}

/* extracted from reviews.jinja — v164 */
.awan-reviews-page {
  background: var(--awan-surface);
  min-height: 60vh;
  padding: 3rem 0 5rem;
}
.dark .awan-reviews-page { background: var(--awan-text); }

.awan-reviews-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.awan-reviews-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--awan-accent);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: gap 0.2s ease;
}
.awan-reviews-back:hover { gap: 0.625rem; }

.awan-reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(13,15,14,0.08);
}
.dark .awan-reviews-header { border-bottom-color: rgba(233,230,215,0.08); }

.awan-reviews-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--awan-text);
  margin: 0;
}
.dark .awan-reviews-title { color: var(--awan-surface); }

.awan-reviews-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--awan-accent);
  color: var(--awan-surface);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.awan-reviews-add-btn:hover { background: #e07810; transform: translateY(-1px); }

.awan-reviews-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}

.awan-reviews-sidebar {
  position: sticky;
  top: 5rem;
  background: var(--awan-surface);
  border: 1px solid rgba(13,15,14,0.08);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.dark .awan-reviews-sidebar { background: var(--awan-text); border-color: rgba(233,230,215,0.08); }

.awan-reviews-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(13,15,14,0.08);
}
.dark .awan-reviews-avg { border-bottom-color: rgba(233,230,215,0.08); }

.awan-reviews-avg-score {
  font-size: 3rem;
  font-weight: 800;
  color: var(--awan-text);
  line-height: 1;
}
.dark .awan-reviews-avg-score { color: var(--awan-surface); }

.awan-reviews-avg-stars { display: flex; gap: 2px; }

.awan-reviews-avg-count {
  font-size: 0.8125rem;
  color: #7A7870;
}

.awan-reviews-bars { display: flex; flex-direction: column; gap: 0.5rem; }

.awan-reviews-bar-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--awan-muted);
}
.dark .awan-reviews-bar-row { color: #7A7870; }

.awan-reviews-bar-track {
  height: 6px;
  background: rgba(13,15,14,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.dark .awan-reviews-bar-track { background: rgba(233,230,215,0.1); }

.awan-reviews-bar-fill {
  height: 100%;
  background: var(--awan-accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.awan-reviews-no-rating {
  font-size: 0.875rem;
  color: #7A7870;
  text-align: center;
}

.awan-reviews-list { display: flex; flex-direction: column; }

.awan-reviews-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(13,15,14,0.06);
}
.dark .awan-reviews-item { border-bottom-color: rgba(233,230,215,0.06); }
.awan-reviews-item:first-child { padding-top: 0; }

.awan-reviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 0;
  text-align: center;
  color: #7A7870;
}

.awan-reviews-pagination { padding-top: 2rem; }

@media (max-width: 768px) {
  .awan-reviews-grid { grid-template-columns: 1fr; }
  .awan-reviews-sidebar { position: static; }
}

/* ── Categories empty state (v199 #6) ── */
.awan-cats-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--awan-text);
}
.awan-cats-empty-icon {
  color: var(--awan-accent);
  opacity: 0.75;
}
.awan-cats-empty-title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  margin: 0.25rem 0 0;
  color: var(--awan-text);
}
.awan-cats-empty-text {
  font-size: 0.95rem;
  max-width: 38ch;
  margin: 0;
  line-height: 1.55;
  color: var(--awan-text-muted);
}
.awan-cats-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--awan-accent);
  color: var(--awan-text-on-accent);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
  margin-top: 0.5rem;
}
.awan-cats-empty-cta:hover {
  background: var(--awan-accent-hover);
}