/*
Theme Name: Holistic Wellness
Theme URI: https://yoursite.com.au
Description: Custom ecommerce theme for Holistic Wellness — essential oils, herbal remedies and holistic health products. Farmers market events + online shop. Built for Australia.
Author: Gravity Projex
Author URI: https://gravityprojex.com
Version: 1.0.0
Text Domain: hw
PROPRIETARY SOFTWARE LICENSE
Copyright (c) 2025 Gravity Projex / Michelle Smith. 
All Rights Reserved. 
Business located in Australia.
This software and associated documentation files (the "Software") are proprietary 
and confidential to Gravity Projex.
The source code contained or described herein and all documents related
to the source code ("Material") and website framework are owned by Gravity Projex or its
licensors and authorised representatives. Title to the Material remains with Gravity Projex
or its licensors and authorised representatives. The Material contains trade
secrets and proprietary and confidential information of Gravity Projex or its
licensors and authorised representatives. 
  
RESTRICTIONS:
1. You may NOT copy, modify, distribute, or sell copies of the Software or coding, scripts or framework
2. You may NOT reverse engineer, decompile, or disassemble the Software or coding, scripts or framework
3. You may NOT remove any proprietary notices or labels on the Software or coding, scripts or framework
4. Unauthorized use may result in legal action and monetary damages

OWNERSHIP:
The Software is owned by Gravity Projex and is protected by Australian copyright 
laws and international treaty provisions.

The Material is protected by worldwide copyright
and trade secret laws and treaty provisions. No part of the Material may
be used, copied, reproduced, modified, published, uploaded, posted,
transmitted, distributed, or disclosed in any way without Gravity Projex prior
express written permission.

CONTACT:
For licensing inquiries: admin@gravityprojex.com
Website: https://gravityprojex.com

No license under any patent, copyright, trade secret or other intellectual
property right is granted to or conferred upon you by disclosure or
delivery of the Materials, either expressly, by implication, inducement,
estoppel or otherwise. Any license under such intellectual property rights
must be expressed and approved by Gravity Projex in writing.

VIOLATIONS:
Unauthorized copying or use of this Software will result in:
- Immediate cease and desist notice
- Legal action under Australian Copyright Act 1968
- Monetary damages and legal fees

Last Updated: November 2025
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --hw-primary:        #6B7C3E;
  --hw-primary-hover:  #566330;
  --hw-primary-light:  rgba(107,124,62,.1);
  --hw-secondary:      #C4895A;
  --hw-secondary-light:rgba(196,137,90,.1);
  --hw-gold:           #D4A853;
  --hw-blush:          #E8C4A8;
  --hw-sage:           #A8B87A;
  --hw-moss:           #4A5C2E;
  --hw-lavender:       #9B8FB5;
  --hw-mint:           #7AAAA0;
  --hw-dark:           #2C2415;
  --hw-brown:          #5C4A30;
  --hw-gray:           #7A7060;
  --hw-gray-light:     #ADA89A;
  --hw-border:         #DDD5C5;
  --hw-light-bg:       #F5F0E8;
  --hw-cream:          #FAF7F2;
  --hw-white:          #FFFFFF;
  --hw-parchment:      #F2EBD9;
  --hw-accent:         #D4A853;
  --hw-success:        #4A7C59;
  --hw-warning:        #C4895A;
  --hw-danger:         #A0522D;
  --hw-info:           #5C7A8A;
  --shadow-sm:  0 1px 3px rgba(44,36,21,.06);
  --shadow-md:  0 4px 16px rgba(44,36,21,.09);
  --shadow-lg:  0 12px 36px rgba(44,36,21,.12);
  --shadow-xl:  0 24px 56px rgba(44,36,21,.16);
  --radius-sm:  0.5rem;
  --radius-md:  1rem;
  --radius-lg:  1.5rem;
  --radius-xl:  2.5rem;
  --radius-pill:9999px;
  --ease-out:        cubic-bezier(.16,1,.3,1);
  --transition-fast: 180ms var(--ease-out);
  --transition-base: 280ms var(--ease-out);
  --transition-slow: 420ms var(--ease-out);
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.625rem;
  --text-5xl:  3.5rem;
  --focus-ring: 0 0 0 3px rgba(107,124,62,.3);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', Georgia, sans-serif;
  line-height: 1.65;
  color: var(--hw-dark);
  background: var(--hw-cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; }
button { font-family: inherit; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(253,249,245,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hw-border);
  transition: box-shadow var(--transition-base);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  gap: 1rem;
}

/* Logo */
.site-logo {
  font-size: 1.45rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: transform var(--transition-fast);
  color: var(--hw-dark);
}
.site-logo:hover { transform: scale(1.03); }
.site-logo .paw-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.site-logo .brand-main { color: var(--hw-primary); }
.site-logo .brand-sub  { color: var(--hw-secondary); font-weight: 600; font-size: 1.1rem; }

/* Nav */
.main-nav ul { display: flex; list-style: none; gap: 2rem; }
.main-nav a {
  color: var(--hw-gray);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  padding: 0.25rem 0;
  position: relative;
  transition: color var(--transition-fast);
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--hw-primary);
  border-radius: 1px;
  transition: width var(--transition-base);
}
.main-nav a:hover { color: var(--hw-primary); }
.main-nav a:hover::after { width: 100%; }

/* Mobile toggle */
.mobile-menu-toggle {
  display: none;
  background: none; border: none;
  padding: 0.5rem; cursor: pointer;
  color: var(--hw-dark);
}
.mobile-menu-toggle svg { width: 24px; height: 24px; }

