/*
Theme Name: Vựa Sen Đá - Đà Lạt Nursery
Theme URI: https://vuasenda.com
Author: Vựa Sen Đá Trại Mát, Đà Lạt
Author URI: https://vuasenda.com
Description: Giao diện WordPress & WooCommerce chuẩn Responsive Mobile-First dành riêng cho Vua Sen Đá (vuasenda.com). Đầy đủ hình ảnh vườn ươm Đà Lạt, cẩm nang bệnh cây, đặt hàng WooCommerce, tối ưu di động và máy tính bảng.
Version: 2.5.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vua-sen-da
Tags: e-commerce, woocommerce, plants, desert, succulents, cacti, da-lat, vietnam, custom-colors, responsive-layout
*/

/* 1. Base Variables & CSS Reset */
:root {
  --color-moss: #2c4c3b;
  --color-moss-dark: #1e3629;
  --color-moss-light: #3f6852;
  --color-terracotta: #c86d51;
  --color-terracotta-dark: #b2583d;
  --color-sand: #faf7f2;
  --color-sand-card: #f5ede3;
  --color-border: #ebdcd0;
  --color-text-dark: #2d2621;
  --color-text-muted: #736356;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-sand);
  color: var(--color-text-dark);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.25;
}

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

/* Strict Brand Logo Scaling for Header and Footer */
.brand-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.brand-logo-img,
.header-brand-logo,
.site-logo img,
.custom-logo {
  height: 42px !important;
  max-height: 46px !important;
  width: auto !important;
  max-width: 48px !important;
  object-fit: contain !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.footer-brand-logo {
  height: 44px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 50px !important;
  object-fit: contain !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  outline: none;
}

/* 2. Responsive Layout Containers */
.max-w-7xl {
  max-width: 80rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.max-w-5xl {
  max-width: 64rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.max-w-4xl {
  max-width: 56rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 3. Responsive Grid Systems */
.grid {
  display: grid;
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Mobile & Tablet Breakpoints */
@media (max-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hide-on-mobile { display: none !important; }
  .text-mobile-lg { font-size: 1.5rem !important; }
  .p-mobile-4 { padding: 1rem !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .tablet-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tablet-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 1025px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
}

/* 4. Mobile Navigation Drawer */
#mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 85%;
  max-width: 340px;
  height: 100vh;
  background-color: #faf7f2;
  z-index: 1000;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 1.5rem;
  border-right: 1px solid var(--color-border);
}

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

#mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

#mobile-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* 5. Floating Quick-Contact & Sticky Bottom Bar for Mobile Shoppers */
.floating-mobile-bar {
  display: none;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(250, 247, 242, 0.98) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid #ebdcd0 !important;
  padding: 6px 12px !important;
  z-index: 99990 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
}

.mobile-contact-overlay,
.vsd-contact-overlay {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99998 !important;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.mobile-contact-overlay.open,
.vsd-contact-overlay.open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-contact-popup,
.vsd-contact-popup {
  display: none;
  position: fixed !important;
  bottom: 74px !important;
  left: 12px !important;
  right: 12px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  background: #faf7f2 !important;
  border: 1px solid #ded2c3 !important;
  border-radius: 24px !important;
  padding: 18px !important;
  z-index: 99999 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  box-sizing: border-box !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
.mobile-contact-popup.open,
.vsd-contact-popup.open {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Standalone Styling for Popup Elements (Zero Tailwind Dependency) */
.vsd-popup-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #ebdcd0 !important;
}
.vsd-popup-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.vsd-popup-header-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  background: #2c4c3b !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(44, 76, 59, 0.2) !important;
}
.vsd-popup-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #2d2621 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}
.vsd-popup-subtitle {
  font-size: 10.5px !important;
  color: #736356 !important;
  margin: 2px 0 0 0 !important;
  line-height: 1.2 !important;
}
.vsd-popup-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(235, 220, 208, 0.6) !important;
  color: #736356 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  padding: 0 !important;
}
.vsd-popup-close-btn:hover {
  background: #ebdcd0 !important;
  color: #2d2621 !important;
}

.vsd-popup-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.vsd-channel-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}
.vsd-channel-card:hover {
  transform: translateY(-1px) !important;
}
.vsd-channel-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
}
.vsd-channel-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.vsd-channel-info {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}
.vsd-channel-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.vsd-channel-desc {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}
.vsd-channel-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Specific Card Themes */
.vsd-channel-zalo {
  background: #ffffff !important;
  border: 1px solid #d6e4ff !important;
  box-shadow: 0 2px 8px rgba(0, 104, 255, 0.05) !important;
}
.vsd-channel-zalo:hover {
  background: #edf5ff !important;
  border-color: #bad3ff !important;
}
.vsd-icon-zalo {
  background: #0068ff !important;
  color: #ffffff !important;
}
.vsd-channel-zalo .vsd-channel-title {
  color: #1a202c !important;
}
.vsd-channel-zalo .vsd-channel-desc {
  color: #718096 !important;
}
.vsd-badge-zalo {
  background: #e1effe !important;
  color: #0068ff !important;
}

.vsd-channel-call {
  background: #ffffff !important;
  border: 1px solid #cbe4d4 !important;
  box-shadow: 0 2px 8px rgba(44, 76, 59, 0.05) !important;
}
.vsd-channel-call:hover {
  background: #eaf4ee !important;
  border-color: #aed9bd !important;
}
.vsd-icon-call {
  background: #2c4c3b !important;
  color: #ffffff !important;
}
.vsd-channel-call .vsd-channel-title {
  color: #2d2621 !important;
}
.vsd-channel-call .vsd-channel-desc {
  color: #736356 !important;
}
.vsd-badge-call {
  background: #eaf4ee !important;
  color: #2c4c3b !important;
}

.vsd-channel-maps {
  background: #ffffff !important;
  border: 1px solid #f5dfd2 !important;
  box-shadow: 0 2px 8px rgba(200, 109, 81, 0.05) !important;
}
.vsd-channel-maps:hover {
  background: #fcf3eb !important;
  border-color: #ebd1c2 !important;
}
.vsd-icon-maps {
  background: #c86d51 !important;
  color: #ffffff !important;
}
.vsd-channel-maps .vsd-channel-title {
  color: #2d2621 !important;
}
.vsd-channel-maps .vsd-channel-desc {
  color: #736356 !important;
}
.vsd-badge-maps {
  background: #fcedea !important;
  color: #c86d51 !important;
}

.vsd-channel-doctor {
  background: linear-gradient(135deg, #1e3629 0%, #2c4c3b 100%) !important;
  border: 1px solid #3f6852 !important;
  box-shadow: 0 4px 14px rgba(30, 54, 41, 0.25) !important;
  color: #ffffff !important;
}
.vsd-channel-doctor:hover {
  box-shadow: 0 6px 18px rgba(30, 54, 41, 0.35) !important;
}
.vsd-icon-doctor {
  background: #98d4ab !important;
  color: #1e3629 !important;
}
.vsd-channel-doctor .vsd-channel-title {
  color: #faf7f2 !important;
}
.vsd-badge-doctor-pill {
  background: #98d4ab !important;
  color: #1e3629 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  padding: 2px 6px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  margin-left: 6px !important;
}
.vsd-sparkle-icon {
  color: #98d4ab !important;
  flex-shrink: 0 !important;
  animation: pulse 2s infinite !important;
}

@media (max-width: 768px) {
  .floating-mobile-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-around;
  }
  body {
    padding-bottom: 68px !important; /* offset for sticky bottom bar */
  }
}

@media (min-width: 769px) {
  .floating-mobile-bar {
    display: none !important;
  }
  /* On desktop / tablet, center the popup beautifully in the screen */
  .mobile-contact-popup,
  .vsd-contact-popup {
    bottom: auto !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -46%) !important;
    width: 450px !important;
    max-width: 90vw !important;
  }
  .mobile-contact-popup.open,
  .vsd-contact-popup.open {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* 6. Utility Badges & Tags */
.badge-rare {
  background-color: #f6e8e4;
  color: #c86d51;
  border: 1px solid #f0d5ce;
}

.badge-bestseller {
  background-color: #2c4c3b;
  color: #ffffff;
}

/* Hide scrollbar for horizontal category scrolling */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 7. Comprehensive WooCommerce Layout & Product Grid Styling */
/* Reset and Container */
.woocommerce,
.woocommerce-page {
  width: 100%;
}

/* Shop and Archive Action Bar (Result Count & Ordering Dropdown) */
.woocommerce-products-header {
  margin-bottom: 1.5rem;
}

.woocommerce-result-count {
  float: left !important;
  font-size: 0.875rem !important;
  color: #736356 !important;
  margin: 0.75rem 0 1rem 0 !important;
  font-weight: 500 !important;
}

.woocommerce-ordering {
  float: right !important;
  margin: 0.5rem 0 1rem 0 !important;
}

.woocommerce-ordering select {
  background-color: #ffffff !important;
  border: 1px solid #ebdcd0 !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  color: #2d2621 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

.woocommerce-ordering select:focus {
  border-color: #2c4c3b !important;
}

/* Responsive Product Grid (4 cols desktop, 3 tablet, 2 mobile) */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  list-style: none !important;
  margin: 1.5rem 0 2.5rem 0 !important;
  padding: 0 !important;
  clear: both !important;
  width: 100% !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

/* Individual Product Card in Loop */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
  background: #ffffff !important;
  border: 1px solid #ebdcd0 !important;
  border-radius: 1rem !important;
  padding: 0.875rem !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -6px rgba(44, 76, 59, 0.12) !important;
  border-color: #2c4c3b !important;
}

/* Product Card Image */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  flex: 1 1 auto !important;
}

.woocommerce ul.products li.product img,
ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 0.75rem !important;
  margin: 0 0 0.75rem 0 !important;
  display: block !important;
  background-color: #f7f3ee !important;
  transition: transform 0.4s ease !important;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.03) !important;
}

/* Product Card Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #2d2621 !important;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s ease !important;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: #2c4c3b !important;
}

/* Price in Product Card */
.woocommerce ul.products li.product .price,
ul.products li.product .price {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #2c4c3b !important;
  margin: 0.25rem 0 0.75rem 0 !important;
  display: block !important;
  line-height: 1.3 !important;
}

.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
  color: #a19082 !important;
  font-size: 0.8rem !important;
  margin-right: 0.35rem !important;
  font-weight: 400 !important;
}

