/*
Theme Name: Trendy Fitz Luxury Ethnic Wear
Theme URI: https://www.trendyfitz.in
Author: Trendy Fitz Fashion Studio
Author URI: https://www.trendyfitz.in
Description: Custom luxury Indian ethnic wear e-commerce theme for Trendy Fitz (Kurtis, Pants, Anarkali Kurtis, 2 Piece Set, 3 Piece Set). Designed with the signature Cream (#FAF7F2), Warm Gold (#D4A574), and Deep Charcoal (#2C2C2C) palette in a modern editorial boutique layout.
Version: 2.6.0
Text Domain: trendyfitz
Requires at least: 6.0
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 11.2
*/

:root {
  --tf-cream: #FAF7F2;
  --tf-sand: #F5F1ED;
  --tf-blush: #F5E6E0;
  --tf-border: #E5DFD5;
  --tf-gold: #D4A574;
  --tf-gold-hover: #C4956A;
  --tf-charcoal: #2C2C2C;
  --tf-muted: #6B5E54;
  --tf-light-muted: #9C8E82;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAF7F2;
  color: #0D0D0D;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-rendering: geometricPrecision;
}

/* Crisp, high-contrast typography, borders, and surface overrides across the entire site */
p, li, label, a, span, input, select, button {
  -webkit-font-smoothing: subpixel-antialiased;
}

img {
  filter: contrast(1.06) saturate(1.05);
}

.bg-\[\#2C2C2C\] {
  background-color: #161616 !important;
}

.border-\[\#E5DFD5\] {
  border-color: #CFC5B7 !important;
}

