/* Component fixes for controls, header, footer, tables, cards and banner */

/* Mobile header & nav at 320px */
@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex !important;
  }
}

/* Header layout at 1024px to prevent offscreen/escaped text */
@media (max-width: 1100px) {
  .site-header .shell-container {
    gap: 8px;
  }
  .nav-link {
    padding: 0.35rem 0.45rem;
    font-size: 0.85rem;
  }
  .header-action .btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

@media (max-width: 1024px) {
  .site-nav {
    overflow: hidden;
  }
  .header-action {
    flex-shrink: 1;
    min-width: 0;
  }
  .header-action .btn {
    max-width: 100%;
  }
}

/* At small viewports ensure header action button doesn't overflow card/shell */
@media (max-width: 480px) {
  .header-action .btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
  }
}

/* Card foot layout to prevent control over text */
.catalog-card-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.catalog-card-foot .catalog-card-price {
  min-width: 0;
  flex: 1 1 auto;
}

.catalog-card-foot .btn {
  flex-shrink: 0;
}

/* Spec cards row fix for squeezed text */
.spec-cards-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

/* Table columns squeezing fix */
.spec-table th,
.spec-table td {
  min-width: 110px;
  word-break: normal;
  overflow-wrap: normal;
}

.spec-table td.tabular,
.spec-table th.tabular {
  min-width: 120px;
}

.sku-code {
  white-space: normal;
  word-break: break-all;
}

/* Footer tightening to fix oversized band */
.site-footer {
  padding-block: var(--space-m) var(--space-s) !important;
}

.footer-primary-grid {
  margin-bottom: var(--space-m) !important;
  gap: var(--space-m) !important;
}

.footer-bio {
  margin-bottom: var(--space-2xs) !important;
}

.footer-meta-block address {
  margin-bottom: var(--space-3xs) !important;
}

/* Cookie banner fix: compact bottom docked bar, never obscuring h1 */
#cookie-banner {
  max-height: 22vh !important;
  padding: 0.5rem 0 !important;
}

#cookie-banner .cookie-banner-text {
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
}

/* Aspect-ratio photo fixes for wide screens (1920px) to prevent 62% crop */
.photo-divider img {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 650px !important;
}

/* Hover and active states for flat controls */
.btn-primary {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.btn-primary:hover {
  background-color: #2ea263 !important;
  border-color: #2ea263 !important;
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: #1e6c41 !important;
  border-color: #1e6c41 !important;
  transform: translateY(1px);
}