@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Tajawal:wght@500;700;800&display=swap");

:root {
  --font-system: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --brand-green: #2e5d34;
  --brand-brown: #6b4c2f;
  --brand-beige: #f3e6c9;
  --brand-accent: #f4a623;
  --text-main: #2f2a23;
  --text-soft: #6d6153;
  --surface: #fffdf8;
  --surface-2: #fffaf1;
  --border-soft: rgba(107, 76, 47, 0.16);

  /* Compatibility aliases for the long luxury system */
  --shams-cream: var(--brand-beige);
  --shams-cream-light: var(--surface);
  --shams-dark: var(--brand-brown);
  --shams-dark-deep: var(--text-main);
  --shams-gold: var(--brand-accent);
  --shams-gold-light: #f7c971;
  --shams-muted: var(--text-soft);
  --shams-white: var(--surface);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-soft: 0 16px 40px rgba(46, 93, 52, 0.12);
  --shadow-faint: 0 8px 24px rgba(46, 93, 52, 0.08);
  --shadow-hover: 0 20px 42px rgba(46, 93, 52, 0.16);
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --container: min(1200px, 92vw);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-system);
  background: radial-gradient(circle at top right, rgba(244, 166, 35, 0.11), transparent 38%), var(--shams-white);
  color: var(--text-main);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: "Tajawal", var(--font-system);
  color: var(--shams-dark-deep);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  color: var(--shams-muted);
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.section {
  padding: clamp(72px, 9vw, 130px) 0;
}

.section-head {
  margin-bottom: 34px;
}

.section-head h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.eyebrow {
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--shams-gold);
  margin-bottom: 10px;
  font-weight: 600;
}

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

.primary-btn,
.ghost-btn,
button,
.btn,
.button {
  font-family: var(--font-system);
  border-radius: 14px;
  transition: transform 0.32s var(--ease-luxury), box-shadow 0.32s var(--ease-luxury), background-color 0.28s var(--ease-luxury), border-color 0.28s var(--ease-luxury), color 0.28s var(--ease-luxury);
}

.primary-btn {
  background: linear-gradient(135deg, var(--brand-accent), var(--shams-gold-light));
  color: var(--text-main);
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(244, 166, 35, 0.33);
  border: 0;
}

.primary-btn:hover,
.primary-btn:focus-visible {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 30px rgba(244, 166, 35, 0.38);
}

.ghost-btn {
  background: rgba(255, 253, 248, 0.72);
  color: var(--shams-dark);
  padding: 0.75rem 1rem;
  border: 1px solid rgba(107, 76, 47, 0.14);
}

.ghost-btn:hover,
.ghost-btn:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 253, 248, 0.94);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(107, 76, 47, 0.16);
  border-radius: 12px;
  padding: 0.78rem 0.9rem;
  font-family: var(--font-system);
  background: rgba(255, 253, 248, 0.94);
  color: var(--text-main);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(244, 166, 35, 0.72);
  box-shadow: 0 0 0 4px rgba(244, 166, 35, 0.16);
}

/* Header */
.fasty_header_container {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: saturate(150%) blur(16px);
  background: rgba(243, 230, 201, 0.86) !important;
  border-bottom: 1px solid rgba(107, 76, 47, 0.12);
}

.fasty_header_container a,
.fasty_header_container button {
  color: var(--brand-green) !important;
}

.fasty_header_container a:hover,
.fasty_header_container button:hover {
  color: var(--brand-brown) !important;
}

/* Sphinx header (requested structure) */
.sphinx_header_container {
  background: linear-gradient(180deg, rgba(243, 230, 201, 0.96), rgba(255, 250, 241, 0.96)) !important;
  border-bottom: 1px solid rgba(107, 76, 47, 0.16);
  box-shadow: 0 8px 22px rgba(46, 93, 52, 0.1);
}

.sphinx_header_logo .logo-text-shadow-outline,
.sphinx_header_logo a {
  color: var(--brand-green) !important;
  font-family: "Tajawal", "Cairo", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
}

.sphinx_header_container input[type="text"] {
  background: var(--surface) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(107, 76, 47, 0.2) !important;
  box-shadow: 0 4px 16px rgba(46, 93, 52, 0.08);
}

.sphinx_header_container input[type="text"]::placeholder {
  color: var(--text-soft);
}

.sphinx_header_container input[type="text"]:focus {
  border-color: rgba(46, 93, 52, 0.45) !important;
  box-shadow: 0 6px 20px rgba(46, 93, 52, 0.14) !important;
}

