/*
/*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: December 2025 *

/*
Theme Name: QUEER XYZ custom theme by Gravity Projex 
Theme URI: https://queerxyz.com
Description: Queer XYZ custom ecom site by Gravity Projex — Optimised v3.1
Author: Gravity Projex
Author URI: https://gravityprojex.com
Version: 3.1.0
Text domain: queerxyz
License: Copyright (c) Gravity Projex 2026
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand palette */
  --qxyz-primary: #3CBBB1;
  --qxyz-primary-hover: #2fa89f;
  --qxyz-primary-light: rgba(60,187,177,.08);
  --qxyz-gold: #FFD700;
  --qxyz-red: #FF6B6B;
  --qxyz-teal: #4ECDC4;
  --qxyz-purple: #A855F7;
  --qxyz-pink: #EC4899;

  /* Neutrals */
  --qxyz-dark: #1F2937;
  --qxyz-gray: #6B7280;
  --qxyz-gray-light: #9CA3AF;
  --qxyz-border: #E5E7EB;
  --qxyz-light-bg: #F9FAFB;
  --qxyz-white: #FFFFFF;

  /* Feedback */
  --qxyz-success: #10B981;
  --qxyz-warning: #F59E0B;
  --qxyz-danger: #EF4444;
  --qxyz-info: #3B82F6;

  /* Shadows (layered for depth) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --shadow-xl: 0 24px 48px rgba(0,0,0,.16);

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --transition-fast: 180ms var(--ease-out);
  --transition-base: 280ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* Typography scale */
  --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.5rem;
  --text-5xl: 3.5rem;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(60,187,177,.35);
}

/* ============================================================
   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', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--qxyz-dark);
  background: var(--qxyz-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* Focus states for accessibility */
: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 — sticky, glassmorphism on scroll
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--qxyz-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.875rem;
  padding-bottom: 0.875rem;
  gap: 1rem;
}

/* Logo */
.site-logo {
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  transition: transform var(--transition-fast);
}
.site-logo:hover { transform: scale(1.03); }
.site-logo .q  { color: var(--qxyz-gold); }
.site-logo .u  { color: var(--qxyz-red); }
.site-logo .e1 { color: var(--qxyz-teal); }
.site-logo .e2 { color: var(--qxyz-purple); }
.site-logo .r  { color: var(--qxyz-pink); }
.site-logo .xyz { color: var(--qxyz-dark); margin-left: 0.35rem; font-weight: 700; }

