:root {
  /* Brand Colors */
  --color-primary: #C8506A;
  --color-primary-dark: #A03050;
  --color-primary-light: #F5E6E8;
  --color-accent: #FF8FA3;
  --color-surface: #FFFFFF;
  --color-surface-2: #FBF7F8;
  --color-surface-3: #F0E8EA;
  --color-text: #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-light: #999999;
  --color-border: #E8DADE;
  
  /* Status Colors */
  --color-success: #2D8653;
  --color-success-light: #EBF7F1;
  --color-warning: #C07000;
  --color-warning-light: #FFF8E6;
  --color-error: #C0392B;
  --color-error-light: #FDEDEB;
  --color-info: #2471A3;
  --color-info-light: #EBF5FB;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --base-font-size: 16px;
  --line-height: 1.5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeSpeed;
  line-height: var(--line-height);
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  color: var(--color-text);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 56px; /* for mobile bottom nav */
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
}

@media (min-width: 600px) {
  body {
    padding-bottom: 0;
  }
}

img, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
  margin: 0;
}

/* Typography Utilities */
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 28px; }
@media (min-width: 600px) {
  .text-3xl { font-size: 36px; }
}

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-light { color: var(--color-text-light); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }

.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.75; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 600px) {
  .container { padding: 0 24px; }
}
@media (min-width: 1024px) {
  .container { padding: 0 32px; }
}

.d-none { display: none; }
.d-flex { display: flex; }
.d-block { display: block; }
.d-grid { display: grid; }
@media (min-width: 600px) {
  .d-sm-none { display: none; }
  .d-sm-flex { display: flex; }
}

.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-column,
.flex-col { flex-direction: column !important; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.w-100 { width: 100%; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }

.rounded { border-radius: var(--radius-md); }
.rounded-full { border-radius: var(--radius-pill); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }

/* Grids */
.grid-2, .product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .grid-3, .grid-md-3, .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .grid-4, .grid-lg-4, .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.site-logo {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 22px;
  letter-spacing: -0.5px;
}
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.header-action-btn {
  position: relative;
  display: inline-flex;
  padding: 8px;
}
.cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-error);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 56px !important;
  background: var(--color-surface, #FFFFFF) !important;
  border-top: 1px solid var(--color-border, #E8DADE) !important;
  display: flex !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}
@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
}
.bottom-nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  min-height: 56px;
  color: var(--color-primary);
  transition: color 0.2s;
}
.bottom-nav-item.active,
.bottom-nav-item:hover {
  color: var(--color-primary);
}
.bottom-nav-item .icon,
.bottom-nav-item .icon-lg {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  color: var(--color-primary);
  stroke: var(--color-primary);
  fill: none;
}
.bottom-nav-item span {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-primary);
}
.bottom-nav-item .cart-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  background: var(--color-primary);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* Product Cards */
.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.product-card__image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--color-surface-2);
}
.product-card__image picture,
.hp-card__img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}
.product-card__image img,
.product-card__image picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.product-card:hover .product-card__image img {
  transform: scale(1.05);
}
.product-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  z-index: 2;
  line-height: normal;
}
.product-card__body {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.35;
  margin-bottom: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__price {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.product-card__price-current {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-primary);
}
.product-card__price-original {
  font-size: 12px;
  color: var(--color-text-light);
  text-decoration: line-through;
}
.product-card__discount {
  font-size: 12px;
  color: var(--color-success);
}
.out-of-stock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-text);
  z-index: 10;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: 0.2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
}
.btn-secondary {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.btn-secondary:hover {
  background: var(--color-border);
}
.btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.btn-outline:hover {
  background: var(--color-primary-light);
}
.btn-danger { background: var(--color-error); color: white; }
.btn-success { background: var(--color-success); color: white; }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: var(--color-surface-2); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon { padding: 0; width: 44px; height: 44px; border-radius: var(--radius-pill); }

/* Forms */
.form-group {
  margin-bottom: 16px;
}
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}
.form-control {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 16px;
  outline: none;
  background: var(--color-surface);
  transition: border-color 0.2s;
}
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200, 80, 106, 0.15);
}
textarea.form-control {
  height: auto;
  padding: 12px;
  min-height: 100px;
  resize: vertical;
}
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231A1A1A%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px auto;
  padding-right: 32px;
}
.form-error {
  font-size: 13px;
  color: var(--color-error);
  margin-top: 4px;
}
.form-hint {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.form-check label {
  font-size: 15px;
  cursor: pointer;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-success { background: var(--color-success-light); color: var(--color-success); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.badge-error { background: var(--color-error-light); color: var(--color-error); }
.badge-info { background: var(--color-info-light); color: var(--color-info); }
.badge-secondary { background: var(--color-surface-3); color: var(--color-text-secondary); }

/* Alerts */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.alert-success { background: var(--color-success-light); color: var(--color-success); border-left: 4px solid var(--color-success); }
.alert-error { background: var(--color-error-light); color: var(--color-error); border-left: 4px solid var(--color-error); }
.alert-warning { background: var(--color-warning-light); color: var(--color-warning); border-left: 4px solid var(--color-warning); }
.alert-info { background: var(--color-info-light); color: var(--color-info); border-left: 4px solid var(--color-info); }

/* Cart */
.cart-page {
  max-width: 900px;
  margin: 0 auto;
}
.cart-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-item__image {
  width: 80px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface-2);
}
.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cart-item__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 4px;
}
.cart-item__price {
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 8px;
}
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-control button {
  width: 36px;
  height: 36px;
  background: var(--color-surface-2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-control button:hover { background: var(--color-border); }
.qty-control input {
  width: 44px;
  height: 36px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-weight: 600;
  outline: none;
}
.cart-summary {
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: sticky;
  top: 80px;
}

/* Checkout */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .checkout-layout { grid-template-columns: 60% 40%; }
}
.checkout-section {
  margin-bottom: 24px;
}
.checkout-section-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.payment-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: 0.2s;
}
.payment-option:hover {
  background: var(--color-surface-2);
}
.payment-option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.payment-option input[type=radio] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
}

