:host {
  @apply box-border block relative;
}

.page-article-details__wrapper {
  @apply grid grid-rows-[1fr_auto] h-split-screen-tablet max-h-split-screen-tablet desktop-small:h-split-screen-desktop desktop-small:max-h-split-screen-desktop;
}

.page-article-details__container {
  @apply overflow-scroll bg-white rounded shadow-card flex flex-col;
}

.page-article-details__product-details {
  @apply grid gap-x-5;
  grid-template-columns: max-content auto;
  grid-template-rows: 2.1875rem repeat(11, minmax(auto, max-content));
  grid-template-areas:
    ". . . bookmark"
    "image contributors contributors contributors"
    "image title title print"
    "image title title ."
    "image misc price price"
    "image misc price price"
    "image origin origin stock"
    "image origin origin stock"
    "image specs availabilities availabilities"
    "image specs ssc ssc"
    "image . ssc ssc"
    "image . ssc ssc";
}

.page-article-details__product-bookmark {
  grid-area: bookmark;
}

.page-article-details__product-image-recessions {
  grid-area: image;
}

.page-article-details__product-contributors {
  grid-area: contributors;
}

.page-article-details__product-print {
  grid-area: print;
}

.page-article-details__product-title {
  grid-area: title;
}

.page-article-details__product-misc {
  grid-area: misc;
}

.page-article-details__product-price-info {
  grid-area: price;
}

.page-article-details__product-origin-infos {
  grid-area: origin;
}

.page-article-details__product-stock {
  grid-area: stock;
}

.page-article-details__product-ean-specs {
  grid-area: specs;
}

.page-article-details__product-availabilities {
  grid-area: availabilities;
}

.page-article-details__shelf-ssc {
  grid-area: ssc;
}

.page-article-details__product-description-text {
  word-break: break-word;
}

.page-article-details__product-formats {
  @apply grid whitespace-nowrap items-center max-w-full;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
}

.page-article-details__scroll-top-cta {
  @apply w-[3.625rem] h-[3.625rem] flex items-center justify-center self-end border-none outline-none bg-white relative rounded p-0 mt-8 mr-4;
  box-shadow: 0px 0px 20px 0px rgba(89, 100, 112, 0.5);
  transform: rotate(-90deg);
  border-radius: 100%;
}

.page-article-details__actions {
  button:disabled {
    @apply bg-inactive-branch cursor-not-allowed;
  }
}

.tooltip-active {
  @apply bg-[#596470] text-white;
}
