/* The Wonham Collection - responsive Test redesign, 2026-09-15
   Loaded only by /. Keeps the Classic ASP/database logic intact while
   modernising layout, typography, forms, navigation and mobile behaviour. */
:root{
  --wc-navy:#1f3870;
  --wc-blue:#4c69a9;
  --wc-blue-dark:#304d88;
  --wc-blue-soft:#e9eff8;
  --wc-green:#3f9f70;
  --wc-red:#b93a3a;
  --wc-yellow:#f4cf3f;
  --wc-ink:#172033;
  --wc-muted:#667085;
  --wc-line:#d8dee9;
  --wc-paper:#ffffff;
  --wc-bg:#f5f7fb;
  --wc-warm:#fff9dd;
  --wc-radius:14px;
  --wc-shadow:0 8px 28px rgba(31,56,112,.10);
  --wc-wrap:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0!important;
  padding:0!important;
  background:var(--wc-bg)!important;
  color:var(--wc-ink)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  line-height:1.55!important;
}
body>center{display:block;width:100%}
center{max-width:100%}
a{color:var(--wc-navy);text-decoration:none}
a:hover,a:focus{color:var(--wc-red);text-decoration:underline}
img:not([src*="spacer.gif"]){max-width:100%;height:auto}
img[src*="spacer.gif"]{max-width:none}
input,select,textarea,button{font:inherit;max-width:100%}
input[type=text],input[type=password],input[type=email],input[type=search],input[type=number],select,textarea{
  border:1px solid #bcc6d5!important;border-radius:8px!important;background:#fff!important;color:var(--wc-ink)!important;
  padding:9px 10px!important;min-height:40px;box-shadow:inset 0 1px 2px rgba(0,0,0,.03)
}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=number]:focus,select:focus,textarea:focus{
  outline:3px solid rgba(76,105,169,.18);border-color:var(--wc-blue)!important
}
input[type=submit],input[type=button],button,.wc-button{
  border:0!important;border-radius:9px!important;background:var(--wc-blue)!important;color:#fff!important;
  min-height:40px;padding:9px 15px!important;font-weight:700;cursor:pointer;text-decoration:none!important
}
input[type=submit]:hover,input[type=button]:hover,button:hover,.wc-button:hover{background:var(--wc-blue-dark)!important}
textarea{width:100%!important}

