/* Selection Button */
.selection-btn {
    background-color: var(--cp-white-color);
    color: var(--cp-primary-color-600);
    border: 1px solid var(--cp-primary-color-200);
    border-radius: var(--cp-btn-border-radius);
    cursor: pointer;
    transition: all 0.15s ease;
}
.selection-btn:hover {
    /* filter: drop-shadow(var(--cp-shadow-sm)); */
    filter: drop-shadow(var(--cp-shadow-xs));
}
/* .selection-btn:active {
    background-color: var(--cp-primary-color-300);
    border-color: var(--cp-primary-color-500);
} */
/* .selection-btn:focus {
    outline: 2px solid var(--cp-primary-color-300);
    outline-offset: 2px;
} */
.selection-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.selection-btn.selected:not(.color-btn, .mockup-btn) {
    background-color: var(--cp-primary-color-500);
    color: var(--cp-white-color);
}

/* End Selection Button */

/* CAROUSEL General */
.carousel-dots {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
}
@media screen and (min-width: 1200px) {
    .carousel-dots {
        display: none;
    }
}
.carousel-dots .carousel-dot {
    width: 0.55rem;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--cp-primary-color-200);
    border-radius: 50%;
}
.carousel-dots .carousel-dot.active {
    border-color: var(--cp-primary-color-500);
    background-color: var(--cp-primary-color-600);
}
.carousel-container {
    position: relative;
}
.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* END CAROUSEL General */

/* PAGE OVERALL LAYOUT STYLES */
#product-customization-section {
    padding-block: 0.875rem 1.875rem;
}

@media screen and (min-width: 1200px) {
    #product-customization-section {
        padding-block: 2.5rem 2.75rem;
    }
}

.product-customization-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media screen and (min-width: 992px) and (max-height: 800px) {
    .product-customization-wrapper {
        flex-direction: row;
        gap: 2.5rem;
    }
}

@media screen and (min-width: 1200px) {
    .product-customization-wrapper {
        flex-direction: row;
        gap: 2.5rem;
    }
}
/* mockup-buttons */
.product-customization--mockup-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}

.product-customization--detail {
    width: 100%;
    max-width: 27rem;
}

@media screen and (min-width: 992px) and (max-height: 800px) {
    .product-customization--mockup-wrapper {
        width: 55%;
        height: max-content;
        flex-direction: row;
        gap: 1rem;
        position: sticky;
        top: 10rem;
        z-index: 10;
    }
    .product-customization--detail {
        width: 45%;
    }
}
@media screen and (min-width: 1200px) {
    .product-customization--mockup-wrapper {
        width: 55%;
        height: max-content;
        flex-direction: row;
        gap: 1rem;
        position: sticky;
        top: 10rem;
        z-index: 10;
    }
    .product-customization--detail {
        width: 45%;
    }
}

.product-customization--mockup-buttons {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.5rem;
    cursor: grab;
    -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
    scrollbar-width: none; /* Hide scrollbar Firefox */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.product-customization--mockup-buttons::-webkit-scrollbar {
    display: none;
}
@media screen and (min-width: 992px) and (max-height: 800px) {
    .product-customization--mockup-buttons {
        flex-direction: column;
        gap: 0.5rem;
        width: 18.8%;
        height: max-content;
    }
}
@media screen and (min-width: 1200px) {
    .product-customization--mockup-buttons {
        flex-direction: column;
        gap: 0.5rem;
        width: 19%;
        height: max-content;
    }
}

.product-customization--mockup-buttons > * {
    flex: 0 0 35%;
    min-width: 35%;
}

.mockup-btn,
.video-btn {
    border: none;
    border-radius: var(--cp-card-border-radius);
    aspect-ratio: 3 / 4;
    padding: 0;
    overflow: hidden;
}

.mockup-btn img,
.video-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* END PAGE OVERALL LAYOUT STYLES */

/* PRODUCT CUSTOMIZATION DISPLAY */
.product-customization--display {
    position: relative;

    border-radius: var(--cp-card-border-radius);
    width: 100%;
    height: max-content;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--cp-primary-color-50);
    transform-origin: center center;
    transition: transform 150ms ease;
}
@media screen and (min-width: 992px) and (max-height: 800px) {
    .product-customization--display:hover {
        cursor: zoom-in;
    }
}
@media screen and (min-width: 1200px) {
    .product-customization--display:hover {
        cursor: zoom-in;
    }
}

