/* HamanDistaBD WordPress Theme - Complete CSS */
/* Exact match of the React site design */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700;800&display=swap');

:root {
  --bg: hsl(40, 33%, 97%);
  --fg: hsl(20, 10%, 15%);
  --card: hsl(40, 30%, 99%);
  --card-fg: hsl(20, 10%, 15%);
  --primary: hsl(130, 55%, 22%);
  --primary-fg: hsl(40, 33%, 97%);
  --secondary: hsl(16, 25%, 48%);
  --muted: hsl(35, 20%, 92%);
  --muted-fg: hsl(20, 8%, 45%);
  --accent: hsl(45, 95%, 55%);
  --accent-fg: hsl(20, 10%, 15%);
  --sale: hsl(0, 72%, 51%);
  --sale-fg: #fff;
  --success: hsl(130, 55%, 35%);
  --border: hsl(30, 15%, 85%);
  --radius: 0.75rem;
  --shadow: 0 4px 20px -4px rgba(30,20,10,0.08);
  --shadow-hover: 0 8px 30px -4px rgba(30,20,10,0.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans Bengali', system-ui, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; }

.hd-container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }

/* === NAVBAR === */
.hd-navbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); background: rgba(255,253,250,0.95); backdrop-filter: blur(10px); }
.hd-navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.hd-logo span { font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.hd-logo img { height: 40px; }
.hd-nav-links { display: none; gap: 1.5rem; }
.hd-nav-links a { font-size: 0.875rem; font-weight: 500; transition: color 0.2s; }
.hd-nav-links a:hover { color: var(--primary); }
.hd-nav-actions { display: flex; align-items: center; gap: 1rem; }
.hd-cart-icon { position: relative; color: var(--fg); transition: color 0.2s; }
.hd-cart-icon:hover { color: var(--primary); }
.hd-cart-count { position: absolute; top: -8px; right: -8px; background: var(--sale); color: var(--sale-fg); font-size: 0.7rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hd-menu-toggle { background: none; border: none; color: var(--fg); display: block; }
.hd-mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--card); padding: 0.75rem 1rem; }
.hd-mobile-menu.open { display: block; }
.hd-mobile-menu a { display: block; padding: 0.5rem 0; font-size: 0.875rem; font-weight: 500; }
@media (min-width: 768px) {
  .hd-nav-links { display: flex; }
  .hd-menu-toggle { display: none; }
}

/* === FREE SHIPPING BAR === */
.hd-free-shipping-bar { padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; font-weight: 500; }
.hd-fsb-progress { height: 6px; background: var(--muted); border-radius: 100px; max-width: 200px; margin: 4px auto 0; overflow: hidden; }
.hd-fsb-fill { height: 100%; border-radius: 100px; transition: width 0.5s; }

/* === COUNTDOWN === */
.hd-countdown { background: var(--sale); color: var(--sale-fg); }
.hd-countdown-inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.25rem 0; text-align: center; }
.hd-countdown-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.875rem; }
.hd-countdown-boxes { display: flex; gap: 0.75rem; }
.hd-cd-box { display: flex; flex-direction: column; align-items: center; }
.hd-cd-box span { background: var(--sale-fg); color: var(--sale); font-weight: 700; font-size: 1.25rem; border-radius: 0.5rem; padding: 0.25rem 0.75rem; min-width: 48px; text-align: center; }
.hd-cd-box small { font-size: 0.625rem; margin-top: 2px; opacity: 0.8; }
.hd-countdown-note { font-size: 0.75rem; opacity: 0.9; font-weight: 500; }
@media (min-width: 768px) {
  .hd-countdown-inner { flex-direction: row; }
  .hd-countdown-label { font-size: 1rem; }
  .hd-cd-box span { font-size: 1.3rem; }
}

