:root { --dark:#1e1e24; --muted:#666; --border:#e5e5e5; --accent:#1a1a1a; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Helvetica Neue',Arial,sans-serif; color:var(--dark); background:#fff; }
a { color:inherit; }
.site-header { border-bottom:1px solid var(--border); padding:18px 30px 14px; }
.header-top { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px; max-width:1400px; margin:0 auto; }
.search-form { order:1; }
.logo { order:2; }
.cart-icon { order:3; }

/* Search box — collapsed down to just its icon; the input pops open as
   its own full-width row underneath (pushing <nav> down) when tapped,
   via .search-active (see card-search.js). Applied at every width. */
.search-form { display:flex; align-items:center; border:none; padding:0; background:none; }
.search-form button { background:none; border:none; padding:4px; margin:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.search-form button svg { stroke:#666; width:20px; height:20px; transition:stroke .2s; }
.search-form button:hover svg { stroke:#111; }
.search-form input[type="search"] { display:none; }

.search-form.search-active { display:contents; }
.search-form.search-active button { order:1; }
.search-form.search-active .search-drop { order:4; flex:0 0 100%; }
.search-form.search-active input[type="search"] {
  display:block;
  margin:0 auto;
  width:var(--search-width, 300px);
  max-width:calc(100% - 32px);
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:20px;
  padding:8px 14px;
  font-family:inherit;
  font-size:14px;
  color:#111;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.search-form.search-active input[type="search"]::placeholder { color:#999; }
.search-form.search-active input[type="search"]::-webkit-search-cancel-button { cursor:pointer; }

.logo img { width:120px; height:auto; }

.cart-icon { display:flex; align-items:center; cursor:pointer; }

.site-header nav { margin-top:14px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.site-header nav a { text-decoration:none; font-size:13px; letter-spacing:.5px; }
.product-page { max-width:1180px; margin:0 auto; padding:28px 30px 70px; }
.breadcrumbs { display:flex; gap:9px; flex-wrap:wrap; font-size:12px; color:#888; margin-bottom:30px; }
.breadcrumbs a { color:#666; }
.product-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,460px); gap:70px; align-items:start; }
.product-image-panel { border:1px solid var(--border); background:#fafafa; padding:20px; text-align:center; }
.product-image { display:block; width:100%; max-width:620px; height:auto; margin:0 auto; }
/* Discourage saving the preview: the image ignores the mouse/touch, so right-click and
   long-press land on the panel behind it (no "Save image as"), and it can't be dragged
   out or selected. Search engines and link previews still see a normal <img>. This is a
   deterrent only -- anyone determined can still get the file. */
.product-image { pointer-events:none; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.product-details { padding-top:10px; }
.eyebrow { text-transform:uppercase; letter-spacing:2px; font-size:11px; color:#888; margin:0 0 10px; }
h1 { font-size:36px; line-height:1.15; font-weight:400; margin:0 0 14px; }
.price { font-size:20px; font-weight:700; margin:0 0 22px; }
.description { color:#555; line-height:1.7; font-size:15px; }
.personalise-button { display:block; background:#1a1a1a; color:#fff; text-align:center; text-decoration:none; padding:16px 20px; margin:28px 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:1px; }
.personalise-button:hover { background:#444; }
.personalise-note { color:#777; font-size:12px; line-height:1.5; margin-bottom:28px; }
.details-box { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:18px 0; color:#666; font-size:13px; line-height:1.6; }
.details-box p { margin:5px 0; }
.seo-copy { max-width:820px; margin:70px auto 0; padding-top:35px; border-top:1px solid var(--border); }
.seo-copy h2 { font-size:24px; font-weight:400; }
.seo-copy p { color:#555; line-height:1.7; font-size:14px; }

/* "You might also like" — previously had no size rule at all, so the
   images rendered at their full native resolution. Constrain them to a
   proper thumbnail grid instead. */
.related { margin:60px 0 0; padding-top:35px; border-top:1px solid var(--border); }
.related h2 { font-size:22px; font-weight:400; margin:0 0 25px; }
.related-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.related-grid a { display:block; text-decoration:none; color:inherit; }
.related-grid img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:contain; background:#fafafa; border:1px solid var(--border); }
.related-grid span { display:block; margin-top:10px; font-size:13px; text-align:center; }

.site-footer { border-top:1px solid var(--border); text-align:center; padding:25px; color:#888; font-size:11px; }
@media (max-width:800px) {
  .site-header { padding-left:18px; padding-right:18px; }
  /* Logo runs a little smaller on phones specifically — the icon-collapse
     treatment above is now universal but this size tweak isn't. */
  .logo img { width:110px; }
  /* Keep all 4 nav links on one line instead of wrapping -- same
     treatment as the rest of the site's mobile.css. */
  .site-header nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { font-size: 11px; letter-spacing: 0.3px; white-space: nowrap; flex: 0 0 auto; }
  .product-page { padding:20px 18px 55px; }
  .product-layout { grid-template-columns:1fr; gap:35px; }
  h1 { font-size:29px; }
  .product-details { padding-top:0; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
}

/* Print pages: size / price table */
.size-table { width:100%; max-width:520px; border-collapse:collapse; margin:0 0 18px; font-size:14px; }
.size-table th, .size-table td { text-align:left; padding:10px 14px 10px 0; border-bottom:1px solid var(--border); }
.size-table thead th { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#888; font-weight:500; }
.size-table tbody th { font-weight:700; }