/* ==========================================================================
   meirune — product.css: 商品詳細 (and 定期) pages - layout, quantity stepper and
   RELATED ITEMS. Loaded after base.css by the mr.css.product part in the head of
   those layouts. The cards inside RELATED ITEMS are drawn by base.css.
   ========================================================================== */

/* ==========================================================================
   Product detail (#fs_ProductDetails, and #fs_ProductDetailsSubscribe for what the
   two pages share - the 定期 page's own parts and placement are at the end of the file)

   In the skeleton theme every part is a direct child of `.fs-l-productLayout` - no
   item wrappers - in this order: image, name, number, price, wishlist + quantity,
   cart, 返品特約, inquiry, description, review. Below b they stack as a column in the
   design's order. From b the layout is a two-column grid with every part placed
   explicitly: the image takes the first column across the detail rows plus a closing
   1fr row, so an image taller than the details grows that last row rather than prising
   the detail rows apart; description and review take full-width rows underneath.
   The wishlist-and-quantity wrapper is unwrapped (display: contents) so the wishlist
   can sit under the cart button without touching the DOM futureshop's scripts use.

   Both image parts are covered: 商品画像パーツ・フリック (.fs-c-productCarouselMainImage,
   what the skeleton layout ships with) and 商品画像パーツ (.fs-c-productMainImage with
   a thumbnail rail, which is what the design draws).
   ========================================================================== */

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 24px;
  color: var(--mr-ink);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productQuantityAndWishlist {
  display: contents;
}

/* Anything futureshop adds that is not placed below - variation or subscription
   selectors, stock notes - lands between the price and the quantity. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout > * {
  order: 5;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productCarouselMainImage, .fs-c-productMainImage) {
  order: 1;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail, .fs-c-productCarouselMainImage__thumbnailList) {
  order: 2;
}

/* The margin is spelled out in full: an <h1> otherwise keeps the browser's 0.67em below. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productNameHeading {
  order: 3;
  margin: 32px 0 0;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail {
  order: 4;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productQuantityAndWishlist__quantity {
  order: 6;
}

#fs_ProductDetails .fs-c-productActionButton {
  order: 7;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productQuantityAndWishlist__wishlist {
  order: 8;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract {
  order: 9;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-inquiryAboutProduct {
  order: 10;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full {
  order: 11;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productReview {
  order: 12;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productCarouselMainImage__expandButton, .fs-c-productMainImage__expandButton),
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productNameHeading__copy,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productNumber,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail :is(.fs-c-productPrice__main__label, .fs-c-price__currencyMark) {
  display: none;
}

/* Image, flick part: slick opens it centred with 50px of the neighbours showing; the
   design frames one image at a time, so the side padding goes and each slide takes
   the full frame. The shot sits in the same 3:5 portrait box as the cards. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage {
  position: relative;
  margin: 0;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage__carousel {
  container-type: inline-size;
  background: #fff;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage .slick-list {
  height: auto !important;
  padding: 0 !important;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage .slick-slide {
  width: 100cqw;
}

/* With more than one image the flick part builds its own thumbnail rail - slick's dot
   list, one <li> per image, the current one marked slick-active - which takes the
   design's rail through the thumbnail rules shared with the standard part below.
   slick listens on the <li>, so the whole tile is the click target. The part's
   prev/next arrows are dropped: the design has none on the main image, and the system
   stylesheet stacks them at z-index 9999, over the sticky header. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage .slick-arrow {
  display: none !important;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage__thumbnailList {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage__thumbnailList > li:hover,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage__thumbnailList > li.slick-active {
  border-color: var(--mr-ink);
}

/* Arrows either side of the thumbnail rail (mr.product.gallery, product-gallery.html),
   as the design draws them: 20px dark rounds in a 30px gutter the rail keeps each side,
   centred on the tiles. They sit at the foot of the image part, level with the rail,
   whose tiles are --mr-thumb square (the widths set further down). */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage {
  --mr-thumb: 60px;
}