.sphinx_header_container button.bg-skin-primary {
  background: var(--brand-green) !important;
  color: var(--surface) !important;
  border: 1px solid rgba(46, 93, 52, 0.25) !important;
}

.sphinx_header_container button.bg-skin-primary:hover {
  background: var(--brand-brown) !important;
  transform: translateY(-50%) scale(1.04) !important;
}

.sphinx_header_container .flow-root button {
  background: var(--surface) !important;
  color: var(--brand-green) !important;
  border: 1px solid rgba(46, 93, 52, 0.18) !important;
  box-shadow: 0 6px 14px rgba(46, 93, 52, 0.1);
}

.sphinx_header_container .flow-root button:hover {
  color: var(--brand-brown) !important;
  box-shadow: 0 10px 20px rgba(46, 93, 52, 0.14);
}

.sphinx_header_container .flow-root button .absolute {
  background: var(--brand-accent) !important;
}

.sphinx_header_container .flow-root button .absolute span {
  color: #2f2215 !important;
  font-weight: 700;
}

/* Header row fixes (search + cart) */
.sphinx_header_container .h-14.flex.items-center {
  direction: rtl;
}

.sphinx_header_container .h-14.flex.items-center .hidden.md\:block.w-full.md\:w-4\/5.relative,
.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative {
  position: relative;
}

.sphinx_header_container .h-14.flex.items-center input[type="text"],
.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative input[type="text"] {
  padding-right: 52px !important;
  padding-left: 16px !important;
}

