/* Hima Cafe product styling — 2026-10-08. Replace hmcf_product.css. */
/* Product accordion. Load after existing CSS. Preserve layout and empty-item handling. */
body.fs-body-product .fs-accordion {
  margin-top: 32px;
  border-top: 1px solid #E2E2E2;
}
body.fs-body-product .fs-accordion > details.js-accordion-item {
  margin: 0;
  border-bottom: 1px solid #E2E2E2;
  border-radius: 0;
  box-shadow: none;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > summary {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 60px;
  padding: 18px 48px 18px 12px;
  color: #353634;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::-webkit-details-marker { display: none; }
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::marker { content: ''; }
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::before,
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 17px;
  width: 14px;
  height: 2px;
  background: #666666;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity .15s ease;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::after { transform: translateY(-50%) rotate(90deg); }
body.fs-body-product .fs-accordion > details.js-accordion-item[open] > summary { background: #F3F3F3; }
body.fs-body-product .fs-accordion > details.js-accordion-item[open] > summary::after { opacity: 0; }
body.fs-body-product .fs-accordion > details.js-accordion-item > summary:focus-visible { outline: 2px solid #666666; outline-offset: -2px; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content {
  padding: 20px 0 24px;
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  word-break: normal;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > .content > :first-child { margin-top: 0; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content > :last-child { margin-bottom: 0; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content img { max-width: 100%; height: auto; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content iframe { max-width: 100%; }
@media (hover: hover) {
  body.fs-body-product .fs-accordion > details.js-accordion-item > summary:hover { background: #F3F3F3; }
}
@media (max-width: 768px) {
  body.fs-body-product .fs-accordion { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  body.fs-body-product .fs-accordion > details.js-accordion-item > summary,
  body.fs-body-product .fs-accordion > details.js-accordion-item > summary::before,
  body.fs-body-product .fs-accordion > details.js-accordion-item > summary::after { transition: none; }
}

/* Hima Cafe product content: common CSS */
.hmcf-pd { color: #353634; font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.hmcf-pd, .hmcf-pd * { box-sizing: border-box; }
.hmcf-pd > :first-child { margin-top: 0; }
.hmcf-pd > :last-child { margin-bottom: 0; }
.hmcf-pd p { margin: 0 0 1em; }
.hmcf-pd h2 { margin: 0 0 20px; padding: 0 0 12px; border-bottom: 1px solid #E2E2E2; color: #353634; font-size: 22px; line-height: 1.5; background: none; }
.hmcf-pd h3 { margin: 28px 0 12px; color: #353634; font-size: 18px; line-height: 1.6; background: none; border: 0; padding: 0; }
.hmcf-pd ul { margin: 0 0 1em; padding-left: 1.4em; list-style: disc; }
.hmcf-pd li { margin-bottom: .4em; }
.hmcf-pd img { display: block; max-width: 100%; height: auto; margin: 20px auto; border: 1px solid #E2E2E2; border-radius: 12px; }
.hmcf-pd a { color: #715323; text-decoration: underline; text-underline-offset: .2em; }
.hmcf-pd a:focus-visible { outline: 2px solid #715323; outline-offset: 4px; }
.hmcf-pd .hmcf-pd__label { margin: 0 0 6px; font-weight: 700; }
.hmcf-pd .hmcf-pd__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.hmcf-pd .hmcf-pd__table th, .hmcf-pd .hmcf-pd__table td { border: 1px solid #E2E2E2; padding: 12px 14px; text-align: left; vertical-align: top; color: #353634; }
.hmcf-pd .hmcf-pd__table th { width: 28%; background: #F7F7F7; font-weight: 600; }
.hmcf-pd .hmcf-pd__table td { background: #fff; }
.hmcf-pd .hmcf-pd__scroll { overflow-x: auto; }
.hmcf-pd .hmcf-pd__scroll:focus-visible { outline: 2px solid #715323; outline-offset: 2px; }
.hmcf-pd .hmcf-pd__size { min-width: 420px; }
.hmcf-pd .hmcf-pd__size th { width: auto; }
.hmcf-pd .hmcf-pd__note { margin-top: 12px; font-size: 14px; }
@media (max-width: 600px) {
  .hmcf-pd h2 { font-size: 20px; }
  .hmcf-pd h3 { font-size: 17px; }
  .hmcf-pd .hmcf-pd__table th, .hmcf-pd .hmcf-pd__table td { padding: 10px; }
  .hmcf-pd .hmcf-pd__table th { width: 30%; }
  .hmcf-pd .hmcf-pd__size th { width: auto; }
}
/* Sales notice: use inside product description (small). */
body.fs-body-product .hmcf-pd.hmcf-pd--notice {
  box-sizing: border-box;
  margin: 20px 0;
  padding: 16px 18px;
  border: 0;
  border-left: 4px solid #D98B9B;
  border-radius: 0 8px 8px 0;
  background: #FFF1F3;
  color: #353634;
  font-size: 15px;
  line-height: 1.8;
}
body.fs-body-product .hmcf-pd--notice .hmcf-pd__label { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
body.fs-body-product .hmcf-product-size { margin-top: 28px; }
body.fs-body-product .hmcf-product-size[hidden],
body.fs-body-product .hmcf-product-specs[hidden] { display: none; }

body.fs-body-product .fs-accordion > details.js-accordion-item > .content table { width: 100%; border-collapse: collapse; }

/* Heading hierarchy inside both legacy and new accordion content. */
body.fs-body-product .fs-accordion > details.js-accordion-item > .content :is(h2, h3, h4) {
  margin: 24px 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #353634;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > .content :is(h2, h3, h4) :is(span, strong) {
  font-size: inherit;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > .content .hmcf-pd { font-size: 15px; }
/* Tables in legacy content also use neutral gray. */
body.fs-body-product .fs-accordion > details.js-accordion-item > .content table :is(th, td) {
  color: #353634;
  border-color: #E2E2E2;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > .content table th { background: #F7F7F7; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content table td { background: #FFFFFF; }