/* =========================================
   PHÁP PHỤC TÂM AN – style.css
   Premium Vietnamese Buddhist Clothing Store
   ========================================= */

/* ---- GLOBAL ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: #fdf8f0;
  color: #2c3a30;
  font-family: 'Be Vietnam Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0e8d8; }
::-webkit-scrollbar-thumb { background: #4a7c59; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2d5438; }

/* ---- SELECTION ---- */
::selection { background-color: #4a7c59; color: #fff; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.section-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #c8973a;
  margin-bottom: 0.35rem;
  padding: 0.2rem 0.75rem;
  background: rgba(200, 151, 58, 0.1);
  border-radius: 999px;
  border: 1px solid rgba(200, 151, 58, 0.25);
}

.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #2c3a30;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.view-all-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4a7c59;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.view-all-link:hover { color: #2d5438; gap: 0.5rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4a7c59 0%, #2d5438 100%);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.3s ease;
}
.btn-primary:hover::after { background: rgba(255,255,255,0.08); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(74,124,89,0.35); }
.btn-primary:active { transform: translateY(0); }

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.7);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}
.btn-outline-white:hover { background: rgba(255,255,255,0.25); border-color: #fff; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav-underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #4a7c59;
  border-radius: 1px;
  transition: width 0.3s ease;
}
.nav-link:hover .nav-underline,
.nav-link.active .nav-underline { width: 70%; }

.dropdown-menu {
  z-index: 100;
}

/* ============================================================
   HERO / SLIDESHOW
   ============================================================ */
.slideshow { position: relative; }

.slide { display: none; }
.slide.active { display: block; }

.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg > .container { position: relative; z-index: 1; }

