/* Public catalogue. No inline CSS is allowed by the CSP, so a tenant's colours live in the generated /media/{tenant}/theme-{version}.css, which overrides the custom properties below (phase 6). */
:root{--bg:#fff;--ink:#1c2633;--brand:#0b5fff;--accent:#c2410c;--hdr-bg:#fff;--hdr-fg:#1c2633;--ftr-bg:#f7f8fa;--ftr-fg:#475467;--muted:#667085;--line:#e4e7ec;--panel:#f7f8fa;--ok:#137a3f;--err:#b42318;--warn-bg:#fff4dc;--warn:#9a6200;--radius:10px}
/* neutral shades follow the page colours of the theme (browsers without color-mix keep the light defaults above) */
@supports (color:color-mix(in srgb,red,blue)){:root{--muted:color-mix(in srgb,var(--ink) 68%,var(--bg));--line:color-mix(in srgb,var(--ink) 16%,var(--bg));--panel:color-mix(in srgb,var(--ink) 5%,var(--bg))}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1{font-size:1.7rem;line-height:1.25;margin:.2em 0 .6em}h2{font-size:1.2rem;margin:1.6em 0 .6em}
.muted{color:var(--muted)}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.badge{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.75rem;font-weight:600;background:var(--warn-bg);color:var(--warn);vertical-align:middle}
/* preview bar (signed-in staff) */
.preview-bar{background:#0f1b2d;color:#fff;padding:8px 16px;font-size:.9rem;text-align:center}
.preview-bar a{color:#9fc2ff;margin-left:12px}.preview-bar .preview-warn{color:#ffd37a;margin-left:8px}
/* header and nav */
.site-header{border-bottom:1px solid var(--line);background:var(--hdr-bg);color:var(--hdr-fg)}
.site-header a{color:var(--hdr-fg)}
.header-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-top:14px;padding-bottom:14px}
.brand-box{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px}
.brand{display:inline-flex;align-items:center;gap:10px}.brand:hover{text-decoration:none}
.logo{max-height:48px;max-width:200px;width:auto;object-fit:contain}
.site-name{font-size:1.25rem;font-weight:700}
.tagline{font-size:.9rem}
.site-nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.header-extra{padding-bottom:12px}
/* accessibility: skip link and visible keyboard focus */
.skip-link{position:absolute;left:8px;top:-80px;z-index:20;background:var(--bg);color:var(--ink);padding:8px 14px;border:2px solid var(--accent);border-radius:6px}.skip-link:focus{top:8px}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.site-footer a:focus-visible{outline-color:currentColor}
/* content area and side navigation: one column on phones (the menu is a <details> above the content), a grid from 900px.
   <body class="nav-left|nav-right|nav-none"> says where the menu goes. */
.main{padding-top:18px;padding-bottom:40px;min-height:60vh;min-width:0}
.side-nav{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--radius)}
.side-nav>summary{cursor:pointer;padding:10px 14px;font-weight:700}
.side-nav .cat-tree{padding:0 14px 12px}
.cat-tree ul{list-style:none;margin:0;padding:0}
.cat-tree ul ul{margin-left:6px;padding-left:12px;border-left:1px solid var(--line)}
.cat-tree li{margin:1px 0}
.cat-tree a{display:inline-block;padding:3px 0;color:var(--ink);overflow-wrap:anywhere}
.cat-tree .is-branch>a{font-weight:600}
.cat-tree a[aria-current]{font-weight:700;color:var(--brand);border-left:3px solid var(--accent);padding-left:7px;margin-left:-10px}
.cat-tree .count{color:var(--muted);font-size:.85em}
@media (min-width:900px){
  .nav-left .layout,.nav-right .layout{display:grid;gap:0 32px;align-items:start}
  .nav-left .layout{grid-template-columns:240px minmax(0,1fr)}
  .nav-right .layout{grid-template-columns:minmax(0,1fr) 240px}
  .nav-right .layout>.side-nav{grid-column:2;grid-row:1}
  .nav-right .layout>.main{grid-column:1;grid-row:1}
  .side-nav{margin-top:18px}
}
/* from 900px the menu is always open and its toggle is hidden (needs ::details-content; older browsers keep the toggle) */
@supports selector(::details-content){
  @media (min-width:900px){
    .side-nav{border:0}
    .side-nav::details-content{content-visibility:visible;display:block}
    .side-nav>summary{display:none}
    .side-nav .cat-tree{padding:0}
  }
}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:6px}.crumbs .sep{margin:0 6px}
.prose{max-width:75ch;overflow-wrap:anywhere}.prose img{display:block;max-width:100%;height:auto}.prose table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto}
.prose td,.prose th{border:1px solid var(--line);padding:4px 8px}
/* category tiles */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.tile{position:relative;text-align:center}
.tile a{display:block;color:var(--ink)}
/* category cards: a 4:3 box (the default category thumbnail is 400x300); .crop fills the box, .fit shows the whole picture */
.tile .pic{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--panel);border-radius:var(--radius);overflow:hidden}
.tile .pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.tile .pic.crop img{width:100%;height:100%;object-fit:cover}
.tile .label{display:block;margin-top:6px;font-weight:600}
.pic.empty,.main-pic.empty{background:var(--panel)}
/* item grid */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:var(--bg)}
.card .card-link{display:block;color:var(--ink)}
/* item cards: a 3:4 box (the default item thumbnail is 600x800); .fit shows the whole picture, .crop fills the box */
.card .pic{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;background:var(--panel);border-radius:8px;overflow:hidden}
.card .pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.card .pic.crop img{width:100%;height:100%;object-fit:cover}
.card .title{display:block;margin-top:8px;font-weight:600;overflow-wrap:anywhere}
.price{margin:.3em 0}.price.big{font-size:1.4rem}.was{color:var(--muted);font-weight:400;margin-left:6px}
.note{color:var(--muted);font-size:.9rem;margin:.2em 0}
.stock{margin:.2em 0;font-size:.9rem;font-weight:600}.stock.in{color:var(--ok)}.stock.out{color:var(--err)}
/* pager */
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0}
/* item page */
.product{display:grid;grid-template-columns:1fr;gap:20px}
/* The main picture follows its own aspect ratio (no fixed box, so no empty band): width and height auto inside max-width 100% and max-height 80vh scale together. */
.product>*{min-width:0}
.main-pic{display:block;text-align:center;background:var(--panel);border-radius:var(--radius);overflow:hidden}
.main-pic.empty{min-height:200px}
.main-pic img{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:80vh;object-fit:contain}
.thumbs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.thumbs li{width:84px}.thumbs a{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.thumbs img{width:100%;height:auto}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:14px 0}.facts dt{color:var(--muted)}.facts dd{margin:0}
.detail{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px}
.notfound{text-align:center;padding-top:80px}
/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--ftr-bg);color:var(--ftr-fg);font-size:.9rem}
.site-footer a{color:var(--ftr-fg);text-decoration:underline}
.footer-main{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px 28px;padding-top:24px;padding-bottom:8px}
.footer-title{font-size:.95rem;margin:0 0 .5em;color:inherit}
.footer-col ul{list-style:none;margin:0;padding:0}.footer-col li{margin:3px 0}
.footer-col address{font-style:normal}.footer-col p{margin:.3em 0}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:16px;padding-bottom:16px}
.site-footer .powered{font-size:.8rem}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}.product{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}h1{font-size:2rem}}
/* phase 5: variants and price breaks (the variants table works without JavaScript; assets/variants.js adds the selectors) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.from{font-size:.8em;color:var(--muted);font-weight:400}
.table-scroll{overflow-x:auto}
.variant-table,.tier-table{width:100%;border-collapse:collapse;font-size:.95rem}
.variant-table th,.variant-table td,.tier-table th,.tier-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.variant-table th,.tier-table th{font-size:.8rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.variant-table .v-pic{width:56px}.variant-table .v-pic img{width:48px;height:48px;object-fit:cover;border-radius:6px}
.variant-table tr.is-selected{background:var(--panel)}
.variant-table td.stock{margin:0}
.variant-picker{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:6px 0 12px}
.variant-field{display:flex;flex-direction:column;font-weight:600;font-size:.9rem;gap:4px}
.variant-field select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;min-width:130px}
.variant-result{margin:0;font-weight:600}
.variants h2,.tiers h2{font-size:1.05rem;margin:1.2em 0 .5em}
/* phase 6: social icons (monochrome inline SVG drawn with currentColor: they take the text colour of the header or footer), WhatsApp, contact form */
.social-icons{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.social-icons svg{display:block;width:22px;height:22px}
.social-icons a{display:block;color:inherit}
.social-icons .soc-plain{display:block;color:inherit}
.in-header{margin-left:auto}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#0f7a3f;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.wa-float:hover{background:#0b6232;text-decoration:none}
.wa-float svg{width:30px;height:30px}
.has-wa .site-footer{padding-bottom:72px}
.enquire{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn-wa,.btn-contact,.btn-send{display:inline-block;padding:9px 16px;border-radius:8px;font:inherit;font-weight:600;border:2px solid transparent;cursor:pointer}
.btn-wa{background:#0f7a3f;color:#fff}.btn-wa:hover{background:#0b6232;text-decoration:none}
.btn-contact{border-color:var(--brand);color:var(--brand)}.btn-contact:hover{text-decoration:none;background:var(--panel)}
.btn-send{background:var(--brand);color:var(--bg)}
.contact-form{max-width:560px}
.contact-form label{display:block;font-weight:600;margin-bottom:4px}
.contact-form input,.contact-form textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:6px;padding:8px 10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice-ok,.notice-err{padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel)}
.notice-err ul{margin:0;padding-left:18px}
.footer-bottom .contact-link{font-weight:600}
@media print{.wa-float{display:none}}