/* Desktop nav */
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}
.main-nav a {
  color: var(--qxyz-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(--qxyz-primary);
  border-radius: 1px;
  transition: width var(--transition-base);
}
.main-nav a:hover { color: var(--qxyz-primary); }
.main-nav a:hover::after { width: 100%; }

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

/* Mobile nav overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.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(--qxyz-white);
  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 {
  /* Clearly visible ✕ button — large tap target, visible background */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  background: var(--qxyz-light, #f3f4f6);
  border: 2px solid var(--qxyz-border, #e5e7eb);
  border-radius: 50%;
  cursor: pointer;
  color: var(--qxyz-dark, #1f2937);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  z-index: 10;
  flex-shrink: 0;
}
.mobile-nav-panel .close-mobile-nav:hover {
  background: var(--qxyz-primary-light, #e0f7f6);
  border-color: var(--qxyz-teal, #3CBBB1);
  color: var(--qxyz-teal, #3CBBB1);
  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(--qxyz-border); }
.mobile-nav-panel a {
  display: block;
  padding: 1rem 0;
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--qxyz-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.mobile-nav-panel a:hover { color: var(--qxyz-primary); }

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

/* ============================================================
   BUTTONS — refined pill style
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 2rem;
  background: var(--qxyz-primary);
  color: var(--qxyz-white);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  line-height: 1.4;
  white-space: nowrap;
  box-sizing: border-box; /* prevent padding from escaping the border */
}
.btn:hover {
  background: var(--qxyz-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(60,187,177,.3);
}
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

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

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

.btn-danger {
  background: var(--qxyz-danger);
  color: var(--qxyz-white);
}
.btn-danger:hover {
  background: #DC2626;
  box-shadow: 0 6px 20px rgba(239,68,68,.3);
}

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

.btn-lg {
  padding: 1rem 3rem;
  font-size: var(--text-base);
}

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

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

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
  background: linear-gradient(135deg, #3CBBB1 0%, #35a89f 40%, #4ECDC4 100%);
  color: white;
  padding: 5rem 0 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.12) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(168,85,247,.08) 0%, transparent 40%);
  pointer-events: none;
}
.hero-section .container { position: relative; z-index: 1; }

.hero-section h1 {
  font-size: var(--text-5xl);
  font-weight: 300;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.hero-section h1 span { font-weight: 700; }

.hero-section p {
  font-size: var(--text-xl);
  margin-bottom: 2.5rem;
  opacity: 0.92;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: 5rem 0;
}

.section-title {
  font-size: var(--text-4xl);
  font-weight: 300;
  text-align: center;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.section-title span {
  font-weight: 700;
  color: var(--qxyz-primary);
}

.section-description {
  text-align: center;
  color: var(--qxyz-gray);
  max-width: 560px;
  margin: 0 auto 3rem;
  font-size: var(--text-base);
  line-height: 1.7;
}

.bg-light { background: var(--qxyz-light-bg); }
.text-center { text-align: center; }

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0;
}

.category-card {
  background: var(--qxyz-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: 1px solid transparent;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--qxyz-primary);
}

.category-emoji {
  font-size: 2.25rem;
  display: block;
  margin-bottom: 0.75rem;
  transition: transform var(--transition-base);
}
.category-card:hover .category-emoji { transform: scale(1.15); }

.category-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--qxyz-dark);
  transition: color var(--transition-fast);
}
.category-card:hover .category-name { color: var(--qxyz-primary); }

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

.product-card {
  background: var(--qxyz-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(--qxyz-border);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.product-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.product-card:hover img { transform: scale(1.03); }

.product-card .img-wrapper {
  overflow: hidden;
  position: relative;
}

.product-placeholder {
  width: 100%; height: 260px;
  background: linear-gradient(135deg, var(--qxyz-primary) 0%, var(--qxyz-teal) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
}

.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: 600;
  margin-bottom: 0.35rem;
  color: var(--qxyz-dark);
  line-height: 1.4;
}

.product-description {
  color: var(--qxyz-gray);
  font-size: var(--text-sm);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.product-price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--qxyz-primary);
  margin-bottom: 1rem;
}

/* Quick add-to-cart button on product card (single-button cards only — not action pairs) */
.product-card .product-info > .btn { width: 100%; }

/* ============================================================
   FEATURES STRIP
   ============================================================ */
.features-section {
  background: linear-gradient(135deg, rgba(60,187,177,.04) 0%, rgba(168,85,247,.04) 100%);
  padding: 4.5rem 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  text-align: center;
}

.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--qxyz-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base);
}
.feature-icon:hover { transform: translateY(-2px); }
.feature-icon svg { width: 1.75rem; height: 1.75rem; color: var(--qxyz-primary); }

.feature-title {
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: var(--text-base);
}

.feature-desc {
  color: var(--qxyz-gray);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-section {
  background: var(--qxyz-primary);
  color: white;
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--qxyz-white);
  border-top: 1px solid var(--qxyz-border);
  padding: 3rem 0 2rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-tagline {
  color: var(--qxyz-gray);
  font-size: var(--text-sm);
  margin-top: 0.4rem;
}

.footer-nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-nav a {
  color: var(--qxyz-gray);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
}
.footer-nav a:hover { color: var(--qxyz-primary); }

.copyright {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--qxyz-border);
  color: var(--qxyz-gray-light);
  font-size: var(--text-xs);
}
.copyright a { color: var(--qxyz-primary); text-decoration: none; font-weight: 600; }

/* ============================================================
   CART SIDEBAR
   ============================================================ */
.cart-sidebar {
  position: fixed;
  right: -420px;
  top: 0;
  width: 400px;
  max-width: 92vw;
  height: 100%;
  background: var(--qxyz-white);
  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(--qxyz-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.cart-sidebar-header h3 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.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(--qxyz-border);
  flex-shrink: 0;
  background: var(--qxyz-white);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: 1rem;
}

.cart-empty-msg {
  text-align: center;
  color: var(--qxyz-gray);
  padding: 3rem 0;
  font-size: var(--text-sm);
}

/* Cart item row */
.cart-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--qxyz-border);
}
.cart-item-img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.cart-item-details { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-price {
  color: var(--qxyz-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 0.4rem;
}
.cart-qty-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cart-qty-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--qxyz-border);
  border-radius: var(--radius-sm);
  background: var(--qxyz-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all var(--transition-fast);
}
.cart-qty-btn:hover {
  border-color: var(--qxyz-primary);
  color: var(--qxyz-primary);
}
.cart-qty-value {
  min-width: 28px;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Overlay behind cart */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1999;
  display: none;
  transition: opacity var(--transition-base);
}
.cart-overlay.active { display: block; }

/* ============================================================
   CHECKOUT MODAL  — Stripe one-click
   ============================================================ */
.checkout-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.checkout-overlay.active { display: flex; }

.checkout-modal {
  background: var(--qxyz-white);
  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: 700;
  margin-bottom: 0.25rem;
}
.checkout-modal .checkout-subtitle {
  color: var(--qxyz-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(--qxyz-gray);
  transition: color var(--transition-fast);
}
.checkout-close:hover { color: var(--qxyz-dark); }

/* Stripe checkout button style */
.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(--qxyz-gray-light);
}

/* Order summary in checkout */
.checkout-summary {
  background: var(--qxyz-light-bg);
  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;
}
.checkout-summary-row.total {
  font-weight: 700;
  font-size: var(--text-base);
  border-top: 1px solid var(--qxyz-border);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

/* Form fields */
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--qxyz-dark);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--qxyz-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: inherit;
  color: var(--qxyz-dark);
  background: var(--qxyz-white);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--qxyz-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--qxyz-gray-light);
}
.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(--qxyz-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.order-success h3 {
  font-size: var(--text-2xl);
  margin-bottom: 0.5rem;
}
.order-success p {
  color: var(--qxyz-gray);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  top: 80px; right: 20px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--qxyz-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(--qxyz-success); }
.toast.error   { background: var(--qxyz-danger); }
.toast.info    { background: var(--qxyz-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 — Manager-friendly
   ============================================================ */
.admin-wrapper {
  min-height: 100vh;
  background: var(--qxyz-light-bg);
}

/* Dashboard header bar */
.dash-header {
  background: var(--qxyz-white);
  border-bottom: 1px solid var(--qxyz-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: 700;
}
.dash-header-subtitle {
  color: var(--qxyz-gray);
  font-size: var(--text-sm);
  margin-top: 0.15rem;
}
.dash-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Stats cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--qxyz-white);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--qxyz-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;
}
.stat-icon svg { width: 22px; height: 22px; color: white; stroke: white; }

.stat-icon.products  { background: linear-gradient(135deg, #3CBBB1, #4ECDC4); }
.stat-icon.orders    { background: linear-gradient(135deg, #EC4899, #A855F7); }
.stat-icon.revenue   { background: linear-gradient(135deg, #10B981, #059669); }
.stat-icon.customers { background: linear-gradient(135deg, #F59E0B, #D97706); }

.stat-label {
  font-size: var(--text-sm);
  color: var(--qxyz-gray);
  margin-bottom: 0.15rem;
}
.stat-value {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--qxyz-dark);
  line-height: 1.1;
}

.stat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--qxyz-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: gap var(--transition-fast);
}
.stat-link:hover { gap: 0.5rem; }
.stat-link svg { width: 14px; height: 14px; }

/* Quick actions panel */
.quick-actions {
  background: var(--qxyz-white);
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--qxyz-border);
  margin-bottom: 2rem;
}
.quick-actions h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--qxyz-dark);
}
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

/* Action cards — big touch targets for non-tech users */
.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(--qxyz-border);
  text-decoration: none;
  color: var(--qxyz-dark);
  transition: all var(--transition-base);
  text-align: center;
  cursor: pointer;
  background: var(--qxyz-white);
}
.action-card:hover {
  border-color: var(--qxyz-primary);
  background: var(--qxyz-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;
}
.action-card-icon svg { width: 24px; height: 24px; color: white; stroke: white; }
.action-card-label {
  font-weight: 600;
  font-size: var(--text-sm);
}
.action-card-hint {
  font-size: var(--text-xs);
  color: var(--qxyz-gray);
  margin-top: -0.25rem;
}

/* Recent orders table */
.dash-panel {
  background: var(--qxyz-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--qxyz-border);
  overflow: hidden;
  margin-bottom: 2rem;
}
.dash-panel-header {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--qxyz-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-panel-header h2 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.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: 700;
  color: var(--qxyz-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--qxyz-light-bg);
  border-bottom: 1px solid var(--qxyz-border);
}
.dash-table td {
  padding: 0.875rem 1.75rem;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--qxyz-border);
  vertical-align: middle;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr:hover td { background: rgba(60,187,177,.02); }

/* Status pills */
.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: #DBEAFE; color: #1E40AF; }
.status-preparing  { background: #E9D5FF; color: #6B21A8; }
.status-ready      { background: #D1FAE5; color: #065F46; }
.status-completed  { background: #E5E7EB; color: #374151; }
.status-cancelled  { background: #FEE2E2; color: #991B1B; }

.dash-empty {
  text-align: center;
  color: var(--qxyz-gray);
  padding: 3rem 1rem;
  font-size: var(--text-sm);
}

/* Help hint cards for dashboard */
.help-strip {
  background: linear-gradient(135deg, var(--qxyz-primary-light), rgba(168,85,247,.05));
  border: 1px solid rgba(60,187,177,.15);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-size: var(--text-sm);
  color: var(--qxyz-dark);
}
.help-strip-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--qxyz-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.help-strip-icon svg { width: 18px; height: 18px; color: white; stroke: white; }
.help-strip strong { font-weight: 700; }

/* ============================================================
   LOADING / SKELETON STATES
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 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; }
}

/* ============================================================
   HERO — ENHANCED (eyebrow, actions strip, trust strip, image)
   ============================================================ */
.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  color: white;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.25rem;
  backdrop-filter: blur(4px);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.btn-hero-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,.65);
  color: white;
}
.btn-hero-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: white;
}

.hero-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
  color: rgba(255,255,255,.85);
  font-weight: 500;
  flex-wrap: wrap;
}
.hero-trust-divider {
  opacity: 0.45;
  font-size: 1.2em;
}

/* Hero with background image */
.hero-section.hero-with-image {
  min-height: 540px;
  display: flex;
  align-items: center;
  background: var(--qxyz-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.42;
}
.hero-section.hero-with-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(31,41,55,.75) 0%, rgba(60,187,177,.35) 100%);
  z-index: 1;
  pointer-events: none;
}

/* About hero variant */
.hero-about {
  background: linear-gradient(135deg, #3CBBB1 0%, #2fa89f 40%, #4ECDC4 100%);
}
.hero-about.hero-with-image {
  background: var(--qxyz-dark);
}

/* Contact hero variant */
.hero-contact {
  background: linear-gradient(135deg, #A855F7 0%, #EC4899 50%, #FF6B6B 100%);
  padding: 4rem 0 3.5rem;
}
.hero-contact .hero-eyebrow {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.product-single-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.product-single-image img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.product-single-category {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--qxyz-primary);
  background: var(--qxyz-primary-light);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
}

.product-single-title {
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: var(--qxyz-dark);
}

.product-single-price {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.product-single-current-price {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--qxyz-primary);
}

.product-single-compare {
  font-size: var(--text-xl);
  color: var(--qxyz-gray-light);
  font-weight: 400;
}

.product-single-sale-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--qxyz-red);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-single-description {
  color: var(--qxyz-gray);
  font-size: var(--text-base);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--qxyz-border);
}
.product-single-description p { margin-bottom: 1rem; }
.product-single-description p:last-child { margin-bottom: 0; }

.product-single-stock { margin-bottom: 1.5rem; }

.stock-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
}
.stock-in  { color: var(--qxyz-success); }
.stock-low { color: var(--qxyz-warning); }
.stock-out { color: var(--qxyz-danger); }

.product-single-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.product-single-qty {
  display: flex;
  align-items: center;
  border: 2px solid var(--qxyz-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-btn {
  width: 44px;
  height: 48px;
  border: none;
  background: var(--qxyz-light-bg);
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  color: var(--qxyz-dark);
}
.qty-btn:hover { background: var(--qxyz-border); }

.product-single-qty input {
  width: 52px;
  height: 48px;
  border: none;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 700;
  font-family: inherit;
  color: var(--qxyz-dark);
  -moz-appearance: textfield;
}
.product-single-qty input::-webkit-outer-spin-button,
.product-single-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-single-meta {
  padding: 1.5rem 0;
  border-top: 1px solid var(--qxyz-border);
  border-bottom: 1px solid var(--qxyz-border);
  margin-bottom: 1.5rem;
}

.meta-row {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: var(--text-sm);
}
.meta-label {
  color: var(--qxyz-gray);
  min-width: 80px;
  font-weight: 600;
}
.meta-value { color: var(--qxyz-dark); }

.product-tag {
  display: inline-block;
  background: var(--qxyz-light-bg);
  color: var(--qxyz-gray);
  font-size: var(--text-xs);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  margin: 0.1rem 0.25rem 0.1rem 0;
  font-weight: 500;
}

.product-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: var(--qxyz-gray);
  font-weight: 500;
}
.trust-badge svg { color: var(--qxyz-primary); flex-shrink: 0; }

/* ============================================================
   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: 700;
  color: var(--qxyz-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.contact-col-desc {
  color: var(--qxyz-gray);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Alerts */
.contact-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.contact-alert-success {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #6EE7B7;
}
.contact-alert-error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
.contact-alert svg { flex-shrink: 0; margin-top: 1px; }

/* Form overrides for contact */
.contact-form .form-group { margin-bottom: 1.25rem; }
.contact-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--qxyz-dark);
  margin-bottom: 0.4rem;
}
.contact-form label .required { color: var(--qxyz-red); margin-left: 0.15rem; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--qxyz-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--qxyz-dark);
  background: var(--qxyz-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--qxyz-primary);
  box-shadow: var(--focus-ring);
}
.contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.contact-form select { appearance: none; cursor: pointer; }

.contact-privacy-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--qxyz-gray-light);
  font-weight: 500;
}
.contact-privacy-note svg { flex-shrink: 0; }