/* Mobile overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(44,36,22,.5);
  z-index: 1100;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.mobile-nav-overlay.active { display: block; opacity: 1; }
.mobile-nav-panel {
  position: fixed;
  top: 0; right: -320px;
  width: 300px; height: 100%;
  background: var(--hw-cream);
  z-index: 1200;
  padding: 2rem 1.5rem;
  transition: right var(--transition-slow);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
}
.mobile-nav-panel.active { right: 0; }
.mobile-nav-panel .close-mobile-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  background: var(--hw-light-bg, #f7f2eb);
  border: 2px solid var(--hw-border, #e0d8cc);
  border-radius: 50%;
  cursor: pointer;
  color: var(--hw-dark, #2C2416);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  z-index: 10;
}
.mobile-nav-panel .close-mobile-nav:hover {
  background: var(--hw-primary-light, #fdeee9);
  border-color: var(--hw-primary, #C8593A);
  color: var(--hw-primary, #C8593A);
  transform: rotate(90deg);
}
.mobile-nav-panel .close-mobile-nav svg {
  width: 20px; height: 20px;
  display: block;
  flex-shrink: 0;
}
.mobile-nav-panel ul { list-style: none; margin-top: 3rem; }
.mobile-nav-panel li { border-bottom: 1px solid var(--hw-border); }
.mobile-nav-panel a {
  display: block; padding: 1rem 0;
  font-weight: 600; font-size: var(--text-lg);
  color: var(--hw-dark); text-decoration: none;
  transition: color var(--transition-fast);
}
.mobile-nav-panel a:hover { color: var(--hw-primary); }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Announcement bar */
.announcement-bar {
  background: var(--hw-secondary);
  color: white;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.announcement-bar a { color: white; text-decoration: underline; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2.25rem;
  background: var(--hw-primary);
  color: var(--hw-white);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.01em;
  box-sizing: border-box;
}
.btn:hover {
  background: var(--hw-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(200,89,58,.32);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn-secondary {
  background: var(--hw-secondary);
  color: white;
}
.btn-secondary:hover {
  background: #3d6b4a;
  box-shadow: 0 6px 22px rgba(74,124,89,.32);
}

.btn-white {
  background: var(--hw-white);
  color: var(--hw-primary);
}
.btn-white:hover {
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--hw-primary);
  color: var(--hw-primary);
}
.btn-outline:hover {
  background: var(--hw-primary-light);
  transform: translateY(-2px);
  box-shadow: none;
}

.btn-outline-white {
  background: transparent;
  border: 2px solid rgba(255,255,255,.7);
  color: white;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: white;
  box-shadow: none;
}

.btn-sm  { padding: 0.5rem 1.25rem; font-size: var(--text-xs); }
.btn-lg  { padding: 1.1rem 3.25rem; font-size: var(--text-base); }
.btn-danger { background: var(--hw-danger); color: white; }

.btn-icon {
  width: 42px; height: 42px; padding: 0;
  border-radius: var(--radius-md);
  background: var(--hw-white);
  border: 1px solid var(--hw-border);
  color: var(--hw-gray);
  position: relative;
}
.btn-icon:hover {
  border-color: var(--hw-primary);
  color: var(--hw-primary);
  transform: none; box-shadow: none;
}

/* Cart badge */
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px;
  background: var(--hw-accent);
  color: var(--hw-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 800;
  border: 2px solid var(--hw-cream);
  transition: transform var(--transition-fast);
}
.cart-badge.bump { animation: cartBump 400ms var(--ease-out); }
@keyframes cartBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
  background: linear-gradient(135deg, #2C2416 0%, #4A3728 45%, #C8593A 100%);
  color: white;
  padding: 5.5rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 35%, rgba(232,168,56,.14) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(74,124,89,.10) 0%, transparent 45%);
  pointer-events: none;
}
/* Paw print watermark */
.hero-section::after {
  content: '🐾';
  position: absolute;
  bottom: -1rem; right: 3rem;
  font-size: 14rem;
  opacity: 0.04;
  pointer-events: none;
  line-height: 1;
}
.hero-section .container { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  color: white;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.5rem;
  backdrop-filter: blur(4px);
}
.hero-section h1 {
  font-size: var(--text-5xl);
  font-weight: 300;
  margin-bottom: 1.1rem;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.hero-section h1 span  { font-weight: 800; }
.hero-section h1 em    { font-style: normal; color: var(--hw-accent); }
.hero-section p {
  font-size: var(--text-xl);
  margin-bottom: 2.75rem;
  opacity: 0.88;
  max-width: 580px;
  margin-left: auto; margin-right: auto;
  line-height: 1.65;
}
.hero-actions {
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 2.75rem;
}
.hero-trust-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 0.875rem;
  font-size: var(--text-sm);
  color: rgba(255,255,255,.8);
  font-weight: 500;
  flex-wrap: wrap;
}
.hero-trust-divider { opacity: 0.4; }

/* Hero with bg image */
.hero-section.hero-with-image {
  min-height: 580px;
  display: flex; align-items: center;
  background: var(--hw-dark);
}
.hero-section.hero-with-image .container { position: relative; z-index: 2; }
.hero-bg-image { position: absolute; inset: 0; z-index: 0; }
.hero-bg-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.38; }
.hero-section.hero-with-image::before {
  z-index: 1;
  background: linear-gradient(135deg, rgba(44,36,22,.82) 0%, rgba(200,89,58,.28) 100%);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 5.5rem 0; }
