/* Adhesive Magnetic Supplies. Accent #C8102E from CustomerType row 4. */
:root{
  --accent:#C8102E; --ink:#1c1c1c; --muted:#5d6470;
  --line:#e3e6ea; --bg:#ffffff; --soft:#f6f7f9; --radius:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 var(--font);color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto}
a{color:var(--accent)}
h1{font-size:2rem;line-height:1.2;margin:0 0 .5rem}
h2{font-size:1.4rem;margin:2.2rem 0 1rem}
h3{font-size:1rem;margin:0 0 .35rem}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:640px}
.lede{color:var(--muted);margin:0 0 1.5rem}
.small{font-size:.875rem;color:var(--muted)}

/* header. Single column on mobile: any direct child of .head-top takes a full
   row, which is the trap recorded in runbook 11.2. */
.head{border-bottom:1px solid var(--line)}
.head-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
.brand{font-size:1.05rem;text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.brand strong{color:var(--accent)}
.head-right{display:flex;align-items:center;gap:14px}
.phone{font-weight:600;text-decoration:none;white-space:nowrap}
.nav{background:var(--soft);border-top:1px solid var(--line)}
.nav-inner{display:flex;gap:20px;overflow-x:auto;padding:10px 20px;font-size:.9rem}
.nav-inner a{color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-inner a:hover{color:var(--accent)}

.btn{display:inline-block;background:var(--accent);color:#fff;border:0;
  padding:11px 18px;border-radius:var(--radius);font:inherit;font-weight:600;
  text-decoration:none;cursor:pointer}
.btn-sm{padding:7px 13px;font-size:.875rem}
.btn-ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

.hero{background:var(--soft);border-bottom:1px solid var(--line);padding:56px 0}
.hero h1{max-width:18ch}
.hero p{max-width:60ch;color:var(--muted)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* Cap the track so a lone tile does not take the whole row - runbook 11.2. */
.grid{display:grid;gap:20px;margin:0 0 48px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{display:block;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;background:#fff}
.card:hover{border-color:var(--accent)}
/* contain, not cover: magnets are shown whole - runbook 11.2 */
.card-img{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;
  justify-content:center;padding:14px;border-bottom:1px solid var(--line)}
.card-img img{width:100%;height:100%;object-fit:contain}
.card-noimg{color:var(--muted);font-size:.875rem}
.card-body{padding:14px}
.card-desc{margin:0;color:var(--muted);font-size:.875rem}
.card-meta{margin:.6rem 0 0;font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.tag{background:var(--soft);border-radius:999px;padding:2px 9px}

.crumbs{font-size:.85rem;color:var(--muted);margin:24px 0 14px}
.crumbs a{color:var(--muted)}
.product{padding-bottom:48px}
.product-grid{display:grid;gap:36px;grid-template-columns:minmax(0,460px) minmax(0,1fr);align-items:start}
.product-shot{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff}
.product-shot img{width:100%;object-fit:contain}
.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 26px;font-size:.925rem}
.spec dt{color:var(--muted)}
.spec dd{margin:0}

.price-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;
  border-top:1px solid var(--line);padding-top:22px}
.price-form label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}
select,input:not([type=checkbox]):not([type=radio]):not([type=submit]){
  font:inherit;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);min-width:180px}
.price-out{margin-top:16px;font-size:1.15rem;font-weight:600}
.signed-out{margin-top:14px;font-size:.9rem;color:var(--muted)}

.login{display:grid;gap:6px;max-width:380px;margin-bottom:20px}
.login label{font-size:.85rem;color:var(--muted);margin-top:10px}
.login .btn{margin-top:18px;justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{margin:14px 0 0;font-size:.9rem;color:var(--accent)}
.plain{list-style:none;padding:0;margin:0 0 24px}
.plain li{padding:7px 0;border-bottom:1px solid var(--line)}

.foot{background:var(--soft);border-top:1px solid var(--line);margin-top:56px;
  padding:36px 0 26px;font-size:.9rem;color:var(--muted)}
.foot-inner{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 18px;align-content:start;max-width:520px}
.foot-nav a{color:var(--muted);text-decoration:none}
.foot-legal{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem}

@media (max-width:900px){
  .product-grid{grid-template-columns:1fr}
  .hero{padding:40px 0}
  h1{font-size:1.6rem}
}
@media (max-width:560px){
  .head-top{flex-wrap:wrap}
  .price-form{flex-direction:column;align-items:stretch}
  .price-form .btn{width:100%}
  select,input{width:100%}
}

/* ---- logo, search ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.brand{display:flex;align-items:center;flex:0 0 auto}
/* the wordmark is 664x88 - a 7.5:1 ratio. max-width must clear height*7.55
   or object-fit:contain letterboxes it and the logo renders short. */
.brand-logo{display:block;height:40px;width:auto;max-width:320px;object-fit:contain}
.brand-text{font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.brand-text strong{color:var(--accent)}

.head-search{position:relative;display:flex;align-items:center;
  flex:1 1 240px;max-width:440px;margin:0}
/* min-width:0 beats the global 180px floor on inputs, which would otherwise
   force the header to overflow before .head-top gets a chance to wrap. */
.head-search input{width:100%;min-width:0;padding:9px 40px 9px 13px;font-size:.925rem}
.head-search input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.search-go{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px}
.search-go:hover{color:var(--accent)}

.search-ac{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.10);max-height:360px;overflow-y:auto}
.search-ac a{display:flex;align-items:center;gap:10px;padding:8px 12px;
  text-decoration:none;color:var(--ink);font-size:.9rem;border-bottom:1px solid var(--line)}
.search-ac a:last-child{border-bottom:0}
.search-ac a:hover,.search-ac a.on{background:var(--soft)}
.search-ac img{width:40px;height:30px;object-fit:contain;flex:0 0 40px}
.ac-t{flex:1 1 auto;min-width:0}
.ac-g{flex:0 0 auto;color:var(--muted);font-size:.78rem;white-space:nowrap}
.ac-none{margin:0;padding:14px 12px;color:var(--muted);font-size:.9rem}

.search-page{margin:0 0 26px;max-width:520px}
.search-page input{width:100%;min-width:0;padding:12px 14px;font-size:1rem}

@media (max-width:820px){
  .head-top{flex-wrap:wrap}
  .head-search{order:3;flex:1 0 100%;max-width:none;margin-top:4px}
  .brand-logo{height:34px;max-width:270px}
}
@media (max-width:560px){
  .phone{display:none}
  .head-search input{width:100%}
}

.nav-home{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.nav-home svg{flex:0 0 auto;margin-top:-1px}

/* ---- signed-in state ---- */
/* Set on <html> in the head, so the correct header paints on the first frame. */
.signed-in-only{display:none}
html.signed-in .signed-in-only{display:block}
html.signed-in .signed-out-only{display:none}
html.signed-in .head-right .signed-in-only{display:block}

.account{position:relative}
.account-btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
  font:inherit;font-size:.875rem;cursor:pointer;max-width:230px}
.account-btn:hover{border-color:var(--accent)}
.account-initials{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.02em}
.account-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.account-menu{position:absolute;z-index:70;top:calc(100% + 8px);right:0;min-width:220px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.12);padding:6px;text-align:left}
.account-menu::before{content:"";position:absolute;top:-6px;right:18px;width:10px;height:10px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg)}
.account-who{margin:0;padding:10px 12px 12px;border-bottom:1px solid var(--line)}
.account-who strong{display:block;font-size:.925rem}
.account-who .small{display:block;margin-top:2px}
.account-menu a,.account-menu button{display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 12px;margin-top:2px;border:0;border-radius:8px;background:transparent;
  color:var(--ink);font:inherit;font-size:.9rem;text-align:left;text-decoration:none;cursor:pointer}
.account-menu a:hover,.account-menu button:hover{background:var(--soft)}
.account-menu button{color:var(--accent)}
.cart-count{margin-left:auto;background:var(--accent);color:#fff;border-radius:999px;
  padding:1px 8px;font-size:.75rem;font-weight:700}
/* Zero is information, not an alert, so it loses the accent fill. */
.cart-count.is-zero{background:var(--line,#e5e7eb);color:var(--muted)}

/* ---- category tiles ---- */
/* Silhouettes, not the Shopify spec diagrams: those carry a size and a knife
   number burnt into the image, which on a category tile is simply wrong. */
.card-shape{background:var(--soft)}
.card-shape .shape{width:100%;height:100%;max-height:118px;fill:var(--accent);color:var(--accent)}
.card-shape .shape .soft{fill:var(--accent);opacity:.28}
.card-shape .shape .hole{fill:var(--soft)}
.card-shape .shape .rule line{stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.card:hover .card-shape{background:#fdeff1}

/* ---- order basket ---- */
.order-table{width:100%;border-collapse:collapse;margin:0 0 34px;font-size:.95rem}
.order-table th,.order-table td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.order-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.order-table .num{text-align:right;white-space:nowrap}
.order-table tfoot th{text-align:right;font-weight:400;color:var(--muted);border-bottom:0;padding-top:8px;padding-bottom:4px}
.order-table tfoot td{border-bottom:0;padding-top:8px;padding-bottom:4px}
.order-table tfoot .grand th,.order-table tfoot .grand td{font-weight:700;color:var(--ink);font-size:1.05rem;padding-top:12px;border-top:2px solid var(--ink)}
/* Delivery sits with the products; "Includes GST" is a footnote under the
   total rather than a line of its own, so the eye lands on what they pay. */
.order-table tfoot .freight th{color:var(--ink)}
.order-table tfoot .gst th,.order-table tfoot .gst td{font-size:.85rem;color:var(--muted);padding-top:2px}
.link-btn{border:0;background:0;padding:0;font:inherit;font-size:.85rem;color:var(--accent);cursor:pointer;text-decoration:underline}

.order-cols{display:grid;gap:36px;grid-template-columns:1fr 1fr;align-items:start;margin-bottom:28px}
.order-cols h2{margin-top:0}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.3px;margin-bottom:5px}
.field input,.field select{width:100%;min-width:0}
.field-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.order-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

#add-btn.added{background:#0b8a3d;color:#fff;box-shadow:none}

@media (max-width:760px){
  .order-cols{grid-template-columns:1fr;gap:8px}
  .field-row{grid-template-columns:1fr}
  .order-table thead{display:none}
  .order-table tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
  .order-table td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0;text-align:right}
  .order-table td:first-child{text-align:left}
  .order-table tfoot tr{display:flex;justify-content:space-between;padding:2px 0;border:0}
  .order-table tfoot th{padding:2px 0}
  .order-actions .btn{width:100%}
}


/* ---- order form fields ---- */
/* One height and one border for every control in the form. Native selects are
   taller than inputs by default, which is what made the delivery block look
   ragged next to the State dropdown. */
.field input,
.field select{
  width:100%;min-width:0;height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--ink);font:inherit;line-height:44px}
.field select{
  -webkit-appearance:none;appearance:none;padding-right:36px;line-height:normal;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235d6470' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:var(--accent)}
.field input::placeholder{color:#9aa1ab}
/* Two-field rows must not inherit the three-column track, which left the
   contact pair sitting in half the width with an empty column beside it. */
.field-row.two{grid-template-columns:1fr 1fr}

/* ---- basket link in the header ---- */
/* A pill, matching the account button beside it. The earlier version was a
   round button with the count floating on its corner, which read as
   off-centre however the glyph was drawn - the badge, not the icon, was
   what made it look skewed. */
.cart-link{display:none;align-items:center;gap:7px;height:38px;padding:0 13px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);
  text-decoration:none;flex:0 0 auto;font-size:.875rem}
.cart-link:hover{border-color:var(--accent);color:var(--accent)}
.cart-link svg{display:block;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* Specificity matters here: html.signed-in .head-right .signed-in-only sets
   display:block at (0,3,0), which silently beat a (0,2,0) inline-flex and left
   the link stacking its icon above its count. It only became visible when the
   count stopped being hidden at zero. Match the selector depth. */
html.signed-in .head-right .cart-link{display:inline-flex}
.cart-link .cart-count{position:static;margin:0;min-width:20px;padding:1px 7px;
  font-size:.72rem;line-height:16px;text-align:center}
@media (max-width:560px){
  .cart-link{height:34px;padding:0 10px;gap:5px}
}

/* ---- footer in columns ---- */
.foot-cols{display:grid;gap:0;grid-template-columns:1.3fr 1.6fr 1fr;align-items:stretch}
.foot-cols > * + *{border-left:1px solid var(--line)}
.foot-col{padding:4px 32px}
.foot-col:first-child{padding-left:0}
.foot-col:last-child{padding-right:0}
.foot-col h3{margin:0 0 10px;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.5px;color:var(--ink);font-weight:700}
.foot-col strong{display:block;color:var(--ink);margin-bottom:8px}
.foot-col p{margin:0 0 10px}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list.two{columns:2;column-gap:24px}
.foot-list li{margin:0 0 7px;break-inside:avoid}
.foot-list a,.foot-col a{color:var(--muted);text-decoration:none}
.foot-list a:hover,.foot-col a:hover{color:var(--accent)}
html.signed-in .foot-list li.signed-in-only{display:list-item}
.foot-list li.signed-in-only{display:none}

.artwork-note{margin:0;padding:12px 14px;background:var(--soft);
  border-radius:var(--radius);line-height:1.5}

@media (max-width:760px){
  .foot-cols{grid-template-columns:1fr}
  /* Stacked, the rule has to run across rather than down. */
  .foot-cols > * + *{border-left:0;border-top:1px solid var(--line)}
  .foot-col{padding:20px 0 0}
  .foot-col:first-child{padding-top:0}
  .foot-list.two{columns:2}
}

.account-meta{margin:0 0 24px;color:var(--muted);font-size:.9rem}
.account-meta strong{color:var(--ink)}
.account-meta .tag{margin-left:8px}
#account-form h2:first-child{margin-top:0}

.field input[type=file]{height:auto;padding:9px 12px;line-height:1.4;cursor:pointer}
.field input[type=file]::file-selector-button{margin:0 12px 0 0;padding:6px 14px;
  font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);background:var(--soft);
  border:1px solid var(--line);border-radius:8px;cursor:pointer}
.field input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent)}

/* ---- light bulb tile ---- */
.card-shape .shape .glint{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;opacity:.7}
.card-shape .shape .rays line{stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;opacity:.32}

/* ---- phone menu ---- */
/* Hidden on desktop, where the categories are a single row. */
.nav-toggle{display:none}

@media (max-width:760px){
  .nav{position:relative}
  .nav-toggle{display:flex;align-items:center;gap:10px;width:100%;
    padding:12px 20px;border:0;background:transparent;color:var(--ink);
    font:inherit;font-size:.95rem;font-weight:600;text-align:left;cursor:pointer}
  /* Rotate a wrapper, never the <svg>: Chrome resolves transform-box on an
     outer svg against its view box, so rotating the svg itself pivots it
     off-centre and clips the chevron. */
  .nav-toggle .nav-caret{display:inline-flex;margin-left:auto;transition:transform .15s}
  .nav-toggle .nav-caret svg{display:block}
  .nav.open .nav-toggle .nav-caret{transform:rotate(180deg)}

  /* The horizontal scroll strip becomes a dropdown list. */
  .nav-inner{display:none;flex-direction:column;gap:0;overflow:visible;
    padding:0 0 8px;border-top:1px solid var(--line)}
  .nav.open .nav-inner{display:flex}
  .nav-inner a{padding:12px 20px;border-bottom:1px solid var(--line);font-size:.95rem}
  .nav-inner a:last-child{border-bottom:0}
  .nav-inner a:active{background:#fff}

  /* Homepage categories two-up. The tiles are silhouettes with a short
     label, so they read fine at half width - a column of eight full-width
     tiles was a lot of scrolling to reach the last one. */
  .grid.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cat-grid .card-img{padding:10px}
  .cat-grid .card-body{padding:10px 12px 12px}
  .cat-grid h3{font-size:.92rem;margin:0 0 3px}
  .cat-grid .card-desc{display:none}
  .cat-grid .card-meta{margin-top:2px;font-size:.75rem}
}

/* Set-password page: the show-password toggle sits inline with its label,
   unlike the stacked field labels above it. */
.inline-check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:.9rem;margin:-4px 0 4px}
.inline-check input{width:auto;margin:0}

/* Application form.
   .login lays its own children out as a grid, so anything nested inside it -
   the delivery address group, or a column of a .field-row - has to declare the
   same grid, or its labels and inputs run inline against each other. */
.login .group, .login .field-row > div{display:grid;gap:6px;align-content:start}
.login label{display:block}
.apply{max-width:560px}
.apply .form-head{font-size:.95rem;font-weight:700;margin:22px 0 2px;padding-bottom:6px;
  border-bottom:1px solid var(--line, #e3e6ea)}
.apply .form-head:first-child{margin-top:0}

/* Artwork upload on the order confirmation: one row per file, ticked as each
   upload lands. The file input itself is visually hidden behind its label, so
   the control reads as a button rather than a browser default. */
.file-list{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.file-row{display:flex;align-items:center;gap:10px;font-size:.9rem;
  background:#f7f9fb;border:1px solid #e3e6ea;border-radius:6px;padding:7px 12px}
.file-row .file-state{flex:0 0 auto;width:1.1em;text-align:center;color:var(--muted)}
.file-row.ok .file-state{color:#2e7d32;font-weight:700}
.file-row.bad .file-state{color:var(--accent);font-weight:700}
.file-row .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.is-busy{opacity:.6;pointer-events:none}