/* ==========================================================================
   APC LISTING STYLESHEET, shell 2026-11 ("Concept C")
   Every listing built from the kit loads this file, then css/apc.css.
   Change a rule here, upload this file over the old one on the picture host,
   purge its address in Cloudflare, and every live listing changes.
   Scoped to .apcC so nothing outside the description is touched.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,600;0,700;1,700;1,900&display=swap');

/* Concept C tokens: brand blue, the logo's sky blue, navy ink, steel, paper. No other colors. */
.apcC {
  --blue: #017cc2; --sky: #2a9fd8; --ink: #14212e; --steel: #5a6876; --rule: #d7dfe7; --wash: #f3f6f9; --paper: #ffffff;
  margin: 0 auto; max-width: 1000px; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 'Titillium Web', Arial, sans-serif; -webkit-text-size-adjust: 100%;
}
.apcC * { box-sizing: border-box; }
.apcC img { max-width: 100%; height: auto; display: block; }
/* Nothing may push the page wider than the screen: the eBay phone app zooms the whole
   description out to fit anything that overflows (Oct 23 2026 fix). */
.apcC { overflow: hidden; }
.apcC h1, .apcC h2, .apcC h3 { margin: 0; font-family: 'Titillium Web', Arial, sans-serif; }
.apcC p { margin: 0 0 12px; }
.apcC .wrap { padding: 0 28px; }

/* Header: logo, then the credentials line. Facts, not slogans. */
.apcC .top { border-bottom: 1px solid var(--rule); }
.apcC .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 28px; flex-wrap: wrap; }
.apcC .top img { width: 200px; }
.apcC .cred { margin: 0; padding: 0; list-style: none; display: flex; gap: 0; flex-wrap: wrap; }
.apcC .cred li { padding: 0 18px; border-left: 1px solid var(--rule); line-height: 1.25; }
.apcC .cred li:first-child { border-left: 0; padding-left: 0; }
.apcC .cred b { display: block; font-weight: 700; font-size: 19px; }
.apcC .cred span { font-size: 14px; color: var(--steel); }
.apcC .nav { margin: 0; padding: 0; list-style: none; display: flex; gap: 2px 26px; flex-wrap: wrap; padding: 10px 28px; background: var(--wash); border-bottom: 1px solid var(--rule); }
.apcC .nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; }
.apcC .nav a:hover, .apcC .nav a:focus { color: var(--blue); text-decoration: underline; }

