.product-page-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  font-family: sans-serif;
}

.product-gallery {
  flex: 1 1 40%;
}

.product-gallery img.main-img {
  width: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.thumbs {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.product-details {
  flex: 1 1 55%;
}

.breadcrumb {
  color: #888;
  font-size: 14px;
  margin-bottom: 0.5rem;
}


.product-description p {
  margin-top: 1rem;
  line-height: 1.5;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

/* Product video: the galleries' last item (inc/product-video.php, js/pse-product-page.js).
   The box is the product photo's card (white, the same proportions and corners as the photos in
   that gallery), so the poster and the player take the same space and nothing moves when the
   video starts. */
.gallery-video {
    /* The site's palette (release/COLOUR-PALETTE.md). */
    --pse-video-ink: var(--e-global-color-primary, #2b2e34);
    --pse-video-ink-rgb: 43, 46, 52;
    --pse-video-paper: var(--e-global-color-74a2e99, #fff);
    --pse-video-paper-rgb: 255, 255, 255;
    --pse-video-line: #ddd;
    --pse-video-line-strong: #707070;
    --pse-video-hover: var(--e-global-color-8a1e7e6, #82a0b9);
    position: relative;
}
.gallery-video::before {
    content: "";
    display: block;
    padding-top: 76.66%;
}
.gallery-video .gallery-video__play,
.gallery-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.gallery-video .gallery-video__play {
    padding: 0;
    background: var(--pse-video-paper);
    cursor: pointer;
}
.gallery-featured-imagenew .gallery-video .gallery-video__play img {
    position: static;
    width: 100%;
    height: 100% !important;
    padding: 20px;
    object-fit: contain;
}
/* The desktop gallery's product photo card (custom-product-list.css, .product_gallery .featured-image). */
@media (min-width: 768px) {
    .product_gallery .gallery-video {
        min-height: 550px;
        margin-top: 14px;
        border-radius: 15px;
        overflow: hidden;
        background: var(--pse-video-paper);
    }
    .product_gallery .gallery-video::before {
        content: none;
    }
    .product_gallery .gallery-video .gallery-video__play img {
        padding: 25px;
    }
}
@media (min-width: 1025px) {
    .product_gallery .gallery-video {
        min-height: 75vh;
    }
}
.gallery-video__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(var(--pse-video-ink-rgb), .75);
    transition: background-color .2s;
}
.gallery-video__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent var(--pse-video-paper);
}
.gallery-video__play:hover .gallery-video__icon,
.gallery-video__play:focus-visible .gallery-video__icon {
    background: var(--pse-video-ink);
}
.gallery-video__play:focus-visible {
    outline: 2px solid var(--pse-video-ink) !important; /* the theme removes outlines with !important */
    outline-offset: -2px;
}
.gallery-video.is-playing .gallery-video__play,
.gallery-video.is-playing .gallery-video__link {
    display: none;
}
.gallery-video .gallery-video__play[aria-busy="true"] {
    cursor: progress;
}
.gallery-video.is-unavailable .gallery-video__play {
    cursor: default;
}
.gallery-video.is-unavailable .gallery-video__icon {
    display: none;
}
.gallery-video__unavailable {
    position: absolute;
    top: calc(50% - 26px);
    left: 50%;
    z-index: 2;
    /* Its own width: a box centred with left: 50% would otherwise wrap at half the item's width. */
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 10px 18px;
    border: 1px solid var(--pse-video-line);
    border-radius: 20px;
    background: var(--pse-video-paper);
    box-shadow: 0 2px 12px rgba(var(--pse-video-ink-rgb), .08);
    font-size: 15px;
    line-height: 1.3;
    color: var(--pse-video-ink);
    text-align: center;
    transform: translate(-50%, -50%);
}
/* "Watch on Vimeo": a small pill like the 3D buttons, bottom right. On a mouse-driven screen it
   shows while the video item is pointed at or focused, so the poster stays clean; on touch
   screens it stays visible. When the video cannot play here, it becomes the main action. */
.gallery-video .gallery-video__link {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 14px 6px 12px;
    border: 1px solid var(--pse-video-line);
    border-radius: 999px;
    background: var(--pse-video-paper);
    box-shadow: 0 2px 12px rgba(var(--pse-video-ink-rgb), .08);
    font-size: 13px;
    line-height: 1;
    color: var(--pse-video-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease, border-color .2s ease;
}
.gallery-video .gallery-video__link svg {
    flex: none;
    width: 14px;
    height: 14px;
}
.gallery-video .gallery-video__link:hover {
    border-color: var(--pse-video-line-strong);
    color: var(--pse-video-ink);
}
.gallery-video .gallery-video__link:focus-visible {
    outline: 2px solid var(--pse-video-ink) !important;
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .gallery-video:not(.is-unavailable) .gallery-video__link {
        opacity: 0;
    }
    .gallery-video:hover .gallery-video__link,
    .gallery-video:focus-within .gallery-video__link {
        opacity: 1;
    }
}
.gallery-video.is-unavailable .gallery-video__link {
    top: calc(50% + 26px);
    right: auto;
    bottom: auto;
    left: 50%;
    min-height: 40px;
    padding: 8px 18px 8px 16px;
    border-color: var(--pse-video-ink);
    background: var(--pse-video-ink);
    font-size: 14px;
    color: var(--pse-video-paper);
    transform: translate(-50%, -50%);
}
.gallery-video.is-unavailable .gallery-video__link:hover {
    border-color: var(--pse-video-hover);
    background: var(--pse-video-hover);
    color: var(--pse-video-ink);
}
/* While the player is open it is the only thing in the box. */
.gallery-video.is-playing .gallery-video__link {
    display: none;
}