/* The gutter is a margin, not padding: the rail's own box then ends where the tiles do,
   so a tile scrolled past either end is cut off there instead of showing in the gutter
   under the arrow. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage.mr-gallery-ready .fs-c-productCarouselMainImage__thumbnailList {
  margin-right: 30px;
  margin-left: 30px;
  padding: 0;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-gallery__arrow {
  position: absolute;
  bottom: calc(var(--mr-thumb) / 2);
  z-index: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent center / contain no-repeat;
  cursor: pointer;
  transform: translateY(50%);
  transition: opacity var(--mr-ease);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-gallery__arrow--prev {
  left: 0;
  background-image: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/slide-detail-back.svg");
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-gallery__arrow--next {
  right: 0;
  background-image: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/slide-detail-next.svg");
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-gallery__arrow:hover {
  opacity: 0.7;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-gallery__arrow:disabled {
  cursor: default;
  opacity: 0.3;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-gallery__arrow:focus-visible {
  outline: 2px solid var(--mr-ink);
  outline-offset: 2px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage__thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage__thumbnail__img {
  display: block;
  width: 52%;
  max-width: none;
  height: auto;
  aspect-ratio: 125 / 208;
  object-fit: contain;
  opacity: 1;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productCarouselMainImage__image, .fs-c-productMainImage__image) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productCarouselMainImage__image, .fs-c-productMainImage__image) img {
  display: block;
  width: 45%;
  max-width: none;
  height: auto;
  aspect-ratio: 125 / 208;
  object-fit: contain;
}

/* Image, standard part: main frame plus a thumbnail rail that scrolls sideways;
   futureshop swaps the main image on click. The rail is hidden when there is only
   one image, as the design does. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productMainImage {
  position: relative;
  margin: 0;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail, .fs-c-productCarouselMainImage__thumbnailList) {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productThumbnail::-webkit-scrollbar {
  display: none;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productThumbnail:has(> :only-child) {
  display: none;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail__image, .fs-c-productCarouselMainImage__thumbnailList > li) {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  min-width: 0;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--mr-line);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--mr-ease);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productThumbnail__image:hover,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productThumbnail__image.is-active {
  border-color: var(--mr-ink);
}

/* futureshop listens for clicks on the <img> itself, so the image fills the whole tile
   and the padding shrinks the picture to the design's 52%: a click anywhere in the
   tile, not only on the shot, swaps the main image. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productThumbnail__image > img {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 24%;
  object-fit: contain;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productNameHeading {
  color: var(--mr-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

/* 「3,300円（税込）」 with the tax note set smaller, as the design has it. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail {
  margin-top: 16px;
  color: var(--mr-ink);
  font-size: 16px;
  font-weight: 700;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail :is(.fs-c-productPrice, .fs-c-productPrice__main, .fs-c-price) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail .fs-c-price__value::after {
  content: "円";
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail .fs-c-productPrice__addon__label {
  margin-left: 4px;
  font-size: 12px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail .fs-c-productPrice__addon__label::before {
  content: "（";
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail .fs-c-productPrice__addon__label::after {
  content: "）";
}

/* futureshop's quantity is a select (1-9, then 10+ for a text box), drawn here as a
   plain box with a chevron in place of the design's stepper. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 16px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-right: 1px solid #777777;
  border-bottom: 1px solid #777777;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity__select,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity__number {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 40px 0 16px;
  border: 1px solid var(--mr-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--mr-ink);
  font: inherit;
  font-size: 14px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity__select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Both calls to action share the pill geometry; only the fill differs. */