.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--text-4xl);
  font-weight: 300;
  text-align: center;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--hw-dark);
}
.section-title span { font-weight: 800; color: var(--hw-primary); }
.section-title em    { font-style: normal; font-weight: 800; color: var(--hw-secondary); }
.section-description {
  text-align: center;
  color: var(--hw-gray);
  max-width: 540px;
  margin: 0 auto 3.25rem;
  font-size: var(--text-base);
  line-height: 1.75;
}
.bg-light  { background: var(--hw-light-bg); }
.bg-cream  { background: var(--hw-cream); }
.bg-dark   { background: var(--hw-dark); color: white; }
.text-center { text-align: center; }

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.category-card {
  background: var(--hw-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hw-primary);
}
.category-emoji {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
  transition: transform var(--transition-base);
}
.category-card:hover .category-emoji { transform: scale(1.2) rotate(-5deg); }
.category-name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--hw-dark);
  transition: color var(--transition-fast);
}
.category-desc {
  font-size: var(--text-xs);
  color: var(--hw-gray);
  margin-top: 0.3rem;
}
.category-card:hover .category-name { color: var(--hw-primary); }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.75rem;
}
.product-card {
  background: var(--hw-white);
  border-radius: var(--radius-lg);
  overflow: visible; /* image link clips itself — card must not clip the button row */
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--hw-border);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.product-card .img-wrapper { overflow: hidden; position: relative; }
.product-card img {
  width: 100%; height: 280px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.product-card:hover img { transform: scale(1.05); }
.product-placeholder {
  width: 100%; height: 280px;
  background: linear-gradient(135deg, var(--hw-blush) 0%, var(--hw-primary) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
}
/* Product badge */
.product-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--hw-accent);
  color: var(--hw-dark);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.product-badge.new    { background: var(--hw-secondary); color: white; }
.product-badge.sale   { background: var(--hw-primary); color: white; }
.product-badge.bundle { background: var(--hw-lavender); color: white; }

.product-info { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.product-title { font-size: var(--text-base); font-weight: 700; margin-bottom: 0.3rem; color: var(--hw-dark); line-height: 1.4; }
.product-description { color: var(--hw-gray); font-size: var(--text-sm); margin-bottom: 0.85rem; line-height: 1.55; }
.product-price { font-size: var(--text-xl); font-weight: 800; color: var(--hw-primary); margin-bottom: 1rem; }
/* Single-button cards only — paired action rows manage their own sizing */
.product-card .product-info > .btn { width: 100%; }

/* ============================================================
   FEATURES / TRUST STRIP
   ============================================================ */
.features-section {
  background: var(--hw-dark);
  padding: 4rem 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  text-align: center;
}
.feature-icon {
  width: 3.5rem; height: 3.5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
  transition: transform var(--transition-base);
}
.features-section .feature-icon:hover { transform: translateY(-3px); }
.feature-title { font-weight: 700; margin-bottom: 0.4rem; font-size: var(--text-base); color: white; }
.feature-desc  { color: rgba(255,255,255,.6); font-size: var(--text-sm); line-height: 1.6; }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--hw-primary) 0%, #a84828 100%);
  color: white;
  padding: 5.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 25%, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.cta-section::after {
  content: '🐾';
  position: absolute;
  top: -1rem; left: 2rem;
  font-size: 12rem;
  opacity: 0.05;
  pointer-events: none;
}

/* ============================================================
   ABOUT / BRAND STORY STRIP
   ============================================================ */
.brand-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.brand-story-content .eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hw-primary);
  background: var(--hw-primary-light);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}
.brand-story-content h2 {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}
.brand-story-content h2 strong { font-weight: 800; }
.brand-story-content p {
  color: var(--hw-gray);
  font-size: var(--text-base);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.brand-story-img img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.testimonial-card {
  background: var(--hw-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--hw-border);
  transition: all var(--transition-base);
}
.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.testimonial-stars { font-size: 1rem; margin-bottom: 1rem; letter-spacing: 0.05em; }
.testimonial-text {
  color: var(--hw-dark);
  font-size: var(--text-base);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.testimonial-author {
  display: flex; align-items: center; gap: 0.75rem;
}
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hw-blush), var(--hw-primary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.testimonial-name  { font-weight: 700; font-size: var(--text-sm); color: var(--hw-dark); }
.testimonial-pet   { font-size: var(--text-xs); color: var(--hw-gray); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--hw-dark);
  color: rgba(255,255,255,.7);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand .site-logo { color: white; margin-bottom: 1rem; }
.footer-brand .site-logo .brand-main { color: var(--hw-blush); }
.footer-brand .site-logo .brand-sub  { color: rgba(255,255,255,.6); }
.footer-brand p { font-size: var(--text-sm); line-height: 1.75; color: rgba(255,255,255,.55); }
.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,.4);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--hw-blush); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: var(--text-xs); color: rgba(255,255,255,.35); }
.footer-bottom a { color: var(--hw-blush); text-decoration: none; font-weight: 600; }

/* ============================================================
   CART SIDEBAR
   ============================================================ */
.cart-sidebar {
  position: fixed;
  right: -440px; top: 0;
  width: 420px; max-width: 92vw;
  height: 100%;
  background: var(--hw-cream);
  box-shadow: var(--shadow-xl);
  z-index: 2000;
  transition: right var(--transition-slow);
  display: flex; flex-direction: column;
}
.cart-sidebar.open { right: 0; }
.cart-sidebar-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--hw-border);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
  background: var(--hw-white);
}
.cart-sidebar-header h3 { font-size: var(--text-lg); font-weight: 800; color: var(--hw-dark); }
.cart-sidebar-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.cart-sidebar-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--hw-border);
  flex-shrink: 0;
  background: var(--hw-white);
}
.cart-total-row {
  display: flex; justify-content: space-between;
  font-size: var(--text-xl); font-weight: 800;
  margin-bottom: 1rem; color: var(--hw-dark);
}
.cart-empty-msg { text-align: center; color: var(--hw-gray); padding: 3rem 0; font-size: var(--text-sm); }
.cart-empty-msg .empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }

