/* ==========================================================================================
   Surfing Solutions, website v2. The product pages: Our Products and the six
   product pages. Measured from the reference product pages at 1440 and 390 wide: the range
   rows, the cylinder liner layout (intro, centred tabs, specifications, feature cards,
   list with a picture, material blocks, searchable table), the five card grid, the castings
   layout (pills, image carousel) and the wear parts layout (accordions, pills, cards).
   Everything here builds on site.css and only styles what sits inside main.
   ========================================================================================== */

/* ---------- rhythm: 80 px under every block, 80 px above the first ---------- */
.pp { position: relative; padding: 0 var(--gutter) 80px; }
.pp--top { padding-top: 80px; }
.pp--tight { padding-bottom: 20px; }
.pp--flush { padding-bottom: 26px; }
.pp .title { margin-bottom: 20px; }
.pp .center { text-align: center; }
.pp .text p { margin-bottom: 15px; }
.pp .text p:last-child { margin-bottom: 0; }
.pp .text strong.red, .pp .text .red { color: var(--red); font-weight: 700; }
.t28 { font: 700 28px/36px var(--font); color: var(--black); margin: 0 0 20px; }

/* ---------- intro: text on the left, the part on the right ---------- */
.pp-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; min-height: 668px; }
.pp-intro .copy { padding: 10px; }
.pp-intro .copy .tag { margin-bottom: 20px; padding-right: 80px; }
.pp-intro .pic { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.pp-intro .pic img { width: 634px; max-width: 100%; height: auto; aspect-ratio: 634 / 611; object-fit: contain; background: var(--white); }
/* the castings and wear parts intros: a one line title and a wider picture, centred beside the text */
.pp--b10 { padding-bottom: 10px; }
.pp-intro--wide { gap: 54px; min-height: 0; }
.pp-intro--wide .title { font-size: 40px; line-height: 55px; }
.pp-intro--wide .pic img { width: 100%; aspect-ratio: 656 / 438; object-fit: contain; }
.pp-intro--plain .pic img { aspect-ratio: 656 / 447; }

/* ---------- centred tabs with a picture and a red label ---------- */
.pp-types { padding: 20px 10px 10px; }
.pp-types .title { margin: 0 0 20px; }
.pp-tabs { padding-top: 20px; }
.pp-tabs [role="tablist"] { justify-content: center; border-bottom: 0; margin: 0 0 20px; gap: 0; }
.pp-tabs [role="tab"] {
  flex: 0 0 auto; padding: 15px 35px; font: 700 18px/27px var(--font); text-transform: uppercase;
  color: var(--black); background: var(--white); border-top: 2px solid var(--line);
}
.pp-tabs [role="tab"][aria-selected="true"] { color: var(--white); background: var(--red); border-top: 4px solid var(--red); }
.pp-tabs [role="tab"]:hover { color: var(--red); }
.pp-tabs [role="tab"][aria-selected="true"]:hover { color: var(--white); }
/* four tabs (the engine gaskets line joined on 3 Oct 2026): tighter on laptops, and never wider than the page */
.pp-tabs [role="tablist"] { flex-wrap: wrap; }
@media (min-width: 1025px) and (max-width: 1280px) { .pp-tabs [role="tab"] { padding: 14px 20px; font-size: 16px; line-height: 24px; } }
.pp-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 10px; align-items: center; }
.pp-panel .pic { position: relative; width: 490px; max-width: 100%; height: 392px; margin: 0 auto; overflow: hidden; background: #EEF1F6; }
.pp-panel .pic img { width: 100%; height: 100%; object-fit: cover; }
.pp-panel .pic.is-drawing { background: var(--white); border: 1px solid var(--line); }
.pp-panel .pic.is-drawing img { object-fit: contain; padding: 48px 18px 14px; }
.pp-panel .pic .label {
  position: absolute; left: 0; top: 16px; min-width: 175px; padding: 1px 30px 1px 30px;
  background: var(--red); color: var(--white); font: 600 16px/24px var(--font);
  border: 1px solid rgba(255, 255, 255, 0.9); border-left: 0;
}
.pp-panel .text p { margin-bottom: 14px; }
.pp-panel .arrow-list { columns: 2; column-gap: 30px; margin-top: 4px; }
.pp-panel .arrow-list li { break-inside: avoid; }

/* ---------- technical specifications: the title takes the first cell ---------- */
.spec-cards.pp-specs { grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 10px; }
.pp-specs .head .title { font-size: 35px; line-height: 45px; margin: 0; }
.pp-specs .head .note { margin: 10px 0 0; font: 400 14px/21px var(--font); letter-spacing: 0; color: var(--muted); }
.spec-cards.pp-specs--big { padding: 0; }
.pp-specs--big .head .title { font-size: 45px; line-height: 55px; }
.pp-specs .scard { border: 1px solid var(--line); border-radius: 10px; padding: 26px 20px 20px; min-height: 108px; background: var(--white); }
.pp-specs .scard h3 { font: 600 21px/28px var(--font); color: var(--black); margin: 0 0 10px; }
.pp-specs .scard.fact h3 { text-transform: capitalize; } /* the sample data labels come in sentence case */
.pp-specs .scard p { font: 400 15px/22.5px var(--font); letter-spacing: 0; color: var(--muted); margin: 0; }

/* ---------- four feature cards under a centred title ---------- */
.pp-feats .title { text-align: center; margin: 0 0 20px; }
.feature-cards.pp-fcards { padding-top: 25px; gap: 20px; }
.pp-fcards .fcard { background: var(--light); border-radius: 10px; padding: 30px; border: 0; }
.pp-fcards .fcard:hover { transform: none; }
.pp-fcards .fcard .ic { display: flex; align-items: center; height: 59px; margin-bottom: 28px; font-size: 44px; color: var(--red); }
.pp-fcards .fcard h3 { font: 600 21px/25.2px var(--font); color: var(--black); margin-bottom: 17px; }
.pp-fcards .fcard p { font: 400 15px/22.5px var(--font); letter-spacing: 0; color: var(--muted); }

/* ---------- a picture beside a titled list ---------- */
.pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.pp-split .pic img { width: 100%; height: 446px; object-fit: cover; }
.pp-split .copy { padding: 10px; }
.pp .check-list { margin: 0; }
.pp .check-list li { padding-left: 22px; margin-bottom: 8px; font: 400 16px/24px var(--font); letter-spacing: 0; color: var(--black); }
.pp .check-list li:last-child { margin-bottom: 0; }
.pp .check-list li::before { font-size: 14px; top: 0; line-height: 24px; }
.pp .check-list li strong { display: block; font-weight: 700; color: var(--black); }
.pp .arrow-list li { padding-left: 22px; margin-bottom: 8px; font: 600 16px/24px var(--font); color: var(--black); }
.pp .arrow-list li:last-child { margin-bottom: 0; }
.pp .arrow-list li::before { left: 3px; font-size: 14px; line-height: 24px; }

/* ---------- material blocks: title with two cards, then two lists ---------- */
.pp-mat { display: grid; grid-template-columns: 538px 1fr; gap: 20px; align-items: start; }
.pp-mat .head { padding: 10px; }
.pp-mat .head .title { margin: 0; }
.pp-mat .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 10px; }
.pp-mat .card { border: 1px solid var(--line); border-radius: 10px; padding: 16px 10px 10px; min-height: 139px; }
.pp-mat .card h3 { font: 600 21px/28px var(--font); color: var(--black); margin-bottom: 15px; }
.pp-mat .card p { font: 400 15px/22.5px var(--font); letter-spacing: 0; color: var(--muted); }
.pp-std { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pp-std > div { padding: 10px; }
.pp-std .t28 { margin-bottom: 20px; }
.std-list { display: grid; grid-template-columns: 313px 313px; gap: 20px; }
.std-list li { position: relative; padding-left: 22px; font: 400 16px/24px var(--font); color: var(--black); }
.std-list li::before { content: "\f138"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 0; font-size: 14px; line-height: 24px; color: var(--red); }
.std-list li strong { display: block; font-weight: 700; }

/* ---------- searchable table ---------- */
.pp-search .container { padding: 0 10px; }
.pp-search .title { text-align: center; margin: 10px 0 30px; }
.pp-search .dt-tools { margin-bottom: 10px; }
.pp-search .dt-tools select, .pp-search .dt-tools input {
  width: 410px; min-width: 0; height: 42px; padding: 6px 10px; border: 1px solid #CCC; border-radius: 4px;
  font: 400 14px/21px var(--font); color: #000; background: var(--white);
}
.pp-search .dt-tools label { font: 400 16px/24px var(--font); color: #333; gap: 0; }
.pp-search .dt-tools label input { margin-left: 3px; }
.pp-search .dt-wrap { max-height: 500px; overflow: auto; border: 1px solid rgba(122, 122, 122, 0.18); }
.pp-search table.dt { font: 400 14.4px/21.6px var(--font); }
.pp-search table.dt th {
  position: sticky; top: 0; z-index: 1; padding: 8px 30px 8px 8px; font: 500 16px/24px var(--font);
  border: 1px solid var(--white); white-space: normal;
}
.pp-search table.dt td { padding: 8px; border: 1px solid rgba(122, 122, 122, 0.18); color: #111; }
.pp-search table.dt td:first-child { color: #333; }
.pp-search table.dt tbody tr:nth-child(even) td { background: #F3E9E9; }
.pp-search table.dt tbody tr:hover td { background: #EBDADA; }

/* ---------- five cards: three, then two centred (the valve page grid) ---------- */
.pp-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 70px 40px; padding: 10px 20px; }
.pp-card { position: relative; width: 415px; display: flex; flex-direction: column; }
.pp-cards--row2 .pp-card:nth-child(n+4) { width: 429px; }
.pp-scope { margin: 0 0 40px; }
.pp-cards--4 { gap: 70px 30px; }
.pp-cards--4 .pp-card { width: calc((100% - 90px) / 4); }
.pp-cards--4 .pp-card h2 { font-size: 26px; line-height: 32px; }
.pp-cards--4 .pp-card .body { padding: 26px 24px 74px; }
.pp-cards--4 .pp-card p { max-width: none; }
.pp-card .img { display: block; aspect-ratio: 415 / 277; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--white); }
.pp-card .img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s; }
.pp-card .img.cover img { object-fit: cover; }
.pp-card:hover .img img { transform: scale(1.05); }
.pp-card .body { flex: 1; position: relative; min-height: 240px; padding: 30px 30px 74px; background: var(--light); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; }
.pp-card h2, .pp-card h3 { font: 600 30px/30px var(--font); color: var(--black); margin: 6px 0 20px; }
.pp-card p { font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); max-width: 318px; margin: 0; }
.pp-card .btn-arrow { position: absolute; right: 30px; bottom: 11px; }
.pp-cards--row2 .pp-card:nth-child(n+4) .body { min-height: 270px; }
.pp-cards--row2 .pp-card:nth-child(n+4) p { max-width: 330px; }
/* the wear parts cards: square pictures, smaller titles */
.pp-cards--get { gap: 20px 40px; }
.pp-cards--get .pp-card .img { aspect-ratio: 415 / 414; }
.pp-cards--get .pp-card .body { min-height: 265px; }
.pp-cards--get .pp-card h3 { font-size: 25px; line-height: 30px; margin: 0 0 15px; }

/* ---------- castings: pills, lists and the image carousel ---------- */
.pp-segs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pp-segs > div { padding: 10px; }
.pp-segs .t28 { margin: 20px 0 20px; }
.pp-segs .lists { display: grid; grid-template-columns: 307px 307px; gap: 20px; padding: 10px; }
.pp-segs .right .t28 { text-align: center; margin-top: 19px; }
.pills { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pill { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 10px; background: var(--light); border-radius: 10px; font: 600 18px/21.6px var(--font); color: var(--black); text-align: center; }
.pills--10 { gap: 10px; }
.pills--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pills--3 .pill { min-height: 68px; font-size: 20px; line-height: 24px; }
.pp-grades { display: grid; grid-template-columns: 667px 1fr; gap: 30px; align-items: center; }
.pp-grades .right { padding: 10px 10px 10px 50px; }
.pp-grades .title { margin-bottom: 20px; }
.pp-grades .note { margin-top: 20px; }
.pp-gallery .title { text-align: center; margin: 0 0 20px; }
.pp-gallery .carousel { padding: 0; }
.pp-gallery .carousel .item { flex-basis: calc((100% - 30px) / 4); }
.pp-gallery .carousel .track { gap: 10px; }
.gcard { display: block; border-radius: 10px; overflow: hidden; }
.gcard .img { display: block; aspect-ratio: 1 / 1; border: 1px solid var(--light); background: var(--white); overflow: hidden; }
.gcard .img img { width: 100%; height: 100%; object-fit: cover; }
.gcard .cap { display: block; padding: 15px 10px; background: var(--light); font: 600 14px/21px var(--font); color: var(--black); text-align: center; }
.pp-gallery .carousel .nav-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--red); font-size: 22px; }
.pp-gallery .carousel .nav-btn.prev { left: -25px; }
.pp-gallery .carousel .nav-btn.next { right: -25px; }
.pp-gallery .carousel .dots { display: none; }
.pp-gallery .cta { text-align: center; padding-top: 40px; }
.pp-gallery .cta .btn { padding: 12px 30px; }

/* ---------- wear parts: the three accordions ---------- */
.pp-acc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px; align-items: start; }
.pp-acc .acc-item { margin-bottom: 0; }
.pp-acc .acc-head { padding: 10px; font: 500 18px/27px var(--font); }
.pp-acc .acc-head::after { content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; line-height: 27px; }
.pp-acc .acc-item.open .acc-head::after { content: "\f068"; }
.pp-acc .acc-body > div { padding: 0 20px; }
.pp-acc .acc-item.open .acc-body > div { padding: 20px 20px 10px; }
.pp-acc .std-list { display: block; }
.pp-acc .std-list li { margin-bottom: 8px; font-size: 16px; }
.pp-adv .title { text-align: center; margin: 0 0 20px; }
.pp-adv .pills--3 { padding-top: 25px; }
.pp-adv .text { margin-top: 20px; }

