/* Plain per-car option code tables: [porsche_option_codes] */
.stutt-oc-list { margin: 28px 0; }
.stutt-oc-list__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.stutt-oc-list__head h3 { margin: 0; }
.stutt-oc-list__count { font-size: 14px; color: #5e5c56; }
.stutt-oc-list__tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0; }
.stutt-oc-list__tools input { flex: 1 1 240px; border: 1.5px solid #0d0d0d; border-radius: 8px; padding: 10px 12px; font: inherit; }
.stutt-oc-list__tools a { font-weight: 700; }
.stutt-oc-list__scroll { overflow-x: auto; }
.stutt-oc-list table { width: 100%; border-collapse: collapse; }
.stutt-oc-list th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px 8px 0; border-bottom: 1px solid #dddbd3; }
.stutt-oc-list td { padding: 9px 10px 9px 0; border-bottom: 1px solid #dddbd3; vertical-align: top; }
.stutt-oc-list td:first-child { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; white-space: nowrap; width: 110px; }
.stutt-oc-list tr[hidden] { display: none; }
.stutt-oc-list__none { color: #5e5c56; }

/* Link index: [porsche_option_codes_index] */
.stutt-oc-index { margin: 32px 0; }
.stutt-oc-index__title { margin: 0 0 12px; }
.stutt-oc-index details { border-top: 1px solid #dddbd3; }
.stutt-oc-index details:last-of-type { border-bottom: 1px solid #dddbd3; }
.stutt-oc-index summary { cursor: pointer; padding: 12px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.stutt-oc-index summary span { font-weight: 400; font-size: 14px; color: #5e5c56; }
.stutt-oc-index ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; }
.stutt-oc-index ul.stutt-oc-index__wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.stutt-oc-index li { margin: 0; }

/* One-model index: [porsche_option_codes_index family="911"] */
.stutt-oc-index--model .stutt-oc-index__gen { margin: 0 0 26px; }
.stutt-oc-index--model h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.stutt-oc-index--model h3 span { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #5e5c56; }
.stutt-oc-index--model ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.stutt-oc-index--model ul a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: #f1f0ec; color: #0d0d0d; font-weight: 700; font-size: 14px; text-decoration: none; font-variant-numeric: tabular-nums; transition: background .15s, transform .15s; }
.stutt-oc-index--model ul a:hover, .stutt-oc-index--model ul a:focus-visible { background: #f4d51c; transform: translateY(-1px); }
.stutt-oc-index--model ul.stutt-oc-index__wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 16px; }
.stutt-oc-index--model ul.stutt-oc-index__wide a { height: auto; padding: 10px 16px; border-radius: 12px; font-weight: 600; width: 100%; box-sizing: border-box; }
.stutt-oc-index--model .stutt-oc-index__gen { scroll-margin-top: 90px; }
/* Same-size boxes: years share a width, documents share a height and cut long titles */
.stutt-oc-index--model ul:not(.stutt-oc-index__wide) a { box-sizing: border-box; min-width: 116px; justify-content: center; white-space: nowrap; }
.stutt-oc-index--model ul.stutt-oc-index__wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.stutt-oc-index--model ul.stutt-oc-index__wide li { min-width: 0; }
.stutt-oc-index--model ul.stutt-oc-index__wide a { display: flex; align-items: center; height: 48px; padding: 0 16px; }
.stutt-oc-index--model ul.stutt-oc-index__wide a span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Summary at the top of a year post (public) */
.stutt-oc-yp { font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; background: #f4f3ef; border-radius: 14px; padding: 18px 20px; margin: 0 0 26px; color: #0d0d0d; text-align: left; }
.stutt-oc-yp p { margin: 0; font-size: 16px; line-height: 1.5; }
.stutt-oc-yp .stutt-oc-yp__lead strong { font-weight: 800; }
.stutt-oc-yp ul.stutt-oc-yp__cats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.stutt-oc-yp ul.stutt-oc-yp__cats li { margin: 0; padding: 6px 12px; background: #fff; border-radius: 999px; font-size: 14px; line-height: 1.3; list-style: none; }
.stutt-oc-yp ul.stutt-oc-yp__cats b { font-weight: 800; font-variant-numeric: tabular-nums; }
.stutt-oc-yp p.stutt-oc-yp__more { margin-top: 12px; font-size: 14px; color: #5e5c56; }
.stutt-oc-yp .stutt-oc-yp__more a { color: #0d0d0d; font-weight: 700; text-decoration: underline; text-decoration-color: #f4d51c; text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* Year page (new layout): intro, notes and the codes in one panel. The theme narrows and centres p/h2/table inside
   posts and strips input borders, so the few !important rules below put this block back in charge of itself. */
.stutt-oc-page { font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; color: #0d0d0d; margin: 26px 0 34px; text-align: left; }
.stutt-oc-page p, .stutt-oc-page h2, .stutt-oc-page table { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.stutt-oc-page h2.stutt-oc-page__title { font-size: 30px; line-height: 1.2; margin: 0 0 10px !important; text-align: left; }
.stutt-oc-page p.stutt-oc-page__lead { font-size: 18px; line-height: 1.55; margin: 0 0 18px !important; max-width: 760px !important; }
.stutt-oc-page__notes { border-left: 4px solid #f4d51c; padding: 2px 0 2px 16px; margin: 0 0 22px; max-width: 760px; }
.stutt-oc-page__notes p { font-size: 15px; line-height: 1.55; color: #3b3a36; margin: 0 0 8px !important; }
.stutt-oc-page__notes p:last-child { margin-bottom: 0 !important; }
.stutt-oc-page__panel { background: #f1f0eb; border-radius: 24px; padding: 24px; }
.stutt-oc-page__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 14px; }
.stutt-oc-page__bar input[type="search"] { flex: 1 1 280px; min-width: 0; height: 52px; box-sizing: border-box; border: 1.5px solid #0d0d0d !important; border-radius: 12px; background: #fff !important; padding: 0 16px; font: inherit; font-size: 17px; color: #0d0d0d; box-shadow: none; }
.stutt-oc-page__bar input[type="search"]:focus { outline: 3px solid #f4d51c; outline-offset: 1px; }
.stutt-oc-page__count { font-size: 14px; color: #5e5c56; white-space: nowrap; }
.stutt-oc-page__count b { color: #0d0d0d; font-weight: 800; font-variant-numeric: tabular-nums; }
.stutt-oc-page__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.stutt-oc-page__chips button, .stutt-oc-page__chips span { font: inherit; font-size: 14px; line-height: 1; height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #0d0d0d; }
.stutt-oc-page__chips button { cursor: pointer; transition: background .15s; }
.stutt-oc-page__chips b { font-weight: 800; font-variant-numeric: tabular-nums; }
.stutt-oc-page__chips button:hover { background: #fbf0a8; }
.stutt-oc-page__chips button[aria-pressed="true"] { background: #0d0d0d; color: #fff; }
.stutt-oc-page__chips button:focus-visible { outline: 3px solid #f4d51c; outline-offset: 2px; }
.stutt-oc-page__table { background: #fff; border-radius: 14px; max-height: 640px; overflow: auto; }
.stutt-oc-page table { width: 100% !important; border-collapse: collapse; margin: 0 !important; border: 0; font-size: 16px; }
.stutt-oc-page .stutt-oc-page__table th { position: sticky; top: 0; background: #fff; z-index: 1; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #5e5c56; padding: 14px 16px 10px; border: 0; box-shadow: inset 0 -1px 0 #dddbd3; }
.stutt-oc-page .stutt-oc-page__table td { padding: 11px 16px; border: 0; border-bottom: 1px solid #eceae3; vertical-align: top; line-height: 1.45; background: transparent; }
.stutt-oc-page .stutt-oc-page__table tbody tr:last-child td { border-bottom: 0; }
.stutt-oc-page tbody tr:hover td { background: #fbfaf6; }
.stutt-oc-page td:first-child { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; white-space: nowrap; width: 96px; }
.stutt-oc-page td:last-child { width: 170px; text-align: right; white-space: nowrap; }
.stutt-oc-page td:last-child span { display: inline-block; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px; background: #f1f0eb; color: #3b3a36; }
.stutt-oc-page th:last-child { text-align: right; }
.stutt-oc-page tr[hidden] { display: none; }
.stutt-oc-page p.stutt-oc-page__none { margin: 16px 4px 0 !important; color: #5e5c56; font-size: 15px; }
.stutt-oc-page p.stutt-oc-page__more { margin: 16px 4px 0 !important; font-size: 15px; color: #5e5c56; }
.stutt-oc-page__more a { color: #0d0d0d; font-weight: 700; text-decoration: underline; text-decoration-color: #f4d51c; text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* free visitors: real codes and groups, meanings fogged, fading into the membership wall that follows */
.stutt-oc-page__panel.is-locked { padding-bottom: 20px; }
.stutt-oc-page__panel.is-locked .stutt-oc-page__table { max-height: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }
.stutt-oc-page__panel.is-locked td i { display: block; height: 12px; margin: 5px 0; border-radius: 6px; background: #dddbd3; filter: blur(2.5px); }
.stutt-oc-page p.stutt-oc-page__locked { margin: 6px 4px 0 !important; font-size: 16px; font-weight: 700; text-align: center; }
@media (max-width: 640px) {
  .stutt-oc-page h2.stutt-oc-page__title { font-size: 24px; }
  .stutt-oc-page__panel { padding: 16px 12px; border-radius: 18px; }
  .stutt-oc-page .stutt-oc-page__table td, .stutt-oc-page .stutt-oc-page__table th { padding-left: 12px; padding-right: 12px; }
  .stutt-oc-page th:last-child, .stutt-oc-page td:last-child { display: none; }
  .stutt-oc-page td:first-child { width: 70px; }
  .stutt-oc-page__table { max-height: 70vh; }
}