/* Gradient overlays for each slide */
.hero-bg-1 {
  background: 
    linear-gradient(105deg, rgba(44,58,48,0.88) 0%, rgba(74,124,89,0.50) 50%, rgba(44,58,48,0.30) 100%),
    radial-gradient(ellipse at 70% 50%, #3d7a55 0%, #2c3a30 100%);
  /* Real bg image can replace this once photos are uploaded */
}
.hero-bg-2 {
  background:
    linear-gradient(105deg, rgba(44,58,48,0.30) 0%, rgba(74,124,89,0.50) 50%, rgba(44,58,48,0.90) 100%),
    radial-gradient(ellipse at 30% 60%, #5a8c6e 0%, #1f2e24 100%);
}
.hero-bg-3 {
  background:
    linear-gradient(135deg, rgba(44,58,48,0.85) 0%, rgba(150,112,31,0.45) 60%, rgba(44,58,48,0.40) 100%),
    radial-gradient(ellipse at 60% 40%, #7a6a3a 0%, #2c3a30 100%);
}

/* Slide dots */
.slide-dots { display: flex; gap: 8px; }
.dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.dot.active {
  background: #fff;
  width: 24px;
}

/* Slide arrows */
.slide-arrow {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.3s ease;
  z-index: 10;
}
.slide-arrow:hover { background: rgba(255,255,255,0.35); }

@media (min-width: 768px) {
  .slide-arrow { width: 44px; height: 44px; font-size: 1rem; }
}

/* ============================================================
   TRUST BADGES
   ============================================================ */
.trust-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 1rem;
}
.product-card:hover { transform: translateY(-4px); }

.product-img-wrap {
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
}

/* Product placeholder images – beautiful gradient backgrounds */
.product-placeholder {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
}

.product-img-1 {
  background: linear-gradient(145deg, #8fad9a 0%, #4a7c59 40%, #2d5438 100%);
}
.product-img-1::before {
  content: '👘';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.35;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.product-img-2 {
  background: linear-gradient(145deg, #a3c4a8 0%, #5a8c6e 40%, #3d6050 100%);
}
.product-img-2::before {
  content: '🧘';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.35;
}
.product-img-3 {
  background: linear-gradient(145deg, #6b9e7a 0%, #4a7c59 50%, #2c4030 100%);
}
.product-img-3::before {
  content: '🕌';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.3;
}
.product-img-4 {
  background: linear-gradient(145deg, #9ec9a8 0%, #5a9e70 40%, #326844 100%);
}
.product-img-4::before {
  content: '🌿';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.35;
}
.product-img-5 {
  background: linear-gradient(145deg, #f5f0e8 0%, #e8dcc8 40%, #d4c4a8 100%);
}
.product-img-5::before {
  content: '☸️';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.4;
}
.product-img-6 {
  background: linear-gradient(145deg, #ffffff 0%, #f5ece0 40%, #e8d8c4 100%);
}
.product-img-6::before {
  content: '🙏';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.35;
}
.product-img-7 {
  background: linear-gradient(145deg, #b8d4c0 0%, #7aaa88 40%, #4a7c59 100%);
}
.product-img-7::before {
  content: '🪷';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.4;
}
.product-img-8 {
  background: linear-gradient(145deg, #a8d4b8 0%, #5a9a70 40%, #3d7050 100%);
}
.product-img-8::before {
  content: '💑';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.3;
}
.product-img-9 {
  background: linear-gradient(145deg, #c8b48a 0%, #a08050 40%, #7a6040 100%);
}
.product-img-9::before {
  content: '🧿';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.35;
}
.product-img-10 {
  background: linear-gradient(145deg, #d4c8b0 0%, #b0a080 40%, #8a7860 100%);
}
.product-img-10::before {
  content: '🙏';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.35;
}
.product-img-11 {
  background: linear-gradient(145deg, #d4a060 0%, #b07030 40%, #8a5020 100%);
}
.product-img-11::before {
  content: '☸️';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.35;
}
.product-img-12 {
  background: linear-gradient(145deg, #90b890 0%, #609860 40%, #407040 100%);
}
.product-img-12::before {
  content: '🌱';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.35;
}
.product-img-lh1 {
  background: linear-gradient(145deg, #e8b878 0%, #c89050 40%, #a87030 100%);
}
.product-img-lh1::before {
  content: '🏮';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.45;
}
.product-img-lh2 {
  background: linear-gradient(145deg, #d4a860 0%, #c08040 40%, #a06020 100%);
}
.product-img-lh2::before {
  content: '🎎';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.45;
}
.product-img-pk1 {
  background: linear-gradient(145deg, #d4c8a8 0%, #b0a080 40%, #8a7860 100%);
}
.product-img-pk1::before {
  content: '📿';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.5;
}
.product-img-pk2 {
  background: linear-gradient(145deg, #c0d4b8 0%, #8aaa80 40%, #5a7850 100%);
}
.product-img-pk2::before {
  content: '👜';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.4;
}

/* Big size section */
.product-img-bs1 {
  background: linear-gradient(145deg, #7aaa88 0%, #4a7c59 100%);
}
.product-img-bs1::before {
  content: '🌿';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  opacity: 0.5;
}
.product-img-bs2 {
  background: linear-gradient(145deg, #5a9e70 0%, #2d5438 100%);
}
.product-img-bs2::before {
  content: '🪷';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  opacity: 0.5;
}
.product-img-bs3 {
  background: linear-gradient(145deg, #8fad9a 0%, #4a7c59 100%);
}
.product-img-bs3::before {
  content: '☸️';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  opacity: 0.5;
}

/* Product overlay */
.product-overlay {
  border-radius: 0;
  backdrop-filter: blur(2px);
}

/* Stars */
.stars { letter-spacing: 1px; }

/* ============================================================
   PROMO BANNER
   ============================================================ */
.promo-banner {
  background: linear-gradient(135deg, #2d5438 0%, #4a7c59 50%, #3d7050 100%);
  position: relative;
  overflow: hidden;
}
.promo-bg-decor {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(200,151,58,0.12);
  pointer-events: none;
}
.promo-bg-decor::after {
  content: '';
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: rgba(200,151,58,0.08);
}
.promo-btn {
  font-size: 0.9rem;
  font-weight: 700;
  color: #2d5438;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

/* ============================================================
   TABS
   ============================================================ */
.tab-bar { flex-wrap: wrap; gap: 0.5rem; }

.tab-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 2px solid #e0e8e2;
  background: transparent;
  color: #5a7a64;
  cursor: pointer;
  transition: all 0.25s ease;
}
.tab-btn:hover {
  border-color: #4a7c59;
  color: #4a7c59;
  background: rgba(74,124,89,0.05);
}
.tab-btn.active {
  background: #4a7c59;
  border-color: #4a7c59;
  color: #fff;
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }

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

/* ============================================================
   BIG SIZE BANNER
   ============================================================ */
.big-size-banner {
  background: linear-gradient(135deg, #4a7c59 0%, #2d5438 40%, #1e3828 100%);
  position: relative;
  overflow: hidden;
}
.big-size-banner::before {
  content: '';
  position: absolute;
  left: -60px;
  bottom: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(200,151,58,0.1);
  pointer-events: none;
}
.big-size-banner::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-placeholder {
  background: linear-gradient(145deg, #c0d4c8 0%, #8fad9a 30%, #4a7c59 70%, #2d5438 100%);
  position: relative;
}
.about-placeholder::before {
  content: '🙏';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  opacity: 0.25;
}

.about-stat-card,
.about-stat-card-2 {
  backdrop-filter: blur(4px);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-card {
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  color: rgba(74,124,89,0.1);
  line-height: 1;
  pointer-events: none;
}

.avatar-circle { font-size: 0.8rem; }

/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-placeholder {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.blog-img-1 {
  background: linear-gradient(145deg, #8fad9a 0%, #4a7c59 40%, #2d5438 100%);
}
.blog-img-1::before {
  content: '⛩️';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  opacity: 0.4;
}
.blog-img-2 {
  background: linear-gradient(145deg, #d4b878 0%, #c8973a 40%, #96701f 100%);
}
.blog-img-2::before {
  content: '🏮';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  opacity: 0.4;
}
.blog-img-3 {
  background: linear-gradient(145deg, #b8d0c0 0%, #7a9e88 40%, #4a7a58 100%);
}
.blog-img-3::before {
  content: '🪷';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  opacity: 0.4;
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-form-wrap {
  box-shadow: 0 4px 24px rgba(74,124,89,0.1);
}

.form-input {
  background-color: #fff;
  color: #2c3a30;
}

select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a7c59' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer { background-color: #1e2e22; }

.footer-social { transition: all 0.25s ease; }
.footer-social:hover { transform: translateY(-2px); }

/* ============================================================
   FLOATING BUTTONS
   ============================================================ */
.fixed-contact-btn {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fixed-contact-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* ============================================================
   CART DRAWER
   ============================================================ */
#cartDrawer.open {
  transform: translateX(0);
}
#cartOverlay.open {
  opacity: 1;
  display: block;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f9f5ee;
  border-radius: 0.75rem;
}
.cart-item-img {
  width: 52px; height: 52px;
  border-radius: 0.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #8fad9a, #4a7c59);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 0.78rem; font-weight: 600; color: #2c3a30; line-height: 1.3; }
.cart-item-price { font-size: 0.78rem; font-weight: 700; color: #4a7c59; margin-top: 0.2rem; }
.cart-item-remove {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
}
.cart-item-remove:hover { color: #e53e3e; background: rgba(229,62,62,0.08); }

/* Cart badge */
.cart-badge {
  font-size: 0.55rem;
  line-height: 1;
}

/* ============================================================
   MOBILE MENU ACCORDION
   ============================================================ */
.mobile-nav-link {
  color: #2c3a30;
  text-decoration: none;
  transition: color 0.2s ease;
}
.mobile-nav-link:hover { color: #4a7c59; }
.accordion-btn { background: none; border: none; text-align: left; cursor: pointer; }
.accordion-content { border-left: 2px solid #8fad9a; margin-left: 1.15rem; }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   TOAST
   ============================================================ */
#toast {
  max-width: 280px;
  text-align: center;
  white-space: nowrap;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ============================================================
   HEADER SCROLL EFFECTS
   ============================================================ */
#header.scrolled {
  box-shadow: 0 2px 20px rgba(44,58,48,0.1);
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 640px) {
  .hero-bg { min-height: 380px !important; }
  .section-title { font-size: 1.3rem; }
  .promo-banner { padding: 1.5rem; }
  .big-size-banner { padding: 1.5rem; }
}

@media (min-width: 1024px) {
  .product-grid { --cols: 4; }
}

/* ============================================================
   LOTUS / DECOR PATTERNS (background accent)
   ============================================================ */
.lotus-bg {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(74,124,89,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(200,151,58,0.06) 0%, transparent 50%);
}

/* ============================================================
   HOVER LIFT EFFECT
   ============================================================ */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(44,58,48,0.12);
}

/* ============================================================
   UTILITY – LINE CLAMP
   ============================================================ */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   LOADING SHIMMER (for product images)
   ============================================================ */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  background: linear-gradient(90deg, #f0e8d8 25%, #e8ddd0 50%, #f0e8d8 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}