/*
  Sweetza Premium Storefront Redesign
  Focus: Spacing, typography, product cards, category navigation, hero presentation, and cart styling.
*/

:root {
  /* Premium Brand Palette */
  --brand-primary: #7a5cff;
  --brand-secondary: #ff4fa3;
  --brand-dark: #1c1125;
  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;

  /* Surfaces & Backgrounds */
  --bg: #fcfbfe;
  --surface: #ffffff;
  --surface-muted: #f7f5f9;
  
  /* Text & Lines */
  --text: #1a1423;
  --text-muted: #6f657a;
  --line: #ede7f0;

  /* Elevations (Layered Shadows) */
  --shadow-sm: 0 4px 16px rgba(122, 92, 255, 0.04);
  --shadow-md: 0 12px 32px rgba(122, 92, 255, 0.08);
  --shadow-lg: 0 24px 48px rgba(28, 17, 37, 0.12);
  --shadow-btn: 0 8px 20px rgba(122, 92, 255, 0.25);

  /* Geometry */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

* { 
  box-sizing: border-box; 
}

html { 
  scroll-behavior: smooth; 
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(122, 92, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(255, 79, 163, 0.04) 0%, transparent 50%);
  -webkit-tap-highlight-color: transparent;
}

button, input, select {
  font-family: inherit;
  outline: none;
}

button { 
  cursor: pointer; 
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}

button:disabled { 
  cursor: not-allowed; 
  opacity: 0.5; 
  transform: none !important; 
}

button:active:not(:disabled) { 
  transform: scale(0.97); 
}

body.cart-open, body.lightbox-open { 
  overflow: hidden; 
}

/* Typography Base */
h1, h2, h3, h4, h5, h6,
.category-button strong,
.price,
.product-info h3,
.cart-header h2,
.delivery-intro h3,
.order-summary-heading strong,
.how-step strong {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.container {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

/* Hero / Brand Section */
.brand-section {
  padding: 48px 0 24px;
  text-align: center;
}

.brand-logo {
  display: block;
  width: min(220px, 55vw);
  max-height: 120px;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 12px 24px rgba(122, 92, 255, 0.15));
}

.brand-wrap p {
  max-width: 500px;
  margin: 16px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* How It Works Layer */
.how-it-works { 
  padding: 32px 0 40px; 
}

.how-it-works-heading {
  text-align: center;
  margin-bottom: 32px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.how-it-works-heading h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.how-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease;
}

.how-step:hover {
  box-shadow: var(--shadow-md);
}

.how-step-icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: #f4f0ff;
  color: var(--brand-primary);
}

.how-step-icon.whatsapp-icon {
  background: #e8f9ef;
  color: var(--whatsapp);
}

.how-step-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.how-step strong { 
  font-size: 16px; 
  display: block; 
  margin-bottom: 4px; 
}

.how-step p { 
  margin: 0; 
  font-size: 13px; 
  color: var(--text-muted); 
  line-height: 1.5; 
}

/* Premium Category Navigation */
.category-grid {
  display: flex;
  gap: 12px;
  padding: 6px;
  margin: 0 auto 48px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  scrollbar-width: none; 
  -webkit-overflow-scrolling: touch;
}

.category-grid::-webkit-scrollbar { 
  display: none; 
}

.category-button {
  flex: 1;
  min-width: 150px;
  padding: 16px 20px;
  border: none;
  border-radius: calc(var(--radius-lg) - 4px);
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  transition: all 0.3s ease;
}

.category-button:hover:not(.active) { 
  background: rgba(255, 255, 255, 0.8); 
}

.category-button strong { 
  font-size: 15px; 
  display: block; 
  color: var(--text); 
  transition: color 0.3s ease;
}

.category-button span { 
  font-size: 11px; 
  margin-top: 4px; 
  display: block; 
}

.category-button.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.category-button.active strong {
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Shop Section */
.shop-section { 
  padding: 0 0 120px; 
}

.shop-heading {
  margin-bottom: 32px;
  text-align: center;
}

.shop-heading h1 { 
  margin: 0 0 12px; 
  font-size: 40px; 
}

.shop-heading p { 
  margin: 0; 
  font-size: 16px; 
  color: var(--text-muted); 
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.hidden { 
  display: none !important; 
}

/* Product Cards */
.product-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.product-image {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #fbfaff, #f4f0f9);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}

.product-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-image > img { 
  transform: scale(1.08); 
}

.pack-badge, .stock-badge {
  position: absolute;
  top: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  backdrop-filter: blur(4px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pack-badge { 
  left: 12px; 
  color: var(--brand-primary); 
}

.stock-badge { 
  right: 12px; 
}

/* Stock visual logic */
.stock-badge.available { color: #10b981; }
.stock-badge.out { color: #ef4444; background: #fee2e2; }

.product-card.is-out-of-stock .product-image > img { 
  opacity: 0.5; 
  filter: grayscale(100%); 
}

.product-card.is-out-of-stock { 
  background: #faf9fb; 
}

.product-info {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.product-info h3 { 
  margin: 0; 
  font-size: 16px; 
  line-height: 1.3; 
}

.product-info span { 
  display: block; 
  margin-top: 4px; 
  font-size: 12px; 
  color: var(--text-muted); 
}

.price { 
  font-size: 18px; 
  font-weight: 700; 
  color: var(--brand-primary); 
}

.product-card.is-out-of-stock .price { 
  color: var(--text-muted); 
}

/* Actions */
.product-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.qty-stepper {
  display: flex;
  align-items: center;
  height: 48px;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
}

.qty-stepper button {
  width: 40px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--brand-primary);
  font-size: 18px;
  font-weight: 600;
}

.qty-stepper button:hover { 
  background: #eeeaf3; 
}

.qty-stepper input {
  width: 44px;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-inner-spin-button,
.qty-stepper input::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.add-button {
  height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid var(--brand-primary);
  box-shadow: 0 4px 10px rgba(122, 92, 255, 0.08);
}

.add-button:hover:not(:disabled) {
  background: var(--brand-primary);
  color: white;
}

.product-card.is-out-of-stock .add-button {
  border-color: var(--line);
  color: var(--text-muted);
  background: #f3f0f5;
  box-shadow: none;
}

/* Buttons Global Base */
.primary-button, .sweet-continue-button {
  height: 56px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  color: white;
  font-size: 16px;
  font-weight: 700;
  box-shadow: var(--shadow-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 32px;
}

.primary-button:hover, .sweet-continue-button:hover {
  box-shadow: 0 12px 28px rgba(122, 92, 255, 0.35);
  transform: translateY(-2px);
}

.secondary-button {
  height: 56px;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}

.secondary-button:hover { 
  background: var(--surface-muted); 
  border-color: #dcd4e2; 
}

.whatsapp-button {
  height: 56px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--whatsapp);
  color: white;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
}

.whatsapp-button:hover {
  background: var(--whatsapp-dark);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.35);
  transform: translateY(-2px);
}

.full { width: 100%; }

/* Floating Cart CTA */
.floating-cart {
  position: fixed;
  z-index: 90;
  bottom: 32px;
  right: 32px;
  height: 64px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(122, 92, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text);
}

.floating-cart span { 
  font-weight: 700; 
  font-size: 15px; 
}

.floating-cart strong {
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  color: white;
  border-radius: var(--radius-pill);
  font-size: 13px;
  padding: 0 8px;
}

/* Cart Drawer */
.cart-drawer { 
  position: fixed; 
  inset: 0; 
  z-index: 100; 
  display: none; 
}

.cart-drawer.open { 
  display: block; 
}

.cart-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 10, 20, 0.5);
  backdrop-filter: blur(8px);
  border: none;
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn { 
  to { opacity: 1; } 
}

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(520px, 100vw);
  height: 100dvh;
  background: var(--bg);
  box-shadow: -24px 0 64px rgba(0,0,0,0.15);
  padding: 32px;
  overflow-y: auto;
  transform: translateX(100%);
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  border-radius: 32px 0 0 32px;
}

@keyframes slideIn { 
  to { transform: translateX(0); } 
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.cart-header h2 { 
  margin: 0; 
  font-size: 24px; 
  color: var(--text); 
}

.cart-header-actions { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}
    
.icon-button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text);
  font-size: 24px;
  display: grid;
  place-items: center;
}

.icon-button:hover { 
  background: #e4dbeb; 
  color: var(--brand-primary); 
}

.text-button {
  background: transparent;
  border: none;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

.text-button:hover { 
  background: rgba(122, 92, 255, 0.08); 
}

/* Internal Steps */
.order-step { 
  display: none; 
  animation: fadeInStep 0.4s ease forwards; 
}

.order-step.active { 
  display: block; 
}

@keyframes fadeInStep { 
  from { opacity: 0; transform: translateY(10px); } 
  to { opacity: 1; transform: translateY(0); } 
}

/* Cart Items inside Drawer */
.cart-items { 
  display: grid; 
  gap: 16px; 
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.cart-item-copy strong { 
  font-size: 15px; 
  display: block; 
}

.cart-item-copy span, .cart-item-copy small { 
  font-size: 12px; 
  color: var(--text-muted); 
  margin-top: 4px; 
  display: block; 
}

.cart-item-copy button {
  background: transparent; 
  border: none; 
  color: #ef4444; 
  font-size: 12px; 
  padding: 0; 
  margin-top: 8px; 
  font-weight: 600;
}

.mini-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  height: 40px;
  overflow: hidden;
}

.mini-stepper button { 
  width: 40px; 
  height: 100%; 
  background: var(--surface-muted); 
  border: none; 
  color: var(--text); 
  font-weight: 600; 
}

.mini-stepper strong { 
  width: 40px; 
  text-align: center; 
  font-size: 14px; 
}
    
.empty-cart { 
  text-align: center; 
  padding: 64px 24px; 
}

.empty-cart strong { 
  display: block; 
  font-size: 20px; 
  margin-bottom: 8px; 
}

.empty-cart p { 
  color: var(--text-muted); 
  font-size: 15px; 
}

/* Order Summary */
.order-summary-card {
  margin-top: 32px;
  background: var(--surface);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface);
  box-shadow: var(--shadow-md);
}

.order-summary-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}

.order-summary-heading strong { 
  font-size: 20px; 
}

.order-summary-heading span { 
  font-size: 14px; 
  color: var(--brand-primary); 
  font-weight: 600; 
}

.order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  margin-bottom: 20px;
}

.order-total-row span { 
  font-size: 16px; 
  font-weight: 500; 
  color: var(--text-muted); 
}

.order-total-row strong { 
  font-size: 28px; 
  color: var(--brand-primary); 
}

/* Delivery Progress Card */
.delivery-progress-card {
  background: #f8f6fb;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #efeaf5;
}

.delivery-progress-copy {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.delivery-progress-copy strong { 
  font-size: 13px; 
  color: var(--brand-primary); 
}

.delivery-progress-copy span { 
  font-size: 12px; 
  font-weight: 600; 
}
    
.delivery-progress-track {
  height: 8px;
  background: #e9e4ef;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.delivery-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
  border-radius: var(--radius-pill);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.delivery-progress-card.complete {
  background: #eefdf4;
  border-color: #d1fae5;
}

.delivery-progress-card.complete .delivery-progress-copy strong { 
  color: #10b981; 
}

.delivery-progress-card.complete .delivery-progress-fill { 
  background: #10b981; 
}

.muted { 
  font-size: 13px; 
  color: var(--text-muted); 
  line-height: 1.6; 
  text-align: center; 
  margin-bottom: 20px; 
}

/* Delivery Options */
.delivery-intro { 
  margin-bottom: 28px; 
}

.delivery-intro h3 { 
  font-size: 22px; 
  margin: 0 0 8px; 
}

.delivery-intro p { 
  margin: 0; 
  color: var(--text-muted); 
  font-size: 15px; 
}
    
.delivery-options { 
  display: grid; 
  gap: 16px; 
  margin-bottom: 32px; 
}

.delivery-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s;
}

.delivery-option:hover { 
  border-color: #dcd4e2; 
}

.delivery-option:has(input:checked) {
  border-color: var(--brand-primary);
  background: #faf8ff;
  box-shadow: 0 4px 16px rgba(122, 92, 255, 0.08);
}

.delivery-option input { 
  margin-top: 4px; 
  accent-color: var(--brand-primary); 
  width: 20px; 
  height: 20px; 
}

.delivery-option span { 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
}

.delivery-option strong { 
  font-size: 16px; 
}

.delivery-option small { 
  font-size: 14px; 
  color: var(--text-muted); 
}

.delivery-form {
  background: var(--surface);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}

.delivery-form h4 { 
  margin: 0 0 20px; 
  font-size: 18px; 
}
    
.field { 
  display: block; 
  margin-bottom: 20px; 
}

.field span { 
  display: block; 
  font-size: 13px; 
  font-weight: 600; 
  margin-bottom: 8px; 
  color: var(--text-muted); 
}

.field input, .field select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #dcd4e2;
  border-radius: var(--radius-sm);
  background: #faf9fb;
  font-size: 16px;
  color: var(--text);
  transition: all 0.2s;
}

.field input:focus, .field select:focus {
  background: var(--surface);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(122, 92, 255, 0.15);
}

.field-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 16px; 
}

.delivery-actions { 
  display: grid; 
  gap: 16px; 
}

/* Lightbox Modal */
.product-lightbox { 
  position: fixed; 
  inset: 0; 
  z-index: 150; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  padding: 24px; 
}

.product-lightbox.open { 
  display: flex; 
}

.product-lightbox-backdrop { 
  position: absolute; 
  inset: 0; 
  background: rgba(15, 10, 20, 0.85); 
  backdrop-filter: blur(12px); 
  border: none; 
  width: 100%; 
  height: 100%; 
}

.product-lightbox-dialog {
  position: relative; 
  z-index: 1; 
  width: min(640px, 100%);
  background: var(--surface); 
  border-radius: var(--radius-lg); 
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.product-lightbox-dialog img { 
  width: 100%; 
  border-radius: var(--radius-md); 
  max-height: 65vh; 
  object-fit: contain; 
}

.product-lightbox-dialog strong { 
  display: block; 
  text-align: center; 
  margin-top: 20px; 
  font-size: 20px; 
}

.product-lightbox-close {
  position: absolute; 
  top: -16px; 
  right: -16px; 
  width: 44px; 
  height: 44px;
  background: var(--surface); 
  border-radius: var(--radius-pill); 
  border: none;
  box-shadow: var(--shadow-md); 
  font-size: 22px; 
  font-weight: bold;
}

/* Toast Alerts */
.toast {
  position: fixed; 
  z-index: 200; 
  bottom: 120px; 
  left: 50%; 
  transform: translate(-50%, 20px);
  background: var(--brand-dark); 
  color: white; 
  padding: 16px 32px; 
  border-radius: var(--radius-pill);
  font-size: 15px; 
  font-weight: 600; 
  box-shadow: var(--shadow-lg); 
  opacity: 0; 
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show { 
  opacity: 1; 
  transform: translate(-50%, 0); 
}

/* Image Fallback & Empty State */
.image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.empty-state { 
  grid-column: 1 / -1; 
  text-align: center; 
  padding: 80px 20px; 
  border: 2px dashed var(--line); 
  border-radius: var(--radius-lg); 
  color: var(--text-muted); 
  font-size: 16px; 
}

/* Mobile First Responsiveness */
@media (max-width: 990px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .how-it-works-grid { grid-template-columns: 1fr; gap: 16px; }
  .cart-panel { border-radius: 0; width: 100vw; padding: 24px; }
}

@media (max-width: 650px) {
  .product-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 16px; 
  }
  .shop-heading h1 { font-size: 32px; }
  .brand-section { padding: 32px 0 16px; }
  .brand-logo { width: min(180px, 65vw); }
  
  .product-card { padding: 12px; }
  .product-image { padding: 16px; }
  .product-actions { grid-template-columns: 1fr; }
  .qty-stepper { width: 100%; justify-content: space-between; }
  .qty-stepper input { width: 100%; }
  .add-button { width: 100%; }
  
  .floating-cart { 
    bottom: 24px; 
    right: 24px; 
    left: 24px; 
    justify-content: center; 
    height: 60px; 
  }
  
  .cart-header { padding-top: 12px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Sweetza retained requirements */
.brand-logo{
  width:min(290px,78vw);
  max-width:290px;
  max-height:138px;
}

@media(max-width:650px){
  .brand-logo{
    width:min(240px,72vw);
    max-width:240px;
    max-height:116px;
  }
}


/* Compact How It Works */
.how-it-works{
  padding:8px 0 12px;
}

.how-it-works-heading{
  margin-bottom:8px;
}

.how-it-works-heading h2{
  font-size:18px;
}

.how-it-works-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.how-step{
  padding:10px;
  gap:8px;
  border-radius:16px;
}

.how-step-icon{
  width:38px;
  height:38px;
}

.how-step-icon svg{
  width:19px;
  height:19px;
}

.how-step strong{
  font-size:11px;
}

.how-step p{
  font-size:9px;
  line-height:1.35;
}

@media(max-width:820px){
  .how-it-works{
    padding:6px 0 10px;
  }

  .how-it-works-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }

  .how-step{
    display:block;
    text-align:center;
    padding:7px 5px;
  }

  .how-step-icon{
    width:32px;
    height:32px;
    margin:0 auto 5px;
  }

  .how-step strong{
    font-size:9px;
  }

  .how-step p{
    font-size:7px;
    line-height:1.25;
  }
}


/* Compact floating cart */
.floating-cart{
  left:auto!important;
  right:16px!important;
  bottom:calc(16px + env(safe-area-inset-bottom))!important;
  width:auto!important;
  min-width:112px!important;
  height:48px!important;
  padding:0 14px!important;
  gap:10px!important;
}

.floating-cart strong{
  min-width:28px;
  height:28px;
}

@media(max-width:650px){
  .floating-cart{
    left:auto!important;
    right:12px!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:108px!important;
    height:46px!important;
  }
}


/* Mobile tap targets */
.qty-stepper{
  min-height:44px;
}

.qty-stepper button{
  min-width:44px;
  width:44px;
  min-height:44px;
}

.qty-stepper input{
  min-height:44px;
}

.mini-stepper{
  min-height:44px;
  height:44px;
}

.mini-stepper button{
  min-width:44px;
  width:44px;
  min-height:44px;
}

.icon-button,
.product-lightbox-close{
  min-width:44px;
  min-height:44px;
}

.add-button,
.primary-button,
.secondary-button,
.whatsapp-button{
  min-height:48px;
}


/* Mobile-safe cart */
.cart-drawer{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  overflow:hidden!important;
}

.cart-panel{
  width:min(520px,100vw)!important;
  max-width:100vw!important;
  height:100dvh!important;
  max-height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:820px){
  .cart-panel{
    width:100vw!important;
    max-width:100vw!important;
    border-radius:0!important;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom))!important;
  }

  .cart-header{
    position:sticky;
    top:0;
    z-index:8;
    background:rgba(252,251,254,.96);
    backdrop-filter:blur(12px);
  }
}


/* Clear stock status */
.product-card.is-available{
  border-color:#d8eadc;
}

.product-card.is-out-of-stock{
  border-color:#efcfd3;
  background:#fff9fa;
}

.stock-badge.available{
  color:#237a3b;
  background:#eef9f1;
  border:1px solid #cfe9d6;
}

.stock-badge.out{
  color:#b33a4a;
  background:#fff0f2;
  border:1px solid #efccd2;
}

.product-card.is-out-of-stock .add-button{
  background:#f7e7ea;
  border-color:#efcfd3;
  color:#a33b4a;
}


#looksGoodButton.sweet-continue-button{
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#7d62c8 0%,#b875ae 100%);
  color:#fff;
  box-shadow:0 8px 20px rgba(121,89,198,.20);
}

#looksGoodButton.sweet-continue-button:hover{
  background:linear-gradient(135deg,#876bd0 0%,#c07db7 100%);
}

#looksGoodButton.sweet-continue-button:active{
  transform:scale(.985);
}



/* =========================================================
   Sweetza Pro UI refinement layer
   ========================================================= */

:root{
  --focus-ring: 0 0 0 4px rgba(122,92,255,.16);
  --surface-glass: rgba(255,255,255,.82);
  --line-strong: #dfd6e5;
}

/* Accessible keyboard skip */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:999;
  transform:translateY(-150%);
  padding:10px 14px;
  border-radius:999px;
  background:#1c1125;
  color:#fff;
  font:600 13px/1 "Inter",sans-serif;
  text-decoration:none;
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}