.product-customization--display > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* END PRODUCT CUSTOMIZATION DISPLAY */

/* MOCKUP CAROUSEL STYLES */
#productDisplayCarousel {
    display: none;
}
#productDisplayCarousel.show {
    display: block;
}
/* #productDisplayCarousel .carousel-indicators {
    margin-bottom: 0;
}
#productDisplayCarousel .carousel-indicators [data-bs-target] {
    background-color: var(--cp-primary-color-400);
    width: 10px;
    height: 10px;
    border-radius: 50%;
} */
@media screen and (min-width: 768px) {
    #productDisplayCarousel .carousel-indicators,
    #productDisplayCarousel .carousel-control-prev,
    #productDisplayCarousel .carousel-control-next {
        display: none;
    }
}
.carousel-inner,
.carousel-item {
    width: 100%;
    height: 100%;
}

.mockup-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.image-wrapper {
    transform-origin: center center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: transform 50ms ease;
}

.image-wrapper:hover {
    cursor: zoom-in;
}
/* END MOCKUP CAROUSEL STYLES */

/* PRODUCT CUSTOMIZATION HEADER */
.product-customization--header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    text-wrap: auto;
    margin-block-end: 0.75em;
    color: var(--cp-primary-color-600);
}
@media screen and (min-width: 1200px) {
    .product-customization--header h1 {
        font-size: 1.75rem;
    }
}

.product-customization--header .product-rating {
    align-items: unset;
    gap: 0.1875rem;
}
@media screen and (min-width: 1200px) {
    .product-customization--header .product-rating {
        gap: 0.25rem;
    }
}

.product-customization--header .product-rating .bi {
    font-size: 0.8125rem;
}
@media screen and (min-width: 992px) {
    .product-customization--header .product-rating .bi {
        font-size: 0.875rem;
    }
}

.product-customization--header .separator {
    color: var(--cp-secondary-color-400);
    font-size: 0.875rem;
}
@media screen and (min-width: 1200px) {
    .product-customization--header .separator {
        font-size: 1rem;
    }
}

.product-customization--header :is(.review-count, .total-sold) {
    color: var(--cp-secondary-color-400);
    font-size: 0.875rem;
    font-weight: 400;
}
@media screen and (min-width: 1200px) {
    .product-customization--header :is(.review-count, .total-sold) {
        font-size: 1rem;
    }
}

.product-customization--header .price-info {
    margin-block-start: 1.5em;
    line-height: 0.9;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.5rem;
}
@media screen and (min-width: 992px) {
    .product-customization--header .price-info {
        gap: 0.625rem;
    }
}
.product-customization--header .price-info .new-price {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--cp-primary-color-400);
}
@media screen and (min-width: 992px) {
    .product-customization--header .price-info .new-price {
        font-size: 1.875rem;
    }
}
.product-customization--header .price-info .old-price {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cp-secondary-color-700);
}
@media screen and (min-width: 1200px) {
    .product-customization--header .price-info .old-price {
        font-size: 1.375rem;
    }
}

.product-customization--header .save-badge {
    font-size: 0.875rem;
    font-weight: 600;
}
@media screen and (min-width: 1200px) {
    .product-customization--header .save-badge {
        font-size: 1rem;
    }
}

.product-customization--header .delivery-info {
    border-radius: var(--cp-btn-border-radius);
    padding: 0.5rem 0.875rem;
    margin-block-start: 1.5rem;
    background-color: hsla(259, 100%, 90%, 0.5);
}
@media screen and (min-width: 1200px) {
    .product-customization--header .delivery-info {
        margin-block-start: 1.75rem;
    }
}