/* === HERO === */
.hd-hero { position: relative; background: var(--primary); background-size: cover; background-position: center; overflow: hidden; }
.hd-hero-overlay { position: absolute; inset: 0; background: rgba(15,60,20,0.8); }
.hd-hero-content { position: relative; padding: 4rem 0; max-width: 640px; color: var(--primary-fg); }
.hd-hero-badge { display: inline-block; background: var(--accent); color: var(--accent-fg); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 100px; }
.hd-hero-title { font-size: 1.875rem; font-weight: 800; line-height: 1.2; margin-top: 1rem; }
.hd-hero-subtitle { font-size: 1rem; opacity: 0.9; margin-top: 1rem; }
.hd-hero-search { display: flex; gap: 0.5rem; margin-top: 1.5rem; max-width: 420px; }
.hd-search-input-wrap { position: relative; flex: 1; }
.hd-search-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-fg); }
.hd-search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; border: none; border-radius: 0.5rem; font-size: 0.875rem; background: var(--card); color: var(--fg); }
.hd-search-input:focus { outline: 2px solid var(--accent); }
.hd-hero-cta { display: inline-flex; margin-top: 1rem; }
@media (min-width: 768px) { .hd-hero-content { padding: 6rem 0; } .hd-hero-title { font-size: 3rem; } }

/* === BUTTONS === */
.hd-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.5rem; background: var(--primary); color: var(--primary-fg); border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; transition: all 0.2s; }
.hd-btn-primary:hover { opacity: 0.9; }
.hd-btn-accent { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.5rem; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 700; transition: all 0.2s; }
.hd-btn-accent:hover { opacity: 0.9; }
.hd-btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--success); color: var(--primary-fg); border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 700; width: 100%; }
.hd-btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; width: 100%; margin-top: 0.75rem; }

/* === TRUST BADGES === */
.hd-trust-badges { background: rgba(15,60,20,0.05); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hd-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1.5rem 0; text-align: center; }
.hd-trust-item span { font-size: 1.5rem; }
.hd-trust-title { font-size: 0.75rem; font-weight: 700; }
.hd-trust-sub { font-size: 0.625rem; color: var(--muted-fg); }
@media (min-width: 768px) { .hd-trust-grid { grid-template-columns: repeat(4, 1fr); } .hd-trust-title { font-size: 0.875rem; } .hd-trust-sub { font-size: 0.75rem; } }

/* === FEATURES === */
.hd-features { padding: 1.5rem 0; }
.hd-features-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.hd-feature-card { display: flex; align-items: center; gap: 1rem; background: var(--card); padding: 1.25rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.hd-feature-icon { background: rgba(15,60,20,0.1); padding: 0.75rem; border-radius: 0.5rem; color: var(--primary); flex-shrink: 0; }
.hd-feature-card h3 { font-size: 0.875rem; font-weight: 600; }
.hd-feature-card p { font-size: 0.75rem; color: var(--muted-fg); }
@media (min-width: 768px) { .hd-features-grid { grid-template-columns: repeat(3, 1fr); } }

/* === SECTIONS === */
.hd-section { padding: 4rem 0; }
.hd-section-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
.hd-section-subtitle { text-align: center; color: var(--muted-fg); margin-bottom: 2rem; }

/* === CATEGORY FILTERS === */
.hd-category-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.hd-cat-btn { padding: 0.5rem 1rem; border-radius: 100px; font-size: 0.875rem; font-weight: 500; border: none; background: var(--muted); color: var(--muted-fg); transition: all 0.2s; }
.hd-cat-btn.active { background: var(--primary); color: var(--primary-fg); }
.hd-cat-btn:hover:not(.active) { background: rgba(35,20,12,0.08); }

/* === PRODUCT GRID === */
.hd-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .hd-product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .hd-product-grid { grid-template-columns: repeat(4, 1fr); } }