.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
  text-decoration: none !important;
  color: #c86d51 !important;
}

/* Add to Cart / Select Options Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button,
ul.products li.product .button {
  background-color: #2c4c3b !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 0.6rem 1rem !important;
  border-radius: 0.65rem !important;
  text-align: center !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  border: none !important;
  margin-top: auto !important;
  transition: background-color 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background-color: #1e3629 !important;
  color: #ffffff !important;
}

/* Sale Badge */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  position: absolute !important;
  top: 1.25rem !important;
  left: 1.25rem !important;
  right: auto !important;
  margin: 0 !important;
  background-color: #c86d51 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.65rem !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: normal !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(200, 109, 81, 0.3) !important;
}

/* Modern WooCommerce Pagination */
.woocommerce-pagination,
nav.woocommerce-pagination {
  text-align: center !important;
  margin: 3rem 0 2rem 0 !important;
  clear: both !important;
}

.woocommerce-pagination ul,
nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 0.35rem !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  align-items: center !important;
}

.woocommerce-pagination ul li,
nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: inline-block !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0 0.65rem !important;
  border-radius: 0.5rem !important;
  background: #ffffff !important;
  border: 1px solid #ebdcd0 !important;
  color: #2d2621 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul li span.current {
  background: #2c4c3b !important;
  color: #ffffff !important;
  border-color: #2c4c3b !important;
}