.product-customization--header .delivery-info p {
    margin-block: 0.5em;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cp-primary-color-600);
}
@media screen and (max-width: 376px) {
    .product-customization--header .delivery-info p {
        font-size: 0.7rem;
    }
}
@media screen and (min-width: 992px) {
    .product-customization--header .delivery-info p {
        font-size: 0.875rem;
    }
}
.product-customization--header .delivery-info .icon {
    margin-inline-end: 0.5em;
    width: 1.5em;
    height: auto;
}

.product-customization--header .delivery-info .delivery-date {
    color: var(--cp-primary-color-400);
    text-decoration: underline;
}
/* END PRODUCT CUSTOMIZATION HEADER */

/* PRODUCT CUSTOMIZATION SECTIONS */
.product-customization--basic-selection,
.product-customization--print-layers {
    color: var(--cp-primary-color-600);
    margin-block-start: 1.875rem;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

#product-customization-section h3,
#product-customization-section label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cp-primary-color-600);
    margin-bottom: 0.875rem;
}
#product-customization-section label[for="user-notes"] {
    margin-bottom: 0.25rem;
}
#product-customization-section .note-instructions {
    font-size: 0.75rem;
}

.product-customization--basic-selection .buttons-group,
.product-customization--print-layers .buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.group-btn,
.size-btn {
    height: 2.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    padding-inline: 1em;
    display: grid;
    place-items: center;
}
@media screen and (min-width: 1200px) {
    .group-btn,
    .size-btn {
        height: 2.5rem;
        font-size: 1rem;
    }
}

.color-btn {
    height: 1.625rem;
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: var(--btn-color);
    transition: all 0.3s ease;
    border: none;
}
@media screen and (min-width: 1200px) {
    .color-btn {
        height: 1.875rem;
    }
}

.color-btn.selected::before {
    content: "✔";
    /* color: var(--btn-color); */
    color: var(--cp-white-color);
    mix-blend-mode: difference;
    /* filter: invert(0.8); */
    font-size: 1rem;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
}

.sizes-wrapper,
.colors-wrapper,
.size-btn,
.color-btn {
    display: none;
}

.sizes-wrapper.show,
.colors-wrapper.show,
.size-btn.show,
.color-btn.show {
    display: block;
}

.product-customization--reveal-alert {
    margin-block-start: 2.5em;
}
/* @media screen and (min-width: 1200px) {
    .product-customization--reveal-alert {
        margin-block-start: 1.375rem;
    }
} */

.layer-wrapper,
.text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
@media screen and (min-width: 992px) {
    .layer-wrapper,
    .text-wrapper {
        gap: 1.375rem;
    }
}
.layer-wrapper button {
    width: 5.25rem;
    aspect-ratio: 9 / 10;
    padding: 0;
    border-radius: 0.3125rem;
    border: none;
    overflow: hidden;
}
@media screen and (min-width: 1200px) {
    .layer-wrapper button {
        width: 6.25rem;
    }
}

.layer-wrapper button:hover {
    filter: drop-shadow(var(--cp-shadow-sm));
}
.layer-wrapper button.selected {
    box-shadow: 0 0 0 2px var(--cp-primary-color-300);
}
.layer-wrapper button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.layer-wrapper,
.text-wrapper,
.user-notes-wrapper,
.product-customization--upload-image-wrapper {
    opacity: 0.5;
}
.layer-wrapper.active,
.text-wrapper.active,
.user-notes-wrapper.active,
.product-customization--upload-image-wrapper.active {
    opacity: 1;
}
.layer-colors-wrapper {
    display: none;
}
.layer-colors-wrapper.show {
    display: block;
}

.text-wrapper .color-inputs {
    display: flex;
    gap: 0.25rem;
    width: 75%;
    /* max-width: 200px; */
}
.text-wrapper .form-control {
    font-size: 0.75rem;
}

