/* Perfect Papers 2026 design system. Loaded last so it wins over legacy theme CSS.
   Contrast (WCAG): white/berry 6.04, white/teal 4.79, teal/white 4.79, ink/mist 13.95, deep/chip 7.01.
   No shade substitutions were needed; if one fails later use deep #005956 or berry dark #8E2353. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* TEMPORARY legacy aliases: the Google Fonts links for Oswald/PT Sans were removed, so legacy rules
   (mj-layout.css, template.css, mj-template.css) resolve to the self-hosted fonts instead.
   Remove when no legacy rule references them. */
@font-face { font-family: "Oswald"; src: url("../fonts/lexend-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("../fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --pp-ink: #0F2A2E;
  --pp-teal: #00807D;
  --pp-deep: #005956;
  --pp-berry: #B0306A;
  --pp-berry-dk: #7A1E48;
  --pp-mist: #F2F7F6;
  --pp-chip-bg: #DFF1EF;
  --pp-chip-fg: #005956;
  --pp-surface: #FFFFFF;
  --pp-field: #6F9895;  /* form field borders: 3.18:1 on white (WCAG 1.4.11 needs 3:1; #7FA3A0 is only 2.75) */
  --pp-lv-n5: linear-gradient(150deg, #3A9C78, #1C5E47);
  --pp-lv-h: linear-gradient(150deg, #0E9A96, #005956);
  --pp-lv-ah: linear-gradient(150deg, #2B6496, #14334F);
  --pp-lv-bundle: linear-gradient(150deg, #C9417F, #7A1E48);
  --pp-font-head: "Lexend", system-ui, sans-serif;
  --pp-font-body: "Inter", system-ui, sans-serif;
  --pp-shadow: 0 12px 28px rgba(15,42,46,.14), 0 2px 6px rgba(15,42,46,.06);
  --pp-shadow-hover: 0 20px 40px rgba(15,42,46,.20), 0 3px 8px rgba(15,42,46,.08);
}

body { font-family: var(--pp-font-body); color: var(--pp-ink); }
h1, h2, h3, h4, h5, h6 { font-family: var(--pp-font-head); color: var(--pp-ink); }
/* Links, every page. mj-blue.css (loaded by top_bar.php) colours a, a:visited and titles #3692CA, only 3.4:1 on white;
   deep teal is 7.6:1. It sits before every component rule so components (header strip, footer, cards...) win. */
a, a:visited, span.title, .product_name a, .subproduct_name a, #mj-left li a, #mj-right li a, #mj-left .infoBoxContents a, #mj-right .infoBoxContents a { color: var(--pp-deep); }

.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 14px/1.2 var(--pp-font-body); padding: 10px 16px; border: 2px solid var(--pp-teal); border-radius: 11px; background: var(--pp-teal); color: #fff; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.pp-btn:hover { transform: translateY(-2px); box-shadow: var(--pp-shadow); color: #fff; }
.pp-btn--berry { background: var(--pp-berry); border-color: var(--pp-berry); }
.pp-btn--outline { background: #fff; color: var(--pp-deep); border-color: var(--pp-teal); }
.pp-btn--outline:hover { color: var(--pp-deep); }

.pp-chip { display: inline-block; font: 700 11px/1.4 var(--pp-font-body); padding: 3px 9px; border-radius: 999px; background: var(--pp-chip-bg); color: var(--pp-chip-fg); white-space: nowrap; }

.pp-card { background: #fff; border-radius: 20px; padding: 10px; box-shadow: var(--pp-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.pp-card:hover { transform: translateY(-4px); box-shadow: var(--pp-shadow-hover); }
.pp-panel { position: relative; border-radius: 15px; overflow: hidden; background: var(--pp-lv-h); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--pp-teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .pp-card:hover, .pp-btn:hover { transform: none; }
}

/* ---- Header, footer, shell (Task 3) ---- */
.pp-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--pp-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 11px 0; }
.pp-skip:focus { left: 0; }
.pp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.pp-header, .pp-footer { font-family: var(--pp-font-body); }
.pp-header ul, .pp-footer ul { list-style: none; margin: 0; padding: 0; }
.pp-header { background: var(--pp-surface); border-bottom: 1px solid #E4EFED; position: relative; z-index: 50; }
.pp-header a { text-decoration: none; }

.pp-strip { background: var(--pp-ink); color: #D3E6E4; font-size: 12.5px; }
.pp-strip .pp-wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; }
.pp-strip a { color: #fff; font-weight: 600; }
.pp-strip a:hover { text-decoration: underline; }
.pp-strip__links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pp-strip__mail { display: none; }
.pp-strip select { font: 600 12px var(--pp-font-body); background: transparent; color: #fff; border: 1px solid #4A6A6E; border-radius: 8px; padding: 2px 4px; margin: 0; width: auto; height: auto; }
.pp-strip select option { color: var(--pp-ink); }
.pp-strip form { margin: 0; }

.pp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; padding-top: 12px; padding-bottom: 12px; }
.pp-logo { flex: 1 1 0;  display: flex; align-items: center; min-width: 0; }
.pp-logo img { display: block; height: 28px; width: auto; max-width: 100%; }
.pp-search { order: 10; flex: 1 1 100%; display: flex; margin: 0; background: var(--pp-mist); border-radius: 12px; border: 1.5px solid #D3E3E1; }
.pp-search input[type=text] { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 14px var(--pp-font-body); padding: 10px 12px; margin: 0; height: auto; box-shadow: none; color: var(--pp-ink); }
.pp-search button { border: 0; background: var(--pp-teal); color: #fff; font: 700 13px var(--pp-font-body); padding: 0 16px; border-radius: 0 10px 10px 0; cursor: pointer; }
.pp-dl { padding: 7px 11px; font-size: 13px; white-space: nowrap; }
.pp-dl__long { display: none; }
.pp-basket { display: inline-flex; align-items: center; gap: 6px; background: var(--pp-deep); color: #fff; border-radius: 11px; padding: 9px 10px; font: 700 13px/1.2 var(--pp-font-body); white-space: nowrap; }
.pp-basket:hover { background: var(--pp-ink); color: #fff; }
.pp-basket__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-count { background: #fff; color: var(--pp-deep); border-radius: 999px; min-width: 20px; padding: 1px 6px; text-align: center; font-size: 12px; }
.pp-toggle { border: 2px solid var(--pp-ink); background: #fff; color: var(--pp-ink); font: 700 13px var(--pp-font-body); border-radius: 11px; padding: 6px 8px; cursor: pointer; display: inline-flex; }

/* nav: category tree from cat_navbar.php, scoped under #pp-nav to beat legacy bootstrap .nav rules */
#pp-nav { background: var(--pp-mist); border-top: 1px solid #E4EFED; }
#pp-nav ul, #pp-nav ul.nav { list-style: none; margin: 0; padding: 0; float: none; display: block; background: none; border: 0; box-shadow: none; }
#pp-nav li { float: none; margin: 0; padding: 0; background: none; border: 0; position: relative; }
#pp-nav a { display: block; padding: 11px 12px; color: var(--pp-ink); font: 600 14px/1.3 var(--pp-font-body); background: none; border: 0; text-shadow: none; }
#pp-nav a:hover, #pp-nav a:focus { color: var(--pp-deep); background: var(--pp-chip-bg); }
.pp-js .pp-nav { display: none; }
.pp-js .pp-nav.is-open { display: block; }
#pp-nav ul ul a { padding-left: 28px; font-weight: 500; }
#pp-nav ul ul ul a { padding-left: 44px; }
#pp-nav ul ul ul ul a { padding-left: 60px; }
#pp-nav .pp-wrap { display: flex; flex-direction: column; }
#pp-nav .pp-nav__pages { order: -1; border-bottom: 1px solid #D3E3E1; margin-bottom: 4px; }

/* phone menu: sub-categories collapsed behind a .pp-subtoggle button (added by pp.js); without JS the whole tree shows */
.pp-subtoggle { display: none; }
@media (max-width: 767.98px) {
  .pp-js #pp-nav .pp-cats li > ul { display: none; }
  .pp-js #pp-nav .pp-cats li.is-open > ul { display: block; }
  .pp-js #pp-nav .pp-cats li:has(> .pp-subtoggle) > a { padding-right: 56px; }
  .pp-subtoggle { display: flex; align-items: center; justify-content: center; position: absolute; right: 4px; top: 2px; width: 44px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--pp-ink); cursor: pointer; }
  .pp-subtoggle:hover, .pp-subtoggle:focus-visible { background: var(--pp-chip-bg); }
  .pp-subtoggle:focus-visible { outline: 3px solid var(--pp-teal); outline-offset: -3px; }
  .pp-subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
}
@media (min-width: 768px) {
  .pp-strip__mail { display: inline; }
  .pp-logo img { height: 40px; }
  .pp-search { order: 0; flex: 1 1 220px; max-width: 340px; }
  .pp-dl { padding: 9px 14px; font-size: 14px; }
  .pp-dl__long { display: inline; }
  .pp-dl__short, .pp-toggle { display: none; }
  .pp-basket { padding: 10px 16px; font-size: 14px; }
  .pp-basket__txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .pp-js .pp-nav { display: block; }
  #pp-nav .pp-wrap { flex-direction: row; align-items: center; flex-wrap: wrap; }
  #pp-nav .pp-nav__pages { order: 0; border: 0; margin: 0; }
  #pp-nav .pp-cats, #pp-nav .pp-cats > ul, #pp-nav .pp-nav__pages { display: flex; }
  #pp-nav .pp-cats { margin-right: 12px; }
  #pp-nav > .pp-wrap > .pp-cats ul ul { display: none; position: absolute; left: 0; top: 100%; min-width: 260px; background: #fff; border-radius: 0 0 14px 14px; box-shadow: var(--pp-shadow); padding: 6px 0; z-index: 60; }
  #pp-nav .pp-cats li:hover > ul, #pp-nav .pp-cats li:focus-within > ul { display: block; }
  #pp-nav ul ul a, #pp-nav ul ul ul a, #pp-nav ul ul ul ul a { padding-left: 16px; }
  #pp-nav > .pp-wrap > .pp-cats ul ul ul { left: 100%; top: 0; border-radius: 14px; }
}

.pp-footer { clear: both; background: var(--pp-ink); color: #D3E6E4; margin-top: 40px; padding-top: 36px; font-size: 14px; line-height: 1.6; }
.pp-footer h2 { font: 700 14px var(--pp-font-head); color: #fff; margin: 0 0 10px; letter-spacing: .02em; }
.pp-footer a { color: #D3E6E4; text-decoration: none; }
.pp-footer a:hover { color: #fff; text-decoration: underline; }
.pp-footer li { margin: 0 0 6px; padding: 0; background: none; }
.pp-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pp-footer__brand { grid-column: 1 / -1; }
.pp-footer__brand img { height: 36px; width: auto; display: block; }
.pp-footer__brand p { margin: 8px 0 0; font: 600 13px var(--pp-font-head); color: #9CC7C3; }
.pp-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: 1px solid #28474B; margin-top: 24px; padding-top: 16px; padding-bottom: 20px; font-size: 13px; }
.pp-footer__legal ul { display: flex; gap: 16px; }
@media (min-width: 768px) {
  .pp-footer__cols { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
  .pp-footer__brand { grid-column: auto; }
}

/* ---- Product cards and format picker (Task 6) ---- */
.pp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.pp-grid > li { margin: 0; padding: 0; background: none; min-width: 0; }
.pp-sort { margin: 0 0 14px; font: 600 13px var(--pp-font-body); }
.pp-sort a { margin-right: 10px; }
.pp-card { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.pp-panel { height: 250px; flex: none; }
.pp-panel--n5 { background: var(--pp-lv-n5); }
.pp-panel--h { background: var(--pp-lv-h); }
.pp-panel--ah { background: var(--pp-lv-ah); }
.pp-panel--bundle { background: var(--pp-lv-bundle); }
.pp-panel--none { background: linear-gradient(150deg, #2F8F8C, #005956); }
.pp-chips { position: absolute; left: 12px; right: 12px; top: 11px; display: flex; justify-content: space-between; align-items: center; gap: 6px; z-index: 6; }
.pp-lvl { font: 700 11.5px/1.4 var(--pp-font-head); color: #fff; background: rgba(255,255,255,.22); padding: 4px 9px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pp-tag { flex: none; background: #fff; color: var(--pp-berry-dk); font: 800 10px/1.4 var(--pp-font-body); letter-spacing: .03em; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.pp-panel--ah .pp-tag { color: #14334F; }
.pp-pg { position: absolute; display: block; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 12px 26px rgba(0,0,0,.32); }
.pp-pg--paper { width: 62%; left: 33%; top: 50px; z-index: 3; }
.pp-pg--ms { width: 60%; left: 3%; top: 44px; z-index: 2; transform: rotate(-8deg); }
.pp-pg--slides { width: 78%; left: 6%; top: 150px; z-index: 1; transform: rotate(4deg); }
/* old thumbnails (no cover preview yet): small page-style tile, centred, so they read as a deliberate placeholder */
.pp-pg--thumb { width: 44%; left: 28%; top: 54px; box-sizing: border-box; padding: 10px; object-fit: contain; height: 62%; }
.pp-corner { position: absolute; right: 11px; bottom: 11px; z-index: 7; background: #fff; color: var(--pp-berry-dk); font: 700 11px/1.4 var(--pp-font-head); padding: 5px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.25); white-space: nowrap; max-width: calc(100% - 22px); overflow: hidden; text-overflow: ellipsis; }
.pp-card__name { font: 600 15px/1.3 var(--pp-font-head); margin: 12px 3px 4px; text-transform: none; }
.pp-card__name a { color: var(--pp-ink); text-decoration: none; }
.pp-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }  /* whole card is the link; Add sits above it */
.pp-card__name a:focus-visible { outline: none; }
.pp-card__name a:focus-visible::after { outline: 3px solid var(--pp-teal); outline-offset: 2px; }
.pp-inc { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 3px 0; }
.pp-inc .pp-chip { font-size: 10.5px; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: auto 3px 3px; padding-top: 12px; }
.pp-price { font: 700 21px/1.1 var(--pp-font-head); white-space: nowrap; }
.pp-price small { font: 600 12px var(--pp-font-body); color: var(--pp-deep); }
.pp-price del { font-size: 14px; font-weight: 500; opacity: .7; }
.pp-foot .pp-btn, .pp-pick .pp-btn { position: relative; z-index: 8; }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-solo { margin: 0; }
/* picker: popover anchored to the card; without JS it is simply shown under the card body */
.pp-pick { margin: 10px 3px 3px; padding: 12px; background: var(--pp-mist); border-radius: 13px; }
.pp-pick fieldset { border: 0; margin: 0 0 10px; padding: 0; }
.pp-pick legend { font: 700 13px var(--pp-font-head); margin-bottom: 6px; padding: 0; }
.pp-pick label { display: flex; align-items: center; gap: 8px; padding: 7px 4px; font: 500 14px var(--pp-font-body); cursor: pointer; position: relative; z-index: 8; }
.pp-pick label b { margin-left: auto; font-family: var(--pp-font-head); }
.pp-pick input[type=radio] { margin: 0; width: 18px; height: 18px; accent-color: var(--pp-berry); }
.pp-pick .pp-btn { width: 100%; }
html:not(.pp-js) .pp-add { display: none; }
.pp-js .pp-pick { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; z-index: 20; background: #fff; box-shadow: var(--pp-shadow-hover); border: 1px solid #D3E3E1; }
.pp-js .pp-pick:not(.is-open) { display: none; }  /* no flash before pp.js runs */
/* legacy mj-mobile.css (below 701px) and mj-tab.css (701-900px) hide #content, and a floated #content shrink-wraps to 0
   around a grid; show it full width at every size (it is the only child of #mj-contentarea) */
#content { display: block; float: none; width: 100%; }

/* ---- Homepage hero, download code, steps (Task 7) ---- */
/* The hero spans the content area: on the homepage only, the legacy slideshow band and side columns are dropped. */
#mj-contentarea .pp-home h1 { border: 0; padding: 0; }
.pp-how a { color: var(--pp-deep); font-weight: 600; }
@media (min-width: 1000px) { .pp-newrow .pp-grid { grid-template-columns: repeat(4, 1fr); } }
body.pp-is-home #mj-left, body.pp-is-home #mj-right { display: none; }
body.pp-is-home #mj-contentarea { float: none; position: static; width: 100%; right: auto; margin: 0; }
body.pp-is-home .mj-subcontainer { width: 100%; max-width: 1180px; padding: 0 16px; box-sizing: border-box; }
.pp-home { font-family: var(--pp-font-body); color: var(--pp-ink); }
.pp-home h1, .pp-home h2, .pp-home h3 { text-transform: none; letter-spacing: normal; border: 0; padding: 0; }
.pp-home em { font-style: normal; color: var(--pp-berry); }
.pp-hero { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 26px 18px; border-radius: 22px; background: radial-gradient(1200px 400px at 85% 0%, var(--pp-chip-bg) 0%, var(--pp-mist) 55%); }
.pp-eyebrow { display: inline-block; background: #fff; color: var(--pp-deep); border-radius: 999px; padding: 5px 12px; font: 700 12.5px var(--pp-font-body); box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.pp-home h1 { margin: 14px 0 10px; font: 700 clamp(30px, 8vw, 44px)/1.06 var(--pp-font-head); letter-spacing: -.02em; }
.pp-lede { font-size: 16px; line-height: 1.6; color: #3B5257; margin: 0 0 18px; }
.pp-btn--lg { padding: 12px 20px; font-size: 15px; }
.pp-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.pp-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 22px 0 0; padding: 0; }
.pp-proof li { margin: 0; padding: 0; background: none; }
.pp-proof strong { display: block; font: 700 22px var(--pp-font-head); }
.pp-proof span { font-size: 13px; color: #3B5257; }
.pp-hero__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-code { background: linear-gradient(150deg, #00756F, #00504E); color: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 14px 34px rgba(0,89,86,.28); }
.pp-home .pp-code h2 { font: 700 17px var(--pp-font-head); margin: 0 0 4px; color: #fff; }
.pp-code p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #E4F3F1; }
.pp-code__form { display: flex; gap: 8px; margin: 0; }
.pp-code__form input { flex: 1; min-width: 0; margin: 0; height: auto; background: #fff; color: var(--pp-ink); border: 2px solid transparent; border-radius: 11px; padding: 11px 10px; font: 500 14px var(--pp-font-head); letter-spacing: .05em; text-transform: uppercase; box-shadow: none; }
.pp-code__form input::placeholder { color: #5B7478; opacity: 1; text-transform: none; }
.pp-code__form .pp-btn { flex: none; }
.pp-code__form :focus-visible, .pp-codeform :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pp-find { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 14px 34px rgba(15,42,46,.12); }
.pp-home .pp-find h2 { font: 700 16px var(--pp-font-head); margin: 0 0 10px; }
.pp-find form { margin: 0; }
.pp-find label { display: block; font: 600 12.5px var(--pp-font-body); margin: 0 0 3px; color: #2E474B; }
.pp-find select { width: 100%; box-sizing: border-box; height: auto; margin: 0 0 9px; border: 1.5px solid #D3E3E1; border-radius: 11px; padding: 10px 12px; font: 400 14px var(--pp-font-body); color: var(--pp-ink); background: #fff; }
.pp-find .pp-btn { width: 100%; margin-top: 4px; }
.pp-find p { font-size: 12.5px; color: #3B5257; margin: 10px 0 0; line-height: 1.5; }
.pp-levels { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 22px 0; }
.pp-level { display: block; color: #fff; border-radius: 15px; padding: 16px 18px; text-decoration: none; transition: transform .18s ease; }
.pp-level:hover { transform: translateY(-4px); color: #fff; }
.pp-level span { display: block; font: 700 18px var(--pp-font-head); }
.pp-level small { font-size: 13px; opacity: .92; }
.pp-newrow h2, .pp-how h2 { font: 700 20px var(--pp-font-head); margin: 0 0 4px; }
.pp-sub { font-size: 13.5px; color: #3B5257; margin: 0 0 16px; }
.pp-how { margin: 30px 0 10px; padding: 22px 18px; background: var(--pp-mist); border-radius: 18px; }
.pp-steps { list-style: none; counter-reset: pp-step; display: grid; grid-template-columns: 1fr; gap: 14px; margin: 14px 0; padding: 0; }
.pp-steps li { position: relative; background: #fff; border-radius: 15px; padding: 16px 16px 16px 58px; margin: 0; list-style: none; }
.pp-steps li::before, .pp-steps li::after { content: none; display: none; }
.pp-steps .pp-n { position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 999px; background: var(--pp-deep); color: #fff; font: 700 15px/30px var(--pp-font-head); text-align: center; }
.pp-steps strong { display: block; font: 600 15px var(--pp-font-head); margin-bottom: 2px; }
.pp-steps span { font-size: 13.5px; color: #3B5257; line-height: 1.5; }
@media (min-width: 768px) {
  .pp-hero { grid-template-columns: 1.25fr .75fr; gap: 26px; padding: 34px 26px 30px; align-items: center; }
  .pp-levels { grid-template-columns: repeat(3, 1fr); }
  .pp-steps { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .pp-level:hover { transform: none; } }

/* download code page */
.pp-dlpage { max-width: 640px; }
.pp-dlpage h1 { text-transform: none; }
.pp-codeform { display: flex; gap: 8px; margin: 12px 0; }
.pp-codeform__in { flex: 1; min-width: 0; height: auto; margin: 0; border: 2px solid #D3E3E1; border-radius: 11px; padding: 12px; font: 500 16px var(--pp-font-head); letter-spacing: .05em; text-transform: uppercase; box-shadow: none; }
.pp-codeform__in::placeholder { text-transform: none; color: #5B7478; opacity: 1; }
.pp-note { font-size: 13.5px; color: #3B5257; }
@media (max-width: 420px) { .pp-code__form { gap: 6px; } .pp-code__form input { letter-spacing: 0; font-size: 12px; padding-left: 8px; padding-right: 4px; } .pp-code__form .pp-btn { padding-left: 10px; padding-right: 10px; } .pp-code { padding: 16px 14px; } }
#mj-contentarea .pp-home h2 { padding: 0; text-align: left; margin-left: 0; margin-right: 0; }
.pp-levelpage h1 { text-transform: none; }
.pp-pager { margin: 18px 0; font-weight: 600; }

/* product page */
.pp-pdp { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 18px 0 30px; font-family: var(--pp-font-body); color: var(--pp-ink); }
.pp-pdp h1, .pp-pdp h2 { text-transform: none; letter-spacing: normal; border: 0; padding: 0; text-align: left; }
.pp-pdp__panel.pp-panel { height: auto; aspect-ratio: 4 / 5; width: 100%; max-width: 560px; border-radius: 20px; justify-self: center; }
.pp-pdp__panel .pp-pg--paper { top: 11%; }
.pp-pdp__panel .pp-pg--ms { top: 9%; }
.pp-pdp__panel .pp-pg--slides { top: 66%; }
.pp-pdp__panel .pp-pg--thumb { top: 18%; height: 56%; }
.pp-pdp__name { font: 700 26px/1.2 var(--pp-font-head); margin: 0 0 4px; }
.pp-pdp__model { margin: 0 0 10px; font-size: 13px; color: #3B5257; }
.pp-pdp .pp-inc { margin: 0 0 16px; }
.pp-pdp .pp-inc .pp-chip { font-size: 12px; padding: 3px 10px; }
.pp-pdp__price { font: 700 28px/1.1 var(--pp-font-head); margin: 0 0 16px; }
.pp-fmt { border: 0; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.pp-fmt legend { font: 700 14px var(--pp-font-head); margin-bottom: 8px; padding: 0; }
.pp-fmt label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 2px solid #D3E3E1; border-radius: 13px; font: 600 15px var(--pp-font-body); cursor: pointer; }
.pp-fmt label b { margin-left: auto; font: 700 18px var(--pp-font-head); }
.pp-fmt label b del { font: 500 13px var(--pp-font-body); color: #5B7478; }
.pp-fmt label:has(input:checked) { border-color: var(--pp-berry); background: var(--pp-mist); }
.pp-fmt input[type=radio] { margin: 0; width: 20px; height: 20px; accent-color: var(--pp-berry); }
.pp-fmt label:has(input:focus-visible) { outline: 3px solid var(--pp-teal); outline-offset: 2px; }
.pp-pdp__opt { margin: 0 0 14px; }
.pp-pdp__opt label { display: block; font: 700 14px var(--pp-font-head); margin-bottom: 4px; }
.pp-pdp__cart { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pp-pdp__add { flex: 1 1 180px; padding: 14px 20px; font-size: 16px; }
.pp-pdp__desc { line-height: 1.6; font-size: 15px; }
.pp-pdp__desc h2 { font: 700 20px var(--pp-font-head); margin: 0 0 8px; }
.pp-pdp--gone { max-width: 560px; }
.pp-pdp--gone h1 { font: 700 24px var(--pp-font-head); }
@media (min-width: 768px) {
  .pp-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .pp-pdp__desc { grid-column: 1 / -1; }
  .pp-pdp__name { font-size: 32px; }
}

/* checkout: one-page purchase-order details (checkout_payment.php) */
.pp-co { font-family: var(--pp-font-body); color: var(--pp-ink); margin: 14px 0 30px; }
.pp-co h1, .pp-co h2 { text-transform: none; letter-spacing: normal; border: 0; padding: 0; text-align: left; }
.pp-co h1 { font: 700 28px/1.15 var(--pp-font-head); margin: 0 0 8px; }
.pp-co h2 { font: 700 17px/1.3 var(--pp-font-head); margin: 0 0 6px; }
.pp-co h2 label { font: inherit; color: inherit; margin: 0; }
.pp-co__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; counter-reset: pp-co; }
.pp-co__steps li { counter-increment: pp-co; margin: 0; border: 0; box-shadow: none; list-style: none; padding: 3px 10px 3px 4px; background: none; border-radius: 999px; font: 600 12.5px var(--pp-font-body); color: #3B5257; }
.pp-co__steps li::before { content: counter(pp-co); display: inline-block; position: static; border: 0; box-shadow: none; width: 20px; height: 20px; margin-right: 6px; border-radius: 999px; background: #E4EFED; font: 700 11px/20px var(--pp-font-head); text-align: center; }
.pp-co__steps li[aria-current] { background: var(--pp-chip-bg); color: var(--pp-chip-fg); }
.pp-co__steps li[aria-current]::before { background: var(--pp-deep); color: #fff; }
.pp-co__lede { font-size: 15px; line-height: 1.55; color: #3B5257; margin: 0 0 16px; }
.pp-co form { margin: 0; }
.pp-co__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pp-co__main { display: grid; gap: 14px; min-width: 0; }
.pp-co__box, .pp-co__summary { background: #fff; border: 1px solid #E1ECEA; border-radius: 18px; padding: 16px; box-shadow: 0 2px 6px rgba(15,42,46,.05); }
.pp-co__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-co__change { font: 700 14px var(--pp-font-body); color: var(--pp-deep); text-decoration: underline; text-underline-offset: 3px; }
.pp-co__hint { font-size: 13px; line-height: 1.5; color: #3B5257; margin: 2px 0 10px; }
.pp-co__field .pp-co__hint { margin: 4px 0 0; }
.pp-co__addr { font-style: normal; font-size: 14.5px; line-height: 1.55; background: var(--pp-mist); border-radius: 13px; padding: 12px 14px; margin: 0; overflow-wrap: anywhere; }
.pp-co__check { display: flex; align-items: center; gap: 10px; font: 600 15px var(--pp-font-body); cursor: pointer; margin: 4px 0 2px; }
.pp-co__check input { width: 20px; height: 20px; margin: 0; accent-color: var(--pp-berry); }
.pp-co__other { display: grid; gap: 10px; justify-items: start; }
.pp-co__inv:has(.pp-co__same:checked) .pp-co__other { display: none; }  /* "Same as school": nothing else to show */
.pp-co__field { margin: 0 0 12px; }
.pp-co__field label { display: block; font: 700 14px var(--pp-font-head); margin: 0 0 4px; }
.pp-co input[type=text], .pp-co textarea { display: block; width: 100%; max-width: 420px; box-sizing: border-box; height: auto; margin: 0; padding: 11px 12px; border: 2px solid var(--pp-field); border-radius: 11px; background: #fff; font: 500 16px var(--pp-font-body); color: var(--pp-ink); box-shadow: none; }
.pp-co textarea { max-width: none; min-height: 84px; resize: vertical; }
.pp-co input[type=text]:focus, .pp-co textarea:focus { border-color: var(--pp-teal); }
.pp-co #pp-coupon { text-transform: uppercase; letter-spacing: .04em; font-family: var(--pp-font-head); }
.pp-co input[aria-invalid=true] { border-color: var(--pp-berry); }
.pp-co__note { font-size: 13.5px; line-height: 1.5; margin: 4px 0 0; padding: 10px 12px; border-radius: 13px; background: var(--pp-chip-bg); color: var(--pp-chip-fg); }
.pp-co__error { margin: 0 0 10px; padding: 10px 12px; border-radius: 13px; background: #FBEAF1; color: var(--pp-berry-dk); font-weight: 600; font-size: 14px; }
.pp-co__lines { list-style: none; margin: 0 0 12px; padding: 0; }
.pp-co__lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 10px 0; border-bottom: 1px solid #E4EFED; background: none; font-size: 14px; line-height: 1.4; }
.pp-co__lines li::before { content: none; display: none; }
.pp-co__name { flex: 1 1 100%; font: 600 14px/1.35 var(--pp-font-head); }
.pp-co__lines b { margin-left: auto; font: 700 15px var(--pp-font-head); }
.pp-co__totals { margin: 0 0 14px; }
.pp-co__t { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.pp-co__t dt, .pp-co__t dd { margin: 0; font-weight: 400; }
.pp-co__t--ot_discount_coupon dd { color: var(--pp-berry-dk); font-weight: 700; }
.pp-co__t--ot_total { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--pp-ink); }
.pp-co__t--ot_total dt, .pp-co__t--ot_total dd { font: 700 18px var(--pp-font-head); }
.pp-co__go { width: 100%; }
@media (min-width: 900px) {
  .pp-co__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
  .pp-co__summary { position: sticky; top: 14px; }
  .pp-co__box, .pp-co__summary { padding: 20px; }
}

/* Staff "ordering for" bar (white on berry dark 10:1) */
.pp-staff { position: sticky; top: 0; z-index: 60; background: var(--pp-berry-dk); color: #FFFFFF; font: 500 15px/1.4 var(--pp-font-body); padding: 9px 0; }
.pp-staff b { font-family: var(--pp-font-head); font-weight: 600; overflow-wrap: anywhere; }
.pp-staff a { color: #FFFFFF; text-decoration: underline; font-weight: 600; white-space: nowrap; }
.pp-staff a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* checkout order type (R16): school needs PO + QS centre number; individual marks them optional */
.pp-co__type { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.pp-co__type legend { font: 700 14px var(--pp-font-head); margin: 0 0 6px; padding: 0; }
.pp-co__type .pp-co__check { padding: 10px 12px; margin: 0 0 6px; border: 2px solid var(--pp-field); border-radius: 13px; }
.pp-co__type .pp-co__check:has(input:checked) { border-color: var(--pp-berry); background: var(--pp-mist); }
.pp-co__type .pp-co__check:has(input:focus-visible) { outline: 3px solid var(--pp-teal); outline-offset: 2px; }
.pp-co__type .pp-co__hint { margin: 2px 0 0; }
.pp-co__opt { display: none; font: 400 13px var(--pp-font-body); color: #3B5257; }
.pp-co__po:has(input[name=order_type][value=individual]:checked) .pp-co__opt { display: inline; }
.pp-co__waive { display: none; margin: 0 0 14px; }
.pp-co__waive .pp-co__check { align-items: flex-start; font-weight: 400; }
.pp-co__po:has(input[name=order_type][value=individual]:checked) .pp-co__waive { display: block; }

/* Sale banner (T11): ink on mist, not sticky so it never competes with the staff bar above it */
.pp-sale { background: var(--pp-mist); color: var(--pp-ink); border-bottom: 1px solid #E4EFED; font: 500 15px/1.4 var(--pp-font-body); padding: 8px 0; text-align: center; }
.pp-sale__code { font-family: var(--pp-font-head); font-weight: 600; letter-spacing: .04em; background: var(--pp-chip-bg); color: var(--pp-chip-fg); border-radius: 999px; padding: 1px 10px; }

/* ---- Legacy theme colour, every page (Task 14). The generic link colour rule is near the top of this file. ---- */
/* Component links must not take a:visited colours. The generic a:visited rule (above, and mj-blue.css's #3692CA one)
   is 0,1,1 and beats class-only component rules, so each component names :visited itself. */
.pp-basket:visited, .pp-level:visited, .pp-skip:visited, .pp-strip a:visited, .pp-staff a:visited { color: #fff; }
.pp-footer a:visited { color: #D3E6E4; }
.pp-footer a:visited:hover { color: #fff; }
.pp-card__name a:visited { color: var(--pp-ink); }
.pp-co__change:visited, .pp-how a:visited { color: var(--pp-deep); }
.pp-btn, .pp-btn:visited, .pp-btn:hover { color: #fff; }
.pp-btn--outline, .pp-btn--outline:visited, .pp-btn--outline:hover { color: var(--pp-deep); }
#mj-left .infoBoxContainer, #mj-right .infoBoxContainer { background: #fff; border: 1px solid #E1ECEA; border-radius: 15px; overflow: hidden; box-shadow: 0 2px 6px rgba(15,42,46,.05); }
#mj-left .infoBoxHeading, #mj-right .infoBoxHeading, #mj-left .infoBoxHeading a, #mj-right .infoBoxHeading a { background: var(--pp-mist); color: var(--pp-ink); font: 700 15px/1.3 var(--pp-font-head); text-transform: none; letter-spacing: normal; border: 0; }
#mj-left .infoBoxContents, #mj-right .infoBoxContents { font-family: var(--pp-font-body); color: var(--pp-ink); border: 0; }
/* Quick Find box: its image button was 15px; WCAG 2.2 target size wants 24px */
.mj-quickfind input[type=image] { width: 28px; height: 28px; padding: 5px; box-sizing: border-box; vertical-align: middle; }
.mj-quickfind input[type=text] { border: 2px solid var(--pp-field); border-radius: 9px; padding: 5px 8px; height: auto; box-sizing: border-box; }
.breadcrumbs a { color: var(--pp-deep); }

/* ---- Standard pages (Task 14): body.pp-std, set in template_top.php ----
   Account, search, specials, what's new, sign in, create account, contact, tickets, news, how to order, information pages.
   Restyles the osCommerce markup in place (contentContainer, content_box, fieldKey/fieldValue tables, jQuery UI buttons). */
.pp-std #mj-contentarea { font: 400 15px/1.6 var(--pp-font-body); color: var(--pp-ink); }
.pp-std #mj-contentarea :is(h1, h2, h3, h4, h5, h6) { font-family: var(--pp-font-head); color: var(--pp-ink); text-transform: none; letter-spacing: normal; text-align: left; border: 0; background: none; }
.pp-std #mj-contentarea h1 { font: 700 28px/1.15 var(--pp-font-head); margin: 0 0 14px; padding: 0; }
.pp-std #mj-contentarea h2 { font-size: 21px; line-height: 1.25; margin: 22px 0 8px; padding: 0; }
.pp-std #mj-contentarea :is(h3, h4) { font-size: 17px; line-height: 1.3; margin: 18px 0 6px; padding: 0; }
.pp-std #mj-contentarea h1::after, .pp-std #mj-contentarea h2::after, .pp-std #mj-contentarea h3::after { content: none; display: none; }
.pp-std #mj-contentarea p { margin: 0 0 12px; }
.pp-std #mj-contentarea .pp-grid { margin: 8px 0 18px; }
/* cards: account / order boxes, the sign-in pair, create-account sections, article teasers */
.pp-std #mj-contentarea :is(.content_box, .mj-signupcontainer, .mj-logincontainer, .acc_container, .moduleRow) { background: #fff; border: 1px solid #E1ECEA; border-radius: 18px; padding: 16px 18px; margin: 0 0 14px; box-shadow: 0 2px 6px rgba(15,42,46,.05); box-sizing: border-box; }
.pp-std #mj-contentarea :is(.mj-signupcontainer, .mj-logincontainer) .content { padding: 0; border: 0; background: none; box-shadow: none; }
.pp-std #mj-contentarea :is(.review_box, .accounts_link) { border: 0; background: none; box-shadow: none; padding: 0; margin: 0; }
.pp-std #mj-contentarea .content_box span.title, .pp-std #mj-contentarea .alsoPurchased span.title { display: block; font: 700 17px/1.3 var(--pp-font-head); color: var(--pp-ink); text-transform: none; border: 0; padding: 0 0 8px; margin: 0 0 8px; border-bottom: 1px solid #E4EFED; background: none; }
.pp-std #mj-contentarea .accountLinkList { list-style: none; margin: 0; padding: 0; }
.pp-std #mj-contentarea .accountLinkList li { margin: 0; padding: 6px 0; background: none; border: 0; }
.pp-std #mj-contentarea .accountLinkList li::before, .pp-std #mj-contentarea .accountLinkList .ui-icon { display: none; content: none; }
.pp-std #mj-contentarea .accountLinkList a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .pp-p-login #mj-contentarea :is(.mj-signupcontainer, .mj-logincontainer) { width: calc(50% - 9px); float: left; min-height: 260px; }
  .pp-p-login #mj-contentarea .mj-signupcontainer { margin-right: 18px; }
}
/* tables of label / field rows: labels above fields on small screens */
.pp-std #mj-contentarea table { border-collapse: collapse; max-width: 100%; }
.pp-std #mj-contentarea td.fieldKey { font: 700 14px/1.35 var(--pp-font-head); padding: 8px 14px 8px 0; vertical-align: middle; width: 32%; text-align: left; }
.pp-std #mj-contentarea td.fieldValue { padding: 6px 0; vertical-align: middle; }
.pp-std #mj-contentarea .inputRequirement { color: var(--pp-berry-dk); font-size: 13px; float: none; }
/* labels above their fields, like checkout */
.pp-std #mj-contentarea tr:has(> td.fieldKey) { display: block; }
.pp-std #mj-contentarea :is(td.fieldKey, td.fieldValue) { display: block; width: auto; padding: 4px 0; }
.pp-std #mj-contentarea td.fieldKey { padding-top: 10px; }
.pp-std #mj-contentarea td.fieldKey:empty { display: none; }
.pp-std #mj-contentarea :is(input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input:not([type]), select, textarea) {
  box-sizing: border-box; width: min(100%, 420px); max-width: 100%; height: auto; min-height: 44px; margin: 0; padding: 10px 12px;
  border: 2px solid var(--pp-field); border-radius: 11px; background: #fff; font: 500 16px/1.3 var(--pp-font-body); color: var(--pp-ink); box-shadow: none; }
.pp-std #mj-contentarea textarea { width: 100%; min-height: 140px; resize: vertical; }
.pp-std #mj-contentarea :is(input, select, textarea):focus { border-color: var(--pp-teal); }
.pp-std #mj-contentarea :is(input[type=radio], input[type=checkbox]) { width: 18px; height: 18px; accent-color: var(--pp-berry); vertical-align: middle; }
/* tep_draw_button() buttons: it tags them ui-priority-primary / -secondary (bootstrap.js's $.fn.button shadows jQuery UI's,
   so there are no ui-button classes). pp-btn look: primary teal, secondary outline. Sidebars too, on every page. */
:is(.pp-std #mj-contentarea, #mj-left, #mj-right) :is(.ui-priority-primary, .ui-priority-secondary, input[type=submit]) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 4px 0; padding: 10px 18px; min-height: 44px;
  border: 2px solid var(--pp-teal); border-radius: 11px; background: var(--pp-teal) none; color: #fff; font: 700 14px/1.2 var(--pp-font-body);
  text-shadow: none; text-transform: none; text-decoration: none; box-shadow: none; filter: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
:is(.pp-std #mj-contentarea, #mj-left, #mj-right) .ui-priority-secondary { background: #fff none; color: var(--pp-deep); opacity: 1; font-weight: 700; }  /* jQuery UI dims secondary to .7 */
:is(.pp-std #mj-contentarea, #mj-left, #mj-right) :is(.ui-priority-primary, .ui-priority-secondary):hover { transform: translateY(-2px); box-shadow: var(--pp-shadow); color: #fff; }
:is(.pp-std #mj-contentarea, #mj-left, #mj-right) .ui-priority-secondary:hover { color: var(--pp-deep); }
:is(.pp-std #mj-contentarea, #mj-left, #mj-right) :is(p.button, .link_button, .buttonAction, .tdbLink) { background: none; border: 0; padding: 0; box-shadow: none; filter: none; }
.pp-std #mj-contentarea .buttonSet { clear: both; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 16px 0 6px; }
.pp-std #mj-contentarea :is(.buttonSet, .contentContainer) > [style*="float: right"] { margin-left: auto; }
/* messages and pagination */
.pp-std #mj-contentarea :is(.mj-boxhint, .mj-boxwarning, .mj-boxdownload, .messageStackError, .messageStackWarning, .messageStackSuccess) { border: 0; border-radius: 13px; padding: 10px 14px; margin: 0 0 14px; font: 600 14px/1.5 var(--pp-font-body); background: #FBEAF1 none; color: var(--pp-berry-dk); }
.pp-std #mj-contentarea :is(.mj-boxhint, .mj-boxdownload, .messageStackSuccess) { background: var(--pp-chip-bg); color: var(--pp-chip-fg); }
.pp-std #mj-contentarea .mj-pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pp-std #mj-contentarea :is(.pagination_container, .mj-productpagination) { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; gap: 8px; margin: 12px 0; }
.pp-std #mj-contentarea :is(.pagination_container, .mj-productpagination, .contentText) [style*="float: right"] { float: none !important; }
.pp-std #mj-contentarea .pageResults { display: inline-block; min-width: 24px; padding: 4px 8px; border-radius: 999px; background: var(--pp-mist); text-align: center; font-weight: 700; text-decoration: none; }
.pp-std #mj-contentarea .pageResults u { text-decoration: none; }
/* information pages, how to order, news articles: readable measure */
.pp-std #mj-contentarea .pp-prose { max-width: 760px; }
.pp-std #mj-contentarea .pp-prose :is(ul, ol) { margin: 0 0 14px; padding-left: 22px; }
.pp-std #mj-contentarea .pp-prose li { margin: 0 0 6px; padding: 0; background: none; }
.pp-std #mj-contentarea .pp-prose li::before { content: none; display: none; }
.pp-std #mj-contentarea .pp-prose img { max-width: 100%; height: auto; }
.pp-std #mj-contentarea .pp-prose a { text-decoration: underline; text-underline-offset: 3px; }
.pp-std #mj-contentarea .pp-prose table { width: 100%; }
.pp-std #mj-contentarea .pp-prose :is(table, pre) { display: block; overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { :is(.pp-std #mj-contentarea, #mj-left, #mj-right) :is(.ui-priority-primary, .ui-priority-secondary):hover { transform: none; } }
/* create account: every section stays open (the legacy accordion hid required fields behind mouse-only headings) */
.pp-p-create_account #mj-contentarea .acc_container { display: block !important; height: auto !important; }
.pp-p-create_account #mj-contentarea .acc_trigger { float: none; width: auto; height: auto; line-height: 1.3; cursor: default; padding: 0 !important; margin: 18px 0 8px; background: none !important; color: var(--pp-ink); font-size: 18px; }  /* mj-blue.css paints it with !important */
.pp-p-login #mj-contentarea .mj-loginarea { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }
.pp-p-login #mj-contentarea :is(.mj-login, .mj-forgotpassword) { float: none; width: auto; margin: 0; padding: 0; }
.pp-p-login #mj-contentarea .mj-forgotpassword a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* news list: titles read as headings, a light rule between items */
.pp-p-article_listing #mj-contentarea td.articlemain { border: 0; background: none; padding: 14px 0 4px; font: 600 17px/1.35 var(--pp-font-head); }
.pp-p-article_listing #mj-contentarea hr { border: 0; border-top: 1px solid #E4EFED; margin: 6px 0 0; }
.pp-std #mj-contentarea .pp-prose ul { list-style: disc outside; }
.pp-std #mj-contentarea .pp-prose ol { list-style: decimal outside; }
.pp-std #mj-contentarea .pp-prose li { display: list-item; list-style: inherit; }
.pp-std #mj-contentarea :is(.review_box, .content_box) { float: none; width: auto; }
/* legacy table headings (basket, order details): mj-blue.css white on #3692CA is 3.4:1 */
.pp-std #mj-contentarea :is(.tableHeading th, .tableHeading td, #cartContentsDisplay th) { background: var(--pp-mist) none; color: var(--pp-ink); font: 700 14px/1.3 var(--pp-font-head); border: 0; border-bottom: 2px solid var(--pp-ink); padding: 10px 8px; text-transform: none; }
/* sidebar lists (bestsellers, categories): WCAG 2.2 target size, 24px tall with room between neighbours */
:is(#mj-left, #mj-right) .mj-bestsellers li { margin: 0; padding: 3px 0; }
:is(#mj-left, #mj-right) .mj-bestsellers li a { display: inline-block; min-height: 24px; padding: 2px 0; line-height: 20px; }
/* links in running text are underlined, not told apart by colour alone (WCAG 1.4.1); card links stay as designed */
.pp-std #mj-contentarea a:not([class]):not(.pp-card *) { text-decoration: underline; text-underline-offset: 3px; }
/* legacy <font color="#FF0000"> notes in language strings (red is 4.0:1 at small sizes) */
.pp-std #mj-contentarea font[color] { color: var(--pp-berry-dk); }
/* breadcrumb links: 24px targets */
a.headerNavigation { display: inline-block; min-height: 24px; padding: 3px 2px; box-sizing: border-box; color: var(--pp-deep); }
/* download list: the five-column table scrolls inside its box on phones instead of widening the page */
.pp-p-download_files #mj-contentarea .content_box { overflow-x: auto; }
/* sitemap: plain grouped lists (legacy floats pushed the groups sideways and past the edge on phones) */
.pp-p-sitemap #mj-contentarea .sitemap_list :is(ul, li, a) { float: none; width: auto; max-width: 100%; box-sizing: border-box; background: none; }
.pp-p-sitemap #mj-contentarea .sitemap_list ul { list-style: none; margin: 0; padding: 0; }
.pp-p-sitemap #mj-contentarea .sitemap_list > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.pp-p-sitemap #mj-contentarea .sitemap_list > ul > li { font: 700 17px/1.3 var(--pp-font-head); padding: 0; margin: 0; }
.pp-p-sitemap #mj-contentarea .sitemap_list ul ul { margin-top: 8px; font: 400 15px/1.5 var(--pp-font-body); }
.pp-p-sitemap #mj-contentarea .sitemap_list ul ul li { padding: 3px 0; margin: 0; }
.pp-p-sitemap #mj-contentarea .sitemap_list li::before { content: none; display: none; }
.pp-p-sitemap #mj-contentarea .sitemap_list a { display: inline-block; padding: 2px 0; }
/* plain <button>s in content (basket Remove): outline button */
.pp-std #mj-contentarea button:not([class]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 2px solid var(--pp-teal); border-radius: 11px; background: #fff none; color: var(--pp-deep); font: 700 14px/1.2 var(--pp-font-body); text-shadow: none; box-shadow: none; filter: none; cursor: pointer; }
/* Download Files box count (was <font color=ff9966>, 2.1:1 on white) */
.pp-dlcount { color: var(--pp-berry-dk); font: 700 18px var(--pp-font-head); }

/* ---- Card-style thumbnails in cart and checkout (pp_render_thumb) ---- */
.pp-thumb.pp-panel { display: block; flex: none; width: 84px; height: 104px; border-radius: 12px; }
.pp-thumb .pp-lvl { position: absolute; left: 6px; top: 6px; z-index: 6; padding: 1px 7px; font-size: 10px; line-height: 1.5; }
.pp-thumb .pp-pg { box-shadow: 0 5px 10px rgba(0,0,0,.3); border-radius: 2px; }
.pp-thumb .pp-pg--paper { width: 56%; left: 36%; top: 26px; }
.pp-thumb .pp-pg--ms { width: 52%; left: 6%; top: 24px; }
.pp-thumb .pp-pg--thumb { width: 52%; left: 24%; top: 28px; height: 60px; padding: 3px; }
.pp-thumb { margin-right: 12px; }
#mj-shoppingcart .pp-thumb img, .pp-co__lines .pp-thumb img { width: auto; max-width: none; }
#mj-shoppingcart .pp-thumb img.pp-pg--paper, .pp-co__lines .pp-thumb img.pp-pg--paper { width: 56%; }
#mj-shoppingcart .pp-thumb img.pp-pg--ms, .pp-co__lines .pp-thumb img.pp-pg--ms { width: 52%; }
#mj-shoppingcart .pp-thumb img.pp-pg--thumb, .pp-co__lines .pp-thumb img.pp-pg--thumb { width: 52%; }
.product_info_image .pp-thumb { margin: 0 auto 6px; }
.product_info_image > a { display: inline-block; }
.product_info_image > a:visited { color: var(--pp-ink); }
.pp-co__lines .pp-thumb { width: 56px; height: 70px; margin-right: 0; align-self: flex-start; }
.pp-co__lines .pp-thumb .pp-lvl { font-size: 8px; padding: 0 4px; left: 4px; top: 4px; }
.pp-co__lines .pp-thumb .pp-pg--paper { top: 18px; }
.pp-co__lines .pp-thumb .pp-pg--ms { top: 16px; }
.pp-co__lines .pp-thumb .pp-pg--thumb { top: 20px; height: 38px; padding: 2px; }
.pp-co__lines li { flex-wrap: nowrap; align-items: flex-start; }
.pp-co__lines .pp-co__name { flex: 1 1 auto; }
#mj-maincontent #mj-shoppingcart table td .pp-thumb img { display: block; }  /* mj-mobile.css hides cart images under 700px */
/* legal pages: the privacy notice's legal-basis table */
.pp-legal-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.pp-legal-table th, .pp-legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--pp-field); }
.pp-legal-table th { font: 700 14px var(--pp-font-head); background: var(--pp-mist); }
@media (max-width: 600px) { .pp-legal-table th:first-child, .pp-legal-table td:first-child { width: 45%; } .pp-legal-table th, .pp-legal-table td { padding: 8px; } }