:root {
    --ink: #000000;
    --paper: #FFFFFF;
    --accent: #B11A18;
    --muted: #595959;
    --rule: #E8E6E6;
    --soft: #C7C7C7;
    --band: #242323;
}
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/8aaa1f_c005d749a43b4ec1b732f0f26043892b.woff2") format("woff2"),url("/fonts/8aaa1f_c005d749a43b4ec1b732f0f26043892b.woff") format("woff"),url("/fonts/8aaa1f_c005d749a43b4ec1b732f0f26043892b.ttf") format("truetype")}
@font-face{font-family:'Montserrat';font-weight:800;font-style:normal;font-display:swap;src:url("/fonts/8aaa1f_c4d015fc35b946688b8612cc2d61dc35.woff2") format("woff2"),url("/fonts/8aaa1f_c4d015fc35b946688b8612cc2d61dc35.woff") format("woff"),url("/fonts/8aaa1f_c4d015fc35b946688b8612cc2d61dc35.ttf") format("truetype")}
@font-face{font-family:'Montserrat Thin';font-weight:200;font-style:normal;font-display:swap;src:url("/fonts/8aaa1f_8da2955dfc4b4cd7b20a4590f757b33a.woff2") format("woff2"),url("/fonts/8aaa1f_8da2955dfc4b4cd7b20a4590f757b33a.woff") format("woff"),url("/fonts/8aaa1f_8da2955dfc4b4cd7b20a4590f757b33a.ttf") format("truetype")}
@font-face{font-family:'Lato';font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/90a441_18085ede590b425d9aebc52cf1f71f72.woff2") format("woff2"),url("/fonts/90a441_18085ede590b425d9aebc52cf1f71f72.woff") format("woff"),url("/fonts/90a441_18085ede590b425d9aebc52cf1f71f72.ttf") format("truetype")}
@font-face{font-family:'Lato';font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/8aaa1f_e272f8b13d9a4e26baecf0ba8f796301.woff2") format("woff2"),url("/fonts/8aaa1f_e272f8b13d9a4e26baecf0ba8f796301.woff") format("woff"),url("/fonts/8aaa1f_e272f8b13d9a4e26baecf0ba8f796301.ttf") format("truetype")}
@font-face{font-family:'Helvetica Neue LT W20 Light';font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/helvetica-neue-lt-w20-light.woff2") format("woff2")}
@font-face{font-family:'Helvetica W01 Roman';font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/helvetica-w01-roman.woff2") format("woff2"),url("/fonts/helvetica-w01-roman.woff2") format("woff2")}
@font-face{font-family:'Helvetica W01 Bold';font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/helvetica-w01-bold.woff2") format("woff2"),url("/fonts/helvetica-w01-bold.woff2") format("woff2")}
@font-face{font-family:'Helvetica W01 Light';font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/helvetica-w01-light.woff2") format("woff2"),url("/fonts/helvetica-w01-light.woff2") format("woff2")}
@font-face{font-family:'Avenir LT W01 35 Light';font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/avenir-lt-w01-35-light.woff2") format("woff2"),url("/fonts/avenir-lt-w01-35-light.woff2") format("woff2")}

/* --------------------------------------------------------------------------
   Shared foundation. Every rule here is a constraint the previous four builds
   proved necessary, not a style choice -- the look of each site comes from its
   own tokens file, loaded after this one.
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }
/* a 1px border on a max-width:100% image overflows a 320px viewport by 2px --
   the only thing that overflowed the whole of the previous job */
img { box-sizing: border-box; }
a { color: inherit; }
table { max-width: 100%; }

/* Skip link: visually hidden but keyboard-reachable. The 1x1+clip pattern is
   deliberate -- the mobile audit skips clipped elements rather than counting
   this as a failed tap target, which is what it is not. */
.skip {
    position: absolute; left: -1px; top: 0; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    background: #fff; color: #000; z-index: 999;
    /* NO padding in the hidden state. With box-sizing:border-box a 1px box
       with 10px/16px padding still lays out at 32x20 -- the link was not
       hidden at all, and the mobile audit reported it as a failed tap target
       on every page. Padding belongs to the focused state, which is the only
       state anyone sees. */
    padding: 0;
}
.skip:focus {
    width: auto; height: auto; clip: auto; clip-path: none;
    padding: 10px 16px; left: 0;
}

/* missing-image fallback, wired in js/site.js */
img.img-missing {
    background: repeating-linear-gradient(135deg,#efece6 0 10px,#e6e2d8 10px 20px);
    min-height: 40px; object-fit: contain;
}

@media (max-width: 900px) {
    /* iOS Safari zooms the whole page when a focused control is under 16px.
       Name the CLASSES the stylesheet uses, not just the element types -- a
       bare `input` selector loses on specificity to any `.field` rule and the
       fix ships inert. That happened on the previous job. */
    input, select, textarea, button,
    .field, .field2, input[type="text"], input[type="email"], input[type="tel"] {
        font-size: 16px;
    }
    input, select, textarea, button { min-height: 44px; }
    /* every tap target reaches 44x44 */
    nav a, .nav a, footer a, .btn { min-height: 44px; display: inline-flex;
        align-items: center; }
    /* a.tap is stamped at build time by mark_tap_targets(): a link that is the
       whole of its <p> or <li>. min-WIDTH too -- an inline-flex box shrinks to
       its text, and "Bonjing" is 60px wide however tall it is. */
    a.tap { min-height: 44px; min-width: 44px; display: inline-flex;
        align-items: center; }
    .also li { margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------------------
   innovativemedicalsupplies.org — measured from the archive.
   Body 16px Helvetica Neue LT Light, page headings 30px uppercase, section
   headings 22px, the crimson #B11A18 on links and controls, a near-black band
   behind the store list. Grid is a centred 1180px column.
--------------------------------------------------------------------------- */
body {
    background: var(--paper); color: var(--ink);
    font-family: 'Helvetica Neue LT W20 Light','Helvetica W01 Light',
                 'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 16px; line-height: 1.6;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---- store bar ---- */
.stores { background: var(--band); color: #fff; font-size: 14px; padding: 10px 0; }
.stores .wrap { display: flex; flex-wrap: wrap; gap: 6px 26px;
                justify-content: space-between; align-items: center; }
.stores a { color: #fff; }
.stores .s { white-space: nowrap; }
.stores .s b { font-weight: 400; }
.stores .tel { color: #ff8f8d; text-decoration: none; }

/* ---- header ---- */
.top { border-bottom: 1px solid var(--rule); background: var(--paper);
       position: sticky; top: 0; z-index: 40; }
.top .wrap { display: flex; align-items: center; justify-content: space-between;
             gap: 18px; min-height: 72px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 46px; width: auto; }
.brand .bn { font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: 17px;
             letter-spacing: .01em; line-height: 1.15; }
.brand .bn span { display: block; font-weight: 400; font-size: 12px;
                  color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nav a {
    font-family: 'Montserrat',sans-serif; font-size: 13px; letter-spacing: .07em;
    text-transform: uppercase; text-decoration: none; padding: 8px 2px;
}
.nav a:hover, .nav a:focus { color: var(--accent); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---- page head ---- */
.phead { border-bottom: 1px solid var(--rule); padding: 34px 0 26px; }
h1 {
    font-family: 'Montserrat',sans-serif; font-weight: 800; text-transform: uppercase;
    font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; margin: 0 0 10px;
}
.lead { font-size: 17px; color: #2a2a2a; max-width: 78ch; margin: 0; }

main { padding: 10px 0 44px; }
section { padding: 26px 0; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: 0; }
h2 {
    font-family: 'Montserrat',sans-serif; font-weight: 800; text-transform: uppercase;
    font-size: clamp(17px, 2.1vw, 21px); letter-spacing: .03em; margin: 0 0 12px;
}
h3 { font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: 15px;
     text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
p { margin: 0 0 12px; max-width: 78ch; }
a { color: var(--accent); }
.note { color: var(--muted); font-style: italic; }

/* ---- product grid ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
         gap: 24px; margin: 6px 0 0; }
.card { border: 1px solid var(--rule); padding: 16px; display: flex;
        flex-direction: column; gap: 10px; }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fafafa; }
.card p { font-size: 14.5px; color: #2f2f2f; margin: 0; }

/* ---- tables / lists ---- */
.hours { border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: 5px 22px 5px 0;
                       border-bottom: 1px solid var(--rule); font-weight: 400; }
.also ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
           gap: 12px 24px; }

/* ---- footer ---- */
footer { border-top: 3px solid var(--accent); background: var(--band); color: #fff;
         padding: 34px 0 46px; }
footer a { color: #fff; }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
               gap: 26px; }
footer .lbl { font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: 12px;
              letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
              color: #ffb3b1; }
footer .fine { color: var(--soft); font-size: 13px; margin-top: 24px; }

@media (max-width: 900px) {
    .top .wrap { flex-direction: column; align-items: flex-start; padding: 10px 22px; }
    .stores .wrap { flex-direction: column; align-items: flex-start; gap: 4px; }
    .nav { gap: 2px 14px; }
}