.contact-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* Info cards */
.contact-info-col { padding-top: 0.5rem; }
.contact-info-col .contact-col-title { margin-bottom: 1.5rem; }

.contact-info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: var(--qxyz-white);
  border: 1px solid var(--qxyz-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(--qxyz-primary);
}
.contact-info-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--qxyz-dark);
  margin-bottom: 0.3rem;
}
.contact-info-card p {
  font-size: var(--text-sm);
  color: var(--qxyz-gray);
  line-height: 1.6;
  margin: 0;
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  background: var(--qxyz-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--qxyz-primary);
}
.contact-social-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--qxyz-primary);
  text-decoration: none;
}
.contact-social-link:hover { text-decoration: underline; }

/* ============================================================
   POLICY PAGES (Terms, Shipping, Privacy)
   ============================================================ */
.hero-policy {
  background: linear-gradient(135deg, #1F2937 0%, #374151 60%, #3CBBB1 100%);
  padding: 4rem 0 3.5rem;
}
.hero-policy h1 { font-size: var(--text-4xl); }

.policy-quick-strip {
  background: var(--qxyz-white);
  border-bottom: 1px solid var(--qxyz-border);
  padding: 1.5rem 0;
}
.policy-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.policy-quick-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--qxyz-dark);
}
.policy-quick-item svg { color: var(--qxyz-primary); flex-shrink: 0; }
.policy-quick-item div { display: flex; flex-direction: column; }
.policy-quick-item strong { font-size: var(--text-sm); font-weight: 700; line-height: 1.3; }
.policy-quick-item span { font-size: var(--text-xs); color: var(--qxyz-gray); margin-top: 0.1rem; }