.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul li a:hover {
  background: #f5ede3 !important;
  border-color: #2c4c3b !important;
}

/* 8. Single Product Page Styling */
.woocommerce div.product {
  position: relative !important;
}

/* Single Product Title & Price */
.woocommerce div.product .product_title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #2d2621 !important;
  line-height: 1.25 !important;
  margin-bottom: 0.5rem !important;
}

@media (max-width: 640px) {
  .woocommerce div.product .product_title {
    font-size: 1.5rem !important;
  }
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #2c4c3b !important;
}

/* Variations Form (Kích Thước / Dropdowns) */
.woocommerce div.product form.cart {
  background: #f5ede3 !important;
  border: 1px solid #ebdcd0 !important;
  border-radius: 1rem !important;
  padding: 1.25rem !important;
  margin: 1.5rem 0 !important;
}

.woocommerce div.product form.cart .variations {
  width: 100% !important;
  margin-bottom: 1rem !important;
  border-collapse: separate !important;
  border-spacing: 0 0.5rem !important;
}

.woocommerce div.product form.cart .variations th.label {
  padding-right: 1rem !important;
  text-align: left !important;
  color: #2d2621 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.woocommerce div.product form.cart .variations td.value {
  vertical-align: middle !important;
}

.woocommerce div.product form.cart .variations select {
  width: 100% !important;
  background-color: #ffffff !important;
  border: 1px solid #ebdcd0 !important;
  border-radius: 0.65rem !important;
  padding: 0.55rem 0.85rem !important;
  font-size: 0.875rem !important;
  color: #2d2621 !important;
  outline: none !important;
  cursor: pointer !important;
}