.text-\[\#2C2C2C\],
.text-\[\#1F1F1F\],
.text-\[\#1A1A1A\] {
  color: #0D0D0D !important;
}

.text-\[\#6B5E54\],
.text-\[\#9C8E82\],
.text-slate-500,
.text-slate-600,
.text-\[\#2C2C2C\]\/80 {
  color: #1C1C1C !important;
  font-weight: 500;
}

/* Darker, richer gold on light backgrounds for stronger contrast; bright gold on dark backgrounds */
.text-\[\#D4A574\] {
  color: #B07232 !important;
}

.bg-\[\#2C2C2C\] .text-\[\#D4A574\],
footer .text-\[\#D4A574\],
#kurti-bundle-box .text-\[\#D4A574\] {
  color: #E5B682 !important;
}

footer .text-\[\#B8A99A\],
footer .text-\[\#7A6A5A\] {
  color: #F0EAE1 !important;
  font-weight: 500;
}

.font-serif,
h1, h2, h3 {
  font-family: 'Marcellus', 'Bodoni Moda', Georgia, serif;
  letter-spacing: 0.015em;
  font-weight: 700;
}

.font-serif .italic,
h1 .italic,
h2 .italic,
h3 .italic,
span.italic {
  font-family: 'Bodoni Moda', Georgia, serif;
}

.font-sans {
  font-family: 'Jost', sans-serif;
}

/* Infinite Marquee Animation */
@keyframes tfMarquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.tf-marquee-track {
  display: flex;
  width: max-content;
  animation: tfMarquee 28s linear infinite;
}

.tf-marquee-track:hover {
  animation-play-state: paused;
}

/* Rotating Badge Animation */
@keyframes tfSpinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.tf-spin-slow {
  animation: tfSpinSlow 18s linear infinite;
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.cart-drawer-enter {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   LUXURY BOUTIQUE ANIMATIONS (GPU-Accelerated 60fps)
   ========================================================================== */

/* 1. Staggered Hero Entrance Fade-Up (No GPU layer blur after animation) */
@keyframes tfFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.tf-anim-fade-up {
  opacity: 0;
  animation: tfFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.tf-delay-100 { animation-delay: 0.10s; }
.tf-delay-200 { animation-delay: 0.22s; }
.tf-delay-300 { animation-delay: 0.34s; }
.tf-delay-400 { animation-delay: 0.46s; }
.tf-delay-500 { animation-delay: 0.58s; }

/* 2. Floating Luxury Cards & Badges */
@keyframes tfFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes tfFloatSlow {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -7px, 0) rotate(2deg);
  }
}

.tf-float-card {
  animation: tfFloat 4.5s ease-in-out infinite;
  will-change: transform;
}

.tf-float-badge {
  animation: tfFloatSlow 3.8s ease-in-out infinite;
  will-change: transform;
}

/* 3. Subtle Ken Burns Slow Zoom on Hero Arch Image */
@keyframes tfHeroZoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.tf-hero-zoom {
  animation: tfHeroZoom 14s ease-in-out infinite;
  will-change: transform;
}

/* 4. Gold Shimmer Sweep Effect on Buttons & Offer Badges */
@keyframes tfShimmerSweep {
  0% {
    transform: translateX(-120%) skewX(-20deg);
  }
  40%, 100% {
    transform: translateX(220%) skewX(-20deg);
  }
}

.tf-shimmer-btn {
  position: relative;
  overflow: hidden;
}

.tf-shimmer-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-120%) skewX(-20deg);
  animation: tfShimmerSweep 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* 5. Scroll-Triggered Reveal Animation (No scale/3D transform blur) */
.tf-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.tf-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 6. Product Card Hover Lift (No 3D subpixel blur at rest) */
.tf-product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.tf-product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 42px -14px rgba(44, 44, 44, 0.14), 0 8px 20px -8px rgba(212, 165, 116, 0.32) !important;
}

#product-detail > div > .tf-product-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* 7. Category Slider Bubble Hover Lift & Ring Glow */
#category-slider a > div {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}

#category-slider a:hover > div {
  transform: translate3d(0, -6px, 0) scale(1.07);
  box-shadow: 0 14px 28px -8px rgba(212, 165, 116, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .tf-anim-fade-up,
  .tf-float-card,
  .tf-float-badge,
  .tf-hero-zoom,
  .tf-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Arch Frame for Ethnic Lookbook */
.tf-arch-frame {
  border-radius: 220px 220px 16px 16px;
}

.tf-arch-card {
  border-radius: 140px 140px 12px 12px;
}

/* Custom Scrollbar for horizontal carousels */
.tf-no-scrollbar::-webkit-scrollbar {
  display: none;
}
.tf-no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Below-the-fold Rendering Optimization */
#shop-by-category,
#kurti-bundle-box,
#about-brand,
#customer-reviews,
#newsletter-cta {
  content-visibility: auto;
  contain-intrinsic-size: 1px 650px;
}

/* WooCommerce Overrides to match Trendy Fitz Luxury Theme */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
  border-top-color: #D4A574 !important;
  background-color: #FFFFFF !important;
  color: #2C2C2C !important;
  border: 1px solid #E5DFD5;
  border-top: 3px solid #D4A574 !important;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
  color: #D4A574 !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: #2C2C2C !important;
  color: #FFFFFF !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.875rem 1.75rem !important;
  border-radius: 9999px !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: #D4A574 !important;
  color: #FFFFFF !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid #E5DFD5 !important;
  background-color: #FAF7F2 !important;
  border-radius: 8px !important;
  padding: 0.65rem 0.9rem !important;
  font-size: 0.875rem !important;
  color: #2C2C2C !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: #D4A574 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.25) !important;
}

.woocommerce table.shop_table {
  border: 1px solid #E5DFD5 !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.woocommerce table.shop_table th {
  background: #F5F1ED !important;
  color: #2C2C2C !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 1rem !important;
}

.woocommerce table.shop_table td {
  border-top: 1px solid #E5DFD5 !important;
  padding: 1rem !important;
}

.woocommerce #payment {
  background: #FFFFFF !important;
  border: 1px solid #E5DFD5 !important;
  border-radius: 12px !important;
}

.woocommerce #payment div.payment_box {
  background-color: #FAF7F2 !important;
  color: #6B5E54 !important;
}

.woocommerce #payment div.payment_box::before {
  border-bottom-color: #FAF7F2 !important;
}