/* Cleaner page rhythm */
.brand-section{
  padding-top:34px;
  padding-bottom:14px;
}
.brand-wrap{
  position:relative;
}
.brand-wrap::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:min(360px,72vw);
  height:34px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(122,92,255,.09),transparent 70%);
  filter:blur(8px);
  pointer-events:none;
}
.brand-logo{
  position:relative;
  z-index:1;
}

/* Elegant compact explainer */
.how-it-works .container{
  max-width:920px;
}
.how-it-works-heading .eyebrow{
  font-size:9px;
}
.how-step{
  align-items:center;
  border:1px solid rgba(237,231,240,.8);
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(8px);
}
.how-step-icon{
  box-shadow:inset 0 0 0 1px rgba(122,92,255,.08);
}

/* Premium category switcher */
.category-grid{
  position:sticky;
  top:10px;
  z-index:20;
  width:min(980px,calc(100% - 28px));
  padding:7px;
  margin-bottom:36px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(225,216,229,.9);
  box-shadow:0 10px 32px rgba(28,17,37,.07);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  scroll-snap-type:x proximity;
}
.category-button{
  min-height:62px;
  scroll-snap-align:center;
  border:1px solid transparent;
}
.category-button:focus-visible{
  box-shadow:var(--focus-ring);
}
.category-button.active{
  border-color:rgba(122,92,255,.12);
  box-shadow:0 6px 18px rgba(122,92,255,.10);
}
.category-button.active::after{
  content:"";
  display:block;
  width:26px;
  height:3px;
  margin-top:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary));
}