/* Product Detail Page */
.product-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .product-detail-layout { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.product-gallery {
  position: relative;
}

/* Desktop Gallery */
@media (min-width: 768px) {
  .product-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    max-height: 550px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-gallery__main img,
  .product-gallery__main .product-main-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* Mobile Gallery — Compact 310px image frame with perfectly centered image */
@media (max-width: 767px) {
  .product-gallery__main {
    width: 100% !important;
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
    line-height: 310px !important;
    text-align: center !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--color-surface-2) !important;
    border-radius: var(--radius-lg);
    display: block !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
  }
  .product-gallery__main .product-main-img,
  .product-gallery__main img {
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 310px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    position: static !important;
    transform: none !important;
    float: none !important;
    border-radius: var(--radius-lg);
  }

  /* Mobile Gallery: Dots Visible, Thumbnails Hidden (< 768px) */
  .product-gallery__thumbs {
    display: none !important;
  }
  .product-gallery__dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    margin: 4px auto 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Desktop Gallery Thumbnails (>= 768px) */
@media (min-width: 768px) {
  .product-gallery__thumbs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }
  .product-gallery__dots {
    display: none !important;
  }
  .gallery-thumb-btn {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 68px !important;
    padding: 0 !important;
    border-radius: var(--radius-sm, 4px) !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    background: var(--color-surface-2, #FBF7F8) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
  }
  .gallery-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .gallery-thumb-btn:hover {
    border-color: var(--color-primary-light, #F5E6E8) !important;
  }
  .gallery-thumb-btn.active {
    border-color: var(--color-primary, #C8506A) !important;
  }
}

/* Product Gallery Dot Buttons (Mobile Only) */
.gallery-dot-btn {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border, #E8DADE);
  background-color: var(--color-surface-3, #F0E8EA);
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  outline: none;
  box-shadow: none;
  flex-shrink: 0;
}

.gallery-dot-btn:hover {
  border-color: var(--color-primary, #C8506A);
  background-color: var(--color-primary-light, #F5E6E8);
}

.gallery-dot-btn.active {
  width: 22px;
  height: 9px;
  border-radius: 5px;
  background-color: var(--color-primary, #C8506A);
  border-color: var(--color-primary, #C8506A);
}
.product-info__title {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  .product-info__title { font-size: 26px; }
}
.product-info__price-box {
  margin: 12px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.product-info__price {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
}
.product-info__original {
  font-size: 18px;
  text-decoration: line-through;
  color: var(--color-text-light);
}
.product-info__discount-badge {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
}
.add-to-cart-section {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.stock-indicator {
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}
.stock-indicator.in-stock { color: var(--color-success); }
.stock-indicator.out-of-stock { color: var(--color-error); }

/* Mobile Product Detail Layout & Spacing Optimization */
@media (max-width: 767px) {
  .container.my-4 {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
  }
  .product-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .product-info__title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .product-info p.text-secondary {
    margin-bottom: 4px !important;
  }
  .product-info__price-box {
    margin: 6px 0 !important;
    gap: 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .product-info__price {
    font-size: 22px !important;
  }
  .stock-indicator {
    margin-bottom: 8px !important;
  }
  .product-info__short-desc {
    margin-bottom: 12px !important;
    font-size: 13px !important;
  }
  .purchase-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .product-buy-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
  }
  .qty-control {
    flex: 0 0 100px !important;
    width: 100px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  .btn-add-to-cart {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  .purchase-actions .btn-buy-now,
  .btn-buy-now {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    clear: both !important;
  }
  .product-perks__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .perk-item {
    font-size: 13px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  .breadcrumb-nav {
    display: none !important;
  }
  .site-footer {
    padding-bottom: 84px !important;
  }
}

/* Order Status */
.status-badge {
  display: inline-flex;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
}
.status-pending { background: var(--color-warning-light); color: var(--color-warning); }
.status-confirmed, .status-processing { background: var(--color-info-light); color: var(--color-info); }
.status-shipped { background: var(--color-primary-light); color: var(--color-primary); }
.status-delivered { background: var(--color-success-light); color: var(--color-success); }
.status-cancelled { background: var(--color-error-light); color: var(--color-error); }
.status-refunded { background: var(--color-surface-3); color: var(--color-text-secondary); }

/* Sections */
.section {
  padding: 24px 0;
}
@media (min-width: 768px) {
  .section { padding: 32px 0; }
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.section-title {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .section-title { font-size: 24px; }
}
.view-all {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 500;
}
.hero-banner {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: white;
  padding: 32px 16px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
.hero-banner h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  .hero-banner h1 { font-size: 36px; }
  .hero-banner { padding: 48px 32px; }
}
.category-card {
  aspect-ratio: 1;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: block;
}
.category-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.category-card:hover .category-card__image {
  transform: scale(1.05);
}
.category-card__label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: white;
  padding: 24px 12px 12px;
  font-weight: 600;
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.breadcrumb-item::after {
  content: '›';
  padding-left: 4px;
  color: var(--color-border);
}
.breadcrumb-item:last-child {
  color: var(--color-text);
  font-weight: 600;
}
.breadcrumb-item:last-child::after {
  content: none;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 32px;
}
.page-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 500;
}
.page-link.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.page-link:hover:not(.active) {
  background: var(--color-surface-2);
}

/* Account Pages */
.account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .account-layout { grid-template-columns: 240px 1fr; }
}
.account-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.account-nav-item a {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
}
.account-nav-item:last-child a { border-bottom: none; }
.account-nav-item.active a {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}
.order-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
}

/* Footer */
.site-footer {
  background: #1A1A1A;
  color: white;
  padding: 48px 0 24px;
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  position: relative;
  z-index: 10;
  display: block;
  visibility: visible;
  opacity: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}
.footer-brand {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-primary);
  font-style: italic;
  margin-bottom: 8px;
}
.footer-tagline {
  font-size: 13px;
  color: #AAAAAA;
  line-height: 1.6;
  margin-bottom: 16px;
}
.footer-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff;
  margin-bottom: 14px;
}
.footer-heading {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #AAAAAA;
}
.footer-links a:hover {
  color: white;
}
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: #AAAAAA;
}
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-links {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  color: #ccc;
}
.social-links a:hover {
  background: var(--color-primary);
  color: white;
}
.footer-bottom {
  border-top: 1px solid #2a2a2a;
  margin-top: 32px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #888;
  text-align: center;
}
.footer-payments, .footer-copyright {
  width: 100%;
  text-align: center;
}

/* Utils */
.sticky-btn-bar {
  position: fixed;
  bottom: 56px;
  left: 0;
  right: 0;
  background: white;
  padding: 12px 16px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 90;
  border-top: 1px solid var(--color-border);
  display: none;
}
@media (min-width: 600px) {
  .sticky-btn-bar { display: none !important; }
}
.sticky-btn-bar.visible {
  display: block;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn.loading { color: transparent; position: relative; }
.btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-radius: 50%;
  border-top-color: currentColor;
  animation: spin 1s ease-in-out infinite;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
}
.empty-state {
  padding: 48px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-state-icon {
  width: 48px;
  height: 48px;
  color: var(--color-border);
  margin-bottom: 16px;
}
.empty-state-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}
.empty-state-text {
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
@media (min-width: 600px) {
  .toast-container { bottom: 20px; }
}
.toast {
  background: #333;
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(20px);
  animation: toast-in 0.3s forwards;
}
.toast.success { background: var(--color-success); }
.toast.error { background: var(--color-error); }
.toast.fade-out { animation: toast-out 0.3s forwards; }
@keyframes toast-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-20px); }
}

/* Icons */
.icon, .icon-sm, .icon-lg, .icon-xl {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon { width: 20px; height: 20px; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* New Arrivals Grid */
.new-arrivals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .new-arrivals-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .new-arrivals-grid .new-arrivals-card:nth-child(n+5) {
    display: none;
  }
}

/* ==========================================================
   HOMEPAGE REDESIGN — Header brand + nav
   ========================================================== */

.header-container {
  height: 64px;
}

.brand-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.5px;
  font-style: italic;
}

.site-logo-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  flex-shrink: 0;
  transform: translateY(-6px);
  transition: transform 0.25s ease;
  z-index: 10;
}

.site-logo-link:hover {
  transform: translateY(-8px);
}

.site-logo-img {
  height: 40px;
  width: auto;
  max-width: 175px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.16));
  transition: filter 0.25s ease;
}

.site-logo-link:hover .site-logo-img {
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.22));
}

@media (max-width: 767px) {
  .site-logo-link {
    transform: translateY(-4px);
  }

  .site-logo-link:hover {
    transform: translateY(-6px);
  }

  .site-logo-img {
    height: 33px;
    max-width: 135px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.14));
  }
}

