/* Ionic CSS Variables — customise to match your app's brand */
:root {
  --ion-color-primary: #ff7a45;
  --ion-color-primary-rgb: 255, 122, 69;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #e06b3d;
  --ion-color-primary-tint: #ff8758;

  --ion-color-secondary: #1f9d8b;
  --ion-color-secondary-rgb: 31, 157, 139;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #1b8a7a;
  --ion-color-secondary-tint: #35a794;

  --ion-color-tertiary: #6c63ff;
  --ion-color-tertiary-rgb: 108, 99, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #5f57e0;
  --ion-color-tertiary-tint: #7b73ff;

  --ion-color-success: #2fb36d;
  --ion-color-success-rgb: 47, 179, 109;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #299d60;
  --ion-color-success-tint: #44bb7c;

  --ion-color-warning: #f4b400;
  --ion-color-warning-rgb: 244, 180, 0;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #d79e00;
  --ion-color-warning-tint: #f5bc1a;

  --ion-color-danger: #d64550;
  --ion-color-danger-rgb: 214, 69, 80;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #bc3d46;
  --ion-color-danger-tint: #da5862;

  --ion-color-dark: #1d1b22;
  --ion-color-dark-rgb: 29, 27, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1a181e;
  --ion-color-dark-tint: #34323b;

  --ion-color-medium: #7a7685;
  --ion-color-medium-rgb: 122, 118, 133;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #6b6875;
  --ion-color-medium-tint: #87838f;

  --ion-color-light: #fff8f2;
  --ion-color-light-rgb: 255, 248, 242;
  --ion-color-light-contrast: #1d1b22;
  --ion-color-light-contrast-rgb: 29, 27, 34;
  --ion-color-light-shade: #e0dad5;
  --ion-color-light-tint: #fff9f4;

  --ion-background-color: #fffaf6;
  --ion-text-color: #1d1b22;
}

body {
  background: var(--ion-background-color);
}

.shop-header ion-toolbar {
  --background: #fff8f2;
  --border-color: transparent;
  --min-height: 72px;
  padding-inline: 10px;
}

.shop-content {
  --background: linear-gradient(180deg, #fff8f2 0%, #ffffff 18%, #ffffff 100%);
}

.hero-card {
  margin: 16px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #1d1b22, #363043);
  color: #ffffff;
  box-shadow: 0 20px 45px rgba(29, 27, 34, 0.18);
}

.hero-card h1,
.detail-hero h1,
.confirmation-card h1 {
  margin: 14px 0 10px;
  font-size: 2rem;
  line-height: 1.1;
}

.hero-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.catalog-section {
  padding-top: 8px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 12px;
}

.section-heading h2,
.detail-panel h2 {
  margin: 0;
  font-size: 1.2rem;
}

.product-grid {
  display: grid;
  gap: 16px;
}

.product-card {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 16px 34px rgba(32, 24, 18, 0.08);
}

.product-card-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: #fff8f2;
}

.product-card ion-card-content,
.summary-card,
.detail-panel,
.confirmation-card,
.cart-item {
  background: #ffffff;
  border-radius: 22px;
}

.product-card-top,
.product-card-footer,
.summary-row,
.quantity-row,
.order-box,
.detail-meta,
.cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-card h3 {
  margin: 14px 0 8px;
  font-size: 1.1rem;
}

.product-card p,
.cart-item p,
.muted-text {
  margin: 0;
  color: #6b6875;
  line-height: 1.5;
}

.product-card-footer {
  margin-top: 18px;
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f4b400;
  font-weight: 600;
}

.header-icon-button,
.cart-button {
  position: relative;
  margin-right: 4px;
}

.header-icon-button {
  --background: rgba(var(--ion-color-primary-rgb), 0.12);
  --background-hover: rgba(var(--ion-color-primary-rgb), 0.16);
  --background-activated: rgba(var(--ion-color-primary-rgb), 0.2);
  --color: var(--ion-color-primary);
  --border-radius: 999px;
  --padding-start: 14px;
  --padding-end: 14px;
  min-width: 52px;
  min-height: 52px;
}

.header-icon-button ion-icon {
  font-size: 1.5rem;
}