/* Shop heading hierarchy */
.shop-heading{
  margin-bottom:24px;
}
.shop-heading .eyebrow{
  margin-bottom:6px;
}
.shop-heading h1{
  font-size:clamp(28px,4vw,38px);
}
.shop-heading p{
  max-width:560px;
  margin-inline:auto;
  line-height:1.55;
}

/* Product cards */
.product-grid{
  gap:20px;
}
.product-card{
  position:relative;
  border:1px solid #eee8f1;
  box-shadow:0 8px 24px rgba(28,17,37,.055);
  overflow:hidden;
}
.product-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,rgba(255,79,163,.65),rgba(122,92,255,.65));
  opacity:0;
  transition:opacity .2s ease;
}
.product-image{
  border:0;
}
.product-image:focus-visible{
  box-shadow:var(--focus-ring);
}
.product-info{
  align-items:center;
}
.product-info h3{
  font-size:15px;
}
.price{
  white-space:nowrap;
  letter-spacing:-.03em;
}

/* Quantity control */
.qty-stepper{
  background:#faf8fc;
  border-color:#e8e1ec;
  box-shadow:inset 0 1px 2px rgba(28,17,37,.025);
}
.qty-stepper button{
  display:grid;
  place-items:center;
}
.qty-stepper button:focus-visible,
.add-button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.whatsapp-button:focus-visible,
.floating-cart:focus-visible,
.icon-button:focus-visible,
.text-button:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

/* Add-to-cart CTA */
.add-button{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,#fdfbff);
}
.add-button::before{
  content:"＋";
  margin-right:6px;
  font-size:15px;
  font-weight:700;
}
.add-button:hover:not(:disabled){
  background:linear-gradient(135deg,var(--brand-secondary),var(--brand-primary));
  border-color:transparent;
  box-shadow:0 10px 22px rgba(122,92,255,.22);
}
.product-card.is-out-of-stock .add-button::before{
  display:none;
}

/* Cart button */
.floating-cart{
  isolation:isolate;
  border:1px solid rgba(122,92,255,.12);
  box-shadow:0 14px 34px rgba(28,17,37,.14);
}
.floating-cart::before{
  content:"🛒";
  font-size:16px;
}
.floating-cart:hover{
  border-color:rgba(122,92,255,.26);
}

/* Cart modal */
.cart-backdrop{
  background:rgba(19,12,25,.42);
  backdrop-filter:blur(6px);
}
.cart-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(252,251,254,.98));
}
.cart-header{
  position:sticky;
  top:0;
  z-index:10;
  margin:-32px -32px 24px;
  padding:26px 32px 18px;
  background:rgba(255,255,255,.90);
  border-bottom:1px solid rgba(237,231,240,.9);
  backdrop-filter:blur(18px);
}
.cart-category-group{
  display:grid;
  gap:10px;
}
.cart-category-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 2px 2px;
}
.cart-category-heading strong{
  font-family:"Poppins",sans-serif;
  font-size:14px;
}
.cart-category-heading span{
  padding:4px 8px;
  border-radius:999px;
  background:#f3eff8;
  color:var(--brand-primary);
  font-size:11px;
  font-weight:700;
}
.cart-item{
  gap:14px;
  border-color:#eee8f1;
  box-shadow:0 6px 18px rgba(28,17,37,.045);
}
.cart-item-copy{
  min-width:0;
}
.cart-item-copy strong,
.cart-item-copy span,
.cart-item-copy small{
  overflow-wrap:anywhere;
}
.cart-item-copy button{
  min-height:36px;
  padding:8px 0;
}
.mini-stepper{
  flex:none;
}
.order-summary-card{
  border-color:#ebe4ef;
  box-shadow:0 16px 36px rgba(28,17,37,.08);
}

/* Delivery cards */
.delivery-option{
  position:relative;
  overflow:hidden;
}
.delivery-option:has(input:checked)::after{
  content:"✓";
  position:absolute;
  top:14px;
  right:14px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--brand-primary);
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.delivery-form{
  box-shadow:0 10px 26px rgba(28,17,37,.05);
}
.field input,
.field select{
  border-color:#ddd5e3;
}
.field input:hover,
.field select:hover{
  border-color:#cfc4d6;
}

/* WhatsApp CTA refinement */
.whatsapp-button{
  position:relative;
}
.whatsapp-button::before{
  content:"💬";
  margin-right:8px;
}

/* Toast */
.toast{
  max-width:min(420px,calc(100vw - 32px));
  text-align:center;
  backdrop-filter:blur(10px);
}

/* Motion: only where pointer hover makes sense */
@media (hover:hover) and (pointer:fine){
  .product-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 42px rgba(28,17,37,.11);
  }
  .product-card:hover::before{opacity:1}
  .category-button:hover:not(.active){
    background:#fff;
    transform:translateY(-1px);
  }
}

/* Tablet */
@media(max-width:990px){
  .product-grid{
    gap:16px;
  }
}