/* Move search icon to opposite side (right) */
.sphinx_header_container .h-14.flex.items-center .hidden.md\:block.w-full.md\:w-4\/5.relative > button.bg-skin-primary,
.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary {
  left: auto !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Keep cart icon premium on hover, remove old brown bleed */
.sphinx_header_container .h-14.flex.items-center .flow-root > button,
.sphinx_header_container .h-14.flex.items-center .flow-root > button:hover,
.sphinx_header_container .h-14.flex.items-center .flow-root > button:focus,
.sphinx_header_container .h-14.flex.items-center .flow-root > button:focus-visible,
.sphinx_header_container .h-14.flex.items-center .flow-root > button:active {
  background: var(--surface) !important;
  color: var(--brand-green) !important;
  border: 1px solid rgba(46, 93, 52, 0.2) !important;
  box-shadow: 0 6px 14px rgba(46, 93, 52, 0.1) !important;
}

.sphinx_header_container .h-14.flex.items-center .flow-root > button:hover {
  transform: translateY(-1px);
  opacity: 1 !important;
  color: var(--brand-green) !important;
}

/* Pixel-perfect header tuning */
.sphinx_header_container.py-4.md\:pb-6.md\:pt-5 {
  padding-top: 10px !important;
  padding-bottom: 8px !important;
}

.sphinx_header_container .px-4.sm\:px-6.lg\:px-8.max-w-7xl.mx-auto {
  max-width: 1280px !important;
}

.sphinx_header_container .h-14.flex.items-center {
  min-height: 62px !important;
  gap: 12px;
  align-items: center !important;
}

.sphinx_header_container .sphinx_header_logo {
  margin-inline: 0 2px !important;
  flex: 0 0 auto;
}

.sphinx_header_container .sphinx_header_logo a {
  display: flex;
  align-items: center;
}

.sphinx_header_container .sphinx_header_logo a > div.relative.overflow-hidden.h-14.py-1.w-auto {
  height: 64px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  width: auto !important;
  display: flex;
  align-items: center;
}

.sphinx_header_container .sphinx_header_logo img,
.sphinx_header_container .sphinx_header_logo a > div.relative.overflow-hidden.h-14.py-1.w-auto img {
  height: 60px !important;
  width: auto !important;
  max-width: 190px;
  object-fit: contain;
  filter: saturate(1.03) contrast(1.02);
}

.sphinx_header_container .sphinx_header_logo .logo-text-shadow-outline {
  font-size: clamp(1.2rem, 2.2vw, 1.95rem);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.sphinx_header_container .ms-auto.flex.flex-1.mx-2.items-center.flex-col {
  margin-inline: 0 !important;
  flex: 1 1 auto;
}

.sphinx_header_container .h-14.flex.items-center .hidden.md\:block.w-full.md\:w-4\/5.relative {
  width: 100% !important;
  max-width: 760px !important;
}

.sphinx_header_container .h-14.flex.items-center input[type="text"] {
  height: 50px !important;
  border-radius: 999px !important;
  font-size: 1rem;
  padding-right: 54px !important;
  padding-left: 18px !important;
}

.sphinx_header_container .h-14.flex.items-center .hidden.md\:block.w-full.md\:w-4\/5.relative > button.bg-skin-primary {
  width: 38px !important;
  height: 38px !important;
  right: 7px !important;
  left: auto !important;
  border-radius: 999px !important;
}

.sphinx_header_container .h-14.flex.items-center .hidden.md\:block.w-full.md\:w-4\/5.relative > button.bg-skin-primary svg {
  width: 19px !important;
  height: 19px !important;
}

.sphinx_header_container .h-14.flex.items-center .flow-root {
  margin-inline-start: 2px !important;
}

.sphinx_header_container .h-14.flex.items-center .flow-root > button {
  width: 44px;
  height: 44px;
  padding: 0 !important;
  border-radius: 999px !important;
}

.sphinx_header_container .h-14.flex.items-center .flow-root > button > svg {
  width: 22px !important;
  height: 22px !important;
}

.sphinx_header_container .h-14.flex.items-center .flow-root > button .absolute {
  top: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
}

.sphinx_header_container .h-14.flex.items-center .flow-root > button .absolute span {
  font-size: 10px !important;
  line-height: 1;
}

/* thin premium divider similar to screenshot */
.sphinx_header_links {
  min-height: 38px;
  padding: 8px 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 241, 0.15);
}

@media (max-width: 767px) {
  .sphinx_header_container.py-4.md\:pb-6.md\:pt-5 {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  .sphinx_header_container .h-14.flex.items-center {
    min-height: 54px !important;
    gap: 8px;
  }

  .sphinx_header_container .sphinx_header_logo .logo-text-shadow-outline {
    font-size: 1.08rem;
  }

  .sphinx_header_container .sphinx_header_logo a > div.relative.overflow-hidden.h-14.py-1.w-auto {
    height: 54px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .sphinx_header_container .sphinx_header_logo img,
  .sphinx_header_container .sphinx_header_logo a > div.relative.overflow-hidden.h-14.py-1.w-auto img {
    height: 50px !important;
    max-width: 140px;
  }

  .sphinx_header_container .h-14.flex.items-center .flow-root > button {
    width: 40px;
    height: 40px;
  }

  .sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative {
    margin-top: 8px !important;
  }

  .sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative input[type="text"] {
    height: 46px !important;
    border-radius: 14px !important;
    padding-right: 50px !important;
  }

  .sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary {
    width: 34px !important;
    height: 34px !important;
    right: 6px !important;
    left: auto !important;
  }
}

/* Top links bar should not be black */
.sphinx_header_links {
  background: var(--brand-green) !important;
  border-top: 1px solid rgba(243, 230, 201, 0.22);
  border-bottom: 1px solid rgba(243, 230, 201, 0.22);
}

.sphinx_header_links a {
  color: var(--brand-beige) !important;
}

.sphinx_header_links a::after {
  background: var(--brand-accent) !important;
}

.sphinx_header_links a:hover {
  color: #fffaf1 !important;
}

/* Section heading harmony (categories title block) */
.content_container .home_section_top_title {
  color: var(--brand-green) !important;
  font-family: "Tajawal", "Cairo", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.content_container .home_section_top_title > span {
  color: rgba(46, 93, 52, 0.13) !important;
  font-family: "Tajawal", "Cairo", sans-serif !important;
  font-weight: 800 !important;
}

/* subtle premium accent under visible title text */
.content_container .home_section_top_title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-green));
  opacity: 0.9;
}

/* Unified style for all similar section titles */
.home_section_top_container,
.animate-slideIn.flex.justify-center.items-center {
  margin-bottom: clamp(12px, 2vw, 22px) !important;
}

/* Purchase CTA button override */
button.bg-skin-primary.lg\:max-w-\[300px\],
button.bg-skin-primary.lg\:max-w-\[300px\]:hover,
button.bg-skin-primary.lg\:max-w-\[300px\]:focus,
button.bg-skin-primary.lg\:max-w-\[300px\]:focus-visible,
button.bg-skin-primary.lg\:max-w-\[300px\]:active {
  background: #dc2626 !important;
  color: #ffffff !important;
}

button.bg-skin-primary.lg\:max-w-\[300px\] p {
  color: #ffffff !important;
}

/* Specific add-to-cart button variant (only this class combination) */
button.add_to_cart_btn.w-full.border-skin-primary.bg-white.text-skin-primary,
button.add_to_cart_btn.w-full.border-skin-primary.bg-white.text-skin-primary:hover,
button.add_to_cart_btn.w-full.border-skin-primary.bg-white.text-skin-primary:focus,
button.add_to_cart_btn.w-full.border-skin-primary.bg-white.text-skin-primary:active {
  background: #2e5d34 !important;
  color: #f9f0dc !important;
  border-color: #2e5d34 !important;
}

.home_section_top_container .home_section_top_title,
.animate-slideIn .home_section_top_title,
h3.home_section_top_title {
  color: var(--brand-green) !important;
  font-family: "Tajawal", "Cairo", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  line-height: 1.2;
  text-wrap: balance;
}

.home_section_top_container .home_section_top_title > span,
.animate-slideIn .home_section_top_title > span,
h3.home_section_top_title > span {
  color: rgba(46, 93, 52, 0.13) !important;
  font-family: "Tajawal", "Cairo", sans-serif !important;
  font-weight: 800 !important;
}

.home_section_top_container .home_section_top_title::after,
.animate-slideIn .home_section_top_title::after,
h3.home_section_top_title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-green));
  opacity: 0.9;
}

