:root{
  --ink:#16191c; --ink-soft:#5a646d; --faint:#8b959e;
  --line:#dde3e8; --panel:#f6f8fa; --bg:#fff;
  --steel:#2f4858; --steel-deep:#1d2d38;
  --hi:#f0a500; --go:#1f7a4d; --stop:#a8321c;
  --wrap:74rem;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 "Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
h1{font-size:1.9rem;letter-spacing:-.01em}
h2{font-size:1.25rem;margin-top:2.2rem}
h3{font-size:1rem}
p{margin:0 0 .9rem;max-width:44rem}
a{color:var(--steel)}
code{background:var(--panel);padding:.1rem .3rem;border-radius:3px;font-size:.9em}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.1rem}
.wrap.narrow{max-width:52rem}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem}
.lead{font-size:1.1rem;color:var(--ink-soft);max-width:42rem}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;font-weight:800;color:var(--faint);margin-bottom:.5rem}
.right{text-align:right}
.bad{color:var(--stop);font-weight:700}
.inline{display:inline;margin:0}

header.site{background:var(--steel-deep);color:#fff;margin-bottom:2rem}
body.admin header.site{background:#16191c}
header.site .bar{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding-top:.8rem;padding-bottom:.8rem}
header.site a{color:#e8edf1;text-decoration:none}
header.site nav{margin-left:auto;display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;font-size:.93rem}
header.site nav a:hover{color:#fff;text-decoration:underline}
.brand{font-weight:800;letter-spacing:-.01em}
.brand span{font-weight:400;color:#9fb0bd}
main{min-height:60vh;padding-bottom:3rem}

footer.site{border-top:1px solid var(--line);background:var(--panel);padding:1.6rem 0;margin-top:3rem}
footer.site p{margin:0 0 .3rem}

.btn{display:inline-block;background:var(--hi);color:#191919;padding:.6rem 1.1rem;border:0;border-radius:3px;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none;line-height:1.3}
.btn:hover{background:#ffb51f}
.btn.big{padding:.85rem 1.5rem;font-size:1.02rem}
.btn.small{padding:.35rem .7rem;font-size:.85rem}
.btn.ghost{background:transparent;border:2px solid var(--steel);color:var(--steel)}
.btn.ghost:hover{background:var(--steel);color:#fff}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:1.2rem 0}
.linkish{background:none;border:0;color:var(--steel);text-decoration:underline;cursor:pointer;font:inherit;padding:0}

table.rows{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.94rem}
table.rows th,table.rows td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
table.rows thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);border-bottom-width:2px}
table.rows th.right,table.rows td.right{text-align:right}
table.rows tfoot td,table.rows tfoot th{border-bottom:0}
table.rows tr.total td,table.rows tr.total th{border-top:2px solid var(--ink);font-size:1.05rem}
tr.blocked{background:#fdf2ef}

.field{display:block;margin-bottom:.9rem}
.field span{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:.25rem}
input,select,textarea{width:100%;padding:.55rem .6rem;border:1px solid var(--line);border-radius:3px;font:inherit;background:#fff}
textarea{min-height:5rem}
input.qty{width:5rem;display:inline-block}
input.qty.wide{width:7rem}
.check{display:block;margin:.5rem 0}
.check input{width:auto;margin-right:.4rem}
.cols{display:grid;gap:0 1.1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:end}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0;align-items:center}
.filters input,.filters select{width:auto;min-width:14rem}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1rem 0 2rem}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1rem;text-decoration:none;color:inherit}
.card:hover{border-color:var(--steel)}
.card h3{margin-bottom:.2rem}

.tiles{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin:1.4rem 0}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:.9rem 1rem;text-decoration:none;color:inherit}
.tile:hover{border-color:var(--steel)}
.tile.hot{background:#fff6e0;border-color:var(--hi)}
.tile .n{display:block;font-size:1.7rem;font-weight:800;color:var(--steel-deep);line-height:1.1}
.tile .l{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}

.price{font-size:1.5rem;font-weight:800;color:var(--steel-deep);margin:.4rem 0}
.price.tbd{font-size:1.05rem;color:var(--ink-soft)}
.breaks{margin:.2rem 0 1rem;padding-left:1.1rem;color:var(--ink-soft);font-size:.93rem}

.tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:.16rem .42rem;border-radius:2px;background:var(--line);color:var(--ink-soft)}
.tag.warn{background:#fde8e3;color:var(--stop)}
.pill{background:var(--hi);color:#191919;border-radius:2px;padding:0 .3rem;font-size:.8rem;font-weight:800}

.note{background:#fff6e0;border-left:4px solid var(--hi);padding:.9rem 1rem;margin:1.2rem 0}
.note p:last-child{margin-bottom:0}
.errors{background:#fde8e3;border-left:4px solid var(--stop);padding:.9rem 1rem;margin:1.2rem 0}
.flash{background:#e8f3ec;border-left:4px solid var(--go);padding:.9rem 1rem;margin:0 0 1.4rem}
.detail{background:var(--panel);border:1px solid var(--line);padding:.8rem;overflow:auto;font-size:.82rem;max-height:28rem;white-space:pre-wrap;word-break:break-word}

body.centred{display:grid;place-items:center;min-height:100vh;background:var(--panel)}
.signin{background:#fff;border:1px solid var(--line);border-radius:5px;padding:1.8rem;width:min(24rem,92vw)}
.signin h1{font-size:1.3rem;margin-bottom:.1rem}

.doc{padding-top:1rem}
@media print{
  header.site,footer.site,.noprint{display:none}
  body{font-size:12pt}
  .wrap{max-width:none}
}
@media (max-width:640px){
  header.site nav{width:100%;margin-left:0}
  .cols{grid-template-columns:1fr}
  table.rows{font-size:.87rem}
}

/* Advisory hint under a form field, as used by the shipping estimate on a
   quotation. Quiet enough to ignore, close enough to act on. */
.field .hint {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted, #667);
}
.field .hint .linkish { font-size: inherit; }

/* The quotation breakdown. Sub-rows explain a figure above them, so they are
   indented and quiet: the reader should be able to skip them entirely. */
table.totals { margin-top: .5rem; }
table.totals th { text-align: left; font-weight: 600; }
table.totals tr.sub td:first-child { padding-left: 1.25rem; }
table.totals tr.sub td { border-bottom: 0; padding-top: .15rem; padding-bottom: .15rem; }
table.totals tr.total th,
table.totals tr.total td { border-top: 2px solid currentColor; font-size: 1.05rem; }

@media print {
  header, nav, .btn-row, form .btn, .qty { display: none !important; }
  a[href]::after { content: ""; }
}

/* Add-to-quotation bar under the catalogue table. */
.addbar { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 1rem 0 0; }

/* Running quotation, pinned so the total stays visible while choosing. */
.quotebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: .8rem 1rem;
  background: var(--panel, #f2f5f7);
  border-top: 2px solid currentColor;
}
@media print { .quotebar, .addbar { display: none; } }

/* Ryan's photographs. Small square crops, so roughly nine sit above the fold
   on a laptop and a mixed bag of phone shots still reads as a grid. Full size
   opens in the viewer below. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .5rem; margin-top: 1.1rem;
  /* Capped so the tiles stay a usable size on a wide screen and roughly nine
     sit in view, rather than the whole roll shrinking to thumbnails. */
  max-width: 860px;
}
.gallery .shot { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: var(--panel, #eef1f3); cursor: zoom-in; }
.gallery .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery .shot:hover img, .gallery .shot:focus-visible img { transform: scale(1.05); }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* Click to expand. Plain overlay, no library. */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 15, 18, .92);
  padding: 3.2rem 1rem 3rem;
}
.lightbox[hidden] { display: none; }
.lightbox .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }
.lightbox button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  line-height: 1; padding: .5rem .8rem; opacity: .75;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lightbox .lb-close { top: .4rem; right: .6rem; font-size: 2.2rem; }
.lightbox .lb-nav { top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lightbox .lb-prev { left: .2rem; }
.lightbox .lb-next { right: .2rem; }
.lightbox .lb-count {
  position: absolute; bottom: .7rem; left: 0; right: 0; margin: 0;
  text-align: center; color: #fff; opacity: .7; font-size: .85rem;
}
@media print { .gallery, .lightbox { display: none; } }

/* Home hero. The artwork slot is an explicit placeholder until Ryan picks a
   photograph: hatched, labelled, and obviously unfinished, so nobody mistakes
   it for a design decision. */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6rem; align-items: center; margin-bottom: 1.6rem; }
.hero-copy > :first-child { margin-top: 0; }

.hero-art, .ph-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; text-align: center; padding: 1.2rem; border-radius: 3px;
  border: 2px dashed var(--rule, #c6d0d6);
  background-color: var(--panel, #f2f5f7);
  background-image: repeating-linear-gradient(45deg,
    rgba(127, 143, 155, .10) 0 10px, transparent 10px 20px);
  color: var(--graphite, #5b666f);
}
.hero-art { min-height: 300px; }
.ph-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 0 0 2rem; }
.ph-tile { min-height: 150px; }
.ph-label { font-weight: 600; font-size: 1rem; }
.ph-note { font-size: .8rem; opacity: .8; max-width: 22ch; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 200px; order: -1; }
  .ph-strip { grid-template-columns: 1fr; }
}
@media print { .hero-art, .ph-strip { display: none; } }

/* ------------------------------------------------------------ product page */

.crumbs { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--graphite, #5a6268); margin-bottom: 1rem; }
.crumbs span { opacity: .5; }

.prod { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: start; }
.prod-buy { display: flex; flex-direction: column; gap: .7rem; }
.prod-buy h1 { margin: 0; }
.prod-buy > :first-child { margin-top: 0; }

.prod-hero { margin: 0; border-radius: 3px; overflow: hidden; background: var(--panel, #f2f5f7); }
.prod-hero img { width: 100%; aspect-ratio: 4 / 3; display: block; }
.prod-hero figcaption { font-size: .82rem; color: var(--graphite, #5a6268); padding: .5rem .1rem 0; min-height: 1.4em; }

.prod-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: 2px; background: none; cursor: pointer; line-height: 0; }
.thumb img { width: 68px; height: 68px; object-fit: cover; border-radius: 1px; display: block; }
.thumb.on { border-color: currentColor; }
.thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.stock { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0; }
.breaks-table { margin: .2rem 0; max-width: 20rem; }
.ship { margin: 0; }

.docs { border-top: 1px solid var(--rule, #dde1dd); padding-top: .8rem; margin-top: .3rem; }
.docs ul { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-direction: column; gap: .35rem; }

.prod-detail { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.4rem; }
.prod-detail section { display: flex; flex-direction: column; gap: .8rem; }

ul.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
ul.ticks li { padding-left: 1.4rem; position: relative; }
ul.ticks li::before { content: "\2713"; position: absolute; left: 0; opacity: .55; }

ol.howto { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
ol.howto li { padding-left: .2rem; }

.tag.ok { background: var(--accent-soft, #e3ede9); }

@media (max-width: 780px) {
  .prod { grid-template-columns: 1fr; gap: 1.3rem; }
  .breaks-table { max-width: none; }
}
@media print { .prod-thumbs, .btn-row { display: none; } }