/* Winnie’s Closet — Layout fixes (Patch 016)
   Fixes:
   - Storefront spacing tightened WITHOUT breaking admin layouts (scoped to body:not(.is-admin)).
   - Normalize button sizes across site.
*/

/* Button normalization (site-wide) */
button, .btn{
  font-size: 14px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn.btn-secondary{
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(0,0,0,.12);
}
.btn.btn-danger{
  background: #b83b4a;
}

/* Global header/footer consistency (Patch 020)
   Keep header height identical across storefront + admin.
*/
header{
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}
footer{
  margin-top: 14px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Storefront spacing only (NOT admin) */
body:not(.is-admin) main.container{
  padding-top: 10px !important;
  padding-bottom: 14px !important;
  min-height: auto !important;
}
body:not(.is-admin) main.container > h1:first-child,
body:not(.is-admin) main.container > h2:first-child,
body:not(.is-admin) main.container > h3:first-child{
  margin-top: 0 !important;
}
body:not(.is-admin) .products-grid{
  margin-bottom: 12px !important;
}

/* Product page helper */
.product-page{ max-width: 1100px; margin: 0 auto; }
.product-split{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 860px){
  .product-split{ grid-template-columns: 1fr; }
}


/* Patch 030 — Mobile aesthetic cleanup (safe for desktop)
   - Prevent horizontal overflow on small screens
   - Tighter, consistent padding for content boxes
   - Better table/button wrapping
*/
@media (max-width: 768px){
  body{ overflow-x:hidden; }
  .container,
  main.container{ padding-left:12px !important; padding-right:12px !important; }
  .content-box{ padding:14px !important; border-radius:14px !important; }
  .admin-shell{ grid-template-columns:1fr !important; gap:12px !important; }
  .admin-shell .sidebar{ margin-bottom:12px; }

  /* Tables: either stack (preferred via .mobile-stack) or allow safe horizontal scroll */
  .admin-table{ width:100%; max-width:100%; }
  .admin-table td, .admin-table th{ word-break:break-word; }
  .admin-table:not(.mobile-stack){ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Buttons / action rows */
  .actions{ flex-wrap:wrap; }
  .btn{ max-width:100%; }

  /* Form controls */
  input, select, textarea{ max-width:100%; }
}