.policy-section { padding-top: 4rem; }

.policy-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 4rem;
  align-items: start;
}

/* Sticky TOC */
.policy-toc {
  position: sticky;
  top: 100px;
  background: var(--qxyz-white);
  border: 1px solid var(--qxyz-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.policy-toc-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--qxyz-gray);
  margin-bottom: 0.875rem;
}
.policy-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.policy-toc li { margin-bottom: 0.1rem; }
.policy-toc a {
  display: block;
  font-size: var(--text-sm);
  color: var(--qxyz-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(--qxyz-primary);
  background: var(--qxyz-primary-light);
}

/* Content */
.policy-content h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--qxyz-dark);
  margin: 2.5rem 0 0.875rem;
  padding-top: 1rem;
  border-top: 1px solid var(--qxyz-border);
  scroll-margin-top: 100px;
}
.policy-content h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.policy-content p {
  color: var(--qxyz-gray);
  line-height: 1.8;
  margin-bottom: 1rem;
  font-size: var(--text-base);
}
.policy-content a { color: var(--qxyz-primary); text-decoration: none; font-weight: 500; }
.policy-content a:hover { text-decoration: underline; }
.policy-content strong { color: var(--qxyz-dark); }

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.policy-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--qxyz-gray);
  font-size: var(--text-base);
  line-height: 1.7;
}
.policy-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--qxyz-primary);
  font-weight: 700;
}

