.tkl-products { overflow-wrap: anywhere; }
.tkl-products .main__inner { box-sizing: border-box; max-width: 65rem; margin: 0 auto; padding: var(--tkl-space-4) var(--tkl-space-4) var(--tkl-space-8); }
.tkl-products h1 { margin: var(--tkl-space-2) 0; font-size: 2rem; line-height: 1.4; }
.tkl-products h2 { margin: var(--tkl-space-8) 0 var(--tkl-space-3); font-size: 1.6rem; }
.tkl-products h3 { margin: var(--tkl-space-4) 0 var(--tkl-space-2); font-size: 1.4rem; }
.tkl-products .main__inner > .bread { padding-inline: 0; }
.tkl-products__count, .tkl-product__muted, .tkl-product__reading { color: var(--tkl-muted); }
.tkl-product-facets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-space-2); margin-block: var(--tkl-space-4); }
.tkl-product-facets a { display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--tkl-control-height); padding: var(--tkl-space-2) var(--tkl-space-3); border: 1px solid var(--tkl-border); border-radius: var(--tkl-radius); color: var(--tkl-ink); text-decoration: none; }
/* Every card grid has tracks wide enough for the compact row; a photo card keeps its square picture, not wider than 200px, inside. */
.tkl-product-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--tkl-space-4); margin: 0; padding: 0; list-style: none; }
.tkl-product-card { display: flex; flex-direction: column; gap: var(--tkl-space-1); height: 100%; }
.tkl-product-card__link { display: flex; flex-direction: column; gap: var(--tkl-space-1); color: var(--tkl-ink); text-decoration: none; }
.tkl-product-card__link > img { max-width: 200px; }
.tkl-product-card__link img { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--tkl-border); border-radius: var(--tkl-radius); background: var(--tkl-surface-muted); }
/* px, not rem: the public theme makes 1rem 8.8px at 900px and below. */
.tkl-product-card__kicker { color: var(--tkl-muted); font-size: 12px; line-height: 1.5; }
.tkl-product-card__name { font-weight: 700; line-height: 1.5; }
.tkl-product-card__link:hover .tkl-product-card__name { text-decoration: underline; }
.tkl-product-card .tkl-product-card__meta, #tcal-page .tkl-product-card__meta, #tkl-article-products p.tkl-product-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-space-1) var(--tkl-space-2); margin: 0; font-size: 13px; line-height: 1.5; }
.tkl-product-card__price { font-size: 14px; font-weight: 700; }
.tkl-product-badge { display: inline-block; margin-inline-end: var(--tkl-space-1); padding: 0 var(--tkl-space-2); border: 1px solid var(--tkl-border); border-radius: 99.9rem; font-size: 12px; line-height: 1.8; }
/* Japanese breaks between phrases, not inside a name; the theme breaks words anywhere. */
.tkl-product-card__name, #tcal-page .tkl-product-card__name, #tkl-article-products .tkl-product-card__name, #tcal-page.tkl-dir .tkl-dir-page__title, #tcal-page .tkl-product__label-for, .tkl-product__shop .tkl-shop-box__title { word-break: keep-all; word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; }
.tkl-product-card__name, #tcal-page .tkl-product-card__name, #tkl-article-products .tkl-product-card__name { text-wrap: pretty; }
#tcal-page.tkl-dir .tkl-dir-page__title, .tkl-product__shop .tkl-shop-box__title { text-wrap: balance; }
.tkl-product__head { display: grid; gap: var(--tkl-space-4); align-items: start; }
@media (min-width: 640px) { .tkl-product__head:has(.tkl-product__image) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.tkl-product__image { margin: 0; }
.tkl-product__image img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; border: 1px solid var(--tkl-border); border-radius: var(--tkl-radius); background: var(--tkl-surface-muted); }
.tkl-product__image figcaption { margin-top: var(--tkl-space-1); color: var(--tkl-muted); font-size: 12px; }
.tkl-product__brand { margin: 0; }
.tkl-product__brand a { color: var(--tkl-muted); }
.tkl-product__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-space-2); }
.tkl-product__description { margin-block: var(--tkl-space-4); line-height: 1.8; }
.tkl-product-articles { margin: 0; padding: 0; list-style: none; }
.tkl-product-articles li { border-bottom: 1px solid var(--tkl-border); }
.tkl-product-articles a { display: grid; grid-template-columns: minmax(70px, 100px) minmax(0, 1fr); gap: var(--tkl-space-3); align-items: center; min-height: var(--tkl-control-height); padding-block: var(--tkl-space-3); color: var(--tkl-ink); }
.tkl-product-articles a:has(img) { grid-template-columns: minmax(70px, 100px) 64px minmax(0, 1fr); }
.tkl-product-articles img { width: 64px; height: 64px; object-fit: contain; }
.tkl-product-articles time { color: var(--tkl-muted); font-size: .85em; }
.tkl-products__pager { display: flex; justify-content: space-between; gap: var(--tkl-space-4); margin-block: var(--tkl-space-6); }
.tkl-products__pager a { display: inline-flex; align-items: center; min-height: var(--tkl-control-height); }
.tkl-products a:focus-visible { outline: 2px solid var(--tkl-action); outline-offset: 2px; }
.tkl-product__nowrap { white-space: nowrap; }
.tkl-product__release { font-weight: 700; }
/* The official page link and the full ingredient labels of a product's page (plan 17 stage F). */
.tkl-product__official { margin-block: var(--tkl-space-2); }
.tkl-product__official a { display: inline-flex; align-items: center; min-height: var(--tkl-control-height); }
.tkl-product__official .tkl-icon, .tkl-product__muted .tkl-icon { width: 16px; height: 16px; flex-basis: 16px; margin-left: 2px; vertical-align: -3px; }
.tkl-product__label-for { margin-block: var(--tkl-space-3) var(--tkl-space-2); font-weight: 700; }
.tkl-product__label-text { margin-block: 0 var(--tkl-space-2); line-height: 1.8; }
.tkl-product__label { margin: 0 0 var(--tkl-space-2); }
.tkl-product__label dt { font-weight: 700; }
.tkl-product__label dd { margin: 0; line-height: 1.8; }
.tkl-product__labels .tkl-dir-past { margin-block: var(--tkl-space-3); }
.tkl-product__labels .tkl-dir-link { display: inline-block; }
/* The first screen (product pages design 3.1): the name beside a small picture of its kind (no photo until the brand
   confirms one), the facts, the shops and the official page. */