.footer-logo-link {
  display: inline-block;
  margin-bottom: 12px;
}

.footer-logo-img {
  height: 36px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
}

.header-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}

.header-nav .nav-link {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: #1F4E8C;
  padding: 6px 12px;
  margin: 0 2px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.header-nav .nav-link:hover {
  color: #163A6B;
  background: transparent;
  border-bottom-color: #163A6B;
}

.header-nav .nav-link.active {
  color: #163A6B !important;
  font-weight: 700 !important;
  background: transparent !important;
  border-bottom-color: #163A6B !important;
}

.action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  transition: color 0.2s ease;
  color: #1F4E8C;
  background: transparent;
}

.action-btn:hover {
  color: #163A6B;
  background: transparent;
}

.action-btn.active {
  color: #163A6B !important;
  background: transparent !important;
}

/* ==========================================================
   HOMEPAGE REDESIGN — Hero Section (Compact ~240px-300px)
   ========================================================== */

/* Homepage Shared Header + Hero Background Container */
.page-home .site-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  z-index: 10 !important;
}

.page-home .site-main {
  padding-top: 0 !important;
}

.hp-hero {
  position: relative;
  background: #FFF0F4;
  padding-top: 60px;
  overflow: hidden;
  width: 100%;
}

.hp-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: var(--hero-bg, url('../images/home/ladylookz-hero-banner.webp'));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
}