.policy-intro-box {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: var(--qxyz-primary-light);
  border: 1px solid rgba(60,187,177,.25);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.policy-intro-box svg { color: var(--qxyz-primary); flex-shrink: 0; margin-top: 2px; }
.policy-intro-box p { margin: 0; color: var(--qxyz-dark); font-size: var(--text-sm); line-height: 1.7; }

.policy-table-wrapper { overflow-x: auto; margin: 1rem 0 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--qxyz-border); }
.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.policy-table th {
  background: var(--qxyz-light-bg);
  font-weight: 700;
  color: var(--qxyz-dark);
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--qxyz-border);
}
.policy-table td {
  padding: 0.75rem 1rem;
  color: var(--qxyz-gray);
  border-bottom: 1px solid var(--qxyz-border);
}
.policy-table tr:last-child td { border-bottom: none; }
.policy-table-highlight td {
  background: var(--qxyz-primary-light);
  color: var(--qxyz-dark);
  font-weight: 600;
}

.policy-footer-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--qxyz-border);
  text-align: center;
}
.policy-footer-note p {
  font-size: var(--text-sm);
  color: var(--qxyz-gray-light);
}

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

  .hero-section { padding: 3.5rem 0 3rem; }
  .hero-section h1 { font-size: var(--text-3xl); }
  .hero-section p { font-size: var(--text-base); }
  .hero-section.hero-with-image { min-height: 420px; }
  .hero-actions { flex-direction: column; align-items: center; }

  .section { padding: 3.5rem 0; }
  .section-title { font-size: var(--text-3xl); }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
  }

  .form-row { grid-template-columns: 1fr; }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  .footer-nav { justify-content: center; }

  /* Single product */
  .product-single-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .product-single-title { font-size: var(--text-3xl); }
  .product-single-actions { flex-direction: column; }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Policy pages */
  .policy-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .policy-toc { position: static; }
  .policy-quick-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Dashboard mobile */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .stat-value { font-size: var(--text-2xl); }
  .quick-actions-grid { grid-template-columns: 1fr 1fr; }

  .dash-table { font-size: var(--text-xs); }
  .dash-table th, .dash-table td { padding: 0.6rem 1rem; }
}