/* New header */
.wc-header{width:100%;background:#fff;border-bottom:1px solid var(--wc-line);box-shadow:0 3px 18px rgba(31,56,112,.07)}
.wc-header__inner{width:min(var(--wc-wrap),calc(100% - 32px));margin:auto;display:grid;grid-template-columns:minmax(240px,1fr) minmax(300px,1.1fr) auto;gap:22px;align-items:center;padding:18px 0}
.wc-brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none!important}
.wc-brand__name{font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,2.4vw,34px);color:var(--wc-navy);letter-spacing:.02em}
.wc-brand__tag{font-size:13px;color:var(--wc-muted);margin-top:5px;letter-spacing:.02em}
.wc-searchbar{display:flex;align-items:stretch;gap:8px;margin:0}
.wc-searchbar input[type=search],.wc-searchbar input[type=text]{width:100%;min-width:0;height:44px!important;border-radius:10px!important}
.wc-searchbar button{height:44px;white-space:nowrap}
.wc-header__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.wc-chip{display:inline-flex;align-items:center;min-height:38px;padding:7px 10px;border:1px solid var(--wc-line);border-radius:9px;background:#fff;color:var(--wc-navy);font-size:14px;font-weight:700;text-decoration:none!important}
.wc-chip:hover{background:var(--wc-blue-soft);color:var(--wc-navy)}
.wc-trade-label{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--wc-warm);color:#6d5900;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-top:6px;width:max-content}

/* New nav is emitted as one row so it remains valid inside the legacy table shell. */
.wc-nav-row>td{background:var(--wc-navy)!important;padding:0!important}
.wc-nav{width:100%;color:#fff;padding:10px 14px}
.wc-nav__inner{display:flex;align-items:center;gap:7px;flex-wrap:wrap;max-width:var(--wc-wrap);margin:auto}
.wc-nav a{color:#fff!important;padding:8px 10px;border-radius:8px;font-weight:700;text-decoration:none!important;font-size:14px}
.wc-nav a:hover{background:rgba(255,255,255,.14)}
.wc-nav__spacer{flex:1 1 auto}
.wc-nav select{min-height:36px!important;padding:6px 28px 6px 9px!important;font-size:14px;max-width:260px}
.wc-nav__currency{display:flex;align-items:center;gap:3px;color:#dbe4f6;font-size:12px}
.wc-nav__currency a{padding:6px 7px}

/* Legacy page shells become fluid rather than 760/762/1450 fixed pixels. */
table[width="760"],table[width="762"],table[width="1450"]{
  width:min(var(--wc-wrap),calc(100% - 32px))!important;max-width:var(--wc-wrap)!important;margin-left:auto!important;margin-right:auto!important
}
/* Shared catalogue/product shells. These used to be fixed 762px tables. */
.wc-legacy-shell{
  width:min(1120px,calc(100% - 32px))!important;max-width:1120px!important;
  margin-left:auto!important;margin-right:auto!important;table-layout:auto
}
.wc-accent-row{height:8px!important;line-height:0!important}
.wc-accent-row>td{height:8px!important;min-height:8px!important;padding:0!important;line-height:0!important}
.wc-accent-row img{display:none!important}
.wc-legacy-shell>tbody>tr>td[bgcolor="#C0D0E5"]{width:205px}
.wc-legacy-shell>tbody>tr>td[bgcolor="#FAF0A9"]{width:220px}
.wc-trade-shell .wc-empty-sidebar{display:none!important;width:0!important;padding:0!important;border:0!important}
/* The 2003 homepage/login picture strip is redundant below the new responsive header. */
.wc-legacy-hero{display:none!important}
table{max-width:100%;border-collapse:collapse}
td{font-family:Arial,Helvetica,sans-serif!important;font-size:15px!important;line-height:1.45;overflow-wrap:anywhere}
.wonham{font-family:Georgia,'Times New Roman',serif!important;color:var(--wc-navy)!important}
.browse{font-family:Georgia,'Times New Roman',serif!important;font-size:24px!important;color:var(--wc-navy)!important}
.boxed,.productbx,.boxborder{border-color:var(--wc-line)!important}
.productbx,.boxborder{background:#fff!important;border:1px solid var(--wc-line)!important;border-radius:10px;box-shadow:0 3px 12px rgba(31,56,112,.06);padding:10px!important}
.productbx:hover,.boxborder:hover{box-shadow:0 7px 20px rgba(31,56,112,.12)}
.productbx img,.boxborder img{object-fit:contain}

/* Modern utility blocks used on rewritten pages. */
.wc-shell{width:min(var(--wc-wrap),calc(100% - 32px));margin:20px auto}
.wc-hero{background:linear-gradient(135deg,var(--wc-navy),var(--wc-blue));color:#fff;border-radius:18px;padding:clamp(24px,4vw,50px);box-shadow:var(--wc-shadow);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:26px;align-items:center}
.wc-hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,5vw,52px);line-height:1.05;margin:0 0 12px;color:#fff}
.wc-hero p{font-size:clamp(16px,2vw,20px);max-width:720px;margin:0 0 18px;color:#f0f4ff}
.wc-hero__actions{display:flex;gap:10px;flex-wrap:wrap}
.wc-button--light{background:#fff!important;color:var(--wc-navy)!important}
.wc-button--gold{background:var(--wc-yellow)!important;color:#342b00!important}
.wc-panel{background:#fff;border:1px solid var(--wc-line);border-radius:var(--wc-radius);padding:18px;box-shadow:0 4px 18px rgba(31,56,112,.06)}
.wc-section{margin:30px 0}
.wc-section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.wc-section h2,.wc-section__head h2{font-family:Georgia,'Times New Roman',serif;color:var(--wc-navy);font-size:clamp(24px,3vw,34px);margin:0}
.wc-muted{color:var(--wc-muted)}
.wc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.wc-card{background:#fff;border:1px solid var(--wc-line);border-radius:var(--wc-radius);padding:14px;box-shadow:0 4px 18px rgba(31,56,112,.06);min-width:0}
.wc-card:hover{box-shadow:0 9px 26px rgba(31,56,112,.12);transform:translateY(-1px)}
.wc-card__media{height:160px;display:flex;align-items:center;justify-content:center;background:#fafbfe;border-radius:10px;margin-bottom:10px;overflow:hidden}
.wc-card__media img{max-height:150px;max-width:100%;width:auto;height:auto}
.wc-card__title{font-weight:800;font-size:16px;color:var(--wc-navy);margin:4px 0}
.wc-card__meta{font-size:13px;color:var(--wc-muted)}
.wc-quicklinks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wc-quicklink{display:block;background:#fff;border:1px solid var(--wc-line);border-radius:12px;padding:16px;color:var(--wc-ink);text-decoration:none!important;box-shadow:0 3px 12px rgba(31,56,112,.05)}
.wc-quicklink strong{display:block;color:var(--wc-navy);font-size:18px;margin-bottom:4px}
.wc-callout{background:var(--wc-warm);border:1px solid #efdd80;border-radius:12px;padding:14px 16px;color:#554900}

/* Search pages */
.wc-search-help{font-size:13px;color:var(--wc-muted);margin-top:6px}
.wc-stockcode{font-family:Consolas,'Courier New',monospace;font-weight:800;letter-spacing:.03em;background:var(--wc-blue-soft);color:var(--wc-navy);display:inline-block;padding:2px 6px;border-radius:5px}
.wc-result-count{font-weight:700;color:var(--wc-navy)}


/* Responsive treatment for the shared catalogue/product templates. */
.wc-legacy-shell .wc-main{min-width:0;background:#fff}
.wc-legacy-shell .wc-side{vertical-align:top}
.wc-legacy-shell .wc-side--left{width:205px!important}
.wc-legacy-shell .wc-side--right{width:220px!important}
.wc-login-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px;align-items:start}
.wc-login-form{max-width:560px}
.wc-login-form label{display:block;font-weight:700;color:var(--wc-navy);margin:12px 0 5px}
.wc-login-form input[type=text],.wc-login-form input[type=password]{width:100%!important}
.wc-login-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.wc-login-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.wc-login-links a{display:block;padding:11px 12px;background:var(--wc-blue-soft);border-radius:9px;font-weight:700}
.wc-error{background:#fff4db;border:1px solid #e4b54f;color:#6b4700;border-radius:10px;padding:12px 14px;margin-bottom:14px}

/* Footer */
.wc-footer{margin-top:38px;background:#172b59;color:#dbe4f6;border-top:5px solid var(--wc-blue)}
.wc-footer__inner{width:min(var(--wc-wrap),calc(100% - 32px));margin:auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;padding:28px 0}
.wc-footer h3{color:#fff;font-size:16px;margin:0 0 8px}
.wc-footer p{margin:3px 0;font-size:14px}
.wc-footer a{color:#fff!important}
.wc-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding:12px 0;text-align:center;font-size:12px;color:#c7d2e8}

/* Better readability for old content blocks. */
p{margin-top:.45em;margin-bottom:.75em}
h1,h2,h3{color:var(--wc-navy)}
hr{border:0;border-top:1px solid var(--wc-line)}
[bgcolor="#C0D0E5"],[bgcolor="#D3DFEE"]{background:#eef3fa!important}
[bgcolor="#FAF0A9"],[bgcolor="#FCF6C9"],[bgcolor="#FFEC6C"]{background:var(--wc-warm)!important}
[bgcolor="#4C69A9"]{background:var(--wc-blue)!important}

/* Tables containing order/account data scroll rather than forcing the viewport wide. */
.wc-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:900px){
  .wc-header__inner{grid-template-columns:1fr auto;gap:12px}
  .wc-searchbar{grid-column:1/-1;grid-row:2}
  .wc-hero{grid-template-columns:1fr}
  .wc-quicklinks{grid-template-columns:1fr 1fr}
  .wc-footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  body{font-size:15px!important;padding-top:32px!important}
  body::before{height:32px;font-size:11px}
  .wc-header__inner{width:calc(100% - 20px);padding:12px 0;grid-template-columns:1fr}
  .wc-header__actions{justify-content:flex-start}
  .wc-brand__name{font-size:26px}
  .wc-searchbar{grid-column:auto;grid-row:auto;width:100%}
  .wc-searchbar button{padding-left:11px!important;padding-right:11px!important}
  table[width="760"],table[width="762"],table[width="1450"],.wc-legacy-shell{width:calc(100% - 16px)!important;max-width:none!important}
  /* Stack the three major legacy columns without flattening every nested table. */
  body>center>table[width="762"]>tbody>tr:not(.wc-nav-row):not(.wc-accent-row)>td,
  body>center>table[width="760"]>tbody>tr:not(.wc-nav-row):not(.wc-accent-row)>td,
  body>center>table[width="1450"]>tbody>tr:not(.wc-nav-row):not(.wc-accent-row)>td{
    display:block!important;width:100%!important;max-width:100%!important;height:auto!important
  }
  .wc-accent-row{display:table-row!important}
  .wc-accent-row>td{display:table-cell!important;width:auto!important;height:6px!important}
  .wc-legacy-shell>tbody>tr>td[bgcolor="#C0D0E5"],
  .wc-legacy-shell>tbody>tr>td[bgcolor="#FAF0A9"]{width:100%!important}
  .wc-trade-shell .wc-empty-sidebar{display:none!important}
  .wc-legacy-shell .wc-side{display:none!important}
  .wc-legacy-shell .wc-main{display:block!important;width:100%!important;max-width:100%!important}
  .wc-login-grid{grid-template-columns:1fr}
  .wc-login-links{grid-template-columns:1fr}
  td[width="33%"].productbx,td[width="33%"].boxborder{display:block!important;width:100%!important;margin:8px 0}
  td.productbx,td.boxborder{height:auto!important}
  .wc-nav{padding:8px}
  .wc-nav__inner{gap:4px}
  .wc-nav a{padding:7px 8px;font-size:13px}
  .wc-nav__spacer{display:none}
  .wc-nav select{width:100%;max-width:none;margin-top:4px}
  .wc-shell{width:calc(100% - 16px);margin-top:12px}
  .wc-hero{padding:22px 18px;border-radius:13px}
  .wc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .wc-card{padding:10px}
  .wc-card__media{height:125px}
  .wc-quicklinks{grid-template-columns:1fr}
  .wc-footer__inner{width:calc(100% - 24px);grid-template-columns:1fr;padding:22px 0}
  img[src*="spacer.gif"]{display:none!important}
  input[type=text],input[type=password],input[type=email],input[type=search],select,textarea{width:100%!important}
  form{max-width:100%}
}
@media (max-width:420px){
  .wc-grid{grid-template-columns:1fr}
  .wc-card__media{height:170px}
}
@media print{
  body{padding:0!important;background:#fff!important}
  body::before,.wc-header,.wc-nav-row,.wc-footer{display:none!important}
  table[width="760"],table[width="762"],table[width="1450"]{width:100%!important}
}

/* Centre tags are still present in legacy templates; modern components manage their own alignment. */
.wc-header,.wc-header *,.wc-footer,.wc-footer *,.wc-shell,.wc-shell *{text-align:left}
.wc-searchbar button,.wc-button{text-align:center}