/* Cart item */
.cart-item { display: flex; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hw-border); }
.cart-item-img { width: 74px; height: 74px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.cart-item-details { flex: 1; min-width: 0; }
.cart-item-name  { font-size: var(--text-sm); font-weight: 700; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hw-dark); }
.cart-item-price { color: var(--hw-primary); font-weight: 700; font-size: var(--text-sm); margin-bottom: 0.4rem; }
.cart-qty-controls { display: flex; align-items: center; gap: 0.5rem; }
.cart-qty-btn {
  width: 30px; height: 30px;
  border: 1.5px solid var(--hw-border);
  border-radius: var(--radius-sm);
  background: var(--hw-white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; transition: all var(--transition-fast);
}
.cart-qty-btn:hover { border-color: var(--hw-primary); color: var(--hw-primary); }
.cart-qty-value { min-width: 28px; text-align: center; font-weight: 700; font-size: var(--text-sm); }
.cart-overlay { position: fixed; inset: 0; background: rgba(44,36,22,.45); z-index: 1999; display: none; }
.cart-overlay.active { display: block; }

/* ============================================================
   CHECKOUT MODAL
   ============================================================ */
.checkout-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(44,36,22,.5);
  z-index: 3000; align-items: center; justify-content: center;
}
.checkout-overlay.active { display: flex; }
.checkout-modal {
  background: var(--hw-cream);
  border-radius: var(--radius-xl);
  max-width: 480px; width: 92%;
  max-height: 90vh; overflow-y: auto;
  padding: 2rem;
  box-shadow: var(--shadow-xl);
  position: relative;
}
.checkout-modal h3 { font-size: var(--text-2xl); font-weight: 800; margin-bottom: 0.25rem; color: var(--hw-dark); }
.checkout-modal .checkout-subtitle { color: var(--hw-gray); font-size: var(--text-sm); margin-bottom: 1.75rem; }
.checkout-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; cursor: pointer; padding: 0.5rem;
  color: var(--hw-gray); transition: color var(--transition-fast);
}
.checkout-close:hover { color: var(--hw-dark); }

/* Stripe button */
.btn-stripe {
  width: 100%; padding: 1rem;
  background: #635BFF; color: white;
  border: none; border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  transition: all var(--transition-base); letter-spacing: 0.01em;
}
.btn-stripe:hover {
  background: #5046E4;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,91,255,.35);
}
.btn-stripe:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.stripe-badge {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin-top: 1rem;
  font-size: var(--text-xs); color: var(--hw-gray-light);
}

/* Checkout summary */
.checkout-summary {
  background: var(--hw-light-bg);
  border: 1px solid var(--hw-border);
  border-radius: var(--radius-md);
  padding: 1.25rem; margin-bottom: 1.5rem;
}
.checkout-summary-row {
  display: flex; justify-content: space-between;
  font-size: var(--text-sm); padding: 0.4rem 0;
  color: var(--hw-gray);
}
.checkout-summary-row.total {
  font-weight: 800; font-size: var(--text-base);
  border-top: 1px solid var(--hw-border);
  margin-top: 0.5rem; padding-top: 0.75rem;
  color: var(--hw-dark);
}