#fs_ProductDetails .fs-c-productActionButton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton button,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mr-red);
  border-radius: 9999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--mr-ease);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton button {
  background: var(--mr-red);
  color: #fff;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton button:hover {
  border-color: var(--mr-red-dark);
  background: var(--mr-red-dark);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton button::before,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail)::before,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--inquiryAboutProduct, .fs-c-button--addReview--detail)::before {
  content: none;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToCart--detail, .fs-c-button--addToCart--subscriptionDetail, [class*="fs-c-button--addToSubscriptionCart--detail"])::after,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail)::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/cart-white.svg") center / contain no-repeat;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productQuantityAndWishlist__wishlist {
  display: block;
  margin-top: 16px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail) {
  gap: 12px;
  background: #fff;
  color: var(--mr-red);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail)::after {
  background-image: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/heart-red.svg");
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail):hover {
  background: var(--mr-bg);
}

/* 返品特約, the inquiry button and レビューを書く read as the design's underlined links. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract {
  margin-top: 20px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-inquiryAboutProduct {
  margin-top: 6px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productReview {
  margin-top: 20px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract a,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--inquiryAboutProduct, .fs-c-button--addReview--detail) {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mr-ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract a:hover,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--inquiryAboutProduct, .fs-c-button--addReview--detail):hover {
  opacity: 0.65;
}

/* The description part carries no heading of its own; 「商品説明」 is drawn on it. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full {
  margin-top: 32px;
  padding: 0 10px 10px;
  border-top: 1px solid var(--mr-ink);
  border-bottom: 1px solid var(--mr-ink);
  color: var(--mr-ink);
  font-size: 10px;
  line-height: 1.9;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full::before {
  content: "商品説明";
  display: block;
  margin-bottom: 10px;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full p {
  margin: 0;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full p + p {
  margin-top: 1.9em;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full a {
  text-decoration: underline;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout {
    padding: 44px 32px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full {
    margin-top: 44px;
    padding: 0 16px 16px;
    font-size: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full::before {
    margin-bottom: 16px;
    padding-top: 16px;
    font-size: 15px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail, .fs-c-productCarouselMainImage__thumbnailList) {
    gap: 12px;
    margin-top: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail__image, .fs-c-productCarouselMainImage__thumbnailList > li) {
    width: 90px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage {
    --mr-thumb: 90px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productNameHeading {
    font-size: 15px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail {
    margin-top: 20px;
    font-size: 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail .fs-c-productPrice__addon__label {
    font-size: 13px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity {
    width: 128px;
    margin-top: 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton button,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail) {
    font-size: 15px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract a,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--inquiryAboutProduct, .fs-c-button--addReview--detail) {
    font-size: 13px;
  }
}

/* From b the images and the details sit side by side. */
@media (min-width: 1280px) {
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout {
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    grid-template-rows: repeat(7, auto) 1fr;
    align-items: start;
    column-gap: 60px;
    padding: 70px 80px 58px;
  }

  /* Unplaced parts join the details column, after the placed ones. */
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout > * {
    grid-column: 2;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productCarouselMainImage, .fs-c-productMainImage) {
    grid-column: 1;
    grid-row: 1 / 9;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail, .fs-c-productCarouselMainImage__thumbnailList) {
    grid-column: 1;
    grid-row: 9;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productNameHeading {
    grid-row: 1;
    margin-top: 0;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail {
    grid-row: 2;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productQuantityAndWishlist__quantity {
    grid-column: 2;
    grid-row: 3;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton {
    grid-row: 4;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productQuantityAndWishlist__wishlist {
    grid-column: 2;
    grid-row: 5;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract {
    grid-row: 6;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-inquiryAboutProduct {
    grid-row: 7;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full {
    grid-column: 1 / -1;
    grid-row: 10;
    margin-top: 70px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productReview {
    grid-column: 1 / -1;
    grid-row: 11;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full::before {
    margin-bottom: 18px;
    font-size: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail__image, .fs-c-productCarouselMainImage__thumbnailList > li) {
    width: 104px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage {
    --mr-thumb: 104px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productNameHeading {
    font-size: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail {
    margin-top: 24px;
    font-size: 24px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail .fs-c-productPrice__addon__label {
    font-size: 14px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity {
    margin-top: 24px;
  }

  #fs_ProductDetails .fs-c-productActionButton {
    gap: 24px;
    margin-top: 40px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton button,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail) {
    gap: 24px;
    height: 65px;
    font-size: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToCart--detail, .fs-c-button--addToCart--subscriptionDetail, [class*="fs-c-button--addToSubscriptionCart--detail"])::after,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail)::after {
    width: 20px;
    height: 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail) {
    gap: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productQuantityAndWishlist__wishlist {
    margin-top: 24px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract {
    margin-top: 32px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract a,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--inquiryAboutProduct, .fs-c-button--addReview--detail) {
    font-size: 14px;
  }
}

@media (min-width: 1600px) {
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout {
    grid-template-columns: 600px minmax(0, 1fr);
    column-gap: 100px;
    padding: 100px 0 70px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full {
    margin-top: 100px;
    padding: 0 20px 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-p-productDescription--full::before {
    margin-bottom: 20px;
    padding-top: 20px;
    font-size: 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail, .fs-c-productCarouselMainImage__thumbnailList) {
    gap: 20px;
    margin-top: 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-productThumbnail__image, .fs-c-productCarouselMainImage__thumbnailList > li) {
    width: 120px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productCarouselMainImage {
    --mr-thumb: 120px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productNameHeading {
    font-size: 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail {
    margin-top: 30px;
    font-size: 28px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productPrices--productDetail .fs-c-productPrice__addon__label {
    font-size: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity {
    width: 160px;
    margin-top: 30px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity::after {
    top: 25px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity__select,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity__number {
    height: 50px;
    font-size: 16px;
  }

  #fs_ProductDetails .fs-c-productActionButton {
    gap: 40px;
    margin-top: 60px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productActionButton button,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail) {
    gap: 30px;
    height: 80px;
    font-size: 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToCart--detail, .fs-c-button--addToCart--subscriptionDetail, [class*="fs-c-button--addToSubscriptionCart--detail"])::after,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail)::after {
    width: 24px;
    height: 24px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--addToWishList--detail, .fs-c-button--removeFromWishList--detail) {
    gap: 20px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productQuantityAndWishlist__wishlist {
    margin-top: 40px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract {
    margin-top: 40px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-inquiryAboutProduct {
    margin-top: 10px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-returnedSpecialContract a,
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(.fs-c-button--inquiryAboutProduct, .fs-c-button--addReview--detail) {
    font-size: 16px;
  }
}

/* ==========================================================================
   Product detail: quantity stepper (.mr-qty, built by product-quantity.html)

   The script puts futureshop's quantity into its own text-box mode - the state it
   switches to for 10+: the <select> disabled and hidden, <input name="quantity">
   enabled - and adds a button either side. Without the script the plain select drawn
   above still works.
   ========================================================================== */

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity.mr-qty {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  border: 1px solid var(--mr-line);
  background: #fff;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity.mr-qty::after {
  content: none;
}

/* The signs are drawn as bars, as in the cart (.mr-cart-qty): the script's − / + text
   is kept for the markup but not shown. The plus is told apart by its aria-label. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mr-ink);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step::before,
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step[aria-label="数量を増やす"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step[aria-label="数量を増やす"]::after {
  width: 2px;
  height: 13px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step:hover {
  opacity: 0.6;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step:disabled {
  cursor: default;
  opacity: 0.35;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step:focus-visible {
  outline: 2px solid var(--mr-ink);
  outline-offset: -2px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty .fs-c-quantity__number {
  flex: none;
  width: 48px;
  height: 40px;
  padding: 0;
  border: 0;
  outline: none;
  font-size: 14px;
  text-align: center;
  -moz-appearance: textfield;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty .fs-c-quantity__number:focus-visible {
  outline: 2px solid var(--mr-ink);
  outline-offset: -2px;
}

/* From md the box shrinks to its content: one outline, no rules inside, as in the cart. */
@media (min-width: 768px) {
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity.mr-qty {
    gap: 0;
    align-self: flex-start;
    justify-self: start;
    width: max-content;
  }
}

@media (min-width: 1600px) {
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step {
    width: 50px;
    height: 50px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step::before {
    width: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty__step[aria-label="数量を増やす"]::after {
    width: 2px;
    height: 16px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty .fs-c-quantity__number {
    width: 60px;
    height: 50px;
    font-size: 16px;
  }
}

/* futureshop's message slot sits after the buttons; out of the flex row it neither
   takes a gap nor pushes the stepper off centre, and it shows under the box when
   there is something to say. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty {
  position: relative;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty .fs-c-quantity__message {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty .fs-c-quantity__message:empty {
  display: none;
}

/* futureshop marks a rejected quantity with is-error; keep that visible on the box. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-quantity.mr-qty:has(.is-error) {
  border-color: #da4453;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .mr-qty .fs-c-quantity__number.is-error {
  background: #fceef0;
}

/* ==========================================================================
   Product detail: RELATED ITEMS (the おすすめ商品 system part)

   futureshop draws the part with the same carousel as the 任意商品表示パーツ, so the
   carousel and card rules above are shared with it through
   `:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel`. What differs from the top-page rows:
   three large cards from md at every desktop width, the larger heart, and a heading
   set left in the Didot face. The heading's text comes from コマースクリエイター >
   メッセージ (おすすめ商品見出し) - set it to RELATED ITEMS there.

   The part may sit inside the product layout or below it; both are covered. Inside,
   it takes a full-width row after everything else and the layout's gutters; below,
   it carries its own 1600px container.
   ========================================================================== */

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout > :is(.fs-c-productListCarousel, :has(.fs-c-productListCarousel)) {
  order: 13;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel {
  position: relative;
  display: block;
  box-sizing: border-box;
  margin-top: 20px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(h2, h3, .fs-c-heading, .fs-c-featuredProduct__header):has(+ .fs-c-productListCarousel) {
  box-sizing: border-box;
  margin: 0;
  color: var(--mr-ink);
  font-family: var(--mr-en);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

/* Below the product layout: the section's own container and vertical rhythm. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(h2, h3, .fs-c-heading, .fs-c-featuredProduct__header):has(+ .fs-c-productListCarousel):not(.fs-l-productLayout *) {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel:not(.fs-l-productLayout *) {
  width: 100%;
  max-width: 1600px;
  margin: 20px auto 0;
  padding: 0 24px 32px;
}

/* Inside the product layout the gutters belong to the layout, so the mobile arrows
   step out into them. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout .fs-c-productListCarousel .fs-c-productListCarousel__ctrl--prev {
  left: -20px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout .fs-c-productListCarousel .fs-c-productListCarousel__ctrl--next {
  right: -20px;
}

:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout > :is(.fs-c-productListCarousel, :has(.fs-c-productListCarousel)) {
  margin-top: 40px;
}

/* The larger heart the related row uses. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel :is(.fs-c-button--addToWishList--icon, .fs-c-button--removeFromWishList--icon) {
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
}

/* The おすすめ商品パーツ as it renders below the layout: div.fs-c-featuredProduct >
   div.fs-c-featuredProduct__header > h2.fs-c-featuredProduct__title, then the carousel.
   The header takes the heading rules above (container, face, size); the h2 inside only
   drops the browser's margins and size. */
:is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-featuredProduct__title {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
}

@media (min-width: 768px) {
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(h2, h3, .fs-c-heading, .fs-c-featuredProduct__header):has(+ .fs-c-productListCarousel) {
    font-size: 18px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(h2, h3, .fs-c-heading, .fs-c-featuredProduct__header):has(+ .fs-c-productListCarousel):not(.fs-l-productLayout *) {
    padding: 50px 32px 0;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel {
    margin-top: 28px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel:not(.fs-l-productLayout *) {
    margin-top: 28px;
    padding: 0 32px 44px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout > :is(.fs-c-productListCarousel, :has(.fs-c-productListCarousel)) {
    margin-top: 50px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel :is(.slick-track, .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized)) {
    gap: 18px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel :is(.fs-c-button--addToWishList--icon, .fs-c-button--removeFromWishList--icon) {
    width: 40px;
    height: 40px;
  }
}

/* The top-page rows go to five across from b; the related row keeps three. */
@media (min-width: 1280px) {
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(h2, h3, .fs-c-heading, .fs-c-featuredProduct__header):has(+ .fs-c-productListCarousel) {
    font-size: 22px;
    letter-spacing: 0.12em;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(h2, h3, .fs-c-heading, .fs-c-featuredProduct__header):has(+ .fs-c-productListCarousel):not(.fs-l-productLayout *) {
    padding: 70px 80px 0;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel {
    margin-top: 34px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel:not(.fs-l-productLayout *) {
    margin-top: 34px;
    padding: 0 80px 58px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout > :is(.fs-c-productListCarousel, :has(.fs-c-productListCarousel)) {
    grid-column: 1 / -1;
    grid-row: 12;
    margin-top: 70px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel :is(.slick-track, .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel :is(.fs-c-button--addToWishList--icon, .fs-c-button--removeFromWishList--icon) {
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }
}

@media (min-width: 1600px) {
  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(h2, h3, .fs-c-heading, .fs-c-featuredProduct__header):has(+ .fs-c-productListCarousel) {
    font-size: 24px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) :is(h2, h3, .fs-c-heading, .fs-c-featuredProduct__header):has(+ .fs-c-productListCarousel):not(.fs-l-productLayout *) {
    padding: 100px 0 0;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel {
    margin-top: 42px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel:not(.fs-l-productLayout *) {
    margin-top: 42px;
    padding: 0 0 70px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-l-productLayout > :is(.fs-c-productListCarousel, :has(.fs-c-productListCarousel)) {
    margin-top: 100px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel :is(.slick-track, .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized)) {
    gap: 50px;
  }

  :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel :is(.fs-c-button--addToWishList--icon, .fs-c-button--removeFromWishList--icon) {
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
  }
}

/* ==========================================================================
   Product detail, 定期 (#fs_ProductDetailsSubscribe)

   What differs from the ordinary page. The parts are direct children of the layout
   here too, in this order: image, name, number, marks (1回のみ・定期 / 初回特別価格あり),
   price, the 定期 price table, wishlist, then one block per way of buying - 1回のみ
   (button + quantity) and 定期 (button + quantity, .fs-c-productQuantityAndAction--
   subscription) - then 返品特約, inquiry, description, review. There is no design for
   this page; it follows the ordinary product page.

   Each block keeps its own quantity: futureshop sends only the fields whose
   data-cart-type matches the button pressed, so the quantity stays inside its block,
   drawn before the button, and the stepper script works on both boxes. The 1回のみ
   price carries a 「1回のみ」 caption only when the product can also be bought once, and
   the table is captioned 「定期購入」. The wishlist moves under the two blocks.
   ========================================================================== */

#fs_ProductDetailsSubscribe .fs-c-productMarks {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

#fs_ProductDetailsSubscribe .fs-c-productMarks:not(:has(.fs-c-mark)) {
  display: none;
}

#fs_ProductDetailsSubscribe .fs-c-productMarks .fs-c-mark {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 10px;
  border: 1px solid var(--mr-red);
  border-radius: 9999px;
  background: #fff;
  color: var(--mr-red);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
}

#fs_ProductDetailsSubscribe .fs-c-productMarks .fs-c-mark--firstTimeSpecialPrice {
  background: var(--mr-red);
  color: #fff;
}

#fs_ProductDetailsSubscribe .fs-l-productLayout:has(.fs-c-button--addToCart--subscriptionDetail) .fs-c-productPrices--productDetail::before,
#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable::before {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

#fs_ProductDetailsSubscribe .fs-l-productLayout:has(.fs-c-button--addToCart--subscriptionDetail) .fs-c-productPrices--productDetail::before {
  content: "1回のみ";
  margin-bottom: 2px;
}

/* The table is laid out as a box of label / price rows. */
#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 16px 0 0;
  padding: 12px 16px 0;
  border: 0;
  border-collapse: collapse;
  background: #fff;
  color: var(--mr-ink);
}

#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable::before {
  content: "定期購入";
}

#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable tbody {
  display: block;
}

#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
  padding: 12px 0;
}

#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__row + .fs-c-subscriptionPriceTable__row {
  border-top: 1px solid var(--mr-line);
}

#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable :is(.fs-c-subscriptionPriceTable__label, .fs-c-subscriptionPriceTable__price) {
  padding: 0;
  border: 0;
  background: none;
}

#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__label {
  font-size: 12px;
  font-weight: 400;
  text-align: left;
}

#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__price {
  font-size: 16px;
  font-weight: 700;
  text-align: right;
}

#fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__row--firstDelivery .fs-c-subscriptionPriceTable__price {
  color: var(--mr-red);
}

#fs_ProductDetailsSubscribe .fs-c-productPrice--subscription :is(.fs-c-productPrice__main, .fs-c-price) {
  display: inline-flex;
  align-items: baseline;
}

#fs_ProductDetailsSubscribe .fs-c-productPrice--subscription .fs-c-price__currencyMark {
  display: none;
}

#fs_ProductDetailsSubscribe .fs-c-productPrice--subscription .fs-c-price__value::after {
  content: "円";
}

#fs_ProductDetailsSubscribe .fs-c-productPrice--subscription .fs-c-productPrice__addon__label {
  margin-left: 4px;
  font-size: 12px;
}

#fs_ProductDetailsSubscribe .fs-c-productPrice--subscription .fs-c-productPrice__addon__label::before {
  content: "（";
}

#fs_ProductDetailsSubscribe .fs-c-productPrice--subscription .fs-c-productPrice__addon__label::after {
  content: "）";
}

/* A buying block: quantity above the button below md, beside it from md. */
#fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction {
  order: 6;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

/* Wider than the gap inside a block, so each quantity reads with its own button. */
#fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction + .fs-c-productQuantityAndAction {
  margin-top: 24px;
}

#fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction .fs-c-quantity {
  order: -1;
  margin: 0;
}

#fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction__action {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* 定期購入する keeps the red; 1回のみ注文する is drawn in ink. */
#fs_ProductDetailsSubscribe .fs-c-productActionButton .fs-c-button--addToCart--subscriptionDetail {
  border-color: var(--mr-ink);
  background: var(--mr-ink);
}

#fs_ProductDetailsSubscribe .fs-c-productActionButton .fs-c-button--addToCart--subscriptionDetail:hover {
  border-color: #1a1a1a;
  background: #1a1a1a;
}

#fs_ProductDetailsSubscribe .fs-c-buttonContainer--addToWishList--detail {
  order: 8;
  display: block;
  margin-top: 16px;
}

@media (min-width: 768px) {
  #fs_ProductDetailsSubscribe .fs-c-productMarks {
    margin-top: 14px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productMarks .fs-c-mark {
    font-size: 11px;
  }

  #fs_ProductDetailsSubscribe .fs-l-productLayout:has(.fs-c-button--addToCart--subscriptionDetail) .fs-c-productPrices--productDetail::before,
  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable::before {
    font-size: 13px;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable {
    margin-top: 20px;
    padding: 14px 20px 0;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__row {
    padding: 14px 0;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__label {
    font-size: 13px;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__price {
    font-size: 18px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productPrice--subscription .fs-c-productPrice__addon__label {
    font-size: 13px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
  }

  /* The stepper's border runs the button's height; the plain select stays centred. */
  #fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction .fs-c-quantity {
    flex: none;
    align-self: center;
  }

  #fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction .fs-c-quantity.mr-qty {
    align-self: stretch;
  }
}

/* From b the details column takes the extra rows: name, marks, price, table, the two
   blocks, wishlist, 返品特約, inquiry, then the closing 1fr row. */
@media (min-width: 1280px) {
  #fs_ProductDetailsSubscribe .fs-l-productLayout {
    grid-template-rows: repeat(9, auto) 1fr;
  }

  #fs_ProductDetailsSubscribe :is(.fs-c-productCarouselMainImage, .fs-c-productMainImage) {
    grid-row: 1 / 11;
  }

  #fs_ProductDetailsSubscribe :is(.fs-c-productThumbnail, .fs-c-productCarouselMainImage__thumbnailList) {
    grid-row: 11;
  }

  #fs_ProductDetailsSubscribe .fs-c-productMarks {
    grid-row: 2;
    margin-top: 16px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productPrices--productDetail {
    grid-row: 3;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable {
    grid-row: 4;
    margin-top: 24px;
    padding: 16px 24px 0;
  }

  #fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction {
    grid-row: 5;
    gap: 20px;
    margin-top: 40px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction--subscription {
    grid-row: 6;
  }

  #fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction + .fs-c-productQuantityAndAction {
    margin-top: 24px;
  }

  #fs_ProductDetailsSubscribe .fs-c-buttonContainer--addToWishList--detail {
    grid-row: 7;
    margin-top: 24px;
  }

  #fs_ProductDetailsSubscribe .fs-c-returnedSpecialContract {
    grid-row: 8;
  }

  #fs_ProductDetailsSubscribe .fs-c-inquiryAboutProduct {
    grid-row: 9;
  }

  #fs_ProductDetailsSubscribe .fs-p-productDescription--full {
    grid-row: 12;
  }

  #fs_ProductDetailsSubscribe .fs-c-productReview {
    grid-row: 13;
  }

  #fs_ProductDetailsSubscribe .fs-l-productLayout > :is(.fs-c-productListCarousel, :has(.fs-c-productListCarousel)) {
    grid-row: 14;
  }

  #fs_ProductDetailsSubscribe .fs-c-productMarks .fs-c-mark {
    padding: 3px 12px;
    font-size: 12px;
  }

  #fs_ProductDetailsSubscribe .fs-l-productLayout:has(.fs-c-button--addToCart--subscriptionDetail) .fs-c-productPrices--productDetail::before,
  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable::before {
    font-size: 14px;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__row {
    padding: 16px 0;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__label {
    font-size: 14px;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__price {
    font-size: 20px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productPrice--subscription .fs-c-productPrice__addon__label {
    font-size: 14px;
  }
}

@media (min-width: 1600px) {
  #fs_ProductDetailsSubscribe .fs-c-productMarks {
    gap: 8px;
    margin-top: 20px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productMarks .fs-c-mark {
    padding: 4px 14px;
    font-size: 14px;
  }

  #fs_ProductDetailsSubscribe .fs-l-productLayout:has(.fs-c-button--addToCart--subscriptionDetail) .fs-c-productPrices--productDetail::before,
  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable::before {
    font-size: 16px;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable {
    margin-top: 30px;
    padding: 20px 30px 0;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__row {
    padding: 20px 0;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__label {
    font-size: 16px;
  }

  #fs_ProductDetailsSubscribe .fs-c-subscriptionPriceTable__price {
    font-size: 24px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productPrice--subscription .fs-c-productPrice__addon__label {
    font-size: 16px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction {
    gap: 24px;
    margin-top: 60px;
  }

  #fs_ProductDetailsSubscribe .fs-c-productQuantityAndAction + .fs-c-productQuantityAndAction {
    margin-top: 40px;
  }

  #fs_ProductDetailsSubscribe .fs-c-buttonContainer--addToWishList--detail {
    margin-top: 40px;
  }
}