/* Dalbani — shared site layer (overrides mockup canvas + adds responsiveness + interactivity helpers) */

/* Turn the mockup "canvas" into a real page background */
html, body { margin: 0; padding: 0; }
body { background: var(--bg, #FAFAF9) !important; }

/* Make wired-up controls feel clickable */
a { cursor: pointer; }
a[href] { text-decoration: none; }
.js-add-cart, .submit, button { cursor: pointer; }

/* Toast for cart / actions */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--ink, #0B1220); color: #fff; padding: 12px 18px; border-radius: 10px;
  font: 500 13px/1.4 'Inter', system-ui, sans-serif; letter-spacing: -0.01em;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.4); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; z-index: 9999; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Tab active state helper */
.is-tab-active { color: var(--ink, #0B1220) !important; font-weight: 600 !important; }

/* ===== Responsive layer ===== */
@media (max-width: 980px) {
  .header-inner { gap: 16px !important; }
  .cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .products-rail { grid-template-columns: repeat(3, 1fr) !important; }
  .trust-inner, .footer-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
}

@media (max-width: 760px) {
  /* Header: drop the inline search bar, keep logo + actions */
  .header-inner { grid-template-columns: auto 1fr !important; padding: 14px 16px !important; }
  .header-search { display: none !important; }
  .header-actions { justify-content: flex-end; }

  /* Hero */
  .hero { padding: 40px 16px 32px !important; }
  .hero h1, h1.display { font-size: 34px !important; line-height: 1.1 !important; }
  .hero p.lede { font-size: 16px !important; }
  .hero-search { max-width: 100% !important; }

  /* Sections breathe less */
  .section, .trust-strip, .footer { padding-left: 16px !important; padding-right: 16px !important; }

  /* Collapse multi-column grids */
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .products-rail { grid-template-columns: repeat(2, 1fr) !important; }
  .trust-inner, .footer-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .qo-banner { grid-template-columns: 1fr !important; padding: 24px !important; }
  .qo-banner .qo-input { min-width: 0 !important; width: 100%; }

  /* Any inline two/three-column layout wrappers stack to one column on mobile */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Tables / wide blocks scroll instead of overflow */
  table { display: block; overflow-x: auto; }
}

@media (max-width: 440px) {
  .cat-grid, .products-rail { grid-template-columns: 1fr !important; }
  h1.display { font-size: 28px !important; }
}

/* ===== Mobile pass: page-specific class grids (product, cart, account,
   category, quick-order) stack to one column on phones ===== */
@media (max-width: 760px) {
  /* product page */
  .pdp-main { grid-template-columns: 1fr !important; gap: 24px !important; }
  .pdp-sections { grid-template-columns: 1fr !important; gap: 24px !important; }
  .quick-info { grid-template-columns: 1fr !important; }
  .compat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .quantity-row { grid-template-columns: 1fr !important; }
  /* cart + checkout */
  .cart-grid, .ck-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ci { grid-template-columns: 64px 1fr !important; row-gap: 6px !important; }
  .cart-item { grid-template-columns: 56px 1fr auto !important; }
  /* account */
  .account-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .order-row, .order-header { grid-template-columns: 1.4fr 1fr 90px !important; font-size: 12px; }
  .order-row > :nth-child(3), .order-header > :nth-child(3),
  .order-row > :nth-child(4), .order-header > :nth-child(4) { display: none; }
  .two-col, .grid { grid-template-columns: 1fr !important; }
  /* category browse */
  .cat-body { grid-template-columns: 1fr !important; }
  .grid-spacious { grid-template-columns: repeat(2, 1fr) !important; }
  .compact-row, .compact-header { grid-template-columns: 48px 1fr 90px !important; }
  .compact-row > :nth-child(n+4), .compact-header > :nth-child(n+4) { display: none; }
  /* quick order */
  .qo-grid { grid-template-columns: 1fr !important; }
  .formats { grid-template-columns: 1fr !important; }
  /* comfortable touch targets everywhere */
  button, .btn, .js-add-cart { min-height: 42px; }
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 440px) {
  .grid-spacious, .compat-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
}