/* Form fields */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.35rem; font-weight: 700; font-size: var(--text-sm); color: var(--hw-dark); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--hw-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-family: inherit;
  color: var(--hw-dark); background: var(--hw-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--hw-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Order success */
.order-success { display: none; text-align: center; padding: 2rem 0; }
.order-success .success-icon {
  width: 64px; height: 64px; background: var(--hw-success);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}

/* ============================================================
   TOASTS
   ============================================================ */
.toast-container {
  position: fixed; top: 80px; right: 20px;
  z-index: 5000; display: flex; flex-direction: column; gap: 0.5rem;
}
.toast {
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700;
  color: var(--hw-white);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 0.5rem;
  animation: toastIn 350ms var(--ease-out) forwards;
  max-width: 340px;
}
.toast.success { background: var(--hw-success); }
.toast.error   { background: var(--hw-danger); }
.toast.info    { background: var(--hw-info); }
.toast.exiting { animation: toastOut 300ms ease-in forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); }   to { opacity: 0; transform: translateX(40px); } }

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.admin-wrapper { min-height: 100vh; background: var(--hw-light-bg); }
.dash-header {
  background: var(--hw-white); border-bottom: 1px solid var(--hw-border);
  padding: 1.25rem 0; position: sticky; top: 0; z-index: 100;
}
.dash-header .container { display: flex; justify-content: space-between; align-items: center; }
.dash-header-title { font-size: var(--text-2xl); font-weight: 800; color: var(--hw-dark); }
.dash-header-subtitle { color: var(--hw-gray); font-size: var(--text-sm); margin-top: 0.15rem; }
.dash-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.stat-card {
  background: var(--hw-white); padding: 1.5rem;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  border: 1px solid var(--hw-border); transition: all var(--transition-base);
}
.stat-card:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.stat-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.stat-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.4rem; }
.stat-icon.products  { background: linear-gradient(135deg, var(--hw-primary), var(--hw-accent)); }
.stat-icon.orders    { background: linear-gradient(135deg, var(--hw-secondary), #6aaf83); }
.stat-icon.revenue   { background: linear-gradient(135deg, #3D8C5E, #2d6b47); }
.stat-icon.customers { background: linear-gradient(135deg, var(--hw-mint), #5a9bb8); }
.stat-label { font-size: var(--text-sm); color: var(--hw-gray); margin-bottom: 0.15rem; }
.stat-value { font-size: var(--text-3xl); font-weight: 800; color: var(--hw-dark); line-height: 1.1; }
.stat-link { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--hw-primary); text-decoration: none; font-size: var(--text-sm); font-weight: 700; transition: gap var(--transition-fast); }
.stat-link:hover { gap: 0.5rem; }
.quick-actions { background: var(--hw-white); padding: 1.75rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--hw-border); margin-bottom: 2rem; }
.quick-actions h2 { font-size: var(--text-lg); font-weight: 800; margin-bottom: 1.25rem; color: var(--hw-dark); }
.quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.action-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 1.5rem 1rem; border-radius: var(--radius-lg);
  border: 2px solid var(--hw-border); text-decoration: none;
  color: var(--hw-dark); transition: all var(--transition-base); text-align: center; cursor: pointer;
  background: var(--hw-white);
}
.action-card:hover { border-color: var(--hw-primary); background: var(--hw-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.action-card-icon { width: 3rem; height: 3rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.action-card-label { font-weight: 700; font-size: var(--text-sm); }
.action-card-hint  { font-size: var(--text-xs); color: var(--hw-gray); margin-top: -0.25rem; }
.dash-panel { background: var(--hw-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--hw-border); overflow: hidden; margin-bottom: 2rem; }
.dash-panel-header { padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--hw-border); display: flex; justify-content: space-between; align-items: center; }
.dash-panel-header h2 { font-size: var(--text-lg); font-weight: 800; }
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th { text-align: left; padding: 0.75rem 1.75rem; font-size: var(--text-xs); font-weight: 800; color: var(--hw-gray); text-transform: uppercase; letter-spacing: 0.05em; background: var(--hw-light-bg); border-bottom: 1px solid var(--hw-border); }
.dash-table td { padding: 0.875rem 1.75rem; font-size: var(--text-sm); border-bottom: 1px solid var(--hw-border); vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr:hover td { background: var(--hw-primary-light); }
.status-pill { display: inline-block; padding: 0.2rem 0.75rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; text-transform: capitalize; }
.status-pending   { background: #FEF3C7; color: #92400E; }
.status-confirmed { background: #D1FAE5; color: #065F46; }
.status-preparing { background: #DBEAFE; color: #1E40AF; }
.status-ready     { background: #E9D5FF; color: #6B21A8; }
.status-completed { background: #E5E7EB; color: #374151; }
.status-cancelled { background: #FEE2E2; color: #991B1B; }

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.product-single-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.product-single-image img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); object-fit: cover; }
.product-single-category {
  display: inline-block; font-size: var(--text-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--hw-primary); background: var(--hw-primary-light);
  padding: 0.3rem 0.85rem; border-radius: var(--radius-pill); margin-bottom: 0.75rem;
}
.product-single-title { font-size: var(--text-4xl); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 1rem; color: var(--hw-dark); }
.product-single-price { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.product-single-current-price { font-size: var(--text-3xl); font-weight: 800; color: var(--hw-primary); }
.product-single-compare { font-size: var(--text-xl); color: var(--hw-gray-light); font-weight: 400; text-decoration: line-through; }
.product-single-sale-badge { font-size: var(--text-xs); font-weight: 800; background: var(--hw-primary); color: white; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.06em; }
.product-single-description { color: var(--hw-gray); font-size: var(--text-base); line-height: 1.85; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--hw-border); }
.stock-indicator { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); font-weight: 700; }
.stock-in  { color: var(--hw-success); }
.stock-low { color: var(--hw-warning); }
.stock-out { color: var(--hw-danger); }
.product-single-actions { display: flex; gap: 0.75rem; margin-bottom: 2rem; }
.product-single-qty { display: flex; align-items: center; border: 2px solid var(--hw-border); border-radius: var(--radius-md); overflow: hidden; }
.qty-btn { width: 46px; height: 50px; border: none; background: var(--hw-light-bg); font-size: 1.25rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast); color: var(--hw-dark); }
.qty-btn:hover { background: var(--hw-border); }
.product-single-qty input { width: 56px; height: 50px; border: none; text-align: center; font-size: var(--text-base); font-weight: 700; font-family: inherit; color: var(--hw-dark); -moz-appearance: textfield; }
.product-single-qty input::-webkit-outer-spin-button, .product-single-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.trust-badge { display: flex; align-items: center; gap: 0.6rem; font-size: var(--text-sm); color: var(--hw-gray); font-weight: 500; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: start; }
.contact-col-title { font-size: var(--text-2xl); font-weight: 800; color: var(--hw-dark); margin-bottom: 0.5rem; }
.contact-col-desc  { color: var(--hw-gray); font-size: var(--text-base); line-height: 1.75; margin-bottom: 2rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form select, .contact-form textarea {
  width: 100%; padding: 0.8rem 1rem; border: 2px solid var(--hw-border);
  border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-base);
  color: var(--hw-dark); background: var(--hw-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--hw-primary); box-shadow: var(--focus-ring); }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-info-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.5rem; background: var(--hw-white); border: 1px solid var(--hw-border); border-radius: var(--radius-lg); margin-bottom: 1rem; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.contact-info-card:hover { box-shadow: var(--shadow-md); border-color: var(--hw-primary); }
.contact-info-card h3 { font-size: var(--text-base); font-weight: 700; color: var(--hw-dark); margin-bottom: 0.3rem; }
.contact-info-card p  { font-size: var(--text-sm); color: var(--hw-gray); line-height: 1.6; margin: 0; }
.contact-info-icon { width: 44px; height: 44px; background: var(--hw-primary-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }

/* ============================================================
   POLICY PAGES
   ============================================================ */
.hero-policy { background: linear-gradient(135deg, var(--hw-dark) 0%, #4A3728 60%, var(--hw-primary) 100%); padding: 4rem 0 3.5rem; }
.hero-policy h1 { font-size: var(--text-4xl); }
.policy-layout { display: grid; grid-template-columns: 220px 1fr; gap: 4rem; align-items: start; }
.policy-toc { position: sticky; top: 100px; background: var(--hw-white); border: 1px solid var(--hw-border); border-radius: var(--radius-lg); padding: 1.5rem; }
.policy-toc-heading { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hw-gray); margin-bottom: 0.875rem; }
.policy-toc ul { list-style: none; }
.policy-toc a { display: block; font-size: var(--text-sm); color: var(--hw-gray); text-decoration: none; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); transition: all var(--transition-fast); font-weight: 500; }
.policy-toc a:hover { color: var(--hw-primary); background: var(--hw-primary-light); }
.policy-content h2 { font-size: var(--text-xl); font-weight: 800; color: var(--hw-dark); margin: 2.5rem 0 0.875rem; padding-top: 1rem; border-top: 1px solid var(--hw-border); scroll-margin-top: 100px; }
.policy-content h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.policy-content p  { color: var(--hw-gray); line-height: 1.8; margin-bottom: 1rem; }
.policy-content a  { color: var(--hw-primary); text-decoration: none; font-weight: 500; }
.policy-content strong { color: var(--hw-dark); }
.policy-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.policy-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--hw-gray); line-height: 1.7; }
.policy-list li::before { content: '🐾'; position: absolute; left: 0; font-size: 0.75rem; top: 0.15rem; }

/* ============================================================
   SKELETON / LOADING
   ============================================================ */
.skeleton { background: linear-gradient(90deg, #f0ebe5 25%, #e8e0d8 50%, #f0ebe5 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .mobile-menu-toggle { display: block; }

  .hero-section { padding: 3rem 0 2.75rem; }
  .hero-section h1 { font-size: clamp(1.85rem, 8vw, 2.75rem); }
  .hero-section p  { font-size: var(--text-base); padding: 0 0.5rem; }
  .hero-actions    { flex-direction: column; align-items: center; }
  .hero-trust-strip { flex-direction: column; gap: 0.4rem; font-size: var(--text-xs); }
  .hero-trust-divider { display: none; }

  .section { padding: 3rem 0; }
  .section-title { font-size: clamp(1.6rem, 6vw, 2.25rem); }

  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid  { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .product-card img, .product-placeholder { height: 190px; }
  .product-info { padding: 0.875rem 1rem 1rem; }

  .brand-story { grid-template-columns: 1fr; gap: 2rem; }
  .brand-story-img { order: -1; }

  .testimonials-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .product-single-grid { grid-template-columns: 1fr; gap: 2rem; }
  .product-single-title { font-size: clamp(1.6rem, 6vw, 2.25rem); }
  .product-single-actions { flex-direction: column; }

  .cart-sidebar { width: 100%; max-width: 100vw; right: -100%; top: auto; bottom: 0; max-height: 90vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: var(--safe-bottom); }
  .cart-sidebar.open { right: 0; }
  .checkout-overlay { align-items: flex-end; }
  .checkout-modal { width: 100%; max-width: 100%; max-height: 96vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; position: fixed; bottom: 0; margin: 0; padding-bottom: calc(1.5rem + var(--safe-bottom)); }

  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-toc { position: static; }
  .form-row { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .quick-actions-grid { grid-template-columns: 1fr 1fr; }

  .site-header { padding-top: var(--safe-top); }
  .mobile-nav-panel { padding-bottom: calc(2rem + var(--safe-bottom)); }
}

@media (max-width: 480px) {
  .container { padding: 0 0.875rem; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .quick-actions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .hero-section h1 { font-size: 1.7rem; }
  .product-card img, .product-placeholder { height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .btn, .btn-stripe { border: 2px solid ButtonText; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header, .site-footer, .cart-sidebar, .cart-overlay,
  .checkout-overlay, .toast-container, .mobile-nav-overlay,
  .mobile-nav-panel, .announcement-bar { display: none !important; }
  body { color: #000; background: white; }
}

/* ============================================================
   HOLISTIC WELLNESS — SPECIFIC OVERRIDES
   ============================================================ */

/* Hero — parchment split override */
.hero-section {
  background: var(--hw-parchment) !important;
  min-height: 580px;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  color: var(--hw-dark);
}
.hero-section::before { display: none; }
.hero-section::after  { display: none; }
.hero-content { padding: 5rem 4rem 5rem 3rem; }
.hero-eyebrow { color: var(--hw-secondary); background: var(--hw-secondary-light); border-color: rgba(196,137,90,.3); }
.hero-section h1 { font-family: 'Playfair Display', Georgia, serif; color: var(--hw-dark); font-weight: 700; }
.hero-section h1 em { font-style: italic; color: var(--hw-primary); font-weight: 700; }
.hero-section > .hero-content > p { color: var(--hw-gray); }
.hero-trust-strip { border-top: 1px solid var(--hw-border); }
.hero-trust-item  { color: var(--hw-gray); }

/* Hero image col — no dark overlay */
.hero-image-col { background: var(--hw-light-bg); }
.hero-image-col img { opacity: 1; }
.hero-section.hero-with-image { background: var(--hw-dark) !important; }

/* Section titles */
.section-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; }
.section-eyebrow { color: var(--hw-secondary); }

/* About section */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-content { background: var(--hw-parchment); padding: 4.5rem; display: flex; flex-direction: column; justify-content: center; }
.about-content h2 { font-family: 'Playfair Display', Georgia, serif; }
.about-image img { min-height: 500px; }
.about-image-placeholder { min-height: 500px; background: linear-gradient(135deg, var(--hw-light-bg), var(--hw-parchment)); }

/* Botanical strip */
.botanical-strip { background: var(--hw-primary); padding: 4rem 0; text-align: center; }
.botanical-strip h2 { font-family: 'Playfair Display', Georgia, serif; color: white; font-size: var(--text-4xl); font-weight: 700; margin-bottom: 0.75rem; }
.botanical-strip h2 em { font-style: italic; color: var(--hw-blush); }
.botanical-strip p  { color: rgba(255,255,255,.75); font-size: var(--text-lg); max-width: 520px; margin: 0 auto 2.25rem; }

/* Collections */
.collections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.collection-item { border-radius: var(--radius-xl); }
.collection-overlay { background: linear-gradient(to top, rgba(44,36,21,.85) 0%, transparent 100%); }
.collection-label { color: var(--hw-blush); }
.collection-title { font-family: 'Playfair Display', Georgia, serif; }
.collection-cta   { color: var(--hw-blush); }
.collections-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.collections-3 .collection-item img { height: 320px; }

/* Farmers market events */
.events-section { background: var(--hw-parchment); }
.events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.event-card { background: var(--hw-white); border-radius: var(--radius-lg); border: 1.5px solid var(--hw-border); overflow: hidden; display: flex; transition: all var(--transition-base); }
.event-card:hover { box-shadow: var(--shadow-md); border-color: var(--hw-primary); transform: translateY(-2px); }
.event-date-col { background: var(--hw-primary); color: white; padding: 1.5rem 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 90px; flex-shrink: 0; text-align: center; }
.event-date-col .day   { font-family: 'Playfair Display', Georgia, serif; font-size: 2.25rem; font-weight: 700; line-height: 1; }
.event-date-col .month { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: .8; margin-top: 0.25rem; }
.event-info { padding: 1.5rem; flex: 1; }
.event-name { font-weight: 800; font-size: var(--text-base); color: var(--hw-dark); margin-bottom: 0.35rem; }
.event-location { font-size: var(--text-sm); color: var(--hw-gray); margin-bottom: 0.4rem; }
.event-hours { font-size: var(--text-xs); color: var(--hw-secondary); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.6rem; }
.event-desc { font-size: var(--text-sm); color: var(--hw-gray); line-height: 1.6; }
.event-badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; padding: 0.2rem 0.7rem; border-radius: var(--radius-pill); background: var(--hw-primary-light); color: var(--hw-primary); margin-top: 0.75rem; }
.no-events-msg { text-align: center; padding: 3rem; color: var(--hw-gray); font-style: italic; background: var(--hw-white); border-radius: var(--radius-lg); border: 2px dashed var(--hw-border); }

/* Newsletter */
.newsletter-section { background: var(--hw-light-bg); border-top: 1px solid var(--hw-border); border-bottom: 1px solid var(--hw-border); }
.newsletter-content h2 { font-family: 'Playfair Display', Georgia, serif; }
.newsletter-content h2 em { font-style: italic; color: var(--hw-primary); }

/* CTA */
.cta-section { background: linear-gradient(135deg, #4A5C2E 0%, var(--hw-primary) 60%, #8a9e52 100%); }
.cta-section h2 { font-family: 'Playfair Display', Georgia, serif; }
.cta-section h2 em { font-style: italic; color: var(--hw-blush); }

/* Footer */
.footer-brand .brand-main { color: var(--hw-sage); }
.footer-col a:hover { color: var(--hw-sage); }
.footer-bottom a { color: var(--hw-sage); }
.footer-social a:hover { background: var(--hw-primary); }

/* Dashboard */
.dash-header-title { font-family: 'Playfair Display', Georgia, serif; }
.dash-panel-header h2 { font-family: 'Playfair Display', Georgia, serif; }
.stat-value { font-family: 'Playfair Display', Georgia, serif; }
.quick-actions h2 { font-family: 'Playfair Display', Georgia, serif; }
.stat-icon.products  { background: linear-gradient(135deg, var(--hw-primary), var(--hw-sage)); }
.stat-icon.orders    { background: linear-gradient(135deg, var(--hw-secondary), var(--hw-blush)); }
.stat-icon.revenue   { background: linear-gradient(135deg, var(--hw-gold), #b8943d); }
.stat-icon.customers { background: linear-gradient(135deg, var(--hw-mint), #5a8a82); }

/* Site logo for holistic */
.site-logo .leaf  { font-size: 1.4rem; }
.site-logo .brand-main { color: var(--hw-primary); }
.site-logo .brand-sub  { color: var(--hw-secondary); font-weight: 400; font-style: italic; }

/* Guide cards */
.guide-card { background: var(--hw-white); border: 1.5px solid var(--hw-border); border-radius: var(--radius-lg); padding: 2rem; transition: all var(--transition-base); }
.guide-card:hover { box-shadow: var(--shadow-md); border-color: var(--hw-primary); transform: translateY(-2px); }
.guide-card h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: var(--hw-dark); margin-bottom: 0.75rem; }
.guide-card p  { color: var(--hw-gray); font-size: var(--text-sm); line-height: 1.75; }
.guide-icon { font-size: 2rem; margin-bottom: 0.875rem; }

/* Product single */
.product-single-title { font-family: 'Playfair Display', Georgia, serif; }

/* Cart */
.cart-sidebar-header h3 { font-family: 'Playfair Display', Georgia, serif; }
.checkout-modal h3 { font-family: 'Playfair Display', Georgia, serif; }
.cart-sidebar { background: var(--hw-cream); }

/* Btn override */
.btn { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.04em; }

/* Announcement */
.announcement-bar { background: var(--hw-primary); }
.announcement-bar a { color: var(--hw-blush); }

/* Mobile responsive extras */
@media (max-width: 768px) {
  .hero-section { grid-template-columns: 1fr !important; }
  .about-split { grid-template-columns: 1fr; }
  .collections-grid { grid-template-columns: 1fr; }
  .collections-3    { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }

  /* About page: hero and markets sections stack on mobile */
  .about-hero-grid,
  .about-markets-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Hide the decorative emoji placeholder in the about hero on mobile */
  .about-hero-grid > div:last-child {
    display: none;
  }
}

/* ============================================================
   PRODUCT CARD — IMAGE LINK + ACTION ROW + BADGES
   (Port from QueerXYZ — adapted to HW colour variables)
   ============================================================ */
.product-card-img-link {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  line-height: 0;
  flex-shrink: 0;
}
.product-card-img-link .img-wrapper,
.product-card-img-link .product-placeholder {
  border-radius: 0;
  transition: transform 0.3s ease;
}
.product-card:hover .product-card-img-link img,
.product-card:hover .product-card-img-link .img-wrapper img {
  transform: scale(1.04);
}

/* Corner badges on card image */
.product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--hw-primary);
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
  z-index: 2;
}
.product-card-badge--low  { background: var(--hw-gold, #C4884A); }
.product-card-badge--out  { background: var(--hw-gray, #7A7068); }

/* Category label inside card */
.product-card-cat {
  margin-bottom: 0.3rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--hw-secondary, #4A7C59);
}
.product-card-cat a {
  color: inherit;
  text-decoration: none;
}
.product-card-cat a:hover { text-decoration: underline; }

/* Clickable product title */
.product-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.product-title a:hover { color: var(--hw-primary); }

/* Add to Cart + View button pair */
.product-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.85rem;
  align-items: stretch;
}
.product-card-actions .btn {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
.product-card-view-btn {
  flex: 0 0 auto !important;
  padding-left: 1.1rem !important;
  padding-right: 1.1rem !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* btn-sm for paired buttons */
.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: var(--text-xs);
  line-height: 1.3;
  min-height: 36px;
  box-sizing: border-box;
}

/* Short excerpt inside card */
.product-card-excerpt {
  color: var(--hw-gray);
  font-size: var(--text-sm);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* ============================================================
   SHOP PAGE — FILTER BAR & INTRO
   ============================================================ */
.shop-header {
  text-align: center;
  margin-bottom: 1.75rem;
}
.shop-intro {
  color: var(--hw-gray);
  font-size: var(--text-base);
  margin: 0.5rem auto 0;
  max-width: 520px;
  line-height: 1.6;
  font-style: italic;
}
.shop-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.shop-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.1rem;
  border-radius: 50px;
  background: var(--hw-light-bg);
  color: var(--hw-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--hw-border);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.shop-filter-pill:hover {
  border-color: var(--hw-primary);
  color: var(--hw-primary);
  background: var(--hw-white);
}
.shop-filter-pill.active {
  background: var(--hw-primary);
  color: white;
  border-color: var(--hw-primary);
}
.shop-filter-count {
  background: rgba(0,0,0,0.12);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.shop-filter-pill.active .shop-filter-count { background: rgba(255,255,255,0.25); }
.shop-filter-notice {
  text-align: center;
  margin-bottom: 1.75rem;
  font-size: var(--text-sm);
  color: var(--hw-gray);
}
.shop-filter-clear {
  display: inline-block;
  background: #FEE2E2;
  color: #991B1B;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  margin-left: 0.5rem;
  transition: background 0.15s;
}
.shop-filter-clear:hover { background: #FECACA; }

/* ============================================================
   PRODUCT GALLERY SLIDER
   ============================================================ */
.hw-gallery-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hw-gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hw-light-bg);
  line-height: 0;
}
.hw-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(44,36,22,0.18);
  z-index: 10;
  transition: background 0.15s, transform 0.15s;
  color: var(--hw-dark);
}
.hw-gallery-arrow:hover {
  background: white;
  transform: translateY(-50%) scale(1.08);
}
.hw-gallery-prev { left: 10px; }
.hw-gallery-next { right: 10px; }
.hw-gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}
.hw-gallery-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.hw-gallery-dot.active { background: white; transform: scale(1.25); }
.hw-gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.hw-gallery-thumb {
  width: calc(25% - 0.38rem);
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  background: var(--hw-light-bg);
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.65;
  line-height: 0;
}
.hw-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-gallery-thumb.active, .hw-gallery-thumb:hover {
  border-color: var(--hw-primary);
  opacity: 1;
}

/* ============================================================
   MOBILE ADMIN — touch targets, stacked forms, quick bar
   ============================================================ */
@media screen and (max-width: 782px) {
  .wp-list-table .check-column input[type="checkbox"] { width: 22px; height: 22px; margin: 4px 0; }
  .hw-row { flex-direction: column !important; gap: 12px !important; }
  .hw-row .hw-f { min-width: 100% !important; }
  .hw-er { grid-template-columns: 1fr !important; }
  .hw-og { grid-template-columns: 1fr !important; }
  .hw-ss { width: 100% !important; }
  #publish, #save-post { min-height: 44px !important; font-size: 15px !important; }
  .form-table td, .form-table th { display: block; width: 100%; padding: 8px 0 !important; }
  .form-table tr { border-bottom: 1px solid #f0f0f1; padding: 8px 0; display: block; }
  .form-table input[type="text"],
  .form-table input[type="email"],
  .form-table input[type="password"],
  .form-table input[type="number"],
  .form-table select { max-width: 100%; width: 100%; }
}

/* ============================================================
   MOBILE PRODUCT CARD BUTTONS — text inside pill on 2-col grid
   ============================================================ */
@media (max-width: 768px) {
  .product-card .btn,
  .product-card-actions .btn {
    padding: 0.65rem 0.75rem;
    font-size: 12px;
    min-height: 40px;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }
  .product-card-actions { gap: 0.4rem; }
}

@media (max-width: 480px) {
  .hw-gallery-arrow { display: none; }
  .shop-filter-bar { gap: 0.4rem; }
  .shop-filter-pill { font-size: 12px; padding: 0.4rem 0.85rem; }
}