@media (max-width: 900px) {
  .category-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .quick-actions-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .policy-quick-grid { grid-template-columns: 1fr; }
}

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

/* ============================================================
   MOBILE OPTIMISATIONS v3.2 — Touch targets, spacing, UX
   ============================================================ */

/* Safe area support for iPhone notch/home bar */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Prevent zoom on input focus (iOS) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }
}

/* Minimum 44px touch targets (WCAG 2.5.5) */
@media (max-width: 768px) {
  .btn,
  .btn-stripe,
  button,
  .cart-qty-btn,
  .qty-btn,
  .mobile-menu-toggle,
  .cart-toggle,
  .action-card {
    min-height: 44px;
    min-width: 44px;
  }

  /* Product card buttons on mobile — keep text inside pill border */
  .product-card .btn,
  .product-card-actions .btn {
    padding: 0.65rem 0.75rem;
    font-size: 12px;
    min-height: 40px;      /* still accessible touch target */
    line-height: 1.2;
    white-space: normal;   /* allow wrap inside narrow 2-col cards */
    word-break: break-word;
    text-align: center;
  }
  .product-card-actions {
    gap: 0.4rem;
  }

  /* Cart sidebar — full width on mobile */
  .cart-sidebar {
    width: 100%;
    max-width: 100vw;
    right: -100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 92vh;
    top: auto;
    bottom: 0;
    padding-bottom: var(--safe-bottom);
  }
  .cart-sidebar.open { right: 0; bottom: 0; }

  /* Checkout modal — full screen on mobile */
  .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: 1.5rem 1.25rem;
    padding-bottom: calc(1.5rem + var(--safe-bottom));
  }
  .checkout-overlay {
    align-items: flex-end;
  }

  /* Product grid — true 2-column on small phones */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .product-card img,
  .product-placeholder {
    height: 180px;
  }
  .product-info {
    padding: 0.875rem 1rem 1rem;
  }
  .product-title { font-size: var(--text-sm); }
  .product-price { font-size: var(--text-base); margin-bottom: 0.6rem; }

  /* Hero — tighter on mobile */
  .hero-section {
    padding: 2.75rem 0 2.5rem;
  }
  .hero-section h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    margin-bottom: 0.75rem;
  }
  .hero-section p {
    font-size: var(--text-sm);
    margin-bottom: 1.75rem;
    padding: 0 0.5rem;
  }
  .hero-trust-strip {
    flex-direction: column;
    gap: 0.4rem;
    font-size: var(--text-xs);
  }
  .hero-trust-divider { display: none; }

  /* Category grid — scrollable pill row */
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
  }
  .category-card {
    scroll-snap-align: start;
    padding: 1rem 0.75rem;
    min-width: 100px;
  }
  .category-emoji { font-size: 1.75rem; }

  /* Section spacing */
  .section { padding: 2.5rem 0; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .section-description { font-size: var(--text-sm); margin-bottom: 2rem; }

  /* Features grid — 2 col */
  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .feature-icon { width: 3rem; height: 3rem; }

  /* Policy layout — TOC hidden on mobile (use accordion-style) */
  .policy-layout { gap: 1.5rem; }
  .policy-toc { display: none; }

  /* Dashboard tables — horizontal scroll */
  .dash-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stats-grid { gap: 0.75rem; }

  /* Single product stacked */
  .product-single-grid { gap: 1.5rem; }
  .product-single-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .product-single-actions {
    position: sticky;
    bottom: var(--safe-bottom);
    background: var(--qxyz-white);
    padding: 1rem 0 0.5rem;
    z-index: 50;
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-top: 1px solid var(--qxyz-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  }

  /* Footer stacked */
  .footer-content { gap: 1.25rem; }

  /* Mobile nav panel padding for safe area */
  .mobile-nav-panel {
    padding-bottom: calc(2rem + var(--safe-bottom));
  }

  /* Header safe area */
  .site-header {
    padding-top: var(--safe-top);
  }

  /* Contact grid */
  .contact-grid { gap: 2rem; }

  /* Sticky checkout bar on product page */
  .mobile-sticky-atc {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    padding: 0.875rem 1.25rem;
    padding-bottom: calc(0.875rem + var(--safe-bottom));
    background: var(--qxyz-white);
    border-top: 1px solid var(--qxyz-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    z-index: 200;
    gap: 0.75rem;
  }
  .mobile-sticky-atc .price-label {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--qxyz-primary);
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .mobile-sticky-atc .btn {
    flex: 1;
  }
}

/* Extra-small phones */
@media (max-width: 375px) {
  .container { padding: 0 0.875rem; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .hero-section h1 { font-size: 1.6rem; }
  .features-grid { grid-template-columns: 1fr; }
}

/* Landscape phone */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section { padding: 2rem 0; }
  .hero-section h1 { font-size: 1.75rem; }
  .cart-sidebar { max-height: 100vh; top: 0; bottom: auto; border-radius: 0; }
  .checkout-modal { max-height: 100vh; border-radius: 0; }
}

/* ============================================================
   PERFORMANCE & RENDERING IMPROVEMENTS
   ============================================================ */

/* Promote animated elements to GPU layer */
.cart-sidebar,
.mobile-nav-panel,
.checkout-modal,
.checkout-overlay,
.mobile-nav-overlay {
  will-change: transform;
  transform: translateZ(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (forced-colors: active) {
  .btn, .btn-stripe { border: 2px solid ButtonText; }
  .product-card { border: 1px solid ButtonText; }
  .status-pill { border: 1px solid ButtonText; }
}


/* ============================================================
   PRODUCT GALLERY SLIDER
   ============================================================ */
.qxyz-gallery-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.qxyz-gallery-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--qxyz-light);
    line-height: 0;
}

/* Prev / Next arrows */
.qxyz-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(0,0,0,0.18);
    z-index: 10;
    transition: background 0.15s, transform 0.15s;
    color: var(--qxyz-dark);
}
.qxyz-gallery-arrow:hover {
    background: white;
    transform: translateY(-50%) scale(1.08);
}
.qxyz-gallery-prev { left: 10px; }
.qxyz-gallery-next { right: 10px; }

/* Dot indicators */
.qxyz-gallery-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.qxyz-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;
}
.qxyz-gallery-dot.active {
    background: white;
    transform: scale(1.25);
}