/* Product */
.apcC .product .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; padding-top: 30px; padding-bottom: 8px; align-items: start; }
.apcC .kicker { color: var(--blue); font-weight: 700; font-size: 17px; }
.apcC h1 { font-size: 42px; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.4px; margin: 2px 0 14px; }
.apcC .facts { width: 100%; border-collapse: collapse; margin-top: 6px; }
.apcC .facts th, .apcC .facts td { text-align: left; padding: 9px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.apcC .facts th { width: 40%; font-weight: 500; color: var(--steel); padding-right: 14px; }
.apcC .facts td { font-weight: 700; }
.apcC .facts tr:last-child th, .apcC .facts tr:last-child td { border-bottom: 1px solid var(--rule); }
.apcC .gal { min-width: 0; max-width: 100%; overflow: hidden; }
.apcC .gal > input { position: absolute; opacity: 0; pointer-events: none; }
.apcC .stage { border: 1px solid var(--rule); background: #fff; aspect-ratio: 1 / 1; position: relative; }
.apcC .stage img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.apcC #pc1:checked ~ .stage .s1,
.apcC #pc2:checked ~ .stage .s2,
.apcC #pc3:checked ~ .stage .s3,
.apcC #pc4:checked ~ .stage .s4,
.apcC #pc5:checked ~ .stage .s5,
.apcC #pc6:checked ~ .stage .s6,
.apcC #pc7:checked ~ .stage .s7,
.apcC #pc8:checked ~ .stage .s8,
.apcC #pc9:checked ~ .stage .s9,
.apcC #pc10:checked ~ .stage .s10,
.apcC #pc11:checked ~ .stage .s11,
.apcC #pc12:checked ~ .stage .s12 { display: block; }
.apcC .thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.apcC .thumbs label { display: block; position: relative; min-width: 0; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--rule); background: #fff; cursor: pointer; padding: 3px; }
/* Positioned like the big photo: the eBay phone app does not size a percentage height inside an aspect-ratio box. */
.apcC .thumbs label img { position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); max-width: none; object-fit: contain; }
.apcC .thumbs label:hover { border-color: var(--sky); }
.apcC #pc1:checked ~ .thumbs .t1,
.apcC #pc2:checked ~ .thumbs .t2,
.apcC #pc3:checked ~ .thumbs .t3,
.apcC #pc4:checked ~ .thumbs .t4,
.apcC #pc5:checked ~ .thumbs .t5,
.apcC #pc6:checked ~ .thumbs .t6,
.apcC #pc7:checked ~ .thumbs .t7,
.apcC #pc8:checked ~ .thumbs .t8,
.apcC #pc9:checked ~ .thumbs .t9,
.apcC #pc10:checked ~ .thumbs .t10,
.apcC #pc11:checked ~ .thumbs .t11,
.apcC #pc12:checked ~ .thumbs .t12 { border: 2px solid var(--blue); padding: 2px; }
.apcC .galnote { font-size: 14px; color: var(--steel); margin: 6px 0 0; }

/* Fit check */
.apcC .fit { background: var(--blue); color: #fff; margin-top: 24px; }
.apcC .fit .wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding-top: 18px; padding-bottom: 18px; align-items: center; }
.apcC .fit h2 { font-size: 27px; font-weight: 700; font-style: italic; }
.apcC .fit p { margin: 0; }

/* The owner's note: the one memorable block */
.apcC .note { margin-top: 36px; }
.apcC .note .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.apcC .note h2 { font-size: 31px; font-weight: 700; font-style: italic; line-height: 1.12; margin-bottom: 10px; }
.apcC .note p { font-size: 17px; }
.apcC .proof { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.apcC .proof li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.apcC .proof b { font-size: 30px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.3px; }
.apcC .proof span { font-size: 16px; color: var(--ink); }
.apcC .proof small { display: block; font-size: 14px; color: var(--steel); }

/* Body sections */
.apcC .sec { padding-top: 40px; }
.apcC .sec h2 { font-size: 31px; font-weight: 700; font-style: italic; line-height: 1.1; margin-bottom: 12px; }
.apcC .cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; }
.apcC .cols ul { padding-left: 20px; margin: 0 0 12px; }
.apcC .cols li { margin-bottom: 6px; }
.apcC h3 { font-size: 21px; font-weight: 700; font-style: italic; margin-bottom: 8px; }
.apcC .spec { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.apcC .spec th, .apcC .spec td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.apcC .spec th { width: 44%; font-weight: 500; color: var(--steel); padding-right: 12px; }
.apcC .spec td { font-weight: 700; }
.apcC .boxlist { margin: 0; padding: 12px 16px; list-style: none; background: var(--wash); }

/* Where it ships from */
.apcC .ship { margin-top: 44px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.apcC .ship .wrap { padding-top: 32px; padding-bottom: 28px; }
.apcC .ship h2 { font-size: 31px; font-weight: 700; font-style: italic; line-height: 1.1; margin-bottom: 8px; }
.apcC .ship img { width: 100%; margin-top: 8px; }
.apcC .ship .map-sm { display: none; }
.apcC .stat { border-left: 4px solid var(--blue); padding: 4px 0 4px 16px; margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; }
.apcC .stat b { font-size: 30px; font-weight: 900; font-style: italic; line-height: 1.1; margin-right: 10px; }
.apcC .stat span { color: var(--steel); font-size: 16px; }

/* Questions buyers ask */
.apcC .qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 36px; }
.apcC .qa div { padding: 12px 0; border-top: 1px solid var(--rule); }
.apcC .qa h3 { font-size: 19px; margin-bottom: 4px; }
.apcC .qa p { margin: 0; font-size: 16px; }

/* Store */
.apcC .tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.apcC .tiles a { display: block; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.25; text-align: center; }
.apcC .tiles img { border: 1px solid var(--rule); margin-bottom: 6px; }
.apcC .tiles a:hover, .apcC .tiles a:focus { color: var(--blue); }
.apcC .follow { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.apcC .btn { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; padding: 12px 22px; font-weight: 700; font-size: 16px; }
.apcC .btn:hover, .apcC .btn:focus { background: #015a8c; }

.apcC .foot { margin-top: 44px; background: var(--ink); color: #b8c7d6; }
.apcC .foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 18px; padding-bottom: 20px; font-size: 15px; }
.apcC .foot a { color: #fff; }
.apcC a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

@media (max-width: 760px) {
  .apcC .wrap { padding: 0 16px; }
  .apcC .top .wrap { padding: 12px 16px; justify-content: center; }
  .apcC .top img { width: 180px; }
  .apcC .cred { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; }
  .apcC .cred li, .apcC .cred li:first-child { padding: 0 6px; }
  .apcC .cred b { font-size: 15px; }
  .apcC .cred span { font-size: 12px; }
  .apcC .nav { padding: 8px 16px; gap: 2px 18px; justify-content: center; }
  .apcC .product .wrap, .apcC .fit .wrap, .apcC .note .wrap, .apcC .cols, .apcC .qa { grid-template-columns: minmax(0, 1fr); }
  .apcC .product .wrap { padding-top: 22px; }
  .apcC .gal { order: 2; }
  .apcC .thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .apcC h1 { font-size: 30px; }
  .apcC .fit .wrap { gap: 6px; }
  .apcC .sec h2, .apcC .note h2, .apcC .ship h2 { font-size: 25px; }
  .apcC .ship .map-sm { display: block; }
  .apcC .ship .map-lg { display: none; }
  .apcC .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apcC .qa { gap: 0; }
}

/* Announcement bar (switched on from apc.css) and spare category tiles */
.apcC .apc-notice { display: none; }
.apcC .apc-cat-spare { display: none; }

/* Gallery slots still waiting for photos ("put image1" placeholders) */
.apcC .stage img[src^="put"], .apcC .thumbs img[src^="put"] { visibility: hidden; }