.hp-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 380px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.hp-hero__text {
  max-width: 540px;
}

.hp-hero__eyebrow {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #DB7289;
  background: rgba(200, 80, 106, 0.08);
  padding: 4px 14px;
  border: 1px solid rgba(200, 80, 106, 0.2);
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.hp-hero__headline {
  margin-bottom: 8px;
  display: block;
}

.hp-brand__wordmark {
  position: relative;
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.02;
  color: #DB7289;
  letter-spacing: 0.5px;
  padding-bottom: 8px;
}

.hp-brand__wordmark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' fill='none'%3E%3Cpath d='M 5 6 Q 100 22 195 4' stroke='%23C8506A' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M 125 18 C 122 15, 118 17, 120 20 C 122 23, 125 25, 125 25 C 125 25, 128 23, 130 20 C 132 17, 128 15, 125 18 Z' fill='%23C8506A'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hp-hero__headline em,
.hp-hero__accent {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  color: #3A3A3A;
  display: block;
  margin-left: 0;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  white-space: normal;
}

.hp-hero__sub {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #757575;
  line-height: 1.6;
  letter-spacing: 0.2px;
  margin-bottom: 16px;
  max-width: 460px;
}

.hp-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.hp-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6D6D6D;
  letter-spacing: 0.3px;
}

.hp-hero__trust-item .icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  stroke: var(--color-primary);
}

@media (min-width: 768px) {
  .hp-hero__inner {
    min-height: 270px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Mobile Header Customization: Logo LEFT | Dynamic ROOT Categories RIGHT (Single Row) */
  .header-actions {
    display: none !important;
  }

  .nav-link--home {
    display: none !important;
  }

  .header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    height: 60px !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px !important;
  }

  .header-logo {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  .header-nav {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }

  .header-nav::-webkit-scrollbar {
    display: none !important;
  }

  .header-nav .nav-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    margin: 0 3px !important;
    letter-spacing: 0.25px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #1F4E8C !important;
    background: transparent !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
  }

  .header-nav .nav-link:hover {
    color: #163A6B !important;
    background: transparent !important;
    border-bottom-color: #163A6B !important;
  }

  .header-nav .nav-link.active {
    color: #163A6B !important;
    font-weight: 700 !important;
    background: transparent !important;
    border-bottom-color: #163A6B !important;
    box-shadow: none !important;
  }

  .page-home .header-nav .nav-link {
    color: #FFFFFF !important;
  }

  .page-home .header-nav .nav-link:hover {
    color: #FFFFFF !important;
    border-bottom-color: rgba(255, 255, 255, 0.6) !important;
  }

  .page-home .header-nav .nav-link.active {
    color: #FFFFFF !important;
    border-bottom-color: #FFFFFF !important;
  }

  .page-home .site-header {
    height: 50px !important;
  }

  .hp-hero {
    overflow: hidden;
    max-width: 100%;
    padding-top: 22px !important;
    padding-bottom: 14px !important;
  }

  .hp-hero::after {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: none !important;
    opacity: 0.8 !important;
  }
  
  .hp-hero__inner {
    min-height: 60px !important;
    padding-top: 0px !important;
    padding-bottom: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hp-hero__text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hp-hero__eyebrow {
    display: none !important;
  }

  .page-home .hp-brand__wordmark {
    font-size: 34px !important;
    letter-spacing: 0px !important;
    line-height: 1.05 !important;
    padding-bottom: 4px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    top: 12px !important;
    left: auto !important;
    right: 16.7% !important;
  }

  .hp-brand__wordmark::after {
    height: 8px !important;
  }

  .hp-hero__headline em,
  .hp-hero__accent {
    display: none !important;
  }

  .hp-hero__sub {
    display: none !important;
  }

  .hp-hero__trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .hp-hero__trust-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    color: #4A4A4A !important;
  }

  .hp-hero__trust-item .icon {
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
  }

  .hp-promo__inner {
    padding: 24px 16px;
    text-align: center;
  }

  .hp-promo__text {
    margin: 0 auto;
  }

  .hp-trust__grid {
    gap: 14px;
  }
}