/* User Notes Input Field */

.user-notes-wrapper {
    margin-block-start: 1.875rem;
}

/* End Notes Input Field */

/* PRODUCT CUSTOMIZATION ACTIONS */
.product-customization--action-buttons {
    justify-content: space-between;
    gap: 0.5rem;
}
@media screen and (min-width: 1200px) {
    .preview-btn-container {
        display: none;
    }
}
.preview-btn-wrapper {
    display: inline-block;
    cursor: not-allowed;
}
@media screen and (min-width: 1200px) {
    .preview-btn-wrapper {
        display: none;
    }
}
.preview-btn {
    font-size: var(--cp-fs-500);
    font-weight: 700;
    padding: 0;
    width: 2.5rem;
    aspect-ratio: 1 / 1;
}

.cart-btn-wrapper {
    display: inline-block;
    cursor: not-allowed;
    flex-grow: 1;
}

.preview-btn-wrapper.active,
.cart-btn-wrapper.active {
    cursor: pointer;
}

.preview-btn-alert,
.cart-btn-alert {
    display: none;
}

:is(.preview-btn-alert, .cart-btn-alert).show {
    display: block;
    max-width: calc(100% - 2em);
    margin-inline: auto;
}

.preview-btn--fixed--container .preview-btn-alert {
    border-color: var(--cp-error-color);
}

.preview-btn,
.cart-btn {
    pointer-events: none; /* Prevents direct interaction */
}

.preview-btn-wrapper.active .preview-btn,
.cart-btn-wrapper.active .cart-btn {
    pointer-events: auto;
}

.add-to-cart-btn-container {
    flex-grow: 1;
}

#addToCartForm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    --font-size: 1rem;
    --height: 2.5rem;
}
@media screen and (min-width: 1200px) {
    #addToCartForm {
        --font-size: 1.125rem;
        --height: 3rem;
    }
}

#addToCartForm .cart-btn {
    width: 100%;
    height: var(--height);
    padding-block: 0;
}

#addToCartSpinner.htmx-indicator {
    opacity: 0;
    display: none;
    transition: opacity 200ms ease-in;
}

.htmx-request #addToCartSpinner.htmx-indicator {
    opacity: 1;
    display: inline-block;
}

#addToCartSpinner.htmx-request.htmx-indicator {
    opacity: 1;
    display: inline-block;
}
/* END PRODUCT CUSTOMIZATION ACTIONS */

/* FLOATING PREVIEW */
.floating-preview {
    display: none;
    position: fixed;
    bottom: 5.25rem;
    right: 1rem;
    z-index: 9999;
    width: 150px;
    border-radius: var(--cp-btn-border-radius);
    overflow: clip;
    background-color: var(--cp-primary-color-50);
    /* background-color: red; */
    cursor: move;
    user-select: none;
    touch-action: none;
}

.floating-preview.show {
    display: block;
}

.floating-preview--header {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--cp-primary-color-100);
}

.floating-preview--title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cp-primary-color-600);
}

.floating-preview--close {
    font-size: 0.875rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--cp-primary-color-600);
    cursor: pointer;
    line-height: 1;
}

.floating-preview--body {
    padding: 0.5rem;
    width: 100%;
    aspect-ratio: 3 / 4;
}

/* .floating-preview--body img {
    width: 100%;
    height: 100%;
    object-fit: contain;
} */
.floating-preview--live {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (min-width: 1200px) {
    .floating-preview {
        display: none !important;
    }
}
/* End Floating Preview

/* END PRODUCT CUSTOMIZATION SECTIONS */

/* Size Chart Button */
.size-chart-btn {
    /* display: inline-flex; */
    padding: 0 0.25em;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cp-primary-color-500);
    text-decoration: underline;
    text-underline-offset: 0.1em;
}
@media screen and (min-width: 1200px) {
    .size-chart-btn {
        font-size: 0.875rem;
    }
}

