/* ═══════════════════════════════════════
       DESIGN TOKENS — MORANDI PALETTE
       莫兰迪配色：柔和灰调，高级温暖
       
       ★ WORDPRESS CUSTOMIZATION ★
       To change colors globally in WordPress:
       → Appearance > Customize > Additional CSS
       → Override any variable below, e.g.:
         :root { --brand: #A89080; }
       All buttons, links, and accents will update automatically.
    ═══════════════════════════════════════ */
    :root {
      /* ── Primary: Warm Taupe (莫兰迪暖棕) ── */
      --brand: #A89080;
      --brand-dark: #937B6B;
      --brand-light: #F5F0EC;
      --brand-glow: rgba(168, 144, 128, 0.15);

      /* ── Accent Colors (all muted / Morandi) ── */
      --coral: #C4A088;           /* Dusty terra cotta */
      --coral-light: #FAF4EF;
      --green: #8B9E83;           /* Sage green */
      --green-light: #F2F5F0;
      --red: #C0908A;             /* Dusty rose */
      --star: #C4A86A;            /* Muted gold */

      /* ── Neutral Tones (warm gray base) ── */
      --bg: #F7F5F3;
      --white: #FFFFFF;
      --dark: #3D3832;
      --dark-2: #4A443D;
      --gray-50: #F9F7F5;
      --gray-100: #F0EDEA;
      --gray-200: #E0DBD5;
      --gray-300: #CCC5BC;
      --gray-400: #A39B92;
      --gray-500: #7D756C;
      --gray-600: #5E5750;
      --gray-700: #4A443D;

      /* ── Typography ── */
      --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-display: 'Instrument Serif', Georgia, serif;

      /* ── Layout ── */
      --site-max: 1180px;
      --site-pad: 44px;
      --radius-xs: 6px;
      --radius-sm: 10px;
      --radius: 14px;
      --radius-lg: 20px;
      --shadow-sm: 0 1px 3px rgba(61,56,50,0.04), 0 1px 2px rgba(61,56,50,0.03);
      --shadow: 0 4px 16px rgba(61,56,50,0.06);
      --shadow-lg: 0 12px 40px rgba(61,56,50,0.1);
      --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ═══════ RESET ═══════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      color: var(--dark);
      background: var(--bg);
      font-size: 16px;
      line-height: 1.65;
      letter-spacing: 0;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; }
    button { font-family: var(--font); cursor: pointer; border: none; background: none; }

    /* ═══════ LAYOUT ═══════ */
    .container { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-pad); }

    /* ═══════════════════════════════════════
       NAVIGATION
    ═══════════════════════════════════════ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
    }
    .nav-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      gap: 24px;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .nav-logo-mark {
      width: 38px;
      height: 38px;
      background: var(--brand);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .nav-logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .nav-logo-mark svg { width: 22px; height: 22px; }
    .nav-logo-text {
      font-weight: 700;
      font-size: 20px;
      color: var(--dark);
      letter-spacing: -0.02em;
    }
    .nav-logo-text span { color: var(--brand); }

    /* Search */
    .nav-search {
      flex: 1;
      max-width: 520px;
      position: relative;
    }
    .nav-search input {
      width: 100%;
      padding: 11px 16px 11px 44px;
      border: 2px solid var(--gray-200);
      border-radius: 60px;
      font-size: 14px;
      font-family: var(--font);
      background: var(--gray-50);
      transition: var(--transition);
      color: var(--dark);
    }
    .nav-search input:focus {
      outline: none;
      border-color: var(--brand);
      background: var(--white);
      box-shadow: 0 0 0 4px var(--brand-glow);
    }
    .nav-search input::placeholder { color: var(--gray-400); }
    .nav-search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gray-400);
      pointer-events: none;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .nav-link {
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-600);
      border-radius: 8px;
      transition: var(--transition);
    }
    .nav-link:hover { color: var(--dark); background: var(--gray-100); }
    .nav-cart {
      position: relative;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      transition: var(--transition);
      color: var(--gray-600);
    }
    .nav-cart:hover { background: var(--gray-100); color: var(--dark); }
    .nav-cart-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 16px;
      height: 16px;
      background: var(--coral);
      color: white;
      font-size: 10px;
      font-weight: 700;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ═══════════════════════════════════════
       SHOP BANNER
    ═══════════════════════════════════════ */
    .shop-banner {
      width: 100%;
      height: 280px;
      background: linear-gradient(135deg, #6B6058 0%, #3D3832 100%);
      overflow: hidden;
      position: relative;
    }
    .shop-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .shop-banner-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.3));
    }

    /* ═══════════════════════════════════════
       SHOP HEADER (profile info)
    ═══════════════════════════════════════ */
    .shop-header {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      padding: 0 0 24px;
    }
    .shop-header-inner {
      display: flex;
      align-items: flex-end;
      gap: 24px;
      margin-top: -40px;
      position: relative;
      z-index: 2;
    }
    .shop-avatar {
      width: 100px;
      height: 100px;
      border-radius: var(--radius);
      border: 4px solid var(--white);
      background: var(--brand);
      box-shadow: var(--shadow);
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .shop-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .shop-avatar-fallback {
      font-size: 32px;
      font-weight: 700;
      color: white;
      font-family: var(--font-display);
    }
    .shop-info { flex: 1; padding-bottom: 4px; }
    .shop-name {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 4px;
    }
    .shop-tagline {
      font-size: 15px;
      color: var(--gray-500);
      margin-bottom: 12px;
    }
    .shop-stats {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .shop-stat {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: var(--gray-600);
    }
    .shop-stat strong {
      color: var(--dark);
      font-weight: 700;
    }
    .shop-stat-sep {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--gray-300);
    }
    .shop-star { color: var(--star); }

    .shop-header-actions {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
      padding-bottom: 4px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 24px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 60px;
      transition: var(--transition);
      white-space: nowrap;
    }
    .btn-primary {
      background: var(--brand);
      color: var(--white);
    }
    .btn-primary:hover {
      background: var(--brand-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px var(--brand-glow);
    }
    .btn-secondary {
      background: var(--white);
      color: var(--dark);
      border: 1.5px solid var(--gray-200);
    }
    .btn-secondary:hover {
      border-color: var(--gray-300);
      background: var(--gray-50);
    }

    /* ═══════════════════════════════════════
       ANNOUNCEMENT BAR
    ═══════════════════════════════════════ */
    .announcement {
      background: var(--coral-light);
      border: 1px solid #DDD0C4;
      border-radius: var(--radius-sm);
      padding: 14px 20px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: var(--gray-700);
    }
    .announcement-icon { font-size: 18px; flex-shrink: 0; }
    .announcement strong { color: var(--dark); }
    .announcement a { color: var(--brand); font-weight: 600; }
    .announcement a:hover { text-decoration: underline; }

    /* ═══════════════════════════════════════
       CATEGORY TABS
    ═══════════════════════════════════════ */
    .categories {
      padding: 20px 0 0;
      background: var(--white);
    }
    .category-tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      padding-bottom: 1px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .category-tabs::-webkit-scrollbar { display: none; }
    .cat-tab {
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-500);
      border-radius: 60px;
      white-space: nowrap;
      transition: var(--transition);
      cursor: pointer;
      border: 1.5px solid transparent;
    }
    .cat-tab:hover { color: var(--dark); background: var(--gray-50); }
    .cat-tab.active {
      color: var(--brand);
      background: var(--brand-light);
      border-color: rgba(168, 144, 128, 0.2);
      font-weight: 600;
    }
    .cat-tab .cat-count {
      font-size: 12px;
      color: var(--gray-400);
      margin-left: 4px;
      font-weight: 400;
    }
    .cat-tab.active .cat-count { color: var(--brand); opacity: 0.7; }

    /* ═══════════════════════════════════════
       TOOLBAR (sort / filter)
    ═══════════════════════════════════════ */
    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0 16px;
    }
    .toolbar-count {
      font-size: 14px;
      color: var(--gray-500);
    }
    .toolbar-count strong { color: var(--dark); font-weight: 600; }
    .toolbar-sort {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .toolbar-sort label {
      font-size: 13px;
      color: var(--gray-500);
    }
    .toolbar-sort select {
      padding: 8px 32px 8px 12px;
      border: 1.5px solid var(--gray-200);
      border-radius: var(--radius-xs);
      font-size: 13px;
      font-family: var(--font);
      font-weight: 500;
      background: var(--white);
      color: var(--dark);
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }

    /* ═══════════════════════════════════════
       PRODUCT GRID
    ═══════════════════════════════════════ */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding-bottom: 40px;
    }

    .product-card {
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--gray-200);
      transition: var(--transition);
      position: relative;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: transparent;
    }

    /* Image */
    .product-img {
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
      background: var(--gray-100);
    }
    .product-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .product-card:hover .product-img img { transform: scale(1.05); }

    /* Badges */
    .product-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      z-index: 2;
    }
    .badge-sale {
      background: var(--red);
      color: white;
    }
    .badge-new {
      background: var(--green);
      color: white;
    }
    .badge-best {
      background: var(--coral);
      color: white;
    }

    /* Wishlist */
    .product-heart {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 34px;
      height: 34px;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: var(--transition);
      opacity: 0;
      cursor: pointer;
      border: none;
    }
    .product-card:hover .product-heart { opacity: 1; }
    .product-heart:hover { background: var(--red); color: white; }
    .product-heart svg { width: 16px; height: 16px; }

    /* Info */
    .product-body { padding: 16px; }
    .product-category {
      font-size: 12px;
      color: var(--brand);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .product-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--dark);
      line-height: 1.45;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-card:hover .product-title { color: var(--brand); }

    /* Rating */
    .product-rating {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }
    .product-stars {
      display: flex;
      gap: 1px;
      color: var(--star);
      font-size: 13px;
    }
    .product-review-count {
      font-size: 12px;
      color: var(--gray-400);
    }

    /* Price */
    .product-price {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .product-price .woocommerce-Price-amount {
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
    }
    .product-price del .woocommerce-Price-amount {
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-400);
    }
    .product-price ins {
      text-decoration: none;
    }
    .price-current {
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
    }
    .price-original {
      font-size: 14px;
      color: var(--gray-400);
      text-decoration: line-through;
    }
    .price-discount {
      font-size: 12px;
      font-weight: 700;
      color: var(--green);
    }
    .product-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 8px;
      padding: 4px 8px;
      background: var(--green-light);
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      color: var(--green);
    }

    /* ═══════════════════════════════════════
       FEATURED SECTION
    ═══════════════════════════════════════ */
    .featured-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-top: 20px;
    }
    .featured-title {
      font-family: var(--font-display);
      font-size: 26px;
      font-style: italic;
    }
    .featured-link {
      font-size: 14px;
      font-weight: 600;
      color: var(--brand);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .featured-link:hover { text-decoration: underline; }

    /* ═══════════════════════════════════════
       REVIEWS SECTION
    ═══════════════════════════════════════ */
    .reviews-section {
      padding: 60px 0;
      background: var(--white);
      border-top: 1px solid var(--gray-200);
    }
    .reviews-header {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 32px;
    }
    .reviews-score {
      text-align: center;
    }
    .reviews-num {
      font-size: 48px;
      font-weight: 700;
      line-height: 1;
      color: var(--dark);
    }
    .reviews-stars-big {
      color: var(--star);
      font-size: 18px;
      margin: 6px 0;
      letter-spacing: 2px;
    }
    .reviews-total {
      font-size: 14px;
      color: var(--gray-500);
    }
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .review-card {
      background: var(--gray-50);
      border-radius: var(--radius);
      padding: 24px;
      border: 1px solid var(--gray-200);
    }
    .review-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .review-stars {
      color: var(--star);
      font-size: 14px;
      letter-spacing: 1px;
    }
    .review-date {
      font-size: 12px;
      color: var(--gray-400);
    }
    .review-text {
      font-size: 14px;
      color: var(--gray-600);
      line-height: 1.7;
      margin-bottom: 16px;
    }
    .review-author {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .review-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--brand-light);
      color: var(--brand);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
    }
    .review-name { font-size: 13px; font-weight: 600; }
    .review-verified {
      font-size: 11px;
      color: var(--green);
      font-weight: 600;
    }

    /* ═══════════════════════════════════════
       ABOUT SECTION
    ═══════════════════════════════════════ */
    .about-section {
      padding: 60px 0;
      border-top: 1px solid var(--gray-200);
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .about-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--brand);
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 12px;
    }
    .about-title {
      font-family: var(--font-display);
      font-size: 36px;
      font-style: italic;
      margin-bottom: 20px;
      line-height: 1.25;
    }
    .about-text {
      font-size: 15px;
      color: var(--gray-600);
      line-height: 1.8;
      margin-bottom: 16px;
    }
    .about-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 28px;
    }
    .about-feat {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 500;
    }
    .about-feat-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--brand-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .about-image {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .about-image img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
    }

    /* ═══════════════════════════════════════
       FAQ SECTION
    ═══════════════════════════════════════ */
    .faq-section {
      padding: 60px 0;
      background: var(--white);
      border-top: 1px solid var(--gray-200);
    }
    .faq-title {
      font-family: var(--font-display);
      font-size: 30px;
      font-style: italic;
      text-align: center;
      margin-bottom: 40px;
    }
    .faq-list {
      max-width: 720px;
      margin: 0 auto;
    }
    .faq-item { border-bottom: 1px solid var(--gray-200); }
    .faq-q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 20px 0;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 600;
      color: var(--dark);
      text-align: left;
      transition: var(--transition);
    }
    .faq-q:hover { color: var(--brand); }
    .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--gray-100);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--gray-400);
      transition: var(--transition);
      flex-shrink: 0;
    }
    .faq-item.open .faq-icon {
      background: var(--brand);
      color: white;
      transform: rotate(45deg);
    }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }
    .faq-a-inner {
      padding: 0 0 20px;
      font-size: 14px;
      color: var(--gray-500);
      line-height: 1.8;
    }
    .faq-item.open .faq-a { max-height: 300px; }

    /* ═══════════════════════════════════════
       NEWSLETTER CTA
    ═══════════════════════════════════════ */
    .newsletter {
      padding: 60px 0;
      border-top: 1px solid var(--gray-200);
    }
    .newsletter-box {
      background: var(--dark);
      border-radius: var(--radius-lg);
      padding: 56px;
      text-align: center;
      color: var(--white);
      position: relative;
      overflow: hidden;
    }
    .newsletter-box::before {
      content: '';
      position: absolute;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(168,144,128,0.25) 0%, transparent 70%);
      top: -200px;
      right: -200px;
    }
    .newsletter-title {
      font-family: var(--font-display);
      font-size: 32px;
      font-style: italic;
      margin-bottom: 12px;
      position: relative;
    }
    .newsletter-desc {
      font-size: 15px;
      color: rgba(255,255,255,0.6);
      margin-bottom: 28px;
      position: relative;
    }
    .newsletter-form {
      display: flex;
      gap: 10px;
      max-width: 440px;
      margin: 0 auto;
      position: relative;
    }
    .newsletter-form input {
      flex: 1;
      padding: 14px 20px;
      border: 2px solid rgba(255,255,255,0.15);
      border-radius: 60px;
      background: rgba(255,255,255,0.08);
      color: white;
      font-size: 14px;
      font-family: var(--font);
    }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus {
      outline: none;
      border-color: var(--brand);
      background: rgba(255,255,255,0.12);
    }
    .newsletter-form button {
      padding: 14px 28px;
      background: var(--brand);
      color: white;
      border-radius: 60px;
      font-weight: 600;
      font-size: 14px;
      transition: var(--transition);
      white-space: nowrap;
    }
    .newsletter-form button:hover {
      background: var(--brand-dark);
      transform: translateY(-1px);
    }

    /* ═══════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════ */
    .footer {
      padding: 40px 0;
      border-top: 1px solid var(--gray-200);
      background: var(--white);
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .footer-copy {
      font-size: 13px;
      color: var(--gray-400);
    }
    .footer-links {
      display: flex;
      gap: 24px;
    }
    .footer-links a {
      font-size: 13px;
      color: var(--gray-400);
      transition: var(--transition);
    }
    .footer-links a:hover { color: var(--dark); }

    /* ═══════════════════════════════════════
       "LOAD MORE" / PAGINATION
    ═══════════════════════════════════════ */
    .load-more {
      text-align: center;
      padding: 20px 0 60px;
    }
    .load-more .btn {
      padding: 14px 40px;
      font-size: 15px;
    }
    .empty-products {
      grid-column: 1 / -1;
      padding: 48px 28px;
      border: 1px dashed var(--gray-300);
      border-radius: var(--radius);
      background: var(--gray-50);
      text-align: center;
      color: var(--gray-600);
    }
    .empty-products h3 {
      margin-bottom: 8px;
      color: var(--dark);
      font-size: 1.2rem;
    }

    /* ═══════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════ */
    @media (max-width: 1024px) {
      .product-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
      .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
      .nav-search { display: none; }
      .nav-link { display: none; }
      .shop-banner { height: 180px; }
      .shop-header-inner { flex-wrap: wrap; }
      .shop-header-actions { width: 100%; }
      .shop-header-actions .btn { flex: 1; }
      .reviews-grid { grid-template-columns: 1fr; }
      .about-grid { grid-template-columns: 1fr; gap: 32px; }
      .about-image { order: -1; }
      .newsletter-box { padding: 36px 24px; }
      .newsletter-form { flex-direction: column; }
      .footer-inner { flex-direction: column; gap: 12px; }
    }
    @media (max-width: 480px) {
      .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .product-body { padding: 12px; }
      .product-title { font-size: 13px; }
      .price-current { font-size: 16px; }
      .shop-stats { gap: 12px; }
      .shop-name { font-size: 22px; }
    }

    /* ═══════════════════════════════════════
       GLOBAL WORDPRESS + WOOCOMMERCE POLISH
    ═══════════════════════════════════════ */
    .site-header {
      background: rgba(255,255,255,0.96);
      border-bottom: 1px solid var(--gray-200);
    }
    .site-header-inner,
    .site-footer-inner,
    .site-shell {
      width: min(var(--site-max), calc(100% - (var(--site-pad) * 2)));
      margin: 0 auto;
    }
    .site-header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 22px 0 18px;
    }
    .site-brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      color: var(--dark);
    }
    .site-brand strong {
      display: block;
      font-size: 28px;
      line-height: 1.1;
      font-weight: 700;
    }
    .site-brand small {
      display: block;
      margin-top: 6px;
      color: var(--gray-600);
      font-size: 15px;
      font-weight: 500;
    }
    .site-logo img,
    .custom-logo {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      object-fit: cover;
    }
    .site-nav {
      display: flex;
      align-items: center;
      gap: 18px;
      color: var(--gray-600);
      font-weight: 600;
      font-size: 14px;
    }
    .site-nav a:hover { color: var(--brand); }
    .site-shell {
      padding: 42px 0 72px;
    }
    .site-footer {
      border-top: 1px solid var(--gray-200);
      background: var(--white);
    }
    .site-footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding: 28px 0;
      color: var(--gray-500);
      font-size: 13px;
    }
    .site-shell h1,
    .site-shell h2,
    .site-shell h3,
    .woocommerce div.product .product_title {
      color: var(--dark);
      letter-spacing: 0;
      line-height: 1.16;
    }
    .site-shell h1,
    .woocommerce div.product .product_title {
      max-width: 780px;
      font-size: clamp(32px, 3vw, 46px);
      font-weight: 700;
      margin: 0 0 18px;
    }
    .woocommerce .woocommerce-breadcrumb {
      margin: 0 0 24px;
      color: var(--gray-500);
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--gray-200);
      padding-bottom: 14px;
    }
    .woocommerce .woocommerce-breadcrumb a {
      color: var(--gray-600);
    }
    .woocommerce .woocommerce-breadcrumb a:hover {
      color: var(--brand);
    }
    .woocommerce div.product {
      display: grid;
      grid-template-columns: minmax(360px, 0.92fr) minmax(360px, 0.78fr);
      gap: 56px;
      align-items: start;
    }
    .woocommerce div.product div.images,
    .woocommerce-page div.product div.images,
    .woocommerce div.product div.summary,
    .woocommerce-page div.product div.summary {
      width: auto;
      float: none;
      margin: 0;
    }
    .woocommerce div.product div.images img {
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      background: var(--white);
    }
    .woocommerce div.product .summary {
      padding-top: 10px;
    }
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
      color: var(--brand-dark);
      font-size: 22px;
      font-weight: 700;
      margin: 14px 0 18px;
    }
    .woocommerce div.product p.price del,
    .woocommerce div.product span.price del {
      color: var(--gray-400);
      opacity: 1;
      font-weight: 500;
      margin-right: 8px;
    }
    .woocommerce div.product p.price ins,
    .woocommerce div.product span.price ins {
      text-decoration: none;
    }
    .woocommerce .quantity .qty {
      width: 64px;
      min-height: 44px;
      border: 1px solid var(--gray-300);
      border-radius: var(--radius-xs);
      padding: 8px;
      color: var(--dark);
      font-family: var(--font);
      font-size: 16px;
    }
    .woocommerce button.button,
    .woocommerce a.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .wp-element-button,
    button.single_add_to_cart_button {
      min-height: 46px;
      border-radius: var(--radius-sm) !important;
      background: var(--brand) !important;
      color: var(--white) !important;
      border: 0 !important;
      padding: 12px 22px !important;
      font-family: var(--font);
      font-size: 15px !important;
      font-weight: 700 !important;
      line-height: 1.2 !important;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
    }
    .woocommerce button.button:hover,
    .woocommerce a.button:hover,
    .woocommerce input.button:hover,
    .woocommerce #respond input#submit:hover,
    .wp-element-button:hover,
    button.single_add_to_cart_button:hover {
      background: var(--brand-dark) !important;
      transform: translateY(-1px);
    }
    .woocommerce span.onsale {
      min-width: 54px;
      min-height: 54px;
      padding: 0;
      border-radius: 999px;
      background: var(--green) !important;
      color: var(--white);
      font-size: 14px;
      font-weight: 700;
      line-height: 54px;
      box-shadow: var(--shadow);
    }
    .woocommerce div.product .product_meta {
      margin-top: 20px;
      color: var(--gray-600);
      font-size: 15px;
    }
    .woocommerce div.product .product_meta a {
      color: var(--brand-dark);
      font-weight: 600;
    }
    .woocommerce div.product .woocommerce-tabs {
      grid-column: 1 / -1;
      margin-top: 48px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      padding: 24px;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs {
      padding: 0;
      margin: 0 0 22px;
      border-bottom: 1px solid var(--gray-200);
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs::before,
    .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
    .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
      display: none !important;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
      border: 0;
      background: transparent;
      padding: 0 18px 10px 0;
      margin: 0 18px 0 0;
      border-radius: 0;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
      border-bottom: 2px solid var(--brand);
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
      color: var(--gray-600);
      font-weight: 700;
      padding: 0;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
      color: var(--dark);
    }
    .woocommerce .related.products,
    .woocommerce .upsells.products {
      grid-column: 1 / -1;
      margin-top: 42px;
    }
    .woocommerce .related.products > h2,
    .woocommerce .upsells.products > h2 {
      font-family: var(--font-display);
      font-size: 30px;
      font-style: italic;
      font-weight: 400;
      margin-bottom: 20px;
    }
    .woocommerce ul.products li.product {
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      background: var(--white);
      overflow: hidden;
      padding-bottom: 16px;
      box-shadow: var(--shadow-sm);
    }
    .woocommerce ul.products li.product a img {
      margin: 0 0 14px;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .price {
      padding: 0 16px;
    }
    .woocommerce ul.products li.product .button {
      margin-left: 16px;
    }
    @media (max-width: 900px) {
      :root { --site-pad: 22px; }
      .site-header-inner,
      .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
      }
      .woocommerce div.product {
        display: block;
      }
      .woocommerce div.product .summary {
        margin-top: 28px;
      }
    }
    @media (max-width: 520px) {
      :root { --site-pad: 18px; }
      .site-brand strong { font-size: 24px; }
      .site-shell h1,
      .woocommerce div.product .product_title {
        font-size: 30px;
      }
    }

    /* ═══════════════════════════════════════
       WORDPRESS BUTTON OVERRIDES
       Copy any of these to WordPress → Appearance → Customize → Additional CSS
       to change individual button styles without touching the template.
    ═══════════════════════════════════════ */
    /*
    #btn-contact    { background: var(--brand); color: #fff; border-radius: 60px; }
    #btn-follow     { border-color: var(--brand); color: var(--brand); }
    #btn-load-more  { background: var(--brand); color: #fff; border: none; }
    #btn-subscribe  { background: var(--coral); }
    #btn-nav-about  { color: var(--brand); }
    #btn-nav-help   { color: var(--brand); }
    .cat-tab.active { background: var(--brand-light); color: var(--brand); }
    
    — To change ALL colors at once, override the root variable:
    :root { --brand: #B09080; }
    
    — To change just one button:
    #btn-contact { background: #C4A088; }
    */