.woocommerce div.product form.cart .variations select:focus {
  border-color: #2c4c3b !important;
}

/* Single Add to Cart & Quantity */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart div.quantity + button {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.woocommerce div.product form.cart .quantity input.qty {
  height: 42px !important;
  width: 60px !important;
  border: 1px solid #ebdcd0 !important;
  border-radius: 0.65rem !important;
  background-color: #ffffff !important;
  font-weight: 700 !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  color: #2d2621 !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: #2c4c3b !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: 0.65rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(44, 76, 59, 0.15) !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: #1e3629 !important;
}

/* Product Meta (SKU, Categories) */
.woocommerce div.product .product_meta {
  font-size: 0.8rem !important;
  color: #877567 !important;
  border-top: 1px solid #ebdcd0 !important;
  padding-top: 1rem !important;
  margin-top: 1rem !important;
}

.woocommerce div.product .product_meta > span {
  display: block !important;
  margin-bottom: 0.25rem !important;
}

.woocommerce div.product .product_meta a {
  color: #2c4c3b !important;
  font-weight: 600 !important;
}

/* Single Product Tabs */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 2.5rem !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid #ebdcd0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 0.5rem !important;
  list-style: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 1px solid #ebdcd0 !important;
  border-bottom: none !important;
  background-color: #f7f3ee !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block !important;
  padding: 0.65rem 1.25rem !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: #736356 !important;
  text-decoration: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: #ffffff !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #2c4c3b !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  background-color: #ffffff !important;
  border: 1px solid #ebdcd0 !important;
  border-top: none !important;
  border-radius: 0 0 1rem 1rem !important;
  padding: 1.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: #4d4036 !important;
}

/* Related Products Section */
section.related.products,
section.upsells.products {
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid #ebdcd0 !important;
  clear: both !important;
}

section.related.products > h2,
section.upsells.products > h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #2d2621 !important;
  margin-bottom: 1.5rem !important;
}