/* FIXED PREVIEW BUTTON */
/* .preview-btn--fixed--container {
	display: none;
	max-width: 100%;
	position: fixed;
	bottom: 0.5rem;
	z-index: 9999;
}
.preview-btn--fixed {
	width: 100%;
}
.preview-btn--fixed:disabled {
	opacity: 1;
} */

/* @media screen and (max-width: 767px) {
	.preview-btn--fixed--container.show {
		display: block;
	}
} */
/* END FIXED PREVIEW BUTTON */

/* PREVIEW MODAL */
.modal {
    /* top: 5em; */
    z-index: 99999;
}
.modal-dialog {
    padding-top: 4em;
}

#preloader {
    color: var(--cp-primary-color-200);
}

#clonedContent {
    min-height: 200px; /* To prevent flickering on content reveal */
}
/* END PREVIEW MODAL */

/* PRODUCT INFO */

.product-info {
    padding-block: 0;
}

.product-info p {
    font-size: 0.875rem;
    font-weight: 400;
}

.product-info .accordion-item {
    --bs-accordion-border-width: none;
    border-bottom: 1px solid var(--cp-secondary-color-50) !important;
    margin-block-end: 1.5em;
}

.product-info .accordion-item:last-child {
    margin-block-end: 0;
}

.product-info .accordion-button {
    font-size: 1.125rem;
    font-weight: 600;
    background-color: var(--cp-white-color);
    color: var(--cp-primary-color-600);
    padding: 0.375em 0;
}
@media screen and (min-width: 1200px) {
    .product-info .accordion-button {
        font-size: 1.125rem;
    }
}

.product-info .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.product-info .accordion-button:focus:not(:focus-visible) {
    box-shadow: none;
}
.product-info .accordion-button::after {
    background-size: var(--cp-fs-400);
    background-position: center;
}
.product-info .accordion-body {
    padding: 0.75em 0;
    color: var(--cp-body-text-color);
}
.product-info .accordion-body p {
    margin-bottom: 0.5em;
}
.product-info .accordion-body p:last-child {
    margin-bottom: 0;
}
.product-info .product-description ul {
    padding-left: 1.75em;
}
.product-info .product-description li {
    list-style: unset;
}
/* END PRODUCT INFO */

/* REVIEW AND PRODUCT INFO WRAPPER */
.review-product-info-wrapper {
    display: flex;
    flex-direction: column;
}

.review-product-info-wrapper .review-section {
    margin-block: 1.5rem 0;
}
@media screen and (min-width: 1200px) {
    .review-product-info-wrapper {
        flex-direction: row-reverse;
        gap: 2.5rem;
    }

    .review-product-info-wrapper .review-section {
        width: 55%;
        padding-block-start: 0;
        margin-block-start: 0;
    }

    .review-product-info-wrapper .product-info {
        width: 45%;
    }
}

/* END REVIEW AND PRODUCT INFO WRAPPER */

/* REVIEW SECTION */
.review-header {
    margin-bottom: 1rem;
}

.review-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cp-primary-color-600);
}

.submit-review {
    font-size: 0.875rem;
    text-decoration: underline;
    color: var(--cp-primary-color-500);
    transition: color 0.3s ease;
}

.submit-review:hover {
    color: var(--cp-primary-color-600);
}

/* Update existing styles */
.review-section {
    padding-top: 1.5rem;
}

@media screen and (max-width: 768px) {
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .submit-review {
        font-size: 0.9rem;
    }
}
.review--detail-reviews {
    margin-block-start: 1.25rem;
}
@media screen and (min-width: 1200px) {
    .review--detail-reviews {
        margin-block-start: 2.25rem;
    }
}

.review--detail--review {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
}
.review--detail--review:not(:last-child) {
    margin-bottom: 1rem;
}
.review--detail--review .review-photo {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--cp-btn-border-radius);
    overflow: hidden;
}
@media screen and (min-width: 1200px) {
    .review--detail--review .review-photo {
        width: 2.75rem;
        height: 2.75rem;
    }
}