/* Mobile */
@media(max-width:650px){
  .container{
    width:min(100% - 22px,1200px);
  }

  .brand-section{
    padding-top:22px;
    padding-bottom:8px;
  }

  .how-it-works{
    padding-top:4px;
  }

  .category-grid{
    top:6px;
    width:calc(100% - 16px);
    margin-bottom:24px;
    border-radius:18px;
  }

  .category-button{
    min-width:128px;
    min-height:58px;
    padding:12px 14px;
  }

  .category-button strong{
    font-size:13px;
  }

  .shop-section{
    padding-bottom:96px;
  }

  .shop-heading{
    margin-bottom:18px;
  }

  .shop-heading h1{
    font-size:27px;
  }

  .shop-heading p{
    font-size:13px;
  }

  .product-grid{
    gap:12px;
  }

  .product-card{
    padding:10px;
    border-radius:18px;
  }

  .product-image{
    padding:12px;
    border-radius:14px;
  }

  .pack-badge,
  .stock-badge{
    top:8px;
    padding:5px 8px;
    font-size:8px;
  }

  .pack-badge{left:8px}
  .stock-badge{right:8px}

  .product-info{
    margin-top:12px;
    gap:8px;
    align-items:flex-start;
  }

  .product-info h3{
    font-size:13px;
  }

  .product-info span{
    font-size:10px;
  }

  .price{
    font-size:15px;
  }

  .product-actions{
    gap:8px;
    padding-top:12px;
  }

  .qty-stepper,
  .add-button{
    min-height:46px;
    height:46px;
  }

  .add-button{
    font-size:12px;
  }

  .floating-cart{
    box-shadow:0 12px 28px rgba(28,17,37,.16);
  }

  .cart-header{
    margin:-20px -16px 18px;
    padding:calc(16px + env(safe-area-inset-top)) 16px 14px;
  }

  .cart-header h2{
    font-size:20px;
  }

  .cart-item{
    padding:13px;
    align-items:flex-start;
  }

  .cart-item-copy strong{
    font-size:13px;
  }

  .cart-item-copy span,
  .cart-item-copy small{
    font-size:10px;
  }

  .mini-stepper{
    height:44px;
  }

  .order-summary-card{
    margin-top:22px;
    padding:18px;
  }

  .order-total-row strong{
    font-size:24px;
  }

  .delivery-option{
    padding:16px;
  }

  .delivery-form{
    padding:18px;
  }

  .field{
    margin-bottom:16px;
  }

  .field input,
  .field select{
    height:50px;
  }
}

/* Small phones */
@media(max-width:390px){
  .category-button{
    min-width:116px;
    padding:10px 12px;
  }

  .product-grid{
    gap:9px;
  }

  .product-card{
    padding:9px;
  }

  .product-info h3{
    font-size:12px;
  }

  .price{
    font-size:14px;
  }

  .add-button{
    font-size:11px;
    padding-inline:8px;
  }
}

/* Respect user accessibility preference */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}



/* =========================================================
   Sweetza v6.3 — UI concepts merged from uploaded Gemini CSS
   ========================================================= */

/* Shared interaction timing inspired by uploaded component layer */
:root{
  --ui-transition: all .25s cubic-bezier(.4,0,.2,1);
  --ui-shadow-sm: 0 2px 6px rgba(28,17,37,.05);
  --ui-shadow-md: 0 10px 28px rgba(28,17,37,.09);
  --ui-shadow-lg: 0 20px 44px rgba(28,17,37,.13);
}

/* Product cards: crisp border + soft ecommerce elevation */
.product-card{
  border:1px solid #e7dfe9;
  box-shadow:var(--ui-shadow-sm);
  transition:transform .25s cubic-bezier(.4,0,.2,1),
             box-shadow .25s cubic-bezier(.4,0,.2,1),
             border-color .25s ease;
}
@media(hover:hover) and (pointer:fine){
  .product-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--ui-shadow-md);
    border-color:rgba(214,51,132,.22);
  }
  .product-card:hover .product-image > img{
    transform:scale(1.045);
  }
}
.product-image > img{
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}

/* Category nav borrows pill-filter clarity, mapped to Sweetza markup */
.category-grid{
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.category-grid::-webkit-scrollbar{display:none}
.category-button{
  white-space:nowrap;
  transition:var(--ui-transition);
}
.category-button:hover:not(.active){
  border-color:rgba(214,51,132,.18);
}
.category-button.active{
  background:linear-gradient(135deg,rgba(255,79,163,.08),rgba(122,92,255,.08));
}

/* Controls: more tactile but still restrained */
.add-button,
.primary-button,
.secondary-button,
.whatsapp-button,
.floating-cart,
.icon-button{
  transition:var(--ui-transition);
}
.add-button:active:not(:disabled),
.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.whatsapp-button:active:not(:disabled),
.floating-cart:active:not(:disabled){
  transform:scale(.98);
}

/* Cart drawer: smoother slide/elevation */
.cart-panel{
  box-shadow:-20px 0 46px rgba(28,17,37,.14);
  animation-duration:.34s;
}
.cart-backdrop{
  transition:opacity .25s ease;
}

/* Cart quantity controls use uploaded 44px-accessibility idea rather than its 28px original */
.mini-stepper button,
.qty-stepper button{
  transition:background-color .2s ease,color .2s ease,transform .12s ease;
}
.mini-stepper button:hover,
.qty-stepper button:hover{
  background:#eee8f2;
}
.mini-stepper button:active,
.qty-stepper button:active{
  transform:scale(.94);
}

/* Delivery selection adapted from uploaded active-option card pattern */
.delivery-option{
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
@media(hover:hover) and (pointer:fine){
  .delivery-option:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(28,17,37,.05);
  }
}

/* Inputs adopt cleaner focus treatment */
.field input,
.field select{
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.field input:focus,
.field select:focus{
  outline:none;
}

/* Toasts borrow the compact premium notification treatment */
.toast{
  box-shadow:var(--ui-shadow-md);
  border:1px solid rgba(255,255,255,.08);
}

/* Small visual response after add-to-cart */
@keyframes sweetzaCartPulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.floating-cart.cart-pulse{
  animation:sweetzaCartPulse .42s cubic-bezier(.16,1,.3,1);
}

/* Mobile refinements */
@media(max-width:768px){
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cart-panel{
    width:100vw!important;
    max-width:100vw!important;
  }

  .toast{
    width:auto;
    max-width:calc(100vw - 24px);
  }
}

@media(max-width:390px){
  .category-button{
    min-width:112px;
  }

  .product-card{
    border-radius:16px;
  }
}

/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  .floating-cart.cart-pulse{animation:none!important}
}



/* =========================================================
   v6.4 Mobile optimization merge
   Adapted from uploaded mobile CSS
   ========================================================= */

@media (max-width: 768px) {

  /* 1. Category navigation: all 4 categories visible in a 2x2 grid */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    width: calc(100% - 1rem);
    padding: 0.5rem;
    overflow: visible;
  }

  .category-button {
    width: 100%;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .category-button strong,
  .category-button span {
    text-align: center;
  }

  /* 2. Cart: lock to viewport, internal scrolling, sticky footer/actions */
  .cart-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden !important;
  }

  .cart-header {
    flex: none;
  }

  .order-step.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .order-summary-card {
    position: sticky;
    bottom: 0;
    z-index: 8;
    margin-top: 1rem;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 -0.25rem 0.75rem rgba(0,0,0,.06);
  }

  .delivery-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    padding-top: 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    background: linear-gradient(
      180deg,
      rgba(252,251,254,0) 0%,
      rgba(252,251,254,.96) 20%,
      rgba(252,251,254,1) 100%
    );
  }

  /* 3. Lightbox: fit comfortably inside phone viewport */
  .product-lightbox {
    padding: 0.75rem;
  }

  .product-lightbox-dialog {
    width: min(90vw, 32rem);
    max-width: 100%;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
  }

  #productLightboxImage {
    max-width: 100%;
    max-height: 60dvh;
    object-fit: contain;
    margin-bottom: 0.75rem;
  }

  #productLightboxTitle {
    text-align: center;
    font-size: clamp(1rem, 4.5vw, 1.1rem);
    line-height: 1.3;
  }
}

@media (max-width: 390px) {
  .category-grid {
    gap: 0.5rem;
  }

  .category-button {
    padding: 0.65rem 0.4rem;
  }

  .category-button strong {
    font-size: 0.78rem;
  }

  .category-button span {
    font-size: 0.65rem;
  }

  .product-lightbox-dialog {
    width: 94vw;
    padding: 0.875rem;
  }
}


/* v6.5 — categories directly below logo */
.brand-section{
  padding-bottom:0.5rem;
}

.category-grid{
  margin-top:0;
  margin-bottom:1.25rem;
}

@media(max-width:768px){
  .brand-section{
    padding-bottom:0.35rem;
  }

  .category-grid{
    margin-top:0;
    margin-bottom:1rem;
  }
}



/* =========================================================
   v6.6 Compact Cart / Order Review
   ========================================================= */