@media (max-width: 640px) {
  .home_section_top_container .home_section_top_title::after,
  .animate-slideIn .home_section_top_title::after,
  h3.home_section_top_title::after {
    width: 44px;
    margin-top: 8px;
  }
}

/* Product cards */
.fasty_product_card,
.product-card,
.product-item,
.home_products_grid_card,
.default_product_featured_card {
  border-radius: var(--radius-md) !important;
  background: rgba(255, 253, 248, 0.78) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-faint) !important;
  transition: transform 0.4s var(--ease-luxury), box-shadow 0.4s var(--ease-luxury), border-color 0.3s var(--ease-luxury);
}

.fasty_product_card:hover,
.product-card:hover,
.product-item:hover,
.home_products_grid_card:hover,
.default_product_featured_card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft) !important;
  border-color: rgba(46, 93, 52, 0.25) !important;
}

.fasty_product_card_name,
.product-card h2,
.product-card h3,
.home_grid_section_card h2,
.home_grid_section_card h3,
[class*="product_card"] h2,
[class*="product_card"] h3 {
  color: var(--brand-brown) !important;
  font-family: "Tajawal", var(--font-system) !important;
}

.fasty_product_card_price > span:first-child,
.sale-price {
  color: var(--brand-brown) !important;
  font-weight: 700;
}

.original-price {
  color: var(--text-soft);
}

/* Discount badges */
.discount-percentage,
.discount_percentage,
.sale-percentage,
.sale_percentage,
.offer-percentage,
.offer_percentage,
.product-discount-percent,
.product_discount_percent,
.product-card .discount,
.product-item .discount,
.home_products_grid_card .discount,
.default_product_featured_card .discount {
  background: var(--brand-green) !important;
  color: var(--surface) !important;
  border-color: var(--brand-green) !important;
}

p.text-sm.md\:text-base.font-medium.text-skin-primary.bg-skin-primary\/10.py-1.px-2\.5.md\:px-3.rounded-full {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* Add to cart buttons */
.product-card .add-to-cart,
.product-card .add_to_cart_btn,
.product-card .add-to-cart-btn,
.product-card .primary-btn,
.product-item .add-to-cart,
.product-item .add_to_cart_btn,
.product-item .add-to-cart-btn,
.product-item .primary-btn,
.home_products_grid_card .add-to-cart,
.home_products_grid_card .add_to_cart_btn,
.default_product_featured_card .add-to-cart,
.default_product_featured_card .add_to_cart_btn,
button.sphinx_product_card_btn,
.fasty_product_card_btn {
  background: linear-gradient(135deg, var(--brand-accent), #efb54b) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(244, 166, 35, 0.7) !important;
  box-shadow: 0 8px 20px rgba(244, 166, 35, 0.3) !important;
}

button.sphinx_product_card_btn:hover,
.fasty_product_card_btn:hover {
  background: linear-gradient(135deg, #f6b848, #f1bf66) !important;
  transform: translateY(-1px);
}

/* Checkout / Buy now red conversion CTA as requested in sample */
button.checkout_btn,
button.checkout_buy_now {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.25);
}

button.checkout_btn:hover,
button.checkout_buy_now:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  transform: translateY(-1px);
}

button.checkout_btn:active,
button.checkout_buy_now:active {
  background: #991b1b !important;
  border-color: #991b1b !important;
  transform: translateY(0) scale(0.98);
}

/* Tabs / section titles */
button[role="tab"][aria-selected="true"],
button[role="tab"][data-headlessui-state~="selected"] {
  color: var(--brand-green) !important;
  border-bottom-color: var(--brand-accent) !important;
  background: rgba(244, 166, 35, 0.1);
}

h3.home_section_top_title {
  color: var(--brand-brown) !important;
  font-family: "Tajawal", var(--font-system) !important;
}

/* Category cards */
.default_category_card {
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-faint);
}

