.product {
    padding: 2rem 0;
}

@media only screen and (max-width: 991px) {
    .product {
        padding: 0;
        padding-bottom: 2rem;
    }
}

/* Force wider container for product page to make images huge */
.product .container-max {
    max-width: 1600px !important;
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
    .product .container-max {
        padding: 0;
    }
}

.product .breadcrumbs-wrap {
    margin-bottom: 1rem;
    padding: 0 40px;
}

@media only screen and (max-width: 991px) {
    .product .breadcrumbs-wrap {
        display: none;
    }
}

.product .product-container {
    display: grid;
    grid-template-columns: 68% 30%;
    grid-gap: 2%;
    align-items: start;
}

@media only screen and (max-width: 991px) {
    .product .product-container {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

.product .title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.2;
    font-family: "General Sans", sans-serif;
}

/* Gallery Grid */
.product__gallery {
    position: relative;
    width: 100%;
}

.product-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.product-images-grid .product-images__item {
    width: 100%;
    position: relative;
    /* Aspect ratio provided by image or forced here?
       User said "images became very small", implying they want them BIG.
       Let's use square or naturally tall.
       If we force square, it's consistent. */
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;
}

.product-images-grid .product-images__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.product-images-grid .product-images__item:hover img {
    transform: scale(1.03);
}

.product-images-mobile {
    display: none;
}

@media only screen and (max-width: 991px) {
    .product-images-grid {
        display: none;
    }

    .product-images-mobile {
        display: block;
    }

    .product-images-mobile .swiper-slide {
        height: auto;
    }

    .product-images-mobile img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
    }
}

/* Product Details */
.product__details {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    position: sticky;
    top: 2rem;
}

@media only screen and (max-width: 991px) {
    .product__details {
        position: static;
        max-width: 100%;
        margin: 0 auto;
        padding-top: 1rem;
        padding-left: 20px;
        padding-right: 20px;
    }

    .product__details .product-details {
        padding: 0;
    }
}

.product__details .product-details {
    width: 100%;
}

.product__details .product-details__title {
    margin-bottom: 0.5rem;
    font-family: "General Sans", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Ratings */
.product-details__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.product-details__rating .stars {
    display: flex;
    gap: 2px;
}

.product-details__rating .star {
    font-size: 16px;
    color: #272959;
}

.product-details__rating .star.filled {
    color: #FFC107;
    color: #000;
}

.product-details__rating .rating-count {
    font-size: 0.875rem;
    color: #666;
    font-family: "General Sans", sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Price Section */
.product-details__price {
    display: flex;
    align-items: baseline;
    margin-top: 0;
    margin-bottom: 0.5rem;
    gap: 12px;
    flex-wrap: wrap;
}

.product-details__price .compare-at-price {
    text-decoration: line-through;
    color: #666;
    font-size: 1rem;
    font-family: "General Sans", sans-serif;
    margin: 0;
}

.product-details__price .price {
    font-size: 28px;
    font-weight: 600;
    color: #000;
    font-family: "General Sans", sans-serif;
}

.product-details__price .price-suffix {
    font-size: 0.875rem;
    color: #000;
    font-family: "General Sans", sans-serif;
    opacity: 0.8;
}

.product-details__extra-price-info {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #F9F9F9;
    padding: 12px;
    border-radius: 4px;
}

.product-details__extra-price-info .pix-info,
.product-details__extra-price-info .installment-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "General Sans", sans-serif;
    font-size: 0.9rem;
}

.product-details__extra-price-info svg {
    width: 22px;
    height: 22px;
}

.product-details__extra-price-info .pix-info span {
    font-weight: 600;
    color: #000;
}

.product-details__extra-price-info .installment-info span {
    color: #444;
}

/* Existing Styles Override/Adjustments */
.variant-button__wrapper {
    border: none;
    margin-left: 0;
    margin-bottom: 1.5rem;
    padding: 0;
}

.variant-button__label {
    margin-bottom: 0.75rem;
    font-family: "General Sans", sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

.variant-button input[type=radio] {
    overflow: hidden;
    position: absolute;
    height: 1px;
    width: 1px;
}

.variant-button input[type=radio]+label {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #E5E5E5;
    background: transparent;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    margin-right: 8px;
    font-family: "General Sans", sans-serif;
    font-size: 0.9rem;
    color: #333;
}

/* For Colors specifically if they use specific swatches, this might need more logic,
   but for now styling the default variant buttons to look cleaner */

.variant-button input[type="radio"]:checked+label {
    border-color: #000;
    border-width: 1px;
    background-color: #000;
    color: #fff;
}

.product-details__quantityblock {
    margin-bottom: 1.5rem;
}

.product-details__quantityblock .quantity {
    flex: 0 0 auto;
    width: 120px;
    border: 1px solid #E5E5E5;
    text-align: center;
    display: flex;
    justify-content: space-between;
    height: 48px;
    border-radius: 4px;
    align-items: center;
}

.product-details__quantityblock .quantity__title {
    margin-bottom: 0.5rem;
    margin-top: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: "General Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.product-details__quantityblock .quantity__button {
    cursor: pointer;
    width: 36px;
    background: none;
    border: none;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.product-details__quantityblock .quantity input[type=number] {
    text-align: center;
    border: none;
    width: 100%;
    font-size: 1rem;
    font-family: "General Sans", sans-serif;
    color: #000;
}

.product-form__submit {
    width: 100%;
    background-color: #000;
    color: #fff;
    border: none;
    padding: 18px;
    font-family: "General Sans", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.product-form__submit:hover {
    background-color: #333;
}

/* Accordion */
.product__details .product-details__description .accordion__trigger {
    display: block;
    position: relative;
    font-size: 0.875rem;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: "General Sans", sans-serif;
    cursor: pointer;
    padding: 1rem 0;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product__details .product-details__description .accordion__trigger::after {
    /* Adjust icon if needed */
    content: "+";
    font-size: 1.2rem;
    background: none;
    width: auto;
    height: auto;
}

.product__details .product-details__description .accordion__trigger[aria-expanded="true"]::after {
    content: "-";
}

/* Swiper Pagination */
.swiper-pagination-bullet {
    background: #000;
    opacity: 0.2;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000;
}