/* ==========================================================================
   Sood Studio — USA design system (shared base) — Fully responsive
   These pages run inside the site's existing header/footer (front_design),
   which loads Bootstrap and the legacy styles.css. Every rule scoped to
   .usa-page so tokens never leak. Colors unchanged.
   Page-specific rules live in category.css / product.css.
   ========================================================================== */

:root{
  --paper: #fff;
  --paper-alt: #faf9f6;
  --ink:#f70f05;
  --ink-soft:#59544A;
  --ink-faint:#8C8677;
  --line:#E3D9BF;
  --crimson: #f70f05;
  --crimson-dark: #f70f05;
  --gold:#A9843F;
  --gold-tint:#F1E6C8;
  --near-black:#141210;
  --serif:'Roboto', sans-serif;
  --sans:'Roboto', sans-serif;
  --mono:'Roboto', sans-serif;
  --max:1240px;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

.usa-page, .usa-page *{ box-sizing:border-box; margin:0; padding:0; }
.usa-page{ background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip; min-width:0; }
.usa-page a{ color:inherit; text-decoration:none; word-break:break-word; }
.usa-page a:hover, .usa-page a:focus{ text-decoration:none; }
.usa-page img, .usa-page svg{ display:block; max-width:100%; }
.usa-page img{ height:auto; }
.usa-page video{ max-width:100%; }

/* fluid container — fully responsive */
.usa-page .wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; width:100%; min-width:0; }
@media (max-width: 1200px){ .usa-page .wrap{ padding:0 28px; } }
@media (max-width: 1024px){ .usa-page .wrap{ padding:0 24px; } }
@media (max-width: 920px){ .usa-page .wrap{ padding:0 20px; } }
@media (max-width: 768px){ .usa-page .wrap{ padding:0 16px; } }
@media (max-width: 480px){ .usa-page .wrap{ padding:0 14px; } }
@media (max-width: 360px){ .usa-page .wrap{ padding:0 12px; } }

.usa-page h1, .usa-page h2, .usa-page h3, .usa-page h4{ font-family:var(--serif); font-weight:500; line-height:1.12; color:var(--near-black); overflow-wrap:break-word; word-break:break-word; }
.usa-page p{margin:0;letter-spacing:0.3px; overflow-wrap:break-word; word-break:break-word;}
.usa-page ul{ list-style:none; }

/* Neutralise legacy/Bootstrap — keep scoped */
.usa-page button, .usa-page input, .usa-page select{ font-family:inherit; line-height:normal; max-width:100%; }
.usa-page button:focus-visible, .usa-page a:focus-visible, .usa-page select:focus-visible, .usa-page input:focus-visible{
  outline:2px solid var(--crimson);
  outline-offset:2px;
}
.usa-page .row{ margin-left:0; margin-right:0; }
.usa-page .breadcrumb{ background:none; border-radius:0; list-style:none; }
.usa-page .badge{ line-height:normal; vertical-align:baseline; }

/* ---------- buttons — responsive ---------- */
.usa-page .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:0.86rem; line-height:1.2; padding:13px 20px; border-radius:4px; border:1.5px solid transparent; cursor:pointer; transition:all .2s ease; white-space:normal; text-align:center; min-height:44px; overflow-wrap:break-word; }
.usa-page .btn-primary{ background:var(--crimson); color:#fff; border-color:transparent; }
.usa-page .btn-primary:hover, .usa-page .btn-primary:focus{ background:var(--crimson-dark); color:#fff; border-color:transparent; transform:translateY(-1px); box-shadow:none; }
.usa-page .btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.usa-page .btn-outline:hover, .usa-page .btn-outline:focus{ background:var(--ink); color:#fff; }
.usa-page .btn-sm{ padding:9px 14px; font-size:0.76rem; min-height:36px; }
@media (max-width: 768px){
  .usa-page .btn{ padding:12px 16px; font-size:0.84rem; }
}
@media (max-width: 480px){
  .usa-page .btn{ padding:12px 14px; font-size:0.84rem; width:100%; min-height:42px; }
  .usa-page .btn-sm{ width:auto; min-height:36px; }
}

/* ---------- responsive type scale — fluid ---------- */
.usa-page{ font-size:16px; }
@media (max-width: 1024px){ .usa-page{ font-size:15px; } }
@media (max-width: 768px){ .usa-page{ font-size:14px; } }
@media (max-width: 480px){ .usa-page{ font-size:14px; } }
@media (max-width: 360px){ .usa-page{ font-size:13px; } }

/* ---------- prevent overflow from legacy grid ---------- */
.usa-page .fullWidth{ width:100%; max-width:100%; overflow-x:clip; min-width:0; }
.usa-page .overVis{ overflow:visible; }
@media (max-width: 920px){ .usa-page .overVis{ overflow:clip; } }

/* ---------- responsive images / media ---------- */
.usa-page .thumb img, .usa-page .gallery-slide img{ max-width:100%; height:auto; }

/* ---------- ensure no horizontal scroll on small devices ---------- */
@media (max-width: 480px){
  .usa-page{ overflow-x:hidden; }
  .usa-page .breadcrumb{ font-size:0.72rem; }
}