/* tcmp-responsive.css */
/* Mobile‑first base styles */
/* Ensure fluid typography */
html {
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  background-color: var(--color-background);
  color: var(--color-on-surface);
}
/* Grid for cart page */
.cart-layout-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}
/* Checkout layout */
.checkout-review-section,
.checkout-payment-section {
  width: 100%;
}
/* Header hamburger (hidden by default) */
.tcmp-desktop-only {
  display: block;
}
.tcmp-mobile-only {
  display: none;
}
/* Responsive breakpoints */
@media (min-width: 576px) {
  /* Tablet portrait */
  .cart-layout-grid {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  /* Tablet landscape / small desktop */
  .cart-layout-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-8);
  }
  .cart-main-content {
    flex: 1;
  }
  .cart-sidebar {
    width: 380px;
    position: sticky;
    top: 100px;
  }
  .checkout-review-section,
  .checkout-payment-section {
    width: 48%;
  }
  .checkout-payment-section {
    margin-left: 4%;
  }
}
@media (min-width: 1024px) {
  /* Desktop */
  .tcmp-desktop-only {
    display: block;
  }
  .tcmp-mobile-only {
    display: none;
  }
}
/* Mobile adjustments */
@media (max-width: 575px) {
  .tcmp-desktop-only {
    display: none;
  }
  .tcmp-mobile-only {
    display: block;
  }
  .btn {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
  }
  .cart-sticky-actions {
    bottom: 0;
    padding: var(--spacing-2);
  }
  .checkout-payment-section .payment-methods {
    flex-direction: column;
    gap: var(--spacing-2);
  }
}
/* Ensure images are fluid */
img, .cart-item-img, .product-img {
  max-width: 100%;
  height: auto;
}
/* Utility spacing */
.mt-4 { margin-top: var(--spacing-4); }
.mb-4 { margin-bottom: var(--spacing-4); }
.p-4 { padding: var(--spacing-4); }
.tcmp-hamburger {
  display: none;
}
@media (max-width: 575px) {
  .tcmp-hamburger {
    display: block;
    cursor: pointer;
  }
}

/* Custom Branding Logo Responsiveness */
.tcmp-custom-logo {
  height: auto;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  max-height: 26px; /* Mobile first default height */
  transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 576px) {
  .tcmp-custom-logo {
    max-height: 32px;
  }
}

@media (min-width: 768px) {
  .tcmp-custom-logo {
    max-height: 38px;
  }
}

@media (min-width: 1024px) {
  .tcmp-custom-logo {
    max-height: 46px;
  }
}

/* Keep logo constrained inside dashboard sidebar headers */
.dashboard-brand .tcmp-custom-logo,
.dashboard-sidebar .tcmp-custom-logo {
  max-height: 30px !important;
}

/* Adjust header spacing & text sizing dynamically */
.tcmp-v2-logo-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.tcmp-v2-logo-link .tcmp-v2-logo-text {
  line-height: 1.2;
}

@media (max-width: 768px) {
  .tcmp-v2-logo-text {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  /* If a custom logo image is uploaded, hide the text next to it in header on small mobile screens to prevent overflow */
  .tcmp-v2-logo-link img.tcmp-custom-logo + .tcmp-v2-logo-text {
    display: none !important;
  }
  
  /* Give the logo a bit more breathing room on mobile when text is hidden */
  .tcmp-v2-logo-link img.tcmp-custom-logo {
    max-height: 30px;
  }
}