.review--detail--review .review-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review--detail--review .review-detail {
    border: 1px solid var(--cp-secondary-color-50);
    border-radius: var(--cp-btn-border-radius);
    padding: 0.5rem;
    flex-grow: 1;
}
@media screen and (min-width: 1200px) {
    .review--detail--review .review-detail {
        padding: 0.875rem 1.25rem;
    }
}

.review-detail--rating {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.125rem;
    margin-bottom: 0.3125em;
}
@media screen and (min-width: 1200px) {
    .review-detail--rating {
        gap: 0.1875rem;
    }
}

.review-detail--rating > i {
    font-size: 0.625rem;
}
@media screen and (min-width: 1200px) {
    .review-detail--rating > i {
        font-size: 0.6875rem;
    }
}

.review-detail--user-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cp-primary-color-600);
    margin-bottom: 0.5em;
}
@media screen and (min-width: 1200px) {
    .review-detail--user-name {
        font-size: 1rem;
    }
}
.review-detail--comment {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--cp-primary-color-600);
}

/* @media screen and (min-width: 1200px) {
    .review--photos-reviews {
        position: relative;
    }
} */

.review--photos-reviews h4 {
    font-size: 0.875rem;
    margin-block-end: 0.75em;
}

@media screen and (min-width: 1200px) {
    .review--photos-reviews--main {
        padding-inline: 1.5rem;
    }
}

.review--photos-reviews--main .photos-wrapper {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.review--photos-reviews--main .photos-wrapper .photo-container {
    width: 25%;
    aspect-ratio: 1 / 1;
    border-radius: var(--cp-btn-border-radius);
    scroll-snap-align: start;
    flex: 0 0 auto;
    overflow: hidden;
}
@media screen and (min-width: 1200px) {
    .review--photos-reviews--main .photos-wrapper .photo-container {
        width: 20%;
    }
}
.photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review--photos-reviews .carousel-nav-wrapper {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 0.875rem;
}
@media screen and (min-width: 1200px) {
    .review--photos-reviews .carousel-nav-wrapper {
        justify-content: flex-end;
        margin-top: 0;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
    }
}
.review--photos-reviews .carousel-nav {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--cp-primary-color-500);
    padding: 0;
    display: grid;
    place-items: center;
}
@media screen and (min-width: 1200px) {
    .review--photos-reviews .carousel-nav {
        width: 1.75rem;
        height: 1.75rem;
    }
}

.review--photos-reviews .carousel-nav .bi {
    color: var(--cp-primary-color-500);
    font-size: 0.625rem;
    -webkit-text-stroke: 1px;
    display: flex;
}
@media screen and (min-width: 1200px) {
    .review--photos-reviews .carousel-nav .bi {
        color: var(--cp-primary-color-600);
        font-size: 0.75rem;
    }
}

#addReview {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
}

/* rating styles */
.product_rating input {
    display: none;
}

.product_rating label {
    cursor: pointer;
    padding: 0.15rem;
}
.product_rating label i {
    color: #ddd;
}

/* hover effect */
.product_rating:hover label i {
    color: #ddd !important;
}

.product_rating label:hover i,
.product_rating label:hover ~ label i {
    color: orange !important;
}
/* select effect */
.product_rating input:checked + label i,
.product_rating input:checked ~ label i {
    color: orange;
}

/* END REVIEW SECTION */

/* SERVICE FEATURES */
.service-features {
    padding-block-start: 0;
}

.service-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media screen and (min-width: 768px) {
    .service-features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.service-card {
    padding: 0.875rem;
    text-align: center;
    border: 1px solid var(--cp-primary-color-200);
    border-radius: var(--cp-card-border-radius);
}
@media screen and (min-width: 768px) {
    .service-card {
        padding: 1.25rem;
    }
}

.service-icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .service-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.service-card h3 {
    font-size: 0.875rem;
    margin-block: 0.5em;
}
@media screen and (min-width: 1200px) {
    .service-card h3 {
        font-size: 1rem;
        line-height: 1.2;
        font-weight: 600;
        margin-block: 0.75em;
    }
}

.service-card p {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--cp-body-text-color);
    margin: 0;
    font-weight: 400;
}