/* ==========================================================
   HOMEPAGE REDESIGN — Root Category Text Navigation
   ========================================================== */

.hp-catnav {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  overflow: hidden;
}

.hp-catnav__list {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 0;
}

.hp-catnav__list::-webkit-scrollbar {
  display: none;
}

.hp-catnav__item {
  display: inline-flex;
  align-items: center;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.hp-catnav__item:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ==========================================================
   HOMEPAGE REDESIGN — Product Grid
   ========================================================== */

.hp-products {
  padding: 40px 0;
}

@media (min-width: 768px) {
  .hp-products {
    padding: 56px 0;
  }
}

.hp-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .hp-products__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* On mobile hide 5th–8th cards */
@media (max-width: 767px) {
  .hp-card--mobile-hidden {
    display: none;
  }
}

/* Product card */
.hp-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.hp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hp-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hp-card__img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--color-surface-2);
}

.hp-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}

.hp-card:hover .hp-card__img-wrap img {
  transform: scale(1.05);
}

.hp-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  z-index: 2;
  letter-spacing: 0.5px;
}

.hp-card__badge--sale {
  background: var(--color-primary);
  color: #fff;
}

.hp-card__body {
  padding: 12px 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hp-card__name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hp-card__name {
    font-size: 14px;
  }
}

.hp-card__price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.hp-card__price-current {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.hp-card__price-original {
  font-size: 13px;
  color: #aaa;
  text-decoration: line-through;
}

/* ==========================================================
   HOMEPAGE REDESIGN — Trust Strip
   ========================================================== */

.hp-trust {
  background: var(--color-surface-2);
  padding: 32px 0;
  margin-top: 0;
}

.hp-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (min-width: 768px) {
  .hp-trust__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.hp-trust__item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hp-trust__item .icon-lg {
  flex-shrink: 0;
  color: var(--color-primary);
  stroke: var(--color-primary);
}

.hp-trust__label {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.hp-trust__desc {
  font-size: 12px;
  color: #777;
}

/* ==========================================================
   HOMEPAGE REDESIGN — Promotional CTA Banner
   ========================================================== */

.hp-promo {
  padding: 48px 0;
}

.hp-promo__inner {
  background: linear-gradient(120deg, #FCE7EF 0%, #FFF0F5 100%);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  position: relative;
}

@media (min-width: 768px) {
  .hp-promo__inner {
    grid-template-columns: 1fr 1fr;
    padding: 56px 48px;
    gap: 40px;
  }
}

.hp-promo__headline {
  font-size: 26px;
  font-weight: 800;
  color: #171717;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .hp-promo__headline {
    font-size: 34px;
  }
}

.hp-promo__sub {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

.hp-promo__visual {
  display: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #f0c4d0, #e8a0b8);
}

@media (min-width: 768px) {
  .hp-promo__visual {
    display: block;
  }
}

.hp-promo__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   ICON BRAND COLOR
   Apply brand pink to header action icons and trust/service icons
   ========================================================== */

.icon-brand {
  color: var(--color-primary);
  stroke: var(--color-primary);
}

/* Trust strip icons already use .text-primary; hero trust icons inherit */
.hp-hero__trust-item .icon {
  color: var(--color-primary);
  stroke: var(--color-primary);
}

/* ==========================================================
   HEADER NAVIGATION — Single Row (Desktop & Mobile)
   ========================================================== */

.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

.header-nav::-webkit-scrollbar {
  display: none;
}

.header-nav .nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #1F4E8C;
  padding: 6px 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  transition: color 0.2s;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .header-container {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    height: 64px !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .header-logo {
    justify-self: start !important;
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header-nav {
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .header-nav::-webkit-scrollbar {
    display: none !important;
  }

  .header-actions {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
  }

  .action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
  }

  .action-btn .icon,
  .action-btn svg {
    width: 22px !important;
    height: 22px !important;
    color: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
    fill: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .nav-link--home {
    display: inline-block !important;
  }

  .header-nav .nav-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #1F4E8C !important;
    padding: 6px 12px !important;
  }
}

.header-nav .nav-link:hover {
  color: #163A6B !important;
  border-bottom-color: #163A6B !important;
}

/* ==========================================================
   CART PAGE — Premium Fashion E-Commerce Visual Styling
   ========================================================== */

.cart-page {
  max-width: 1200px;
  margin: 0 auto;
}

.cart-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.cart-items-wrapper {
  flex: 1 1 65%;
  min-width: 0;
}

.cart-summary-wrapper {
  flex: 0 0 360px;
  max-width: 360px;
}

.cart-items-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.cart-item {
  position: relative;
  transition: background-color 0.2s ease;
}

.cart-item:last-child {
  border-bottom: none !important;
}

.cart-item__image-box {
  width: 96px;
  height: 114px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.04);
}

.cart-item__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cart-item__title {
  font-size: 15px;
  font-weight: 600;
  color: #171717;
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.2s;
}

.cart-item__title:hover {
  color: var(--color-primary);
}

.cart-item__price {
  font-size: 15px;
  color: var(--color-primary);
}

.qty-control {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-control .btn-qty {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.qty-control .btn-qty:hover:not(:disabled) {
  background: rgba(200, 80, 106, 0.08);
  color: var(--color-primary);
}

.qty-control .btn-qty:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qty-control .qty-input {
  width: 38px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: #171717;
  background: #ffffff;
  outline: none;
}

.btn-remove-item {
  color: #888888;
  border-radius: var(--radius-pill);
  transition: color 0.2s, background 0.2s;
}

.btn-remove-item:hover {
  color: var(--color-error, #dc2626);
  background: rgba(220, 38, 38, 0.08);
}

.cart-summary {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.summary-title {
  font-weight: 700;
  color: #171717;
}

.btn-buy-all {
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(200, 80, 106, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-buy-all:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(200, 80, 106, 0.35);
}

.summary-lines {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 10px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
}

.summary-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.summary-row .summary-label {
  text-align: left !important;
}

.summary-row .summary-value {
  text-align: right !important;
  white-space: nowrap !important;
}

/* Tablet Breakpoint (768px - 1023px) */
@media (max-width: 1023px) {
  .cart-layout {
    gap: 24px;
  }
  .cart-summary-wrapper {
    flex: 0 0 310px;
    max-width: 310px;
  }
}

/* Mobile Breakpoint (<= 767px) */
@media (max-width: 767px) {
  body {
    padding-bottom: 56px !important;
  }

  .cart-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 30px !important;
  }

  .cart-layout {
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .cart-items-wrapper,
  .cart-summary-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  .cart-summary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    position: static !important;
    margin-top: 10px !important;
  }

  .coupon-section {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #couponForm {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }

  #couponForm input[name="coupon_code"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 38px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    text-transform: uppercase !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  #couponForm button[type="submit"] {
    flex: 0 0 auto !important;
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  .summary-lines {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    box-sizing: border-box !important;
  }

  .summary-row,
  .summary-discount-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    padding: 3px 0 !important;
  }

  .summary-grand-total {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--color-border) !important;
    padding-top: 12px !important;
    margin-top: 8px !important;
  }

  .summary-grand-total .summary-total {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
  }

  .cart-item__image-box {
    width: 90px !important;
    height: 105px !important;
  }

  .cart-item__title {
    font-size: 14px !important;
  }

  .cart-item__actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .btn-buy-all {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    border-radius: var(--radius-md) !important;
  }

  .site-footer {
    padding-bottom: 75px !important;
  }
}

/* ==========================================================================
   LadyLookz Mobile Checkout Responsiveness Fixes (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Prevent horizontal overflow on checkout container */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Single-column stacked checkout layout */
  .checkout-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }

  .checkout-form-wrapper,
  .checkout-summary-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
  }

  .checkout-summary,
  .checkout-summary-card {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important;
    padding: 16px !important;
  }

  .checkout-section {
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Ensure grid columns span 100% width cleanly without overflow */
  .checkout-layout .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .checkout-layout .col-12,
  .checkout-layout .col-md-6,
  .checkout-layout .col-md-4,
  .checkout-layout .col-sm-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Optimize touch target & typography for mobile inputs */
  .checkout-layout .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 46px !important;
    min-height: 46px !important;
    font-size: 15px !important;
    border-radius: var(--radius-md) !important;
  }

  .checkout-layout textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
  }

  /* Place order button optimization */
  #btnPlaceOrder {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Page title responsive size */
  h1.page-title {
    font-size: clamp(22px, 6vw, 26px) !important;
    margin-bottom: 16px !important;
  }

  /* Bottom space protection for mobile fixed bottom navigation bar */
  .site-main {
    padding-bottom: 80px !important;
  }
}

/* ==========================================================================
   Searchable Autocomplete Dropdown Styles (State & City Search)
   ========================================================================== */
.autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 220px;
  overflow-y: auto;
  background-color: var(--color-surface, #ffffff);
  border: 1.5px solid var(--color-primary, #C8506A);
  border-radius: var(--radius-md, 8px);
  margin-top: 4px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  -webkit-overflow-scrolling: touch;
}

.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text, #1A1A1A);
  border-bottom: 1px solid var(--color-surface-2, #FBF7F8);
  transition: background-color 0.15s ease, color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background-color: var(--color-primary-light, #F5E6E8);
  color: var(--color-primary-dark, #A03050);
  font-weight: 600;
}

.autocomplete-item mark {
  background-color: transparent;
  color: var(--color-primary, #C8506A);
  font-weight: 700;
  padding: 0;
}

.autocomplete-no-results {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--color-text-secondary, #666666);
  text-align: center;
  font-style: italic;
}

/* Disabled input styling */
.form-control:disabled {
  background-color: var(--color-surface-3, #F0E8EA);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ==========================================================================
   LadyLookz Integrated Phone Input Field (+91 Inside Single Border Box)
   Outer Styling Matches .form-control (Full Name / Email) Exactly
   Inner Input is Completely Borderless & Boxless
   ========================================================================== */
.phone-input-group,
div.phone-input-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1.5px solid var(--color-border, #E8DADE) !important;
  border-radius: var(--radius-md, 8px) !important;
  background: var(--color-surface, #ffffff) !important;
  background-color: var(--color-surface, #ffffff) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.phone-input-group:focus-within,
div.phone-input-group:focus-within {
  border-color: var(--color-primary, #C8506A) !important;
  box-shadow: 0 0 0 3px rgba(200, 80, 106, 0.15) !important;
}

.phone-input-group .phone-prefix,
.phone-input-group .country-code-prefix,
div.phone-input-group .phone-prefix {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  height: 100% !important;
  min-height: 100% !important;
  background: var(--color-surface-2, #FBF7F8) !important;
  background-color: var(--color-surface-2, #FBF7F8) !important;
  color: var(--color-text, #1A1A1A) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: none !important;
  border-right: 1px solid var(--color-border, #E8DADE) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Inner input is completely borderless, outline-free, background-free */
.phone-input-group input,
.phone-input-group input.phone-input,
.phone-input-group #mobileInput,
div.phone-input-group input#mobileInput {
  display: block !important;
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-family: inherit !important;
  color: var(--color-text, #1A1A1A) !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.phone-input-group input:focus,
.phone-input-group input.phone-input:focus,
.phone-input-group #mobileInput:focus {
  border: 0 !important;
  border-style: none !important;
  outline: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

@media (max-width: 767px) {
  .phone-input-group,
  div.phone-input-group {
    height: 46px !important;
    min-height: 46px !important;
  }
  .phone-input-group .phone-prefix,
  .phone-input-group .country-code-prefix {
    height: 100% !important;
    font-size: 15px !important;
    padding: 0 12px !important;
  }
  .phone-input-group input,
  .phone-input-group input.phone-input,
  .phone-input-group #mobileInput {
    height: 100% !important;
    font-size: 15px !important;
  }
}

/* ==========================================================================
   Rebuilt LadyLookz Order Details Card Styles (Desktop & Mobile)
   ========================================================================== */
.checkout-summary-card {
  padding: 20px;
  background-color: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #E8DADE);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
  box-sizing: border-box;
  width: 100%;
}

@media (min-width: 1024px) {
  .checkout-summary-card.sticky-top {
    position: sticky !important;
    top: 80px !important;
    z-index: 10;
  }
}

.order-details-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text, #1A1A1A);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border, #E8DADE);
}

.order-items-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.order-items-list::-webkit-scrollbar {
  width: 4px;
}
.order-items-list::-webkit-scrollbar-thumb {
  background: var(--color-border, #E8DADE);
  border-radius: 4px;
}

.order-item-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-surface-2, #FBF7F8);
}
.order-item-row:last-child {
  border-bottom: none;
}

.order-item-img-wrap {
  width: 54px;
  height: 68px;
  background-color: var(--color-surface-2, #FBF7F8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.order-item-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.order-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1A1A1A);
  line-height: 1.35;
}

.order-item-sku {
  font-size: 11px;
  color: var(--color-text-light, #999999);
}

.order-item-meta {
  font-size: 13px;
  color: var(--color-text-secondary, #666666);
}

.order-item-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text, #1A1A1A);
}

.order-summary-breakdown {
  padding: 12px 0 4px 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.order-summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.order-summary-label {
  text-align: left !important;
  flex: 1 1 auto !important;
  margin-right: 20px !important;
  min-width: 0 !important;
  font-size: 14px;
  color: var(--color-text-secondary, #666666);
}

.order-summary-value {
  text-align: right !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1A1A1A);
}

.order-summary-divider {
  border-top: 1.5px dashed var(--color-border, #E8DADE) !important;
  margin: 8px 0 !important;
  width: 100% !important;
}

.order-summary-total {
  margin-top: 2px !important;
}

.order-summary-total .order-summary-label {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text, #1A1A1A) !important;
}

.order-summary-total .order-summary-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-primary, #C8506A) !important;
}

/* Mobile Responsive Adjustments (< 768px) */
@media (max-width: 767px) {
  .checkout-summary-card {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md, 8px) !important;
    margin-bottom: 24px !important;
  }

  .order-details-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  .order-item-img-wrap {
    width: 48px !important;
    height: 60px !important;
  }

  .order-item-name {
    font-size: 13px !important;
  }

  .order-item-meta {
    font-size: 12px !important;
  }

  .order-item-total {
    font-size: 14px !important;
  }
}

/* Product Size Chips Styling */
.product-size-section {
  margin-bottom: 20px;
}

.size-chip-btn {
  min-width: 44px;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md, 6px) !important;
  border: 1.5px solid var(--color-border, #E8DADE) !important;
  background-color: #ffffff !important;
  color: var(--color-text, #1A1A1A) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.size-chip-btn:hover {
  border-color: var(--color-primary, #C8506A) !important;
  color: var(--color-primary, #C8506A) !important;
  background-color: var(--color-surface-2, #FBF7F8) !important;
}

.size-chip-btn.active,
.size-chip-btn.btn-primary {
  border-color: var(--color-primary, #C8506A) !important;
  background-color: var(--color-primary, #C8506A) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-sm);
}

/* Replacement Requests Component Styles */
.replacement-card {
  background: #ffffff;
  border: 1px solid var(--color-border, #E8DADE);
  border-radius: var(--radius-lg, 12px);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  margin-bottom: 16px;
}
.replacement-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(200, 80, 106, 0.3);
}
.replacement-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border, #E8DADE);
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.replacement-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.2px;
}
.replacement-badge-requested { background: #FFF8E6; color: #B7791F; border: 1px solid #FEEBC8; }
.replacement-badge-approved { background: #EBF8FF; color: #2B6CB0; border: 1px solid #BEE3F8; }
.replacement-badge-shipped { background: #E6FFFA; color: #2C7A7B; border: 1px solid #B2F5EA; }
.replacement-badge-delivered { background: #F0FFF4; color: #276749; border: 1px solid #C6F6D5; }
.replacement-badge-rejected { background: #FFF5F5; color: #C53030; border: 1px solid #FEB2B2; }
.replacement-badge-cancelled { background: #EDF2F7; color: #4A5568; border: 1px solid #E2E8F0; }

.replacement-item-thumb {
  width: 72px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #E8DADE);
  flex-shrink: 0;
}
.replacement-evidence-img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border, #E8DADE);
}

@media (max-width: 576px) {
  .replacement-card {
    padding: 14px;
  }
  .replacement-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .replacement-item-thumb {
    width: 60px;
    height: 75px;
  }
  .replacement-action-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 12px;
  }
}

/* Customer Account Section Component Styles */
.account-container {
  max-width: 1140px;
  margin: 0 auto;
}
.account-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  .account-layout {
    flex-direction: row;
    align-items: flex-start;
  }
}
.account-sidebar-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--color-border, #E8DADE);
  border-radius: var(--radius-lg, 12px);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .account-sidebar-card {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
  }
}
.user-profile-header {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border, #E8DADE);
  margin-bottom: 16px;
}
.user-avatar-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-surface-2, #FBF7F8);
  color: var(--color-primary, #C8506A);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  border: 2px solid rgba(200, 80, 106, 0.2);
}
.user-avatar-circle .icon-lg {
  width: 28px;
  height: 28px;
}

.account-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1A1A1A);
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}
.account-nav-link:hover {
  background-color: var(--color-surface-2, #FBF7F8);
  color: var(--color-primary, #C8506A);
}
.account-nav-link.active {
  background-color: var(--color-primary, #C8506A);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.account-nav-link.text-danger:hover {
  background-color: #FFF5F5;
  color: var(--color-error, #E53E3E);
}

.account-main-content {
  flex: 1;
  min-width: 0;
}

.account-welcome-banner {
  background: #ffffff;
  border: 1px solid var(--color-border, #E8DADE);
  border-radius: var(--radius-lg, 12px);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.account-order-card {
  background: #ffffff;
  border: 1px solid var(--color-border, #E8DADE);
  border-radius: var(--radius-lg, 12px);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 16px;
}
.account-order-card:hover {
  border-color: rgba(200, 80, 106, 0.3);
  box-shadow: var(--shadow-md);
}

@media (max-width: 576px) {
  .account-sidebar-card {
    padding: 14px;
  }
  .account-welcome-banner {
    padding: 16px;
  }
  .account-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .account-nav-link {
    padding: 8px 10px;
    font-size: 13px;
    justify-content: center;
    text-align: center;
  }
  .account-nav-link-logout {
    grid-column: span 2;
  }
  .user-profile-header {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
}