/* CSS from section stylesheet tags */
/* Add your custom styles here if needed */
[x-cloak] { 
  display: none !important; 
}

.faq-container > div {
  transition: all 0.3s ease-in-out;
}
.product-information {
gap: var(--gap) 0;
}

/* Base grid layout */
.product-information__grid {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}

/* Default column positions */
.product-details {
order: 1;
}

.product-information__media {
order: 0;
width: 0;
min-width: 100%;
}

/* Mobile styles */
@media screen and (width < 750px) { .product-information__media { grid-column: 1 / -1; } .product-details { grid-column:
    2 / 3; } } /* Desktop styles */ @media screen and (width>= 750px) {
    .product-information__grid {
    grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none,
    .product-information__grid:has(.product-information__media:empty) {
    .product-details {
    width: var(--narrow-content-width);
    margin: 0 auto;
    }
    }

    /* Position when there is media */
    .product-information__grid:not(:has(.product-information__media:empty)) {
    /* Media on the left side */
    &.product-information--media-left {
    grid-template-columns: 1fr min(50vw, var(--sidebar-width));

    .product-information__media {
    padding-right: calc(var(--gap, 0) / 2);
    }
    .product-details {
    padding-left: calc(var(--gap, 0) / 2);
    }

    &:has(.media-gallery--extend) {
    grid-column: 1 / 3;
    }
    }

    /* Media on the right side */
    &.product-information--media-right {
    grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

    .product-information__media {
    padding-left: calc(var(--gap, 0) / 2);
    order: 1;
    }
    .product-details {
    padding-right: calc(var(--gap, 0) / 2);
    order: 0;
    }

    &:has(.media-gallery--extend) {
    grid-column: 2 / -1;
    }
    }

    /* Equal width columns */
    &.product-information__grid--half,
    &.product-information__grid--half:has(.media-gallery--extend) {
    grid-column: 1 / -1;
    grid-template-columns:
    var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
    var(--full-page-grid-central-column-width) / 2
    )
    var(--full-page-grid-margin);

    &.product-information--media-left {
    .product-information__media {
    grid-column: 2 / 3;
    &:has(.media-gallery--extend) {
    grid-column: 1 / 3;
    }
    }
    .product-details {
    grid-column: 3 / 4;
    }
    }

    &.product-information--media-right {
    .product-information__media {
    grid-column: 3 / 4;
    &:has(.media-gallery--extend) {
    grid-column: 3 / -1;
    }
    }
    .product-details {
    grid-column: 2 / 3;
    }
    }
    }
    }

    /* Handle full width section */
    .section--full-width {
    .product-information__grid:not(:has(.product-information__media:empty)),
    .product-information__grid:not(:has(.product-information__media:empty)) {
    &.product-information--media-left,
    &.product-information--media-right {
    grid-column: 1 / -1;
    }

    &.product-information--media-left .product-details {
    padding-inline-end: var(--padding-lg);
    }
    &.product-information--media-right .product-details {
    padding-inline-start: var(--padding-lg);
    }

    &.product-information__grid--half.product-information--media-left {
    .product-information__media {
    grid-column: 1 / 3;
    }
    .product-details {
    grid-column: 3 / -1;
    }
    }
    &.product-information__grid--half.product-information--media-right {
    .product-information__media {
    grid-column: 3 / -1;
    }
    .product-details {
    grid-column: 1 / 3;
    }
    }
    }
    }
    }

    .product-information__grid--limit-details .product-details > .group-block {
    max-width: var(--sidebar-width);
    }

    /* If the header is sticky, make product details content stick underneath the header */
    body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
    }