.tkl-product__head:has(.tkl-product__picture) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; }
.tkl-product__head:has(.tkl-product__picture) > .tkl-product__picture { grid-column: 1; grid-row: 1; }
.tkl-product__head:has(.tkl-product__picture) > .tkl-product__summary { grid-column: 2; grid-row: 1; min-width: 0; }
.tkl-product__picture { width: 56px; margin: 0; }
/* The picture is transparent; its frame gives the same pink surface as the cards'. */
.tkl-product__picture img { display: block; width: 56px; height: 56px; border: 1px solid var(--tc-line, var(--tkl-border)); border-radius: 12px; background: var(--tkl-accent-surface); }
/* The note that no photo is shown yet: one line under the name. */
.tkl-ui .tkl-product__note { margin: 2px 0 0; color: var(--tkl-muted); font-size: 12px; line-height: 1.5; }
.tkl-ui .tkl-product__summary .tkl-product__reading { margin: 0; }
.tkl-dir-page__owner small { margin-left: 8px; color: var(--tc-sub, var(--tkl-muted)); font-size: 12px; font-weight: 500; }
/* The rows of the facts, not ui.css's two-column list of a .tkl-ui dl. */
.tkl-ui .tkl-product__facts { display: block; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--tc-line, var(--tkl-border)); border-bottom: 0; }
.tkl-product__facts > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--tc-line, var(--tkl-border)); font-size: 13px; }
.tkl-product__facts dt { color: var(--tc-sub, var(--tkl-muted)); font-weight: 400; }
.tkl-product__facts dd { margin: 0; }
#tcal-page.tkl-product .tkl-product__facts .tkl-product__price { font-size: 15px; font-weight: 700; }
.tkl-product__facts dd .tkl-product__muted { display: block; font-size: 12px; }
#tcal-page.tkl-product .tkl-product__facts .tkl-product__release { margin: 0; }
.tkl-product__aside .tkl-shop-box { margin: 14px 0 0; }
/* The shop box's small print reaches 12px on this page (shop-links.css sets 10px and 11px). */
.tkl-product__shop .tkl-shop-pr, .tkl-product__shop .tkl-shop-box__note { font-size: 12px; }