@media(max-width:768px){

  .cart-panel{
    padding:0 !important;
    background:#fcfbfe;
  }

  .cart-header{
    margin:0 !important;
    padding:0.9rem 1rem 0.75rem !important;
    min-height:auto;
    border-bottom:1px solid #ece6ef;
  }

  .cart-header h2{
    font-size:clamp(1.15rem,5vw,1.35rem);
    line-height:1.1;
  }

  .cart-header .eyebrow{
    margin-bottom:0.2rem;
    font-size:0.68rem;
    letter-spacing:.12em;
  }

  .cart-header-actions{
    gap:0.5rem;
  }

  .cart-header-actions .text-button{
    min-height:44px;
    padding:0.5rem 0.7rem;
  }

  .order-step.active{
    padding:0 0.8rem 0.8rem;
  }

  .cart-items{
    display:grid;
    gap:0.55rem;
    padding:0.75rem 0 0.5rem;
  }

  .cart-category-group{
    gap:0.4rem;
  }

  .cart-category-heading{
    padding:0.2rem 0.1rem 0;
  }

  .cart-category-heading strong{
    font-size:0.86rem;
  }

  .cart-category-heading span{
    padding:0.25rem 0.5rem;
    font-size:0.68rem;
  }

  .cart-item{
    padding:0.75rem;
    border-radius:0.9rem;
    gap:0.7rem;
    align-items:center;
    box-shadow:0 0.2rem 0.7rem rgba(28,17,37,.045);
  }

  .cart-item-copy strong{
    font-size:0.84rem;
    line-height:1.2;
  }

  .cart-item-copy span,
  .cart-item-copy small{
    margin-top:0.18rem;
    font-size:0.68rem;
    line-height:1.25;
  }

  .cart-item-copy button{
    min-height:32px;
    margin-top:0.28rem;
    padding:0.25rem 0;
    font-size:0.68rem;
  }

  .mini-stepper{
    height:42px;
    min-height:42px;
    border-radius:0.75rem;
  }

  .mini-stepper button{
    width:42px;
    min-width:42px;
    min-height:42px;
  }

  .mini-stepper strong{
    width:38px;
    font-size:0.82rem;
  }

  /* Compact summary */
  .order-summary-card{
    position:sticky;
    bottom:0;
    z-index:9;
    margin-top:0.35rem;
    padding:0.9rem;
    border-radius:1rem 1rem 0 0;
    box-shadow:0 -0.35rem 1rem rgba(28,17,37,.08);
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(10px);
  }

  .order-summary-heading{
    align-items:center;
    margin-bottom:0.55rem;
  }

  .order-summary-heading strong{
    font-size:0.95rem;
  }

  .order-summary-heading span{
    font-size:0.74rem;
  }

  .order-total-row{
    padding:0.55rem 0;
    margin-bottom:0.6rem;
  }

  .order-total-row span{
    font-size:0.78rem;
  }

  .order-total-row strong{
    font-size:1.35rem;
  }

  /* Merge free delivery into one compact horizontal block */
  .delivery-progress-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "copy amount"
      "track track";
    align-items:center;
    gap:0.45rem 0.75rem;
    padding:0.7rem 0.8rem;
    margin-bottom:0.55rem;
    border-radius:0.8rem;
  }

  .delivery-progress-copy{
    display:contents;
    margin:0;
  }

  .delivery-progress-copy strong{
    grid-area:copy;
    margin:0;
    font-size:0.72rem;
    line-height:1.3;
  }

  .delivery-progress-copy span{
    grid-area:amount;
    margin:0;
    font-size:0.72rem;
    font-weight:700;
    white-space:nowrap;
    text-align:right;
  }

  .delivery-progress-track{
    grid-area:track;
    height:0.38rem;
    margin:0;
  }

  .muted{
    margin:0.35rem 0 0.55rem;
    font-size:0.68rem;
    line-height:1.35;
  }

  #looksGoodButton{
    min-height:48px;
    height:48px;
    font-size:0.86rem;
    margin-top:0.15rem;
  }
}

@media(max-width:390px){

  .order-step.active{
    padding-inline:0.55rem;
  }

  .cart-item{
    padding:0.65rem;
  }

  .cart-item-copy strong{
    font-size:0.8rem;
  }

  .mini-stepper button{
    width:40px;
    min-width:40px;
  }

  .mini-stepper strong{
    width:34px;
  }

  .order-summary-card{
    padding:0.75rem;
  }

  .delivery-progress-card{
    grid-template-columns:minmax(0,1fr) auto;
    padding:0.65rem 0.7rem;
  }

  .delivery-progress-copy strong,
  .delivery-progress-copy span{
    font-size:0.68rem;
  }
}



/* =========================================================
   v6.7 — Tighter mobile cart item cards
   ========================================================= */

@media(max-width:768px){

  .cart-items{
    gap:0.4rem;
  }

  .cart-category-group{
    gap:0.3rem;
  }

  .cart-category-heading{
    padding-top:0.1rem;
    margin-bottom:0.1rem;
  }

  .cart-item{
    min-height:0;
    padding:0.58rem 0.65rem;
    gap:0.55rem;
    border-radius:0.8rem;
    align-items:center;
  }

  .cart-item-copy{
    display:grid;
    align-content:center;
    gap:0.08rem;
  }

  .cart-item-copy strong{
    font-size:0.8rem;
    line-height:1.12;
    margin:0;
  }

  .cart-item-copy span,
  .cart-item-copy small{
    margin:0;
    font-size:0.64rem;
    line-height:1.15;
  }

  .cart-item-copy button{
    min-height:28px;
    margin-top:0.12rem;
    padding:0.15rem 0;
    font-size:0.64rem;
    line-height:1;
  }

  .mini-stepper{
    height:40px;
    min-height:40px;
    border-radius:0.65rem;
  }

  .mini-stepper button{
    width:40px;
    min-width:40px;
    min-height:40px;
    font-size:0.9rem;
  }

  .mini-stepper strong{
    width:34px;
    font-size:0.78rem;
  }
}

@media(max-width:390px){

  .cart-item{
    padding:0.52rem 0.58rem;
    gap:0.45rem;
  }

  .cart-item-copy strong{
    font-size:0.76rem;
  }

  .cart-item-copy span,
  .cart-item-copy small,
  .cart-item-copy button{
    font-size:0.61rem;
  }

  .mini-stepper{
    height:38px;
    min-height:38px;
  }

  .mini-stepper button{
    width:38px;
    min-width:38px;
    min-height:38px;
  }

  .mini-stepper strong{
    width:32px;
    font-size:0.75rem;
  }
}


/* =========================================================
   v6.8 — Delivery screen cleanup
   ========================================================= */

.delivery-intro{
  margin-bottom:1rem;
}

.delivery-intro p{
  margin:0;
  font-size:0.92rem;
  line-height:1.45;
}

@media(max-width:768px){
  #deliveryOptionsStep{
    padding-top:0.85rem;
  }

  .delivery-intro{
    margin-bottom:0.85rem;
  }

  .delivery-intro p{
    font-size:0.82rem;
    color:var(--text-muted);
  }

  .delivery-options{
    gap:0.75rem;
    margin-bottom:1rem;
  }

  .delivery-option{
    padding:0.95rem 1rem;
    border-radius:0.95rem;
  }

  .delivery-option strong{
    font-size:0.92rem;
  }

  .delivery-option small{
    font-size:0.78rem;
  }

  .delivery-form{
    margin-bottom:1rem;
    padding:1rem;
  }

  .delivery-form h4{
    margin-bottom:0.85rem;
    font-size:1rem;
  }

  .field{
    margin-bottom:0.85rem;
  }

  .field span{
    margin-bottom:0.35rem;
    font-size:0.75rem;
  }

  .field input,
  .field select{
    min-height:48px;
    height:48px;
    font-size:1rem;
  }
}


/* =========================================================
   v6.9 — Delivery Form mobile scrolling fix
   ========================================================= */

@media(max-width:768px){

  /* Order Review keeps its specialized internal cart-items scrolling.
     Delivery needs the whole step to scroll because the form fields sit
     directly inside the step rather than inside .cart-items. */
  #deliveryOptionsStep.order-step.active{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    scroll-padding-top:1rem;
    scroll-padding-bottom:calc(6.5rem + env(safe-area-inset-bottom));
    padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  }

  #deliveryOptionsStep .delivery-intro,
  #deliveryOptionsStep .delivery-options,
  #deliveryOptionsStep .delivery-form{
    flex:none;
  }

  /* Keep actions accessible without blocking the last form fields. */
  #deliveryOptionsStep .delivery-actions{
    flex:none;
    position:sticky;
    bottom:0;
    z-index:10;
    margin-top:0.25rem;
    padding-top:0.8rem;
    padding-bottom:calc(0.65rem + env(safe-area-inset-bottom));
    background:linear-gradient(
      180deg,
      rgba(252,251,254,0) 0%,
      rgba(252,251,254,.96) 24%,
      #fcfbfe 46%
    );
  }

  /* Extra breathing room after forms so the keyboard/sticky actions
     never cover the final field. */
  #courierFields,
  #pudoFields{
    scroll-margin-top:0.75rem;
  }

  #courierFields .field:last-child,
  #pudoFields .field:last-child{
    margin-bottom:1.25rem;
  }

  #deliveryOptionsStep input,
  #deliveryOptionsStep select{
    scroll-margin-top:5rem;
    scroll-margin-bottom:7rem;
  }
}

/* Short-height phones need more compact delivery spacing. */
@media(max-width:768px) and (max-height:700px){
  #deliveryOptionsStep .delivery-options{
    gap:0.55rem;
    margin-bottom:0.75rem;
  }

  #deliveryOptionsStep .delivery-option{
    padding:0.75rem 0.9rem;
  }

  #deliveryOptionsStep .delivery-form{
    padding:0.85rem;
  }

  #deliveryOptionsStep .field{
    margin-bottom:0.7rem;
  }
}