/* Thumbnail strip */
.qxyz-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.qxyz-gallery-thumb {
    width: calc(25% - 0.38rem);
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    background: var(--qxyz-light);
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.65;
    line-height: 0;
}
.qxyz-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.qxyz-gallery-thumb.active,
.qxyz-gallery-thumb:hover {
    border-color: var(--qxyz-teal);
    opacity: 1;
}

/* Mobile: hide arrows, use swipe */
@media (max-width: 480px) {
    .qxyz-gallery-arrow { display: none; }
    .qxyz-gallery-thumb {
        width: calc(25% - 0.38rem);
    }
}

/* ============================================================
   SHOP PAGE — Header, Category Filter, Card Enhancements
   ============================================================ */

/* Shop header intro */
.shop-header {
    text-align: center;
    margin-bottom: 2rem;
}
.shop-intro {
    color: var(--qxyz-gray);
    font-size: var(--text-lg);
    margin: 0.5rem auto 0;
    max-width: 520px;
    line-height: 1.6;
}

/* Category filter pill bar */
.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(--qxyz-light);
    color: var(--qxyz-dark);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.shop-filter-pill:hover {
    border-color: var(--qxyz-teal);
    color: var(--qxyz-teal);
    background: white;
}
.shop-filter-pill.active {
    background: var(--qxyz-teal);
    color: white;
    border-color: var(--qxyz-teal);
}
.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);
}

