/* The "classic" theme: the look of the old allinonepc.nl (TemplateMonster-style theme,
   2010s), rebuilt responsive. Loaded after the shared site.css and overrides it. Colours are
   taken from the old global.css and images: header #2b2b2b, page #ececec, grey blocks
   #b0b0b0, text #5f6162. The accent comes from the site's accent colour (set inline by the
   layout; allinonepc.nl has the old orange #ca4300). A site's extra.css can adjust:
     --accent-ink   text on the accent colour (buttons, banners); white by default
     --accent-text  the accent as text on white or grey (prices, hovers)
   The old theme was 927px fixed and 12px Arial; this keeps the width as a maximum and uses
   14px so it reads on today's screens. */

:root {
  --primary: #2b2b2b;
  --accent-ink: #fff;
  --accent-text: var(--accent);
  --bg: #ececec;
  --text: #5f6162;
  --muted: #7a7c7d;
  --line: #d6d6d6;
  --radius: 0;
  --font: Arial, Helvetica, sans-serif;
  --classic-dark: #2b2b2b;
  --classic-heading: #3a3a3a;
  --classic-block: #b0b0b0;
}

body.classic { background: #3e3e3e; font: 14px/1.5 var(--font); color: var(--text); }
.classic a { color: var(--primary); }
.classic a:hover { color: var(--accent-text); }

.classic-wrap { width: 100%; max-width: 959px; margin: 0 auto; padding: 0 16px; }

/* Header: dark, logo left, menu right ----------------------------------------- */

.classic-header { background: var(--classic-dark); }
.classic-header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; min-height: 115px; padding-top: 1rem; padding-bottom: 1rem;
}
.classic-logo img { display: block; max-width: 100%; height: auto; }
/* Text logo (a site without a logo image), in the style of the old one. */
.classic .classic-logo-text { color: #fff; font-size: 40px; line-height: 55px; text-decoration: none; letter-spacing: 0.01em; }
.classic .classic-logo-text:hover { color: #fff; }
.classic-logo-tick { color: var(--accent); font-weight: bold; margin-right: 0.05em; position: relative; top: -0.3em; font-size: 0.7em; }
.classic-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.classic .classic-nav a {
  display: block; padding: 0.35rem 0.7rem; color: #e5e5e5; font-weight: bold; font-size: 13px;
  text-transform: uppercase; text-decoration: none;
}
.classic .classic-nav a:hover { background: var(--accent); color: var(--accent-ink); }

/* The grey welcome bar: the lower part of the old bg_top.gif gradient. */
.classic-welcome {
  background: #e7e7e7 url(bg_top.gif) 0 -115px repeat-x; height: 40px; line-height: 40px;
  color: var(--classic-dark); font-size: 13px; text-transform: uppercase;
}

/* Main area. allinonepc.nl adds its old background drawing of laptops in its extra.css. */
.classic-main { background: var(--bg); padding: 20px 0 30px; }

/* Three side by side as on the old site; stacked on a phone, where a third of the width
   would make the text in the images unreadable. */
.classic-banners { display: grid; grid-template-columns: 1fr; gap: 3px; margin-bottom: 20px; }
@media (min-width: 640px) { .classic-banners { grid-template-columns: repeat(3, 1fr); } }
.classic-banners a { display: block; background: var(--accent); }
.classic-banners img { display: block; width: 100%; height: auto; }
.classic-banners a:hover img { opacity: 0.9; }
/* Banners made in HTML (a site without banner images): the old banners' size and gradient. */
.classic .classic-banners a.classic-banner {
  display: flex; align-items: center; justify-content: center; min-height: 98px; padding: 0.5rem 1rem;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 72%, black));
  color: var(--accent-ink); font-size: 26px; line-height: 1.15; text-align: center; text-decoration: none;
}
.classic .classic-banners a.classic-banner:hover { filter: brightness(1.08); }

/* On a phone one column, the grey blocks under the content (they come after it in the
   HTML); on wider screens the old two columns: blocks (216px) left, content right. */
.classic-columns { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) {
  .classic-columns { grid-template-columns: 216px minmax(0, 1fr); grid-template-areas: "left center"; }
  .classic-left { grid-area: left; }
  .classic-center { grid-area: center; }
}
.classic-center:focus { outline: none; }

.classic-block { margin-bottom: 20px; }
.classic-block h2 {
  margin: 0; padding: 12px 24px; background: var(--classic-block); color: var(--classic-heading);
  font-size: 13px; font-weight: normal; text-transform: uppercase;
}
.classic-block ul { margin: 0; padding: 16px 24px 20px; list-style: none; background: rgba(255, 255, 255, 0.45); }
.classic-block li { padding: 4px 0; }
.classic .classic-block a { color: var(--classic-heading); font-size: 13px; text-transform: uppercase; text-decoration: none; }
.classic .classic-block a:hover { color: var(--accent-text); }

/* Headings and text in the old style: uppercase, dark grey, compact. */
.classic h1, .classic h2, .classic h3 { color: var(--classic-heading); text-transform: uppercase; }
.classic h1 { font-size: 1.25rem; margin: 0.4em 0 0.6em; }
.classic .classic-center h2 { font-size: 1rem; margin: 1.4em 0 0.5em; }
.classic .prose h2 { font-size: 0.95rem; margin: 1.2em 0 0.3em; }
.classic .prose p { margin: 0 0 0.8em; }
.classic .lead { color: var(--text); }
.classic .breadcrumbs ol { margin-top: 0; }

/* Product and article tiles: white, square, price in the accent, a "Meer.." button. */
.classic .card { border: 0; border-radius: 0; background: #fff; }
.classic .card-body h3 { font-size: 13px; font-weight: normal; color: var(--classic-heading); }
.classic .card a:hover h3 { color: var(--accent-text); }
.classic .label { color: var(--muted); }
.classic .product-card .card-body { position: relative; padding-bottom: 3rem; }
.classic .product-card .price { color: var(--accent-text); font-size: 18px; margin-top: 0.5rem; }
.classic .product-card .price strong { font-weight: normal; }
.classic .product-card .card-body::after {
  content: "Meer.."; position: absolute; right: 1rem; bottom: 0.9rem;
  padding: 0.3rem 1rem; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: bold;
}
.classic .card-placeholder { background: #f4f4f4; opacity: 1; }

/* Buttons in the accent colour, a shade darker on hover. */
.classic .button, .classic a.button { border-radius: 0; background: var(--accent); color: var(--accent-ink); font-size: 12px; text-transform: uppercase; }
.classic .button:hover, .classic a.button:hover { background: color-mix(in srgb, var(--accent) 83%, black); color: var(--accent-ink); filter: none; }

.classic .filters, .classic .offers, .classic .specs dl, .classic .product-box, .classic .product-image { border-radius: 0; }
.classic .offers h2, .classic .specs h2 { font-size: 1rem; }

/* Footer: dark band. */
.classic-footer { background: #333; color: #9a9a9a; padding: 1.25rem 0 1.5rem; font-size: 13px; }
.classic-footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; text-transform: uppercase; }
.classic .classic-footer a { color: #cfcfcf; text-decoration: none; }
.classic .classic-footer a:hover { color: #fff; }
.classic-footer .disclosure { margin: 0; font-size: 12px; }

.classic .skip-link { color: var(--text); }