/* ---------- our products: one row per product, the picture on alternate sides ---------- */
.pp-range { display: grid; gap: 40px; }
.range-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 457px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.range-row .copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 50px; background: var(--light); }
.range-row .copy .title { margin: 0 0 50px; }
.range-row .pic { position: relative; display: block; background: var(--white); overflow: hidden; }
.range-row .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s; }
.range-row .pic.cover img { object-fit: cover; }
.range-row .pic:hover img { transform: scale(1.04); }
.range-row.flip .pic { order: -1; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .pp { padding-bottom: 60px; }
  .pp--top { padding-top: 60px; }
  .pp-intro, .pp-split, .pp-mat, .pp-std, .pp-segs, .pp-grades { grid-template-columns: 1fr; }
  .pp-intro { min-height: 0; }
  .pp-panel { grid-template-columns: 1fr; }
  /* below desktop the tabs read like the reference's phone view: the open tab, its panel, then the others */
  .pp-tabs { display: flex; flex-direction: column; }
  .pp-tabs [role="tablist"] { display: contents; }
  .pp-tabs [role="tab"] { order: 0; width: 100%; padding: 15px 20px; font-size: 16px; line-height: 24px; }
  .pp-tabs [role="tabpanel"] { order: 1; margin: 20px 0; }
  .pp-tabs [role="tab"][aria-selected="true"] ~ [role="tab"] { order: 2; }
  .spec-cards.pp-specs { grid-template-columns: repeat(2, 1fr); }
  .pp-specs .head { grid-column: 1 / -1; }
  .pp-cards { gap: 40px 30px; padding: 10px 0; }
  .pp-card, .pp-cards--row2 .pp-card:nth-child(n+4), .pp-cards--4 .pp-card { width: calc(50% - 15px); }
  .pp-cards--get .pp-card { width: calc(50% - 15px); }
  .pp-grades .right { padding-left: 10px; }
  .pp-acc { grid-template-columns: 1fr; }
  .pills--3 { grid-template-columns: repeat(2, 1fr); }
  .pp-gallery .carousel { padding: 0 30px; }
  .pp-gallery .carousel .item { flex-basis: calc((100% - 20px) / 3); }
  .pp-gallery .carousel .nav-btn.prev { left: -10px; }
  .pp-gallery .carousel .nav-btn.next { right: -10px; }
  .range-row { grid-template-columns: 1fr; min-height: 0; }
  .range-row .pic { order: -1; }
  .range-row .pic { height: 320px; }
  .range-row .copy { padding: 30px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .pp { padding-bottom: 50px; }
  .pp--top { padding-top: 50px; }
  .pp--tight { padding-bottom: 20px; }
  .pp .title { font-size: 30px; line-height: 39px; }
  .pp .tag { font-size: 18px; line-height: 18px; }
  .t28 { font-size: 25px; line-height: 32.5px; }
  .pp-intro { gap: 20px; }
  .pp-intro .copy { padding: 0; }
  .pp-intro--wide .title { font-size: 30px; line-height: 39px; }
  .pp-types { padding: 0; }
  .pp-types .title { margin-bottom: 20px; }
  .pp-panel { padding: 0 10px; gap: 20px; }
  .pp-panel .pic { width: 100%; height: auto; aspect-ratio: 490 / 392; }
  .pp-panel .arrow-list { columns: 1; }
  .spec-cards.pp-specs { grid-template-columns: 1fr; padding: 0; gap: 19px; }
  .pp-specs .head .title, .pp-specs--big .head .title { font-size: 30px; line-height: 39px; }
  .pp-specs .scard { min-height: 107px; }
  .pp-specs .scard h3 { font-size: 20px; line-height: 27px; }
  .feature-cards.pp-fcards { grid-template-columns: 1fr; }
  .pp-fcards .fcard { padding: 20px; }
  .pp-split .pic { order: 2; }
  .pp-split .pic img { height: auto; aspect-ratio: 668 / 446; }
  .pp-split .copy, .pp-mat .head, .pp-std > div, .pp-segs > div { padding: 0; }
  .pp-mat .cards { grid-template-columns: 1fr; padding: 0; }
  .pp-mat .card h3 { font-size: 18px; line-height: 24px; }
  .std-list { grid-template-columns: 1fr 1fr; gap: 20px 10px; }
  .pp-search .container { padding: 0; }
  .pp-search .dt-tools { flex-wrap: nowrap; gap: 20px; }
  .pp-search .dt-tools select { width: 50%; }
  .pp-search .dt-tools label { width: 50%; font-size: 0; }
  .pp-search .dt-tools label input { width: 100%; margin: 0; font-size: 14px; }
  .pp-search table.dt { min-width: 760px; }
  .pp-cards { gap: 20px; padding: 10px 10px 0; }
  .pp-card, .pp-cards--row2 .pp-card:nth-child(n+4), .pp-cards--get .pp-card, .pp-cards--4 .pp-card { width: 100%; }
  .pp-card .body, .pp-cards--row2 .pp-card:nth-child(n+4) .body, .pp-cards--get .pp-card .body, .pp-cards--4 .pp-card .body { min-height: 0; padding: 10px 10px 60px; }
  .pp-card h2, .pp-card h3, .pp-cards--get .pp-card h3, .pp-cards--4 .pp-card h2 { font-size: 20px; line-height: 27px; margin: 3px 0 17px; }
  .pp-card .btn-arrow { right: 11px; bottom: 11px; }
  .pp-segs .lists { grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .pills, .pills--3 { grid-template-columns: 1fr; }
  .pp-grades { gap: 40px; }
  .pp-grades .right { order: -1; padding: 0; }
  .pp-gallery .carousel { padding: 0 20px; }
  .pp-gallery .carousel .item { flex-basis: 100%; }
  .pp-gallery .carousel .nav-btn { width: 30px; height: 30px; font-size: 14px; }
  .pp-gallery .carousel .nav-btn.prev { left: -10px; }
  .pp-gallery .carousel .nav-btn.next { right: -10px; }
  .pp-acc { padding: 0 10px; gap: 20px; }
  .pills--3 .pill { min-height: 88px; }
  .pp--range { padding-left: 10px; padding-right: 10px; }
  .range-row .pic { height: 246px; }
  .range-row .copy { padding: 20px; }
  .range-row .copy .title { margin-bottom: 49px; font-size: 25px; line-height: 32.5px; }
  .range-row .copy .title .t2 { font-size: 30px; line-height: 39px; }
  .range-row .copy .btn { padding: 10px; }
}

/* the round arrows hang outside the carousel as on the reference; on narrower screens clip them at the page edge instead of scrolling sideways */
.pp-gallery { overflow-x: clip; }

/* ---------- fasteners: the two tables of the manufacturer's catalogue, side by side ---------- */
.fs-scope .title { margin-bottom: 30px; }
.fs-tables { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.fs-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.fs-block { min-width: 0; }
.fs-block h3, .fs-note h3 { font: 700 24px/32px var(--font); color: var(--black); margin: 0 0 12px; }
.fs-block .dt-wrap { border: 1px solid rgba(122, 122, 122, 0.18); }
table.fs-dt { font: 400 14.4px/21.6px var(--font); }
table.fs-dt th { padding-left: 12px; white-space: normal; }
table.fs-dt td { padding: 8px 12px; border: 1px solid rgba(122, 122, 122, 0.18); color: #111; vertical-align: middle; }
table.fs-dt td:first-child { font-weight: 600; }
table.fs-dt td:nth-child(n+3) { white-space: nowrap; }
.fs-item { display: flex; align-items: center; gap: 14px; }
.fs-item .ph { flex: 0 0 76px; height: 46px; display: grid; place-items: center; }
.fs-item .ph img { max-width: 76px; max-height: 46px; width: auto; height: auto; }
.fs-note { padding: 30px; background: var(--light); border: 1px solid var(--line); border-radius: 10px; }
.fs-note p { font: 400 16px/24px var(--font); letter-spacing: 0; color: var(--text); margin: 0 0 22px; }

/* under 1200 the two tables no longer fit side by side: one under the other */
@media (max-width: 1199px) {
  .fs-tables { grid-template-columns: minmax(0, 1fr); }
}
/* on a phone every row becomes a small card, so nothing has to be scrolled sideways */
@media (max-width: 767px) {
  .fs-block h3, .fs-note h3 { font-size: 20px; line-height: 28px; }
  .fs-block .dt-wrap { border: 0; overflow: visible; }
  table.fs-dt, table.fs-dt tbody, table.fs-dt tr, table.fs-dt td { display: block; width: 100%; }
  table.fs-dt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.fs-dt tr { padding: 12px 14px; border: 1px solid rgba(122, 122, 122, 0.18); border-radius: 8px; margin-bottom: 10px; background: var(--white); }
  table.fs-dt tbody tr:nth-child(even) { background: #F9ECEC; }
  table.fs-dt tbody tr td, table.fs-dt tbody tr:nth-child(even) td, table.fs-dt tbody tr:hover td { background: none; border: 0; padding: 0; white-space: normal; }
  table.fs-dt td:first-child { font-size: 16px; line-height: 22px; margin-bottom: 8px; }
  table.fs-dt td:not(:first-child) { display: flex; gap: 8px; padding: 2px 0; font-size: 14px; line-height: 21px; }
  table.fs-dt td:not(:first-child)::before { flex: 0 0 96px; font-weight: 600; color: #333; }
  table.fs-dt td:nth-child(2)::before { content: "Standards"; }
  table.fs-dt td:nth-child(3)::before { content: "Size"; }
  table.fs-dt td:nth-child(4)::before { content: "Length"; }
  .fs-item { gap: 12px; }
  .fs-item .ph { flex-basis: 64px; height: 40px; }
  .fs-item .ph img { max-width: 64px; max-height: 40px; }
  .fs-note { padding: 20px; }
}