/* === PRODUCT CARD === */
.hd-product-card { border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); transition: all 0.3s; }
.hd-product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.hd-pc-link { display: block; }
.hd-pc-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--muted); }
.hd-pc-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.hd-product-card:hover .hd-pc-img-wrap img { transform: scale(1.1); }
.hd-pc-badges { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.hd-badge-sale { background: var(--sale); color: var(--sale-fg); font-size: 0.75rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.375rem; }
.hd-badge-best { background: var(--accent); color: var(--accent-fg); font-size: 0.75rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.375rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.hd-pc-info { padding: 1rem; }
.hd-pc-cat { font-size: 0.75rem; font-weight: 500; color: var(--muted-fg); }
.hd-pc-name { font-size: 0.875rem; font-weight: 600; line-height: 1.3; margin: 0.25rem 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-pc-rating { display: flex; align-items: center; gap: 2px; margin: 0.25rem 0; }
.hd-pc-rating span { font-size: 0.75rem; color: var(--muted-fg); margin-left: 4px; }
.hd-star { fill: var(--muted); stroke: none; }
.hd-star.filled { fill: var(--accent); }
.hd-pc-prices { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.hd-pc-sale { font-size: 1.125rem; font-weight: 700; color: var(--primary); }
.hd-pc-original { font-size: 0.875rem; text-decoration: line-through; color: var(--muted-fg); }
.hd-add-to-cart { width: calc(100% - 2rem); margin: 0 1rem 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem; background: var(--primary); color: var(--primary-fg); border: none; border-radius: var(--radius); font-size: 0.8rem; font-weight: 600; transition: background 0.2s; }
.hd-add-to-cart:hover { background: hsl(130, 55%, 18%); }

/* === PRODUCT DETAIL === */
.hd-product-detail { padding: 2rem 0; }
.hd-back-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--muted-fg); margin-bottom: 1.5rem; }
.hd-back-link:hover { color: var(--fg); }
.hd-pd-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .hd-pd-grid { grid-template-columns: 1fr 1fr; } }
.hd-pd-image { position: relative; }
.hd-pd-image .hd-pd-media { border-radius: var(--radius); overflow: hidden; background: var(--muted); aspect-ratio: 1; }
.hd-pd-image .hd-pd-media img { width: 100%; height: 100%; object-fit: cover; }
.hd-pd-title { font-size: 1.5rem; font-weight: 700; margin: 0.5rem 0; }
.hd-pd-prices { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0; }
.hd-pd-sale { font-size: 1.875rem; font-weight: 700; color: var(--primary); }
.hd-pd-original { font-size: 1.125rem; text-decoration: line-through; color: var(--muted-fg); }
.hd-pd-discount { background: rgba(220,38,38,0.1); color: var(--sale); font-size: 0.875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
.hd-pd-desc { color: var(--muted-fg); margin: 0.75rem 0; }
.hd-pd-qty-row { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; }
.hd-qty-control { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; }
.hd-qty-control button { padding: 0.5rem 0.75rem; background: none; border: none; font-size: 1rem; }
.hd-qty-control button:hover { background: var(--muted); }
.hd-qty-control span { padding: 0.5rem 1rem; font-weight: 500; }
.hd-pd-add { flex: 1; }
.hd-pd-buy { width: 100%; text-align: center; justify-content: center; margin-top: 0.5rem; font-size: 1rem; padding: 0.75rem; }
.hd-pd-guarantees { border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; margin-top: 1rem; font-size: 0.875rem; color: var(--muted-fg); }
.hd-pd-guarantees p { margin: 0.25rem 0; }
.hd-related { margin-top: 4rem; }

/* === TESTIMONIALS === */
.hd-testimonials-section { background: rgba(35,20,12,0.03); padding: 4rem 0; }
.hd-testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .hd-testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hd-testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.hd-testimonial-card { background: var(--card); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.hd-tc-header { display: flex; align-items: center; gap: 0.75rem; }
.hd-tc-avatar { font-size: 1.875rem; }
.hd-tc-name { font-size: 0.875rem; font-weight: 600; }
.hd-tc-location { font-size: 0.75rem; color: var(--muted-fg); }
.hd-tc-stars { display: flex; gap: 2px; margin: 0.5rem 0; }
.hd-tc-text { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.6; }
.hd-tc-product { font-size: 0.75rem; font-weight: 500; color: var(--primary); margin-top: 0.5rem; }

/* === FAQ === */
.hd-faq-list { max-width: 640px; margin: 0 auto; }
.hd-faq-item { border: 1px solid var(--border); border-radius: 0.5rem; margin-bottom: 0.5rem; overflow: hidden; }
.hd-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: none; border: none; font-size: 0.875rem; font-weight: 500; text-align: left; }
.hd-faq-arrow { transition: transform 0.2s; flex-shrink: 0; }
.hd-faq-item.open .hd-faq-arrow { transform: rotate(180deg); }
.hd-faq-answer { display: none; padding: 0 1rem 0.75rem; font-size: 0.875rem; color: var(--muted-fg); }
.hd-faq-item.open .hd-faq-answer { display: block; }

/* === FOOTER === */
.hd-footer { border-top: 1px solid var(--border); background: var(--primary); color: var(--primary-fg); }
.hd-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0; }
@media (min-width: 768px) { .hd-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.hd-footer-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem; }
.hd-footer-heading { font-weight: 600; margin-bottom: 0.75rem; }
.hd-footer-desc { font-size: 0.875rem; opacity: 0.8; }
.hd-footer-links { list-style: none; }
.hd-footer-links li { margin: 0.5rem 0; }
.hd-footer-links a { font-size: 0.875rem; opacity: 0.8; transition: opacity 0.2s; }
.hd-footer-links a:hover { opacity: 1; }
.hd-social-icons { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.hd-social-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: transform 0.2s; }
.hd-social-icon:hover { transform: scale(1.1); }
.hd-social-fb { background: #1877F2; }
.hd-social-yt { background: #FF0000; }
.hd-social-tt { background: #000; }
.hd-social-ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
.hd-footer-bottom { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,0.2); text-align: center; font-size: 0.875rem; opacity: 0.6; }

/* === WHATSAPP FLOAT === */
.hd-whatsapp-float { position: fixed; bottom: 80px; right: 1rem; z-index: 50; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 100px; background: #25D366; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.2s; }
.hd-whatsapp-float:hover { transform: scale(1.05); }
.hd-wa-label { display: none; font-size: 0.875rem; font-weight: 700; }
@media (min-width: 768px) { .hd-wa-label { display: inline; } }

/* === FAKE ORDER NOTIFICATION === */
.hd-fake-order { position: fixed; bottom: 1rem; left: 1rem; z-index: 50; display: flex; align-items: center; gap: 0.75rem; background: var(--fg); padding: 0.75rem 1rem; border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.3); max-width: 320px; animation: hdSlideUp 0.5s ease-out; }
.hd-fo-icon { font-size: 1.25rem; flex-shrink: 0; }
.hd-fo-text { font-size: 0.75rem; color: var(--primary-fg); }
.hd-fo-text strong { color: #fff; }
.hd-fo-text .hd-fo-product { color: var(--accent); font-weight: 600; }
@keyframes hdSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* === DISCOUNT POPUP === */
.hd-popup-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(30,20,10,0.5); backdrop-filter: blur(4px); padding: 1rem; }
.hd-popup-card { position: relative; background: var(--card); border-radius: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.2); max-width: 380px; width: 100%; padding: 2rem; text-align: center; animation: hdSlideUp 0.5s ease-out; }
.hd-popup-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; color: var(--muted-fg); }
.hd-popup-emoji { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.hd-popup-card h3 { font-size: 1.25rem; font-weight: 700; }
.hd-popup-card > p { color: var(--muted-fg); font-size: 0.875rem; margin: 0.5rem 0; }
.hd-popup-discount { color: var(--sale); font-weight: 700; font-size: 1.125rem; }
.hd-popup-code { background: var(--muted); border-radius: 0.5rem; padding: 0.75rem; margin: 1rem 0; }
.hd-popup-code small { font-size: 0.75rem; color: var(--muted-fg); display: block; }
.hd-popup-code strong { font-size: 1.25rem; color: var(--primary); letter-spacing: 0.15em; }
.hd-popup-btn { width: 100%; justify-content: center; }

/* === CHECKOUT === */
.hd-checkout-page { padding: 2rem 0; max-width: 768px; }
.hd-page-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.hd-checkout-empty { text-align: center; padding: 4rem 0; }
.hd-checkout-empty p { color: var(--muted-fg); margin-bottom: 1rem; }
.hd-card { border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); padding: 1rem; margin-bottom: 1.5rem; }
.hd-card-title { font-weight: 600; margin-bottom: 0.75rem; }
.hd-checkout-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--muted); }
.hd-checkout-item:last-child { border-bottom: none; }
.hd-checkout-item img { width: 56px; height: 56px; border-radius: 0.5rem; object-fit: cover; }
.hd-ci-info { flex: 1; min-width: 0; }
.hd-ci-name { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-ci-qty { font-size: 0.75rem; color: var(--muted-fg); }
.hd-ci-price { font-weight: 600; font-size: 0.875rem; }
.hd-ci-remove { background: none; border: none; color: var(--sale); font-size: 1rem; padding: 0.25rem; }
.hd-coupon-section { padding-top: 0.75rem; border-top: 1px solid var(--border); margin-top: 0.75rem; }
.hd-coupon-section label { font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem; }
.hd-coupon-row { display: flex; gap: 0.5rem; }
.hd-coupon-row input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; }
.hd-coupon-msg { font-size: 0.75rem; margin-top: 0.25rem; }
.hd-checkout-totals { padding-top: 0.75rem; border-top: 1px solid var(--border); margin-top: 0.75rem; }
.hd-ct-row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 0.25rem 0; }
.hd-ct-total { font-weight: 700; font-size: 1.125rem; border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.25rem; }
.hd-ct-total span:last-child { color: var(--primary); }
.hd-form-group { margin-bottom: 0.75rem; }
.hd-form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }
.hd-form-group input, .hd-form-group textarea { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; background: var(--card); }
.hd-form-group input:focus, .hd-form-group textarea:focus { outline: 2px solid var(--primary); border-color: transparent; }
.hd-payment-options { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.hd-payment-option { cursor: pointer; }
.hd-payment-option input { display: none; }
.hd-po-card { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem; transition: all 0.2s; }
.hd-payment-option input:checked + .hd-po-card { border-color: var(--primary); background: rgba(15,60,20,0.03); }
.hd-payment-number-box { background: var(--muted); border-radius: 0.5rem; padding: 1rem; text-align: center; margin-bottom: 1rem; }
.hd-pm-number { font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.hd-checkout-submit { width: 100%; padding: 0.875rem; font-size: 1.125rem; font-weight: 700; }

/* === THANK YOU === */
.hd-thankyou-page { padding: 5rem 0; text-align: center; max-width: 500px; margin: 0 auto; }
.hd-thankyou-card { background: var(--card); }
.hd-thankyou-check { font-size: 5rem; margin-bottom: 0.5rem; }
.hd-thankyou-page h1 { font-size: 1.875rem; font-weight: 700; }
.hd-thankyou-order { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; }
.hd-ty-label { font-size: 0.875rem; color: var(--muted-fg); }
.hd-ty-orderid { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.hd-ty-success { font-size: 1.125rem; font-weight: 600; color: var(--success); margin-top: 0.5rem; }
.hd-ty-msg { color: var(--muted-fg); }
.hd-ty-wa { margin-top: 1.5rem; }

/* === CONTENT PAGES === */
.hd-content-page { padding: 4rem 0; max-width: 768px; margin: 0 auto; }
.hd-page-title-center { font-size: 1.875rem; font-weight: 700; text-align: center; margin-bottom: 2rem; }
.hd-prose { color: var(--muted-fg); }
.hd-prose h2 { font-size: 1.25rem; font-weight: 700; color: var(--fg); margin: 1.5rem 0 0.5rem; }
.hd-prose p { margin: 0.75rem 0; }
.hd-prose ul { padding-left: 1.5rem; margin: 0.75rem 0; }
.hd-prose li { margin: 0.5rem 0; }
.hd-prose strong { color: var(--fg); }

/* === SHOP PAGE === */
.hd-shop-page { padding: 2rem 0; }
.hd-search-bar { position: relative; max-width: 420px; margin-bottom: 1.5rem; }
.hd-search-bar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-fg); }
.hd-search-bar input { width: 100%; padding: 0.625rem 1rem 0.625rem 2.5rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; background: var(--card); }
.hd-search-bar input:focus { outline: 2px solid rgba(15,60,20,0.3); }

/* === TOAST === */
.hd-toast { position: fixed; top: 1rem; right: 1rem; z-index: 100; background: var(--primary); color: var(--primary-fg); padding: 0.75rem 1.25rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-hover); animation: hdSlideIn 0.3s ease-out; }
@keyframes hdSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Product full description */
.hd-pd-description { margin: 40px 0; }
.hd-pd-description h2 { font-size: 1.4rem; margin-bottom: 14px; }
.hd-pd-description-body { line-height: 1.9; }
.hd-pd-description-body p { margin-bottom: 12px; }
.hd-pd-description-body ul, .hd-pd-description-body ol { margin: 0 0 12px 22px; }
.hd-pd-description-body img { max-width: 100%; height: auto; border-radius: 10px; }

/* Product gallery with video */
.hd-pd-media { position: relative; }
.hd-pd-image .hd-pd-media-video { aspect-ratio: 16/9; background: #000; display: flex; align-items: center; }
.hd-pd-media-video iframe, .hd-pd-media-video video { width: 100%; height: 100%; aspect-ratio: 16/9; border: 0; border-radius: 14px; background: #000; display: block; }
.hd-pd-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.hd-pd-thumb { width: 74px; height: 74px; border: 2px solid #e5e5e5; border-radius: 10px; background: #fafafa; padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.hd-pd-thumb.active { border-color: #c9a227; }
.hd-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hd-pd-play { font-size: 20px; line-height: 1; }
.hd-pd-thumb-label { font-size: 11px; }