.pill-cart-button {
  --background: rgba(var(--ion-color-primary-rgb), 0.12);
  --background-hover: rgba(var(--ion-color-primary-rgb), 0.16);
  --background-activated: rgba(var(--ion-color-primary-rgb), 0.2);
  --color: var(--ion-color-primary);
  --border-radius: 999px;
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 10px;
  --padding-bottom: 10px;
  min-width: 72px;
  min-height: 52px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pill-cart-button span {
  margin-left: 8px;
  font-size: 1.1rem;
  line-height: 1;
}

.pill-cart-button ion-icon {
  font-size: 1.45rem;
}

.empty-state {
  padding: 48px 24px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.empty-state ion-icon,
.confirmation-card ion-icon {
  font-size: 3rem;
  color: var(--ion-color-primary);
}

.detail-hero {
  background: linear-gradient(180deg, #fff8f2 0%, #ffffff 100%);
}

.detail-image-wrap {
  margin-bottom: 18px;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(32, 24, 18, 0.08);
}

.detail-image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.detail-meta {
  justify-content: flex-start;
  margin: 14px 0;
}

.detail-meta ion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}

.detail-price {
  margin-top: 18px;
  font-size: 2rem;
  font-weight: 700;
}

.detail-panel {
  margin: 8px 16px 24px;
  padding: 20px;
  box-shadow: 0 16px 34px rgba(32, 24, 18, 0.08);
}

.quantity-row {
  justify-content: flex-start;
  margin: 16px 0 24px;
}

.quantity-row span,
.cart-actions span {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
}

.order-box {
  margin-bottom: 14px;
}

.order-box strong,
.summary-row strong,
.confirmation-details strong {
  font-size: 1.1rem;
}

.cart-overview-card {
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 22px;
  background: #fff8f2;
  display: grid;
  gap: 6px;
}

.cart-overview-card h2 {
  margin: 4px 0 0;
  font-size: 1.4rem;
}

.overview-label {
  margin: 0;
  color: #7a7685;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cart-overview-card p {
  margin: 0;
}

.cart-list {
  background: transparent;
}

.cart-item {
  --background: #ffffff;
  --padding-start: 16px;
  --inner-padding-end: 16px;
  margin-bottom: 12px;
  box-shadow: 0 12px 28px rgba(32, 24, 18, 0.08);
}

.cart-actions {
  flex-wrap: nowrap;
}

.summary-card,
.confirmation-card,
.order-card,
.tracking-summary-card,
.timeline-card {
  padding: 20px;
  box-shadow: 0 16px 34px rgba(32, 24, 18, 0.08);
}

.summary-card {
  margin-top: 20px;
}

.total-row {
  margin: 14px 0 20px;
  padding-top: 14px;
  border-top: 1px solid #f0ebe7;
  font-size: 1.05rem;
}

.confirmation-card {
  margin-top: 8vh;
  text-align: center;
}

.confirmation-details {
  margin: 24px 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff8f2;
  display: grid;
  gap: 14px;
  text-align: left;
}

.confirmation-details span {
  display: block;
  margin-bottom: 4px;
  color: #7a7685;
  font-size: 0.92rem;
}

.orders-list {
  display: grid;
  gap: 14px;
  background: transparent;
}

.order-card {
  width: 100%;
  border: 0;
  text-align: left;
  background: #ffffff;
  border-radius: 22px;
}

.order-card-top,
.order-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-card-top {
  margin-bottom: 14px;
}

.order-card-row {
  margin-top: 10px;
  color: #6b6875;
}

.order-card-row strong {
  color: #1d1b22;
}

.order-card h3,
.tracking-summary-card h1,
.timeline-card h2 {
  margin: 6px 0 0;
}

.order-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a7685;
}

.order-card-date {
  margin-top: 16px;
  color: #7a7685;
  font-size: 0.9rem;
}

.tracking-summary-card {
  background: linear-gradient(180deg, #fff8f2 0%, #ffffff 100%);
  border-radius: 24px;
  margin-bottom: 16px;
}

.timeline-card {
  background: #ffffff;
  border-radius: 24px;
  margin-bottom: 16px;
}

.tracking-timeline {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.timeline-step {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  opacity: 0.55;
}

.timeline-step.active {
  opacity: 1;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  margin-top: 4px;
  background: #e7dfd7;
  box-shadow: 0 0 0 6px #f8f3ee;
}

.timeline-step.active .timeline-dot {
  background: var(--ion-color-primary);
}

.cart-empty {
  min-height: 70vh;
  align-content: center;
}