/* =========================================================
   v6.10 — Product Grid normal page scrolling
   ========================================================= */

/* Storefront content must participate in normal document flow. */
main,
.shop-section,
.shop-heading,
.product-grid,
.product-card{
  position:static !important;
  top:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none;
}

/* Product grid must not become its own scroll container. */
.shop-section,
.product-grid{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* Body/page owns storefront scrolling when cart/lightbox is closed. */
html,
body{
  min-height:100%;
}

body:not(.cart-open):not(.lightbox-open){
  overflow-x:hidden;
  overflow-y:auto;
}

/* Keep the category selector in normal flow too.
   This avoids the impression that products are pinned under it. */
.category-grid{
  position:relative !important;
  top:auto !important;
}

/* Only intentional overlay UI remains fixed. */
.floating-cart{
  position:fixed !important;
}

.cart-drawer,
.product-lightbox,
.toast{
  /* existing overlay positioning remains controlled by their base rules */
}

/* Mobile: explicitly avoid nested storefront scrolling. */
@media(max-width:768px){
  main,
  .shop-section,
  .product-grid{
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }

  .category-grid{
    position:relative !important;
    top:auto !important;
  }
}


/* =========================================================
   v6.11 — Floating Jump-to-Cart Pill + Bouncing Badge
   ========================================================= */

.floating-cart-pill{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(1rem + env(safe-area-inset-bottom)) !important;
  width:auto !important;
  min-width:min(20rem,calc(100vw - 2rem)) !important;
  max-width:calc(100vw - 2rem);
  min-height:3.25rem !important;
  height:auto !important;
  padding:0.55rem 0.7rem 0.55rem 0.85rem !important;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0.65rem !important;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999rem;
  background:linear-gradient(135deg,#2f2140 0%,#4b315d 100%);
  color:#fff;
  box-shadow:0 0.9rem 2.2rem rgba(28,17,37,.24);
  transform:translate(-50%,calc(100% + 2rem)) scale(.98);
  opacity:0;
  pointer-events:none;
  z-index:90;
  transition:
    transform .3s cubic-bezier(.16,1,.3,1),
    opacity .22s ease,
    box-shadow .2s ease;
}

.floating-cart-pill.visible{
  transform:translate(-50%,0) scale(1);
  opacity:1;
  pointer-events:auto;
}

.floating-cart-pill:hover{
  box-shadow:0 1rem 2.5rem rgba(28,17,37,.29);
}

.floating-cart-icon{
  flex:none;
  font-size:1rem;
  line-height:1;
}

.floating-cart-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.05rem;
  text-align:left;
}

.floating-cart-label{
  font-size:0.78rem;
  font-weight:700;
  line-height:1.1;
}

.floating-cart-meta{
  font-size:0.65rem;
  line-height:1.1;
  color:rgba(255,255,255,.74);
}

#floatingCartCount{
  display:inline-block;
  min-width:1ch;
  transform-origin:center;
}

#floatingCartCount.badge-bounce{
  animation:sweetzaBadgeBounce .42s cubic-bezier(.16,1,.3,1);
}

@keyframes sweetzaBadgeBounce{
  0%{transform:scale(1)}
  42%{transform:scale(1.5)}
  70%{transform:scale(.9)}
  100%{transform:scale(1)}
}

.floating-cart-total{
  flex:none;
  margin-left:auto;
  min-width:4.6rem;
  min-height:2.25rem;
  padding:0 0.7rem;
  display:grid;
  place-items:center;
  border-radius:999rem;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:0.76rem;
  font-weight:700;
  white-space:nowrap;
}

@media(max-width:390px){
  .floating-cart-pill{
    min-width:calc(100vw - 1.2rem) !important;
    max-width:calc(100vw - 1.2rem);
    bottom:calc(0.6rem + env(safe-area-inset-bottom)) !important;
    padding-inline:0.7rem !important;
  }

  .floating-cart-total{
    min-width:4.2rem;
    padding-inline:0.55rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .floating-cart-pill{
    transition:opacity .01ms linear !important;
  }

  #floatingCartCount.badge-bounce{
    animation:none !important;
  }
}


/* =========================================================
   v6.13 — Smaller floating cart pill
   ========================================================= */

/* Prevent duplicate trolley icon from earlier pseudo-element styling */
.floating-cart::before,
.floating-cart-pill::before{
  content:none !important;
  display:none !important;
}

/* Make the floating View Cart pill more compact */
.floating-cart-pill{
  min-width:min(14.5rem,calc(100vw - 1.5rem)) !important;
  max-width:calc(100vw - 1.5rem);
  min-height:2.85rem !important;
  padding:0.42rem 0.55rem 0.42rem 0.65rem !important;
  gap:0.5rem !important;
  border-radius:999rem;
}

.floating-cart-icon{
  font-size:0.9rem;
}

.floating-cart-label{
  font-size:0.72rem;
}

.floating-cart-meta{
  font-size:0.6rem;
}

.floating-cart-total{
  min-width:3.9rem;
  min-height:1.95rem;
  padding:0 0.55rem;
  font-size:0.69rem;
}

@media(max-width:390px){
  .floating-cart-pill{
    min-width:min(13.5rem,calc(100vw - 1rem)) !important;
    max-width:calc(100vw - 1rem);
    padding:0.4rem 0.5rem 0.4rem 0.6rem !important;
  }

  .floating-cart-total{
    min-width:3.6rem;
    padding-inline:0.45rem;
  }
}



/* =========================================================
   v6.14 — Clear category cards
   ========================================================= */

.category-grid{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  gap:0.7rem !important;
}

.category-button{
  position:relative;
  min-height:5.25rem;
  padding:0.9rem 0.8rem !important;
  border:1px solid #e6deeb !important;
  border-radius:1rem !important;
  background:#ffffff !important;
  box-shadow:0 0.2rem 0.7rem rgba(28,17,37,.045);
  color:var(--text);
  text-align:center;
  align-items:center;
  justify-content:center;
}

.category-button strong{
  font-size:0.9rem;
  line-height:1.2;
}

.category-button span{
  margin-top:0.25rem;
  font-size:0.72rem;
  line-height:1.2;
  color:var(--text-muted);
}