/* Responsive Design */
/* @media (max-width: 991px) {
    .service-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
} */

/* END SERVICE FEATURES */

/* PRODUCT GRID */
.products-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory;
    scroll-padding: 0;
    z-index: 10;
}

@media screen and (min-width: 1200px) {
    .products-row {
        padding-block: 1.25rem;
    }
}

.product-col {
    padding-inline: 1.25rem;
}

.products-row .col-6 {
    scroll-snap-align: start;
}
@media screen and (min-width: 768px) {
    .products-row + .carousel-dots {
        display: none;
    }
}

/* Products Carousel */
@media screen and (min-width: 1200px) {
    :is(.related-products, .recommended-products) .carousel-container {
        padding-inline: 3rem;
    }
}

:is(.related-products, .recommended-products) .carousel-nav-wrapper {
    --top: 50%;
    display: none;
    position: absolute;
    top: var(--top);
    left: 0;
    transform: translate(0, -50%);
    pointer-events: none;
}

@media screen and (min-width: 1200px) {
    :is(.related-products, .recommended-products) .carousel-nav-wrapper {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

:is(.related-products, .recommended-products) .carousel-nav {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--cp-primary-color-100);
    border-radius: var(--cp-btn-border-radius);
    background-color: var(--cp-white-color);
}

:is(.related-products, .recommended-products) .carousel-nav {
    pointer-events: all;
}

:is(.related-products, .recommended-products) .carousel-nav i {
    font-size: 0.875rem;
    -webkit-text-stroke: 1px;
}
/* End Products Carousel */

/* PAGINATION */
.pagination {
    font-family: var(--cp-ff-secondary);
    justify-content: center;
    gap: 0.6em;
    margin-top: 2.75em;
}
.page-link {
    border: 1px solid var(--cp-primary-color-200);
    border-radius: var(--cp-btn-border-radius);
    color: var(--cp-primary-color-600);
    height: 1.875em;
    padding-inline: 0.6875em;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    display: grid;
    place-items: center;
}

.page-item:is(:first-child, :last-child) .page-link {
    border-radius: var(--cp-btn-border-radius);
}

.page-link.active {
    border: 1px solid var(--cp-primary-color-200);
    border-radius: var(--cp-btn-border-radius);
    background-color: var(--cp-primary-color-500);
    color: var(--cp-white-color);
}
.page-item:is(:first-child, :last-child) .page-link:has(i) {
    padding-inline: 0.125rem;
}
.page-item:is(:first-child, :last-child) .page-link i {
    font-size: 0.75rem;
    font-weight: 700;
}
/* END PAGINATION */

/* UPLOAD IMAGE */
.product-customization--upload-image-wrapper {
    margin-top: 1.25rem;
}
@media screen and (min-width: 992px) {
    .product-customization--upload-image-wrapper {
        margin-top: 1.375rem;
    }
}
.upload-title {
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 8px;
    display: block;
}

.upload-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.875rem;
    border: 1px dashed var(--cp-secondary-color-600);
    text-align: center;
    background-color: var(--cp-white-color);
    border-radius: var(--cp-btn-border-radius);
    cursor: default;
    transition: all 0.3s ease;
}

.upload-area.dragging {
    background-color: #e6f7ff;
    border-color: #007bff;
}

.upload-icon {
    width: 0.875rem;
    color: var(--cp-secondary-color-600);
}
.upload-image--text {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}
.browse-btn {
    background-color: var(--cp-primary-color-500);
    color: var(--cp-white-color);
    /* font-size: 0.75rem; */
}

.browse-btn:hover {
    background-color: #553c9a;
}

/* END UPLOAD IMAGE */

.swal2-container {
    z-index: 999999999999 !important;
    top: 200px !important;
}