/* ========== Reset & Base ========== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color:#2d2d2d; background:#fafafa; line-height:1.7; }
a { color:#8b5e3c; text-decoration:none; transition:color 0.2s; }
a:hover { color:#6b3a1f; }
img { max-width:100%; height:auto; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }

/* ========== Header ========== */
.site-header { background:#fff; box-shadow:0 1px 8px rgba(0,0,0,0.06); position:sticky; top:0; z-index:100; }
.site-header .container { display:flex; justify-content:space-between; align-items:center; padding-top:0.75rem; padding-bottom:0.75rem; }
.logo { font-size:1.4rem; font-weight:700; color:#8b5e3c; letter-spacing:1px; }
.main-nav { display:flex; gap:1.5rem; align-items:center; }
.main-nav a { font-size:0.95rem; color:#555; padding:0.25rem 0; border-bottom:2px solid transparent; transition:color 0.2s, border-color 0.2s; }
.main-nav a:hover, .main-nav a.active { color:#8b5e3c; border-bottom-color:#8b5e3c; }
.cart-link { position:relative; }
.cart-link #cartCount::before { content:'('; }
.cart-link #cartCount::after { content:')'; }

/* ========== Buttons ========== */
.btn { display:inline-block; padding:0.65rem 1.5rem; border-radius:6px; font-size:0.95rem; cursor:pointer; border:none; transition:all 0.2s; font-weight:500; }
.btn-primary { background:#8b5e3c; color:#fff; }
.btn-primary:hover { background:#6b3a1f; }
.btn-outline { background:transparent; color:#8b5e3c; border:2px solid #8b5e3c; }
.btn-outline:hover { background:#8b5e3c; color:#fff; }
.btn-large { padding:0.85rem 2.5rem; font-size:1.05rem; }

/* ========== Hero ========== */
.hero { background: linear-gradient(135deg, #f5ebe0 0%, #e8d5c4 50%, #d4b896 100%); text-align:center; padding:5rem 0; }
.hero h1 { font-size:2.5rem; color:#4a3020; margin-bottom:1rem; letter-spacing:2px; }
.hero p { font-size:1.15rem; color:#6b4c3b; margin-bottom:2rem; max-width:600px; margin-left:auto; margin-right:auto; }
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ========== Sections ========== */
.section { padding:4rem 0; }
.section-alt { background:#f5f0eb; }
.section-title { text-align:center; font-size:2rem; color:#4a3020; margin-bottom:0.5rem; }
.section-subtitle { text-align:center; color:#888; margin-bottom:2.5rem; font-size:1rem; }
.section-more { text-align:center; margin-top:2rem; }

/* ========== Product Grid ========== */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1.5rem; }

.product-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:transform 0.3s, box-shadow 0.3s; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.product-link { display:block; }
.product-image { position:relative; aspect-ratio:1; background:#f0ebe4; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.product-image img { width:100%; height:100%; object-fit:cover; }
.product-image-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#d4c4b0,#c0a88e); font-size:3rem; color:#fff; }
.badge-sale { position:absolute; top:0.75rem; right:0.75rem; background:#c0392b; color:#fff; font-size:0.75rem; padding:0.25rem 0.6rem; border-radius:4px; font-weight:600; }
.product-info { padding:1rem; }
.product-info h3 { font-size:1rem; color:#333; margin-bottom:0.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-materials { font-size:0.8rem; color:#999; margin-bottom:0.5rem; }
.product-price { display:flex; align-items:center; gap:0.5rem; }
.current-price { font-size:1.15rem; font-weight:700; color:#8b5e3c; }
.original-price { font-size:0.85rem; color:#bbb; text-decoration:line-through; }
.btn-add-cart { display:block; width:calc(100% - 2rem); margin:0 1rem 1rem; padding:0.6rem; border:none; background:#8b5e3c; color:#fff; border-radius:6px; cursor:pointer; font-size:0.9rem; transition:background 0.2s; }
.btn-add-cart:hover { background:#6b3a1f; }

/* ========== Product Detail ========== */
.product-detail { padding:2rem 0 4rem; }
.breadcrumb { color:#aaa; font-size:0.85rem; margin-bottom:1.5rem; }
.breadcrumb a { color:#888; }
.breadcrumb a:hover { color:#8b5e3c; }
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:3rem; }
.product-detail-image img { border-radius:12px; width:100%; }
.product-image-placeholder.large { width:100%; aspect-ratio:1; border-radius:12px; font-size:5rem; }
.product-detail-info h1 { font-size:2rem; color:#333; margin-bottom:0.5rem; }
.product-materials-tag { font-size:0.9rem; color:#888; margin-bottom:1rem; }
.product-price-large { display:flex; align-items:center; gap:0.75rem; margin-bottom:1.5rem; }
.product-price-large .current-price { font-size:1.8rem; }
.discount-badge { background:#e74c3c; color:#fff; font-size:0.8rem; padding:0.2rem 0.5rem; border-radius:4px; }
.product-description { color:#666; margin-bottom:1.5rem; line-height:1.8; }
.product-actions { display:flex; gap:1rem; align-items:center; margin-bottom:1.5rem; }
.quantity-selector { display:flex; align-items:center; border:1px solid #ddd; border-radius:6px; }
.quantity-selector button { width:36px; height:36px; border:none; background:#f5f5f5; cursor:pointer; font-size:1.1rem; }
.quantity-selector input { width:48px; height:36px; border:none; text-align:center; font-size:1rem; outline:none; }
.product-meta p { font-size:0.85rem; color:#999; margin-bottom:0.25rem; }
.product-story { margin-top:3rem; padding:2rem; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.product-story h2 { font-size:1.5rem; color:#4a3020; margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid #f0ebe4; }
.story-content p { line-height:2; color:#555; }
.related-products { margin-top:3rem; }
.related-products h2 { font-size:1.5rem; color:#4a3020; margin-bottom:1.5rem; }

/* ========== Cart ========== */
.cart-list { display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
.cart-item { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; background:#fff; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,0.05); }
.cart-item-info h4 { font-size:1rem; margin-bottom:0.25rem; }
.cart-item-info p { font-size:0.85rem; color:#888; }
.cart-item-actions { display:flex; align-items:center; gap:1rem; }
.cart-item-subtotal { font-weight:600; color:#8b5e3c; }
.btn-remove { background:none; border:none; color:#e74c3c; cursor:pointer; font-size:0.85rem; }
.cart-summary { display:flex; justify-content:space-between; align-items:center; padding:1.5rem; background:#fff; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,0.05); }
.cart-total { font-size:1.3rem; }
.cart-total span:last-child { font-weight:700; color:#8b5e3c; margin-left:1rem; }

/* ========== Checkout ========== */
.checkout-grid { display:grid; grid-template-columns:1fr 400px; gap:2rem; }
.checkout-form-col, .checkout-summary-col { background:#fff; padding:2rem; border-radius:12px; box-shadow:0 1px 8px rgba(0,0,0,0.05); }
.checkout-form-col h2, .checkout-summary-col h2 { font-size:1.3rem; margin-bottom:1.5rem; color:#4a3020; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:0.9rem; color:#555; margin-bottom:0.35rem; font-weight:500; }
.form-group input, .form-group textarea { width:100%; padding:0.7rem 0.85rem; border:1px solid #ddd; border-radius:6px; font-size:0.95rem; outline:none; transition:border 0.2s; }
.form-group input:focus, .form-group textarea:focus { border-color:#8b5e3c; }
.checkout-item { display:flex; justify-content:space-between; padding:0.75rem 0; border-bottom:1px solid #f0f0f0; font-size:0.95rem; }
.checkout-total { display:flex; justify-content:space-between; padding:1rem 0; font-size:1.3rem; font-weight:700; border-top:2px solid #8b5e3c; margin:1rem 0; }
.checkout-note { font-size:0.8rem; color:#999; text-align:center; margin-top:1rem; }

/* ========== Empty State ========== */
.empty-state { text-align:center; padding:3rem; }
.empty-state p { font-size:1.1rem; color:#999; margin-bottom:1.5rem; }
.empty-text { text-align:center; color:#999; padding:2rem; grid-column:1/-1; }

/* ========== Features ========== */
.feature-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; }
.feature-item { text-align:center; padding:1.5rem; }
.feature-icon { font-size:2.5rem; margin-bottom:0.75rem; }
.feature-item h3 { font-size:1.1rem; color:#4a3020; margin-bottom:0.5rem; }
.feature-item p { font-size:0.9rem; color:#888; }

/* ========== Policy Content ========== */
.policy-content { max-width:800px; }
.policy-content h2 { font-size:1.3rem; color:#4a3020; margin-top:2rem; margin-bottom:0.75rem; }
.policy-content p, .policy-content li { color:#555; margin-bottom:0.75rem; line-height:1.8; }
.policy-content ul, .policy-content ol { padding-left:1.5rem; margin-bottom:1rem; }

/* ========== Contact ========== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.contact-info-col h2, .contact-form-col h2 { font-size:1.3rem; margin-bottom:1.5rem; color:#4a3020; }
.contact-info-item { margin-bottom:2rem; }
.contact-info-item h3 { font-size:1rem; color:#8b5e3c; margin-bottom:0.25rem; }
.contact-info-item p { color:#666; font-size:0.95rem; }

/* ========== Page Header ========== */
.page-header { background:#f5ebe0; padding:2.5rem 0; text-align:center; }
.page-header h1 { font-size:2rem; color:#4a3020; }

/* ========== Footer ========== */
.site-footer { background:#2d2d2d; color:#ccc; padding:3rem 0 1.5rem; margin-top:2rem; }
.footer-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; margin-bottom:2rem; }
.footer-col h4 { color:#fff; margin-bottom:1rem; font-size:1.05rem; }
.footer-col p, .footer-col a { color:#bbb; font-size:0.9rem; line-height:2; display:block; }
.footer-col a:hover { color:#d4b896; }
.payment-icons { margin-top:0.5rem; }
.payment-icons span { display:inline-block; background:#0070ba; color:#fff; padding:0.2rem 0.7rem; border-radius:4px; font-size:0.8rem; font-weight:600; }
.footer-bottom { border-top:1px solid #444; padding-top:1.5rem; text-align:center; font-size:0.85rem; color:#888; }

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .product-detail-grid, .checkout-grid, .contact-grid, .feature-grid, .footer-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:1.8rem; }
  .product-grid { grid-template-columns:repeat(2, 1fr); }
  .main-nav { gap:0.75rem; }
  .main-nav a { font-size:0.8rem; }
  .product-actions { flex-direction:column; align-items:stretch; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns:1fr; }
}