/* Soft individual tints to make the 4 choices visually distinct */
.category-button:nth-child(1){
  background:linear-gradient(180deg,#fff,#fbf5ff) !important;
}

.category-button:nth-child(2){
  background:linear-gradient(180deg,#fff,#f8fbff) !important;
}

.category-button:nth-child(3){
  background:linear-gradient(180deg,#fff,#fff8fb) !important;
}

.category-button:nth-child(4){
  background:linear-gradient(180deg,#fff,#faf9ff) !important;
}

.category-button.active{
  border-color:#d7c4ee !important;
  background:linear-gradient(180deg,#fff,#f7efff) !important;
  box-shadow:
    0 0.35rem 0.9rem rgba(122,92,255,.10),
    inset 0 0 0 1px rgba(122,92,255,.06);
}

.category-button.active strong{
  color:#d64ea1;
}

.category-button.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0.6rem;
  width:1.8rem;
  height:0.16rem;
  transform:translateX(-50%);
  border-radius:999rem;
  background:linear-gradient(90deg,#ff4fa3,#7a5cff);
}

@media(hover:hover) and (pointer:fine){
  .category-button:hover{
    transform:translateY(-2px);
    border-color:#d9cfe0 !important;
    box-shadow:0 0.45rem 1rem rgba(28,17,37,.08);
  }
}

@media(max-width:768px){
  .category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0.55rem !important;
    width:calc(100% - 1rem);
  }

  .category-button{
    min-height:4.8rem;
    padding:0.78rem 0.6rem !important;
    border-radius:0.9rem !important;
  }

  .category-button strong{
    font-size:0.82rem;
  }

  .category-button span{
    font-size:0.68rem;
  }
}

@media(max-width:390px){
  .category-grid{
    gap:0.45rem !important;
  }

  .category-button{
    min-height:4.55rem;
    padding:0.7rem 0.5rem !important;
  }
}


/* =========================================================
   v6.15 — Mobile cart polish
   ========================================================= */

/* 1–2. Medium compact pill, fixed centered position.
   Do not animate transform on the pill during add-to-cart. */
.floating-cart-pill{
  left:50% !important;
  right:auto !important;
  bottom:calc(0.85rem + env(safe-area-inset-bottom)) !important;
  width:auto !important;
  min-width:min(13rem,calc(100vw - 1.5rem)) !important;
  max-width:calc(100vw - 1.5rem) !important;
  min-height:2.7rem !important;
  padding:0.4rem 0.55rem 0.4rem 0.65rem !important;
  gap:0.45rem !important;
  transform:translateX(-50%) translateY(calc(100% + 2rem)) !important;
  transition:
    opacity .22s ease,
    bottom .22s ease !important;
}

.floating-cart-pill.visible{
  transform:translateX(-50%) translateY(0) !important;
}

.floating-cart-pill.cart-pulse{
  animation:none !important;
  transform:translateX(-50%) translateY(0) !important;
}

.floating-cart-icon{
  font-size:0.85rem;
}

.floating-cart-label{
  font-size:0.7rem;
}

.floating-cart-meta{
  font-size:0.58rem;
}

.floating-cart-total{
  min-width:3.6rem;
  min-height:1.85rem;
  padding:0 0.5rem;
  font-size:0.66rem;
}

/* 3. Smaller, subtler toast */
.toast{
  max-width:min(18rem,calc(100vw - 2rem));
  padding:0.6rem 0.9rem !important;
  border-radius:0.85rem !important;
  font-size:0.72rem !important;
  line-height:1.3 !important;
  font-weight:500 !important;
  text-align:center;
}

.toast strong,
.toast b{
  font-size:inherit !important;
  font-weight:600 !important;
}

/* 4. Mild product highlight while customer is interacting */
.product-card.is-interacting{
  border-color:rgba(122,92,255,.38) !important;
  background:linear-gradient(180deg,#fff,#fbf8ff) !important;
  box-shadow:
    0 0 0 2px rgba(122,92,255,.07),
    0 0.45rem 1rem rgba(28,17,37,.07) !important;
}

/* 5. Compact cart preview thumbnail */
.cart-item{
  display:grid !important;
  grid-template-columns:2.75rem minmax(0,1fr) auto;
  align-items:center;
}

.cart-item-thumb{
  width:2.75rem;
  height:2.75rem;
  border-radius:0.65rem;
  background:#f6f3f8;
  border:1px solid #ece5ef;
  object-fit:contain;
  padding:0.2rem;
}

.cart-item-copy{
  min-width:0;
}

@media(max-width:768px){
  .cart-item{
    grid-template-columns:2.4rem minmax(0,1fr) auto !important;
    gap:0.5rem !important;
  }

  .cart-item-thumb{
    width:2.4rem;
    height:2.4rem;
    border-radius:0.55rem;
  }

  .floating-cart-pill{
    min-width:min(12.5rem,calc(100vw - 1.2rem)) !important;
    max-width:calc(100vw - 1.2rem) !important;
  }

  .toast{
    font-size:0.68rem !important;
    padding:0.55rem 0.8rem !important;
  }
}


/* =========================================================
   v6.16 — Compact summary, stronger highlight, toast reposition,
   smaller floating cart pill
   ========================================================= */

/* 1. Smaller Order Summary card while keeping all information */
@media(max-width:768px){

  .order-summary-card{
    padding:0.7rem !important;
    margin-top:0.25rem !important;
    border-radius:0.9rem 0.9rem 0 0 !important;
  }

  .order-summary-heading{
    margin-bottom:0.35rem !important;
    align-items:center;
  }

  .order-summary-heading strong{
    font-size:0.88rem !important;
    line-height:1.15;
  }

  .order-summary-heading span{
    font-size:0.68rem !important;
  }

  .order-total-row{
    padding:0.4rem 0 !important;
    margin-bottom:0.4rem !important;
  }

  .order-total-row span{
    font-size:0.72rem !important;
  }

  .order-total-row strong{
    font-size:1.15rem !important;
  }

  .delivery-progress-card{
    padding:0.55rem 0.65rem !important;
    gap:0.35rem 0.6rem !important;
    margin-bottom:0.4rem !important;
    border-radius:0.7rem !important;
  }

  .delivery-progress-copy strong,
  .delivery-progress-copy span{
    font-size:0.64rem !important;
  }

  .delivery-progress-track{
    height:0.3rem !important;
  }

  .muted{
    margin:0.2rem 0 0.4rem !important;
    font-size:0.62rem !important;
    line-height:1.25 !important;
  }

  #looksGoodButton{
    min-height:44px !important;
    height:44px !important;
    font-size:0.78rem !important;
    margin-top:0 !important;
  }
}

/* 2. Stronger selected/interacting product highlight */
.product-card.is-interacting{
  border-color:rgba(255,79,163,.58) !important;
  background:
    linear-gradient(180deg,#fff 0%,#fff6fb 58%,#f8f1ff 100%) !important;
  box-shadow:
    0 0 0 2px rgba(255,79,163,.12),
    0 0.55rem 1.2rem rgba(122,92,255,.13) !important;
}

/* 3. Move add-to-cart toast away from the middle */
.toast{
  top:calc(0.75rem + env(safe-area-inset-top)) !important;
  bottom:auto !important;
  left:50% !important;
  transform:translate(-50%,-0.5rem) !important;
  max-width:min(17rem,calc(100vw - 1.5rem)) !important;
  padding:0.5rem 0.75rem !important;
  border-radius:999rem !important;
  font-size:0.66rem !important;
  line-height:1.2 !important;
  opacity:0;
}

.toast.show{
  transform:translate(-50%,0) !important;
  opacity:1;
}

/* 4. Make floating View Cart pill smaller again */
.floating-cart-pill{
  min-width:min(10.75rem,calc(100vw - 1.25rem)) !important;
  max-width:calc(100vw - 1.25rem) !important;
  min-height:2.45rem !important;
  padding:0.34rem 0.45rem 0.34rem 0.55rem !important;
  gap:0.38rem !important;
}

.floating-cart-icon{
  font-size:0.78rem !important;
}

.floating-cart-label{
  font-size:0.64rem !important;
}

.floating-cart-meta{
  font-size:0.54rem !important;
}

.floating-cart-total{
  min-width:3.25rem !important;
  min-height:1.65rem !important;
  padding:0 0.42rem !important;
  font-size:0.6rem !important;
}

@media(max-width:390px){
  .floating-cart-pill{
    min-width:min(10.2rem,calc(100vw - 0.9rem)) !important;
    max-width:calc(100vw - 0.9rem) !important;
  }

  .toast{
    max-width:calc(100vw - 1rem) !important;
  }
}


/* =========================================================
   v6.17 — Fixed cart icon + fly-to-cart animation
   ========================================================= */

/* Hide old pill styling completely */
.floating-cart-pill{
  display:none !important;
}

/* Familiar ecommerce-style fixed cart button */
.floating-cart-icon-button{
  position:fixed !important;
  left:auto !important;
  right:clamp(0.75rem,3vw,1.25rem) !important;
  bottom:calc(clamp(0.75rem,3vw,1.25rem) + env(safe-area-inset-bottom)) !important;
  width:3.4rem !important;
  min-width:3.4rem !important;
  max-width:3.4rem !important;
  height:3.4rem !important;
  min-height:3.4rem !important;
  padding:0 !important;
  display:grid;
  place-items:center;
  border:1px solid rgba(122,92,255,.18);
  border-radius:50%;
  background:linear-gradient(135deg,#7a5cff,#9a65d8);
  color:#fff;
  box-shadow:0 0.7rem 1.6rem rgba(28,17,37,.2);
  transform:scale(.88) !important;
  opacity:0;
  pointer-events:none;
  z-index:95;
  transition:
    opacity .18s ease,
    transform .2s cubic-bezier(.16,1,.3,1),
    box-shadow .2s ease !important;
}

.floating-cart-icon-button.visible{
  opacity:1;
  pointer-events:auto;
  transform:scale(1) !important;
}

.floating-cart-icon-button:hover{
  box-shadow:0 0.9rem 2rem rgba(28,17,37,.26);
}

.cart-button-icon{
  font-size:1.3rem;
  line-height:1;
  transform:translateY(0.02rem);
}

.cart-button-badge{
  position:absolute;
  top:-0.22rem;
  right:-0.22rem;
  min-width:1.35rem;
  height:1.35rem;
  padding:0 0.3rem;
  display:grid;
  place-items:center;
  border-radius:999rem;
  border:2px solid #fff;
  background:#ff4fa3;
  color:#fff;
  font-size:0.63rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 0.18rem 0.5rem rgba(28,17,37,.18);
}

#floatingCartCount.badge-bounce{
  animation:sweetzaBadgeBounce .42s cubic-bezier(.16,1,.3,1);
}

.floating-cart-icon-button.cart-catch{
  animation:cartCatch .34s cubic-bezier(.16,1,.3,1);
}

@keyframes cartCatch{
  0%{transform:scale(1) !important}
  42%{transform:scale(1.14) rotate(-4deg) !important}
  75%{transform:scale(.96) rotate(2deg) !important}
  100%{transform:scale(1) rotate(0) !important}
}

/* Small product image that flies into the cart */
.fly-to-cart-image{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  object-fit:contain;
  border-radius:0.65rem;
  padding:0.15rem;
  background:#fff;
  box-shadow:0 0.5rem 1.2rem rgba(28,17,37,.18);
  transform:translate(0,0) scale(1) rotate(0);
  transform-origin:center;
  opacity:.95;
  transition:
    transform .56s cubic-bezier(.22,.7,.18,1),
    opacity .56s ease;
  will-change:transform,opacity;
}

/* Utility for screen-reader-only subtotal text */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media(max-width:390px){
  .floating-cart-icon-button{
    width:3.15rem !important;
    min-width:3.15rem !important;
    max-width:3.15rem !important;
    height:3.15rem !important;
    min-height:3.15rem !important;
  }

  .cart-button-icon{
    font-size:1.2rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .fly-to-cart-image{
    display:none !important;
  }

  .floating-cart-icon-button.cart-catch,
  #floatingCartCount.badge-bounce{
    animation:none !important;
  }
}



/* =========================================================
   v6.18 — Cleaner product badges
   ========================================================= */

/* Shared badge foundation */
.pack-badge,
.stock-badge{
  top:0.6rem;
  min-height:1.65rem;
  padding:0.3rem 0.55rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.28rem;
  border-radius:999rem;
  font-family:"Inter",system-ui,sans-serif;
  font-size:0.64rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  text-transform:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 0.18rem 0.55rem rgba(28,17,37,.08);
}

/* Pack size: clean premium neutral chip */
.pack-badge{
  left:0.6rem;
  color:#5f468d;
  background:rgba(250,247,255,.94);
  border:1px solid rgba(122,92,255,.18);
}

/* Stock: simple status chips */
.stock-badge{
  right:0.6rem;
}

/* Available */
.stock-badge.available{
  color:#256b43 !important;
  background:rgba(239,249,243,.96) !important;
  border:1px solid rgba(46,125,82,.20) !important;
}

/* Small status dot */
.stock-badge.available::before{
  content:"";
  width:0.38rem;
  height:0.38rem;
  flex:none;
  border-radius:50%;
  background:#35a866;
  box-shadow:0 0 0 0.16rem rgba(53,168,102,.10);
}

/* Out of stock */
.stock-badge.out{
  color:#a43b4a !important;
  background:rgba(255,244,246,.97) !important;
  border:1px solid rgba(180,63,79,.18) !important;
}

.stock-badge.out::before{
  content:"";
  width:0.38rem;
  height:0.38rem;
  flex:none;
  border-radius:50%;
  background:#d45a68;
  box-shadow:0 0 0 0.16rem rgba(212,90,104,.09);
}

/* Keep product image area uncluttered */
.product-image{
  position:relative;
}

/* Mobile refinement */
@media(max-width:768px){
  .pack-badge,
  .stock-badge{
    top:0.45rem;
    min-height:1.5rem;
    padding:0.26rem 0.46rem;
    font-size:0.58rem;
    box-shadow:0 0.14rem 0.4rem rgba(28,17,37,.065);
  }

  .pack-badge{
    left:0.45rem;
  }

  .stock-badge{
    right:0.45rem;
  }

  .stock-badge.available::before,
  .stock-badge.out::before{
    width:0.32rem;
    height:0.32rem;
    box-shadow:none;
  }
}

@media(max-width:390px){
  .pack-badge,
  .stock-badge{
    font-size:0.55rem;
    padding:0.24rem 0.4rem;
  }
}


/* =========================================================
   v6.19 — Delivery wording + circular cart button
   ========================================================= */

.floating-cart-icon-button{
  width:3.4rem !important;
  min-width:3.4rem !important;
  max-width:3.4rem !important;
  height:3.4rem !important;
  min-height:3.4rem !important;
  max-height:3.4rem !important;
  aspect-ratio:1 / 1;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
}

.cart-button-icon{
  display:block;
  line-height:1;
}

@media(max-width:390px){
  .floating-cart-icon-button{
    width:3.15rem !important;
    min-width:3.15rem !important;
    max-width:3.15rem !important;
    height:3.15rem !important;
    min-height:3.15rem !important;
    max-height:3.15rem !important;
  }
}


/* =========================================================
   v6.26 — Normal clean storefront
   Removes experimental background/pattern styling.
   ========================================================= */

html,
body{
  min-height:100%;
  background:#f7f4f8 !important;
}

body::before,
body::after{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}

.brand-section{
  background:#ffffff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.shop-section{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Keep category cards clean and standard */
.category-grid{
  background:transparent !important;
}

.category-button,
.category-button:nth-child(1),
.category-button:nth-child(2),
.category-button:nth-child(3),
.category-button:nth-child(4){
  filter:none !important;
  transform:none;
}

@media(hover:hover) and (pointer:fine){
  .category-button:hover{
    transform:translateY(-1px);
  }
}


/* =========================================================
   v6.27 — Remove stock badge
   Stock availability is enforced through disabled controls,
   not a visible badge.
   ========================================================= */

.stock-badge{
  display:none !important;
}

/* Out-of-stock products remain visibly unavailable */
.product-card.is-out-of-stock{
  opacity:.68;
}

.product-card.is-out-of-stock .qty-stepper,
.product-card.is-out-of-stock .add-button{
  cursor:not-allowed !important;
}


/* =========================================================
   v6.28 — Floating cart icon glass finish
   Softer mild-purple glass styling, less dark appearance
   ========================================================= */

.floating-cart-icon-button{
  background:linear-gradient(180deg, rgba(255,255,255,0.76), rgba(240,232,255,0.92)) !important;
  border:1px solid rgba(164,129,255,.30) !important;
  color:#7a5cff !important;
  box-shadow:
    0 .7rem 1.5rem rgba(122,92,255,.14),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -.65rem 1rem rgba(169,143,255,.10) !important;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}

.floating-cart-icon-button::before{
  content:"";
  position:absolute;
  inset:.24rem;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.06));
  pointer-events:none;
}

.floating-cart-icon-button:hover{
  box-shadow:
    0 .9rem 1.85rem rgba(122,92,255,.18),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -.65rem 1rem rgba(169,143,255,.14) !important;
}

.floating-cart-icon-button:active{
  box-shadow:
    0 .55rem 1rem rgba(122,92,255,.14),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -.5rem .9rem rgba(169,143,255,.15) !important;
}

.cart-button-icon{
  position:relative;
  z-index:1;
  color:#7c5cff;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}

.cart-button-badge{
  z-index:2;
  border-color:rgba(255,255,255,.95);
  box-shadow:0 .2rem .55rem rgba(122,92,255,.22);
}


/* =========================================================
   v6.29 — Single background + compact range heading
   ========================================================= */

:root{
  --sweetza-page-bg:#f7f4f8;
}

/* One consistent background across the storefront */
html,
body,
main,
.brand-section,
.shop-section{
  background:var(--sweetza-page-bg) !important;
}

.brand-section,
.shop-section{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Keep category navigation sitting naturally on the same background */
.category-grid{
  background:transparent !important;
}

/* Compact the range heading so products begin higher on mobile */
.shop-section{
  padding-top:0 !important;
}

.shop-heading{
  margin-top:0 !important;
  margin-bottom:0.75rem !important;
  padding-top:0.35rem !important;
}

.shop-heading > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.15rem;
}

.shop-heading .eyebrow{
  margin:0 !important;
  font-size:0.68rem !important;
  line-height:1.15 !important;
  letter-spacing:0.13em !important;
}

.shop-heading h1{
  margin:0.15rem 0 0 !important;
  font-size:clamp(1.65rem,7vw,2.05rem) !important;
  line-height:1.08 !important;
}

.shop-heading p{
  margin:0.28rem auto 0 !important;
  max-width:30rem !important;
  font-size:0.82rem !important;
  line-height:1.35 !important;
}

/* Pull the range section closer to the category cards */
.category-grid{
  margin-bottom:0.35rem !important;
}

@media(max-width:768px){
  .brand-section{
    padding-bottom:0.5rem !important;
  }

  .category-grid{
    margin-bottom:0.25rem !important;
  }

  .shop-heading{
    margin-bottom:0.65rem !important;
    padding-top:0.2rem !important;
  }

  .shop-heading .eyebrow{
    font-size:0.64rem !important;
    letter-spacing:0.12em !important;
  }

  .shop-heading h1{
    font-size:clamp(1.55rem,7.2vw,1.9rem) !important;
  }

  .shop-heading p{
    margin-top:0.22rem !important;
    font-size:0.78rem !important;
    line-height:1.3 !important;
  }
}


/* =========================================================
   v6.30 — Free-delivery confetti celebration
   Small one-time burst when subtotal crosses R500.
   ========================================================= */

.free-delivery-confetti{
  position:fixed;
  inset:0;
  z-index:10050;
  overflow:hidden;
  pointer-events:none;
}

.free-delivery-confetti-piece{
  --x:50vw;
  --drift:0px;
  --delay:0s;
  --duration:1.15s;
  --rotate:360deg;
  --hue:295;
  position:absolute;
  left:var(--x);
  top:-1rem;
  width:.46rem;
  height:.72rem;
  border-radius:.12rem;
  background:hsl(var(--hue) 82% 66%);
  box-shadow:0 1px 2px rgba(50,28,64,.10);
  opacity:0;
  transform:translate3d(0,-1rem,0) rotate(0deg);
  animation:sweetzaConfettiFall var(--duration) cubic-bezier(.18,.7,.25,1) var(--delay) forwards;
}

.free-delivery-confetti-piece:nth-child(3n){
  width:.36rem;
  height:.36rem;
  border-radius:50%;
}

.free-delivery-confetti-piece:nth-child(4n){
  width:.58rem;
  height:.24rem;
  border-radius:999rem;
}

@keyframes sweetzaConfettiFall{
  0%{
    opacity:0;
    transform:translate3d(0,-1rem,0) rotate(0deg) scale(.85);
  }
  10%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate3d(var(--drift),58vh,0) rotate(var(--rotate)) scale(1);
  }
}

@media(max-width:768px){
  .free-delivery-confetti-piece{
    width:.4rem;
    height:.62rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .free-delivery-confetti{
    display:none !important;
  }
}