/* Shared site typography and responsive scaling
   Purpose: Normalize font sizes across all pages to match home.html
   and ensure consistent desktop & mobile rendering. Only CSS — no HTML/JS changes.
*/
:root{
  --base-font-desktop: 14px; /* matches home.html */
  --base-font-mobile: 13px;
  --max-content-width: 1100px;
  --line-height: 1.45;
  --body-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html{font-size:var(--base-font-desktop) !important; -webkit-text-size-adjust:100%;}
body{font-family:var(--body-font) !important; font-size:1rem !important; line-height:var(--line-height) !important; color:#222 !important; background-color: #f5f7fa !important;}

/* Layout container constraint for readable line lengths */
.container, .content, main {max-width:var(--max-content-width); margin:0 auto; padding:0 16px;}

/* Make images & media responsive */
img, video, iframe {max-width:100%; height:auto; display:block;}

/* Form elements and buttons sizing */
input, button, select, textarea {font-family:inherit !important; font-size:1rem !important;}
button{padding:8px 12px !important}

/* Compact product action buttons */
.add-to-cart, .buy-now {padding:4px 8px !important; font-size:0.65rem !important; height:auto !important; min-height:20px !important}
.product-actions {gap:4px !important}

/* Headings scale down slightly to keep hierarchy compact */
h1{font-size:1.75rem !important; margin:0.6rem 0 !important}
h2{font-size:1.25rem !important}
h3{font-size:1.05rem !important}

/* Small text helper */
.small-text{font-size:0.875rem !important}

/* Price styling keep slightly larger but compact */
.product-price, .price {font-size:1.05rem !important}
.original-price {text-decoration: line-through; opacity:0.8}

/* Prevent overly large UI on big screens */
@media (min-width:1400px){
  html{font-size:15px !important}
  .container{max-width:1200px}
}

/* Mobile scaling */
@media (max-width:900px){
  html{font-size:var(--base-font-mobile) !important}
  .container, .content, main{padding:0 12px}
  h1{font-size:1.5rem !important}
}

/* Minor utility to avoid oversized spacing */
p, li {max-width:100%;}

/* Ensure header/top nav elements don't blow up on desktop */
.header-wrapper, .top-header, header {font-size:0.95rem !important}

/* Accessibility: make clickable areas consistent */
a, button {line-height:1.2}

/* ensure search buttons keep their content inside and don't collapse
   when the container shrinks (e.g. on checkout/cart pages) */
.search-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Make sure modal content scales */
.modal, .dialog {max-width:95vw}