.default_category_card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.default_category_card_name {
  color: var(--brand-green) !important;
}

/* Slider arrows */
.slider_button {
  border: 1px solid rgba(46, 93, 52, 0.2) !important;
  background: rgba(255, 253, 248, 0.96) !important;
  color: var(--brand-green) !important;
}

.slider_button:hover {
  background: var(--brand-green) !important;
  color: #fff !important;
}

/* Cart drawer title + close */
h2[id^="headlessui-dialog-title-"] {
  color: var(--brand-green) !important;
  font-family: "Tajawal", var(--font-system) !important;
}

/* WhatsApp button */
@keyframes waPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 93, 52, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(46, 93, 52, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 93, 52, 0);
  }
}

#whatsapp-button {
  position: fixed;
  bottom: 54px !important;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  border: none;
  box-shadow: 0 4px 16px rgba(46, 93, 52, 0.35);
  animation: waPulse 2s infinite;
}

#whatsapp-button:hover {
  transform: scale(1.1);
  background: #376f3f;
  animation: none;
}

/* Footer dark premium */
footer.bg-white.text-\[\#010101\] {
  background: linear-gradient(160deg, #244a2a 0%, #2e5d34 45%, #6b4c2f 100%) !important;
  color: #f3e6c9 !important;
  border-top: 1px solid rgba(243, 230, 201, 0.2);
}

footer.bg-white.text-\[\#010101\] h3,
footer.bg-white.text-\[\#010101\] a,
footer.bg-white.text-\[\#010101\] p,
footer.bg-white.text-\[\#010101\] li,
footer.bg-white.text-\[\#010101\] span {
  color: #f3e6c9 !important;
}

footer.bg-white.text-\[\#010101\] a:hover {
  color: #fffaf1 !important;
}

/* Reveal system */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease-luxury), transform 0.6s var(--ease-luxury);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Generic focus */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(244, 166, 35, 0.2);
}

@media (max-width: 768px) {
  #whatsapp-button {
    bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px;
    width: 52px;
    height: 52px;
  }

  .section {
    padding: 68px 0;
  }
}

@media (max-width: 430px) {
  #whatsapp-button {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .container {
    width: min(1200px, 94vw);
  }

  .section {
    padding: 60px 0;
  }
}

/* ==========================================
   Sphinx Header Final Stabilization Override
   ========================================== */

nav.sphinx_header_container.bg-skin-primary.w-full {
  background: linear-gradient(180deg, #f3e6c9 0%, #fffaf1 100%) !important;
  border-bottom: 1px solid rgba(107, 76, 47, 0.16) !important;
  box-shadow: 0 8px 22px rgba(46, 93, 52, 0.1) !important;
}

nav.sphinx_header_container .h-14.flex.items-center {
  direction: rtl;
  min-height: 66px !important;
  height: auto !important;
  gap: 10px !important;
}

nav.sphinx_header_container .sphinx_header_logo {
  margin-inline: 0 !important;
}

nav.sphinx_header_container .sphinx_header_logo a > div {
  height: 62px !important;
  padding: 4px 0 !important;
  display: flex !important;
  align-items: center !important;
}

nav.sphinx_header_container .sphinx_header_logo img {
  height: 58px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
}

nav.sphinx_header_container .ms-auto.flex.flex-1.mx-2.items-center.flex-col {
  margin-inline: 0 !important;
}

nav.sphinx_header_container .hidden.md\:block.w-full.md\:w-4\/5.relative {
  width: 100% !important;
  max-width: 760px !important;
}

nav.sphinx_header_container input[type="text"] {
  background: #fffdf8 !important;
  color: #2f2a23 !important;
  border: 1px solid rgba(107, 76, 47, 0.2) !important;
  border-radius: 999px !important;
  height: 50px !important;
  padding-right: 54px !important;
  padding-left: 16px !important;
  box-shadow: 0 4px 14px rgba(46, 93, 52, 0.08) !important;
}

nav.sphinx_header_container input[type="text"]:focus {
  border-color: rgba(46, 93, 52, 0.45) !important;
  box-shadow: 0 6px 20px rgba(46, 93, 52, 0.14) !important;
}

/* search button on the right side (professional RTL) */
nav.sphinx_header_container .hidden.md\:block.w-full.md\:w-4\/5.relative > button.bg-skin-primary,
nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary {
  left: auto !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: #2e5d34 !important;
  color: #fffdf8 !important;
  border: 1px solid rgba(46, 93, 52, 0.2) !important;
}

nav.sphinx_header_container .hidden.md\:block.w-full.md\:w-4\/5.relative > button.bg-skin-primary:hover,
nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary:hover {
  background: #f5a822 !important;
  color: #2f2215 !important;
  border-color: #f5a822 !important;
}

/* cart button hard reset to avoid old dark bleed */
nav.sphinx_header_container .flow-root > button,
nav.sphinx_header_container .flow-root > button:hover,
nav.sphinx_header_container .flow-root > button:focus,
nav.sphinx_header_container .flow-root > button:focus-visible,
nav.sphinx_header_container .flow-root > button:active {
  background: #fffdf8 !important;
  color: #2e5d34 !important;
  border: 1px solid rgba(46, 93, 52, 0.18) !important;
  box-shadow: 0 6px 14px rgba(46, 93, 52, 0.1) !important;
  opacity: 1 !important;
}

/* exact requested hover color for cart button */
nav.sphinx_header_container .flow-root > button:hover {
  background: #f5a822 !important;
  color: #2f2215 !important;
  border-color: #f5a822 !important;
}

nav.sphinx_header_container .flow-root > button:hover svg {
  color: #2f2215 !important;
}

/* cart icon default/hover colors */
nav.sphinx_header_container .flow-root > button svg {
  color: #2e5d34 !important;
}

nav.sphinx_header_container .flow-root > button:hover svg {
  color: #f5a822 !important;
}

nav.sphinx_header_container .flow-root > button {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

nav.sphinx_header_container .flow-root > button .absolute {
  background: #f4a623 !important;
  top: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
}

nav.sphinx_header_container .flow-root > button .absolute span {
  color: #2f2215 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* mobile alignment */
@media (max-width: 767px) {
  nav.sphinx_header_container .h-14.flex.items-center {
    min-height: 56px !important;
  }

  nav.sphinx_header_container .sphinx_header_logo a > div {
    height: 54px !important;
  }

  nav.sphinx_header_container .sphinx_header_logo img {
    height: 50px !important;
    max-width: 132px !important;
  }

  nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative {
    margin-top: 8px !important;
  }

  nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative input[type="text"] {
    height: 46px !important;
    border-radius: 14px !important;
    padding-right: 50px !important;
  }
}

/* ==========================================
   Sphinx Header Hard Color Override
   ========================================== */

/* Search button: default green, hover orange */
nav.sphinx_header_container button.bg-skin-primary.rounded-lg.p-2.absolute.top-1\/2.-translate-y-1\/2.left-1.md\:left-2\.5,
nav.sphinx_header_container .hidden.md\:block.w-full.md\:w-4\/5.relative > button.bg-skin-primary,
nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary {
  background-color: #2e5d34 !important;
  background: #2e5d34 !important;
  border-color: #2e5d34 !important;
  color: #fffdf8 !important;
}

nav.sphinx_header_container button.bg-skin-primary.rounded-lg.p-2.absolute.top-1\/2.-translate-y-1\/2.left-1.md\:left-2\.5:hover,
nav.sphinx_header_container .hidden.md\:block.w-full.md\:w-4\/5.relative > button.bg-skin-primary:hover,
nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary:hover {
  background-color: #f5a822 !important;
  background: #f5a822 !important;
  border-color: #f5a822 !important;
  color: #2f2215 !important;
}

/* Cart button: default green bg, hover orange */
nav.sphinx_header_container .ms-4.flow-root.lg\:ms-6 > button,
nav.sphinx_header_container .flow-root > button.relative.p-2\.5.md\:p-3.flex.bg-white.rounded-full.items-center.hover\:opacity-90,
nav.sphinx_header_container .flow-root > button {
  background-color: #2e5d34 !important;
  background: #2e5d34 !important;
  border-color: #2e5d34 !important;
  color: #fffdf8 !important;
}

nav.sphinx_header_container .ms-4.flow-root.lg\:ms-6 > button:hover,
nav.sphinx_header_container .flow-root > button.relative.p-2\.5.md\:p-3.flex.bg-white.rounded-full.items-center.hover\:opacity-90:hover,
nav.sphinx_header_container .flow-root > button:hover {
  background-color: #f5a822 !important;
  background: #f5a822 !important;
  border-color: #f5a822 !important;
  color: #2f2215 !important;
  opacity: 1 !important;
}

/* force icon colors with highest priority */
nav.sphinx_header_container .flow-root > button svg,
nav.sphinx_header_container button.bg-skin-primary svg {
  color: #fffdf8 !important;
}

nav.sphinx_header_container .flow-root > button:hover svg,
nav.sphinx_header_container button.bg-skin-primary:hover svg {
  color: #2f2215 !important;
}

/* Mobile header layout fix: logo + search + cart in one balanced row */
@media (max-width: 767px) {
  nav.sphinx_header_container .h-14.flex.items-center {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  nav.sphinx_header_container .sphinx_header_logo {
    flex: 0 0 auto !important;
    margin-inline: 0 !important;
  }

  nav.sphinx_header_container .sphinx_header_logo a > div {
    height: 44px !important;
    padding: 0 !important;
  }

  nav.sphinx_header_container .sphinx_header_logo img {
    height: 40px !important;
    max-width: 112px !important;
  }

  nav.sphinx_header_container .ms-auto.flex.flex-1.mx-2.items-center.flex-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    gap: 8px !important;
  }

  nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative {
    display: block !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative input[type="text"] {
    height: 40px !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    padding-right: 44px !important;
    padding-left: 12px !important;
  }

  nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary {
    width: 30px !important;
    height: 30px !important;
    right: 5px !important;
  }

  nav.sphinx_header_container .flow-root {
    flex: 0 0 auto !important;
    margin-inline: 0 !important;
  }

  nav.sphinx_header_container .flow-root > button {
    width: 38px !important;
    height: 38px !important;
  }
}

/* Quantity radio option style override */
div[role="radio"].w-fit.relative.flex.items-center.justify-center.rounded-\[15px\].border.px-3.py-\[11px\].font-medium.uppercase.cursor-pointer.leading-none.border-gray-200.bg-white.text-gray-900.hover\:bg-gray-50,
div[role="radio"].w-fit.relative.flex.items-center.justify-center.rounded-\[15px\].border.px-3.py-\[11px\].font-medium.uppercase.cursor-pointer.leading-none.border-gray-200.bg-white.text-gray-900.hover\:bg-gray-50:hover,
div[role="radio"].w-fit.relative.flex.items-center.justify-center.rounded-\[15px\].border.px-3.py-\[11px\].font-medium.uppercase.cursor-pointer.leading-none.border-gray-200.bg-white.text-gray-900.hover\:bg-gray-50:focus,
div[role="radio"].w-fit.relative.flex.items-center.justify-center.rounded-\[15px\].border.px-3.py-\[11px\].font-medium.uppercase.cursor-pointer.leading-none.border-gray-200.bg-white.text-gray-900.hover\:bg-gray-50[aria-checked="true"] {
  background: #2e5d34 !important;
  color: #f9f0dc !important;
  border-color: #2e5d34 !important;
}

div[role="radio"].w-fit.relative.flex.items-center.justify-center.rounded-\[15px\].border.px-3.py-\[11px\].font-medium.uppercase.cursor-pointer.leading-none.border-gray-200.bg-white.text-gray-900.hover\:bg-gray-50 .\!text-inherit {
  color: #f9f0dc !important;
}

/* Search icon to far-left (desktop + mobile) */
nav.sphinx_header_container input[type="text"] {
  padding-left: 54px !important;
  padding-right: 16px !important;
}

nav.sphinx_header_container .hidden.md\:block.w-full.md\:w-4\/5.relative > button.bg-skin-primary,
nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary {
  left: 7px !important;
  right: auto !important;
}

@media (max-width: 767px) {
  nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative input[type="text"] {
    padding-left: 44px !important;
    padding-right: 12px !important;
  }

  nav.sphinx_header_container .block.md\:hidden.w-full.md\:w-4\/5.mt-2.md\:mt-7.relative > button.bg-skin-primary {
    left: 5px !important;
    right: auto !important;
  }
}

/* Specific Facebook icon button */
a[href*="facebook.com/profile.php?id=61586269286496"] {
  background: #2e5d34 !important;
  color: #f9f0dc !important;
  border: 1px solid rgba(46, 93, 52, 0.2) !important;
}

a[href*="facebook.com/profile.php?id=61586269286496"]:hover {
  background: #2e5d34 !important;
  color: #f9f0dc !important;
  opacity: 0.9 !important;
}

/* Cart summary block: gold checkout button, green surrounding text */
div.py-6.px-4.sm\:px-6 .mt-6 > button.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.transition-colors.duration-200.ease-in-out.focus\:outline-none.w-full.border.border-transparent.bg-skin-primary.hover\:bg-skin-primary.hover\:bg-opacity-80.active\:bg-opacity-90.text-white.rounded-xl.md\:rounded-2xl,
div.py-6.px-4.sm\:px-6 .mt-6 > button.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.transition-colors.duration-200.ease-in-out.focus\:outline-none.w-full.border.border-transparent.bg-skin-primary.hover\:bg-skin-primary.hover\:bg-opacity-80.active\:bg-opacity-90.text-white.rounded-xl.md\:rounded-2xl:hover,
div.py-6.px-4.sm\:px-6 .mt-6 > button.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.transition-colors.duration-200.ease-in-out.focus\:outline-none.w-full.border.border-transparent.bg-skin-primary.hover\:bg-skin-primary.hover\:bg-opacity-80.active\:bg-opacity-90.text-white.rounded-xl.md\:rounded-2xl:focus,
div.py-6.px-4.sm\:px-6 .mt-6 > button.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.transition-colors.duration-200.ease-in-out.focus\:outline-none.w-full.border.border-transparent.bg-skin-primary.hover\:bg-skin-primary.hover\:bg-opacity-80.active\:bg-opacity-90.text-white.rounded-xl.md\:rounded-2xl:active {
  background: #f0b244 !important;
  color: #000000 !important;
  border-color: #f0b244 !important;
  opacity: 1 !important;
}

div.py-6.px-4.sm\:px-6 .text-gray-600,
div.py-6.px-4.sm\:px-6 .text-gray-900,
div.py-6.px-4.sm\:px-6 .text-gray-500,
div.py-6.px-4.sm\:px-6 .text-skin-primary {
  color: #2e5d34 !important;
}

/* Old price strike color (light red) */
p.text-sm.md\:text-base.line-through,
del.font-normal.text-\[\#61758A\].opacity-60.text-sm.md\:text-base.flex.items-center.gap-1 {
  text-decoration-line: line-through !important;
  text-decoration-color: rgba(220, 38, 38, 0.55) !important;
  text-decoration-thickness: 2px !important;
  text-decoration-skip-ink: none !important;
}

/* Language/menu button: match search button behavior */
button[id^="headlessui-menu-button-"][aria-haspopup="true"] {
  background: #2e5d34 !important;
  color: #f9f0dc !important;
  border: 1px solid #2e5d34 !important;
}

button[id^="headlessui-menu-button-"][aria-haspopup="true"] svg,
button[id^="headlessui-menu-button-"][aria-haspopup="true"] span {
  color: #f9f0dc !important;
}

button[id^="headlessui-menu-button-"][aria-haspopup="true"]:hover,
button[id^="headlessui-menu-button-"][aria-haspopup="true"]:focus,
button[id^="headlessui-menu-button-"][aria-haspopup="true"]:focus-visible {
  background: #f5a822 !important;
  color: #2e5d34 !important;
  border-color: #f5a822 !important;
  opacity: 1 !important;
}

button[id^="headlessui-menu-button-"][aria-haspopup="true"]:hover svg,
button[id^="headlessui-menu-button-"][aria-haspopup="true"]:hover span,
button[id^="headlessui-menu-button-"][aria-haspopup="true"]:focus svg,
button[id^="headlessui-menu-button-"][aria-haspopup="true"]:focus span,
button[id^="headlessui-menu-button-"][aria-haspopup="true"]:focus-visible svg,
button[id^="headlessui-menu-button-"][aria-haspopup="true"]:focus-visible span {
  color: #2e5d34 !important;
}

/* Specific search button (max-h-10 variant) */
button.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.transition-colors.duration-200.ease-in-out.focus\:outline-none.border.border-transparent.bg-skin-primary.hover\:bg-skin-primary.hover\:bg-opacity-80.active\:bg-opacity-90.text-white.rounded-xl.md\:rounded-2xl.max-h-10,
button.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.transition-colors.duration-200.ease-in-out.focus\:outline-none.border.border-transparent.bg-skin-primary.hover\:bg-skin-primary.hover\:bg-opacity-80.active\:bg-opacity-90.text-white.rounded-xl.md\:rounded-2xl.max-h-10:hover,
button.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.transition-colors.duration-200.ease-in-out.focus\:outline-none.border.border-transparent.bg-skin-primary.hover\:bg-skin-primary.hover\:bg-opacity-80.active\:bg-opacity-90.text-white.rounded-xl.md\:rounded-2xl.max-h-10:focus,
button.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.transition-colors.duration-200.ease-in-out.focus\:outline-none.border.border-transparent.bg-skin-primary.hover\:bg-skin-primary.hover\:bg-opacity-80.active\:bg-opacity-90.text-white.rounded-xl.md\:rounded-2xl.max-h-10:active {
  background: #2e5d34 !important;
  color: #f9f0dc !important;
  border-color: #2e5d34 !important;
  opacity: 1 !important;
}