/* Active filter notice */
.shop-filter-notice {
    text-align: center;
    margin-bottom: 1.75rem;
    font-size: var(--text-sm);
    color: var(--qxyz-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 card — image link wrapper ── */
.product-card-img-link {
    display: block;
    position: relative;
    text-decoration: none;
    overflow: hidden; /* clips the image zoom — card itself must stay overflow:visible */
    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; /* parent already clips */
    transition: transform 0.3s ease;
}
.product-card:hover .product-card-img-link .img-wrapper img,
.product-card:hover .product-card-img-link img {
    transform: scale(1.04);
}

/* Sale / Low Stock / Sold Out badge on card image */
.product-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--qxyz-teal);
    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: #F59E0B; }
.product-card-badge--out  { background: #6B7280; }

/* Category label inside product card */
.product-card-cat {
    margin-bottom: 0.3rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--qxyz-teal);
}
.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(--qxyz-teal); }

/* Short excerpt in shop */
.product-card-excerpt {
    color: var(--qxyz-gray);
    font-size: var(--text-sm);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

/* Add to Cart + View button row */
.product-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto; /* push to bottom of flex column */
    padding-top: 0.85rem;
    align-items: stretch;
}
.product-card-actions .btn {
    flex: 1;
    min-width: 0; /* prevent flex overflow */
}
.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 sizing (if not already defined) */
.btn-sm {
    padding: 0.5rem 1.1rem !important;
    font-size: var(--text-sm) !important;
}

@media (max-width: 480px) {
    .shop-filter-bar { gap: 0.4rem; }
    .shop-filter-pill { font-size: 12px; padding: 0.4rem 0.85rem; }
    .product-card-actions { flex-wrap: wrap; }
}