/* The picture of a product's kind on a card (product pages design 5.4): not a photo, so it sits small in a square frame.
   The picture is transparent and the frame gives the pink surface, one rounded box (directory.css rounds it there). The
   card is then a compact row, the picture 56px on the left and the text beside it (the link shares the card's columns). */
.tkl-product-card__picture { display: grid; place-items: center; box-sizing: border-box; aspect-ratio: 1; border: 1px solid var(--tkl-border); border-radius: var(--tkl-radius); background: var(--tkl-accent-surface); }
.tkl-product-card__link .tkl-product-card__picture img { width: 56%; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: none; }
.tkl-product-card:has(.tkl-product-card__picture) { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; align-content: start; box-sizing: border-box; padding: 8px; border: 1px solid var(--tkl-border); border-radius: 10px; }
.tkl-product-card:has(.tkl-product-card__picture) > * { grid-column: 2; }
.tkl-product-card:has(.tkl-product-card__picture) > .tkl-product-card__link { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-auto-rows: min-content; row-gap: 2px; align-content: start; }
.tkl-product-card__link .tkl-product-card__picture { grid-column: 1; grid-row: 1 / span 2; width: 56px; }
.tkl-product-card__link .tkl-product-card__kicker, .tkl-product-card__link .tkl-product-card__name { grid-column: 2; }
.tkl-product-card__link:has(.tkl-product-card__picture) { align-items: start; }

/* The colours or kinds (product pages design 3.3): names only in two columns (as many 176px columns as fit from
   1024px), or a name with what differs; the theme breaks words anywhere, names break at phrases. */
