.product {
    max-width: 400px;
    margin: 0 auto;
}

.product__title {
    margin-bottom: 3em;
}

.carousel {
    margin-bottom: var(--gap);
}

.carousel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    aspect-ratio: 3 / 4;
    cursor: pointer;
}

.carousel__slide {
    display: none;
    width: 100%;
    height: 100%;
}

.carousel__slide--active {
    display: flex;
}

.carousel__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

.carousel__counter {
    margin: calc(0.25 * var(--gap)) 0 var(--gap) 0;
    text-align: center;
    font-family: 'Arial-Narrow', sans-serif;
    font-size: var(--font-size-large);
}

#buy-button {
    text-align: center;
    margin: calc(2 * var(--gap)) 0;
}

.shopify-buy__btn {
    font-size: var(--font-size-large);
    margin: 0;
    color: inherit;
}

.product__description {
    margin: 0 0 1em 0;
}

.product__description table {
    border-collapse: collapse;
}

.product__description td:first-child,
.product__description th:first-child {
    padding-left: 0;
}

.product__description td:not(:first-child),
.product__description th:not(:first-child) {
    padding-left: 1em;
}

.product__ships-from {
    margin: 0;
    text-align: center;
}

.product__price {
    text-align: center;
    margin: 1em 0 0 0;
}

.product-list {
    max-width: 400px;
    margin: 16rem auto 0 auto;
}

.product-list__item {
  margin-bottom: 1.1em;
}

.product-list__item a[aria-current="page"] {
  color: var(--color-2);
}

.store-policies {
    margin-top: var(--vertical-gap);
    display: block;
    text-align: center;
}

@media (max-width: 600px) {

    .product__title {
        margin-bottom: 1em;
    }

    .product__description {
        margin: 0 0 1em 0;
    }

    /* Swipe/scroll only makes sense here -- on desktop it fought the
       page's own scroll (see product.js), but on mobile a horizontal
       swipe and a vertical page-scroll are different gestures, so there's
       no such conflict and it's the more natural way to browse photos.
       All slides need to actually be laid out side by side for that,
       overriding the desktop default of only the active one being
       visible -- product.js switches its own behavior to match via the
       same breakpoint (matchMedia). */
    .carousel ul {
        display: flex;
        overflow: auto;
        overscroll-behavior: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .carousel ul::-webkit-scrollbar {
        display: none;
    }

    .carousel__slide {
        display: flex;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}