/**
 * Product Overview, Product Detail, Product Add-ons and Suggested Products — layout only.
 *
 * Colours, fonts and spacing are left to Divi's typography and decoration
 * controls, so this file deliberately sets no text styling. Breakpoints match
 * Divi's own: tablet at 980px and phone at 767px.
 */

/* -------------------------------------------------------------------------
 * Shared badges (detail + add-ons)
 * ------------------------------------------------------------------------- */

.spruce-product-badge-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-top: 0.75em;
}

.spruce-product-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0.25em 0.6em;
    font-size: 0.75em;
    line-height: 1.4;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Product Overview grid + card
 * ------------------------------------------------------------------------- */

.spruce-product-overview__grid {
    display: grid;
    gap: 1.25em;
    align-items: stretch;
}

.spruce-product-overview__grid--desktop-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.spruce-product-overview__grid--desktop-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spruce-product-overview__grid--desktop-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spruce-product-overview__grid--desktop-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
    .spruce-product-overview__grid--tablet-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .spruce-product-overview__grid--tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spruce-product-overview__grid--tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spruce-product-overview__grid--tablet-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .spruce-product-overview__grid--phone-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .spruce-product-overview__grid--phone-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spruce-product-overview__grid--phone-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spruce-product-overview__grid--phone-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.spruce-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.spruce-product-card__sale-banner {
    position: absolute;
    top: 1.15em;
    right: -2.45em;
    z-index: 2;
    width: 8.75em;
    padding: 0.3em 0;
    text-align: center;
    line-height: 1.2;
    transform: rotate(45deg);
    pointer-events: none;
    box-sizing: border-box;
}

.spruce-product-card:hover {
    transform: translateY(-4px);
}

.spruce-product-card__image img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.spruce-product-card__title {
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------------------
 * Product Detail — image | info, stacked on tablet/phone
 * ------------------------------------------------------------------------- */

.spruce-product-detail {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.5em;
    box-sizing: border-box;
}

@media (max-width: 980px) {
    .spruce-product-detail {
        flex-direction: column-reverse;
    }
}

.spruce-product-detail__image,
.spruce-product-detail__info {
    flex: 1;
    min-width: 0;
}

.spruce-product-detail__image img {
    display: block;
    width: 100%;
    height: auto;
}

.spruce-product-detail__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.spruce-product-detail__title {
    margin: 0;
    padding: 0;
}

.spruce-product-detail__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
}

.spruce-product-detail__price-regular--was {
    text-decoration: line-through;
}

.spruce-product-detail__price-sale,
.spruce-product-detail__price-save,
.spruce-product-detail__price-ends {
    color: var(--gcid-secondary-color);
}

/* -------------------------------------------------------------------------
 * Product Add-ons list
 * ------------------------------------------------------------------------- */

.spruce-product-addons__list {
    display: grid;
    gap: 1.25em;
    align-items: stretch;
}

.spruce-product-addons__list--desktop-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.spruce-product-addons__list--desktop-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spruce-product-addons__list--desktop-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spruce-product-addons__list--desktop-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
    .spruce-product-addons__list--tablet-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .spruce-product-addons__list--tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spruce-product-addons__list--tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spruce-product-addons__list--tablet-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .spruce-product-addons__list--phone-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .spruce-product-addons__list--phone-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spruce-product-addons__list--phone-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spruce-product-addons__list--phone-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.spruce-product-addons__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5em;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .spruce-product-addons__list.is-list-layout .spruce-product-addons__item {
        display: grid;
        grid-template-columns: 1.5fr 3fr auto;
        align-items: start;
        gap: 1.25em;
    }

    .spruce-product-addons__list.is-list-layout .spruce-product-addons__price-wrap {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .spruce-product-addons__item {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title price"
            "desc desc";
        align-items: start;
        gap: 0.5em;
    }

    .spruce-product-addons__title { grid-area: title; }
    .spruce-product-addons__price-wrap { grid-area: price; }
    .spruce-product-addons__description { grid-area: desc; }
}

.spruce-product-addons__price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: auto;
}

.spruce-product-addons__price {
    white-space: nowrap;
}

.spruce-product-addons__header {
    margin: 0 0 1rem 0;
}