.tkl-products .tkl-product-variants__common { margin: 0 0 12px; font-weight: 700; }
.tkl-product-variants { display: grid; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.tkl-product-variants.is-plain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* px: the theme makes 1rem 8.8px here, so an em or rem width would be too narrow for the names. */
@media (min-width: 1024px) { .tkl-product-variants.is-plain { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
.tkl-product-variants li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--tc-line, var(--tkl-border)); overflow-wrap: anywhere; }
.tkl-product-variants .tkl-product-variants__name { word-break: keep-all; word-break: auto-phrase; }
.tkl-product-variants__values { color: var(--tkl-muted); }
.tkl-products .tkl-product-variants__more, .tkl-products .tkl-product-variants__jan { margin-block: 12px 0; }
/* The rest of the colours: a button across the list (the mock's .more-b), its arrow after the words. */
.tkl-products .tkl-product-variants__more > summary { justify-content: center; gap: 6px; box-sizing: border-box; width: 100%; min-height: 44px; border: 1px solid var(--tc-line, var(--tkl-border)); border-radius: 22px; background: #fff; color: var(--tc-ink, var(--tkl-ink)); font-size: 13px; font-weight: 700; }
.tkl-products .tkl-product-variants__more > summary::before { order: 2; width: 7px; height: 7px; margin-top: -4px; transform: rotate(45deg); }
.tkl-products .tkl-product-variants__more[open] > summary::before { margin-top: 4px; transform: rotate(-135deg); }
.tkl-ui .tkl-product-variants__jan p { margin: 0 0 8px; }

/* The colour switch of the labels (products.js): a stacked label and select (ui.css control tokens; the theme resets select
   to appearance:none, so the arrow is restored), the chosen label's colours under the select, the folded labels open
   without their summaries. Scoped under .tkl-ui so ui.css's p/details rules (0,1,1) do not override it. */
.tkl-ui .tkl-product__label-select { margin: 12px 0 0; }
/* The select's place in the page, as high as the select with its label, so that products.js moves nothing below it.
   It is reserved only once a script in the page marks the part (.is-reserving) and given up when products.js did not
   switch the part by the time the page has loaded. */
.tkl-product__label-slot { display: flow-root; }
.tkl-product__label-part.is-reserving .tkl-product__label-slot { min-height: 88px; }
.tkl-ui .tkl-product__label-select label { margin: 0 0 var(--tkl-space-2); }
.tkl-ui .tkl-product__label-select select { appearance: auto; -webkit-appearance: menulist; border: 1px solid var(--tkl-control-border); background: var(--tkl-surface); font-size: 16px; }
.tkl-ui .tkl-product__label-part.is-switched [data-label-group] > .tkl-product__label-for,
.tkl-ui .tkl-product__label-part.is-switched [data-label-group] > details > summary { display: none; }
.tkl-ui .tkl-product__label-part.is-switched [data-label-group] > details { margin: 0; border: 0; padding: 0; }
.tkl-ui .tkl-product__label-part .tkl-product__label-for[hidden] { display: none; }

/* The releases: one dl per release. From 640px its parts sit in columns, each with its small label above; below 640px
   each part is a line with the label beside it. */
.tkl-ui .tkl-product__release-list dl { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 16px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--tc-line, var(--tkl-border)); }
.tkl-product__release-list dl > div { min-width: 0; }
.tkl-product__release-list dt { color: var(--tc-sub, var(--tkl-muted)); font-size: 12px; font-weight: 400; }
.tkl-product__release-list dd { margin: 0; }
.tkl-product__release-list dl > div:first-child > dd { font-weight: 700; }
@media (max-width: 639px) {
  .tkl-ui .tkl-product__release-list dl { display: block; }
  .tkl-product__release-list dl > div { display: flex; gap: 12px; padding: 1px 0; }
  .tkl-product__release-list dt { flex: 0 0 5em; }
  .tkl-product__release-list dd { flex: 1 1 0; min-width: 0; }
}

/* The steps to the release (product pages design 3.2): a vertical line of dated steps with today's place marked. */
.tkl-ui .tkl-product-flow { margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--tc-line, var(--tkl-border)); list-style: none; }
.tkl-ui .tkl-product-flow li { position: relative; margin: 0; padding: 8px 0; word-break: normal; overflow-wrap: anywhere; }
.tkl-ui .tkl-product-flow li::before { content: ""; position: absolute; top: 15px; left: -24px; width: 10px; height: 10px; border-radius: 50%; background: var(--tc-blush, #f3dde3); border: 1px solid var(--tc-rose, #c97b8e); }
.tkl-ui .tkl-product-flow__today { color: var(--tc-rose-ink, #a1445c); font-weight: 700; }
.tkl-ui .tkl-product-flow li.tkl-product-flow__today::before { background: var(--tc-rose-ink, #a1445c); }
.tkl-ui .tkl-product-flow__date { font-weight: 700; }
.tkl-ui .tkl-product-flow__meta, .tkl-ui .tkl-product-flow__links { display: block; color: var(--tkl-muted); font-size: 12px; }
.tkl-ui .tkl-product-flow__step.is-cancelled .tkl-product-flow__planned { text-decoration: line-through; }
/* The summary section keeps its own margins: ui.css gives every .tkl-ui section a 24px block margin. */
.tkl-ui .tkl-product__aside { margin-block: var(--tkl-space-4) 0; }
/* Product pages design 3.7: from 1024px the page widens and splits — the summary and its actions on the right, kept in
   view, the steps, variants, labels and articles on the left, 次に見る across both columns below them, then the actions.
   Only the product's own page (.tkl-products--detail): the series page shares #tcal-page.tkl-product but stays one column.
   Below 1024px one column in the same order. */
@media (min-width: 1024px) {
  .tkl-products--detail .main__inner { max-width: 1120px; }
  .tkl-products--detail #tcal-page.tkl-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); grid-template-areas: "owner owner" "head aside" "main aside" "next next" "actions actions"; grid-template-rows: auto auto 1fr auto auto; column-gap: 40px; align-items: start; }
  .tkl-products--detail #tcal-page.tkl-product > .tkl-dir-page__owner { grid-area: owner; justify-self: start; }
  .tkl-products--detail #tcal-page.tkl-product > .tkl-product__head { grid-area: head; }
  .tkl-products--detail #tcal-page.tkl-product > .tkl-product__aside { grid-area: aside; margin-block: 0; }
  .tkl-products--detail #tcal-page.tkl-product > .tkl-product__main { grid-area: main; min-width: 0; }
  .tkl-products--detail #tcal-page.tkl-product > .tkl-actions { grid-area: actions; }
  /* 次に見る spans both columns, below the sticky summary: other products' cards never sit beside it; the actions follow it, as in the page's order. */
  .tkl-products--detail #tcal-page.tkl-product > .tkl-product__next { grid-area: next; min-width: 0; }
  .tkl-products--detail #tcal-page.tkl-product > .tkl-product__main > section:first-child { margin-top: 0; }
  .tkl-products--detail #tcal-page.tkl-product .tkl-dir-page__title { font-size: 24px; }
  .tkl-products--detail #tcal-page.tkl-product .tkl-dir-page__owner .tkl-dir-mark { font-size: 22px; }
}
/* Kept in view on screens only; the padding keeps the focus ring of the links inside the scrolling box. */
@media screen and (min-width: 1024px) {
  .tkl-products--detail #tcal-page.tkl-product > .tkl-product__aside { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; padding-inline: 4px; margin-inline: -4px; }
}

/* この記事の商品 inside the article body (product pages design 4): the theme's article rules carry an ID's weight, so
   the section's own id keeps its heading, list, paragraphs, images and links plain. */
#tkl-article-products { margin: 2.4em 0; }
#tkl-article-products .tkl-article-products__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; line-height: 1.4; }
#tkl-article-products ul.tkl-product-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
#tkl-article-products ul.tkl-product-cards > li { margin: 0; padding: 0; list-style: none; }
#tkl-article-products ul.tkl-product-cards > li::before, #tkl-article-products ul.tkl-product-cards > li::after { content: none; }
#tkl-article-products a.tkl-product-card__link { color: var(--tkl-ink); text-decoration: none; }
#tkl-article-products p.tkl-product-card__meta, #tkl-article-products p.tkl-product-card__match { margin: 0; }
#tkl-article-products img { margin: 0; }

/* The product search (product pages design 6): the form, and the brand rows of the results. */
.tkl-product-search { display: flex; gap: 8px; margin: 14px 0 0; }
.tkl-product-search__field { flex: 1 1 auto; min-width: 0; margin: 0; }
.tkl-product-search__field input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--tc-line, var(--tkl-border)); border-radius: 10px; background: #fff; font-size: 16px; }
.tkl-product-search__button { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--tc-ink, var(--tkl-ink)); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.tkl-product-search__button:focus-visible, .tkl-product-search__field input:focus-visible { outline: 2px solid var(--tc-rose-ink, var(--tkl-action)); outline-offset: 2px; }
#tcal-page .tkl-product-search__list { margin: 0; padding: 0; list-style: none; }
#tcal-page .tkl-product-search__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; min-height: 44px; margin: 0; border-bottom: 1px solid var(--tc-line, var(--tkl-border)); font-size: 13px; }
.tkl-product-search__list a { text-decoration: none; }
.tkl-product-search__list small { margin-left: 8px; color: var(--tc-sub, var(--tkl-muted)); }
/* The way back from a narrowed search reads as a link. */
#tcal-page.tkl-product-search-page .tkl-dir-page__lede a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* A linked ingredient name of a label (product pages design 6.2, while the ingredient search is on). */
.tkl-product__ingredient { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* What an ingredient search found on a card: the colours it was found for and 有効成分. */
.tkl-product-card__match { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; color: var(--tkl-muted); font-size: 12px; }
.tkl-product-card p.tkl-product-card__match, #tcal-page .tkl-product-card__match { margin: 0; }

/* Fingers: the shop buttons reach 44px where a pointer is coarse (the chips do, in directory.css). */
@media (pointer: coarse) {
  .tkl-product__shop .tkl-shop-box__shop { min-height: 44px; }
}

/* The links of the page's own text (the facts' jumps, the official page, the label sources) read as the page's other
   links do (the 「…をすべて見る」 links): the rose ink, underlined; the theme's link colours and .tcal's would otherwise win. */
#tcal-page.tkl-product a.tkl-dir-link { color: var(--tc-rose-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The jumps from the summary and the headings with ids land below the fixed header (6rem: 60px, 53px on phones), with
   room for a larger browser font. */
#tcal-page.tkl-product :is(h2, h3, section)[id] { scroll-margin-top: calc(6rem + 24px); }