/* =============================================================================
   Product Detail – BEM Stylesheet
   File: /wp-content/themes/flatsome-child/assets/css/product-detail.css
   ============================================================================= */

/* ── CSS Custom Properties ──────────────────────────────────────────────────── */
:root {
    --pd-primary     : #aa7e3d;
    --pd-primary-dk  : #aa7e3d2a;
    --pd-primary-lt  : #d4edda;
    --pd-bg          : #f3f5ef;
    --pd-card-bg     : #ffffff;
    --pd-border      : #dde3d8;
    --pd-text        : #1a2a1e;
    --pd-text-muted  : #6b7c74;
    --pd-radius      : 12px;
    --pd-shadow      : 0 2px 16px rgba(0, 0, 0, .07);
    --pd-shadow-lg   : 0 6px 28px rgba(0, 0, 0, .12);
    --pd-gap         : 24px;
}

/* ── Page wrapper ───────────────────────────────────────────────────────────── */
.product-detail {
    max-width : 1320px;
    margin    : 0 auto;
    padding   : 28px 24px 72px;
}

.single-product #main {
  background-color: #F2F4E3;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.product-detail__breadcrumb {
    margin-bottom: 20px;
}

.product-detail__breadcrumb .woocommerce-breadcrumb {
    font-size      : .8125rem;
    color          : var(--pd-text-muted);
    background     : none;
    padding        : 0;
    margin         : 0;
}

.product-detail__breadcrumb .woocommerce-breadcrumb a {
    color          : var(--pd-primary);
    text-decoration: none;
    transition     : color .2s;
}

.product-detail__breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--pd-primary-dk);
}

/* ── 3-column main grid ─────────────────────────────────────────────────────── */
.product-detail__main {
    display              : grid;
    grid-template-columns: 1fr 1.1fr 320px;
    gap                  : var(--pd-gap);
    align-items          : start;
    margin-bottom        : 40px;
}

/* =============================================================================
   GALLERY (Left Column)
   ============================================================================= */

.product-detail__gallery {
    position: sticky;
    top     : 24px;
}

/* Main image container */
.product-detail__gallery-main {
    width        : 100%;
    aspect-ratio : 1 / 1;
    border-radius: var(--pd-radius);
    overflow     : hidden;
    background   : var(--pd-card-bg);
    box-shadow   : var(--pd-shadow);
    margin-bottom: 12px;
    cursor       : zoom-in;
}

.product-detail__main-image {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform .4s ease, opacity .15s ease;
}

.product-detail__gallery-main:hover .product-detail__main-image {
    transform: scale(1.04);
}

/* Thumbnail strip */
.product-detail__gallery-thumbs {
    display       : flex;
    gap           : 8px;
    overflow-x    : auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--pd-border) transparent;
}

.product-detail__thumb {
    flex-shrink  : 0;
    width        : 68px;
    height       : 68px;
    border-radius: 8px;
    border       : 2px solid transparent;
    overflow     : hidden;
    cursor       : pointer;
    padding      : 0;
    background   : var(--pd-card-bg);
    transition   : border-color .2s, box-shadow .2s;
}

.product-detail__thumb img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
}

.product-detail__thumb:hover,
.product-detail__thumb--active {
    border-color: var(--pd-primary);
    box-shadow  : 0 0 0 1px var(--pd-primary);
    outline     : none;
}

/* =============================================================================
   INFO (Center Column)
   ============================================================================= */

.product-detail__info {
    display       : flex;
    flex-direction: column;
    gap           : 20px;
}

/* Title */
.product-detail__title {
    font-size  : 1.625rem;
    font-weight: 800;
    color      : var(--pd-text);
    line-height: 1.35;
    margin     : 0;
}

/* Rating */
.product-detail__rating .woocommerce-product-rating {
    display    : flex;
    align-items: center;
    gap        : 8px;
    font-size  : .875rem;
    color      : var(--pd-text-muted);
    margin     : 0;
}

/* Price */
.product-detail__price .price {
    display    : flex;
    align-items: baseline;
    flex-wrap  : wrap;
    gap        : 10px;
}

.product-detail__price ins {
    font-size      : 1.875rem;
    font-weight    : 800;
    color          : var(--pd-primary);
    text-decoration: none;
}

.product-detail__price del {
    font-size: 29px;
    color    : var(--fs-color-primary);
    opacity  : .75;
}

.product-detail__price .woocommerce-Price-amount {
    font-size  : 1.875rem;
    font-weight: 800;
    color      : var(--pd-primary);
}

/* Short description */
.product-detail__summary {
    font-size   : .9375rem;
    color       : #374151;
    line-height : 1.75;
    border-left : 3px solid var(--pd-primary-lt);
    padding-left: 16px;
    margin      : 0;
}

/* Attribute list */
.product-detail__attributes {
    list-style   : none;
    margin       : 0;
    padding      : 0;
    border       : 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    overflow     : hidden;
    background   : var(--pd-card-bg);
}

.product-detail__attribute {
    display      : flex;
    align-items  : flex-start;
    gap          : 10px;
    padding      : 10px 16px;
    font-size    : .875rem;
    line-height  : 1.5;
    margin-bottom: 0;
}

.product-detail__attribute:last-child {
    border-bottom: none;
}

.product-detail__attribute-icon {
    flex-shrink: 0;
    line-height: 1.4;
    font-size  : 1rem;
}

.product-detail__attribute-label {
    font-weight: 700;
    color      : var(--pd-text);
    min-width  : 110px;
    flex-shrink: 0;
}

.product-detail__attribute-value {
    color: #374151;
    flex : 1;
}

/* Add to Cart form */
.product-detail__cart {
    display       : flex;
    flex-direction: column;
    gap           : 0;
}

.product-detail__cart form.cart {
    display    : flex;
    align-items: center;
    gap        : 12px;
    flex-wrap  : wrap;
}

/* Qty wrapper injected by JS */
.product-detail__qty-wrap {
    display      : flex;
    align-items  : center;
    border       : 1.5px solid var(--pd-border);
    border-radius: 10px;
    overflow     : hidden;
    background   : var(--pd-card-bg);
    flex-shrink  : 0;
}

.product-detail__qty-btn {
  margin: 0;
}

.pd-qty-btn {
    width          : 42px;
    height         : 50px;
    background     : none;
    border         : none;
    font-size      : 1.375rem;
    font-weight    : 700;
    color          : var(--pd-primary);
    cursor         : pointer;
    line-height    : 1;
    transition     : background .2s;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
}

.pd-qty-btn:hover {
    background: var(--pd-primary-lt);
}

.product-detail__qty-wrap .qty {
    width       : 56px;
    height      : 50px;
    border      : none;
    border-left : 1.5px solid var(--pd-border);
    border-right: 1.5px solid var(--pd-border);
    text-align  : center;
    font-size   : 1.0625rem;
    font-weight : 700;
    background  : transparent;
    color       : var(--pd-text);
    -moz-appearance: textfield;
    border: 0;
    box-shadow: none;
}

.product-detail__qty-wrap .qty::-webkit-outer-spin-button,
.product-detail__qty-wrap .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Hide native WooCommerce quantity wrapper (replaced by our custom one) */
.product-detail__cart .quantity:not(.product-detail__qty-wrap) {
    display: none;
}

/* Add to cart button */
.product-detail__cart .single_add_to_cart_button {
    flex           : 1;
    min-width      : 160px;
    padding        : 5px 28px;
    background     : var(--pd-primary) !important;
    color          : #fff;
    font-size      : 1rem;
    font-weight    : 700;
    border         : none;
    border-radius  : 50px;
    cursor         : pointer;
    text-decoration: none;
    text-align     : center;
    transition     : background .2s, transform .15s, box-shadow .2s;
    white-space    : nowrap;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    box-shadow     : 0 4px 14px rgba(47, 107, 79, .3);
}

.product-detail__cart .single_add_to_cart_button:hover,
.product-detail__cart .single_add_to_cart_button:focus-visible {
    transform : translateY(-2px);
    outline   : none;
}

/* Commitments grid */
.product-detail__commitments {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 8px;
}

.product-detail__commitment {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 10px 14px;
    background   : var(--pd-card-bg);
    border       : 1px solid var(--pd-border);
    border-radius: 10px;
    font-size    : .8125rem;
    font-weight  : 500;
    color        : var(--pd-text);
    line-height  : 1.4;
}

.product-detail__commitment-icon {
    font-size  : 1.125rem;
    flex-shrink: 0;
}

/* =============================================================================
   PURCHASE BOX (Right Column)
   ============================================================================= */

.product-detail__purchase-box {
    display       : flex;
    flex-direction: column;
    gap           : 16px;
    position      : sticky;
    top           : 24px;
}

/* Purchase Card – base */
.purchase-card {
    background    : var(--pd-card-bg);
    border        : 1px solid var(--pd-border);
    border-radius : var(--pd-radius);
    padding       : 20px;
    box-shadow    : var(--pd-shadow);
    display       : flex;
    flex-direction: column;
    gap           : 12px;
}

.purchase-card__header {
    display    : flex;
    align-items: center;
}

.purchase-card__badge {
    display      : inline-block;
    padding      : 4px 12px;
    font-size    : .8125rem;
    font-weight  : 700;
    border-radius: 20px;
    background   : #f0f0f0;
    color        : #374151;
}

.purchase-card__badge--green {
    background: var(--pd-primary-lt);
    color     : var(--pd-primary-dk);
}

.purchase-card__badge--earth {
    background: #fff3e0;
    color     : #e65100;
}

.purchase-card__price {
    font-size  : 1.5rem;
    font-weight: 800;
    color      : var(--pd-primary);
    line-height: 1.2;
}

.purchase-card__price .woocommerce-Price-amount {
    font-size  : 1.5rem;
    font-weight: 800;
    color      : var(--pd-primary);
}

.purchase-card__price ins {
    text-decoration: none;
}

.purchase-card__desc {
    font-size  : .8125rem;
    color      : var(--pd-text-muted);
    line-height: 1.6;
    margin     : 0;
}

.purchase-card__copy-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 6px;
    padding        : 9px 16px;
    font-size      : .8125rem;
    font-weight    : 600;
    color          : var(--pd-primary);
    background     : var(--pd-primary-lt);
    border         : 1px solid transparent;
    border-radius  : 8px;
    cursor         : pointer;
    transition     : background .2s, color .2s;
    width          : 100%;
}

.purchase-card__copy-btn:hover {
    background: var(--pd-primary);
    color     : #fff;
}

.purchase-card__copy-btn--copied {
    background    : var(--pd-primary-dk);
    color         : #fff;
    pointer-events: none;
}

.purchase-card__cta {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 6px;
    padding        : 11px 20px;
    font-size      : .9375rem;
    font-weight    : 700;
    text-decoration: none;
    border-radius  : 50px;
    text-align     : center;
    background     : #efefef;
    color          : var(--pd-text);
    transition     : background .2s, color .2s, transform .15s;
}

.purchase-card__cta:hover {
    background: var(--pd-primary-dk);
    color     : #fff;
    transform : translateY(-1px);
}

.purchase-card__cta--primary {
    background: var(--pd-primary);
    color     : #fff;
    box-shadow: 0 4px 14px rgba(47, 107, 79, .25);
}

.purchase-card__cta--primary:hover {
    background: var(--pd-primary-dk);
    color     : #fff;
}

.purchase-card__cta--map {
    background: #fff3e0;
    color     : #e65100;
}

.purchase-card__cta--map:hover {
    background: #e65100;
    color     : #fff;
}

.purchase-card__address {
    font-size  : .875rem;
    color      : var(--pd-text);
    line-height: 1.7;
    font-style : normal;
    margin     : 0;
}

/* Card accent borders */
.purchase-card--wholesale { border-left: 3px solid #9e9e9e; }
.purchase-card--retail    { border-left: 3px solid var(--pd-primary); box-shadow: 0 4px 20px rgba(47, 107, 79, .12); }
.purchase-card--store     { border-left: 3px solid #e65100; }

/* =============================================================================
   PRODUCT DESCRIPTION (Below main grid)
   ============================================================================= */

.product-detail__description {
    background   : var(--pd-card-bg);
    border-radius: var(--pd-radius);
    padding      : 40px 44px;
    box-shadow   : var(--pd-shadow);
    margin-bottom: 40px;
    border       : 1px solid var(--pd-border);
}

.product-detail__section-title {
    font-size    : 1.375rem;
    font-weight  : 800;
    color        : var(--pd-text);
    margin       : 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--pd-primary-lt);
    position     : relative;
}

.product-detail__section-title::after {
    content   : '';
    position  : absolute;
    bottom    : -2px;
    left      : 0;
    width     : 56px;
    height    : 2px;
    background: var(--pd-primary);
}

.product-detail__description-content {
    font-size  : .9375rem;
    color      : #374151;
    line-height: 1.85;
}

.product-detail__description-content img {
    max-width    : 100%;
    height       : auto;
    border-radius: 8px;
    display      : block;
    margin       : 16px 0;
}

.product-detail__description-content h2,
.product-detail__description-content h3,
.product-detail__description-content h4 {
    color      : var(--pd-text);
    font-weight: 700;
    margin     : 28px 0 12px;
    line-height: 1.35;
}

.product-detail__description-content p { margin-bottom: 1em; }

.product-detail__description-content ul,
.product-detail__description-content ol {
    padding-left: 20px;
    margin-bottom: 1em;
}

.product-detail__description-content table {
    width          : 100%;
    border-collapse: collapse;
    margin         : 16px 0;
    font-size      : .875rem;
}

.product-detail__description-content th,
.product-detail__description-content td {
    padding   : 10px 14px;
    border    : 1px solid var(--pd-border);
    text-align: left;
}

.product-detail__description-content th {
    background : var(--pd-bg);
    font-weight: 700;
}

/* =============================================================================
   RELATED PRODUCTS
   ============================================================================= */

.product-related {
    margin-bottom: 64px;
}

.product-related__title {
    font-size    : 1.375rem;
    font-weight  : 800;
    color        : var(--pd-text);
    margin       : 0 0 20px;
    padding-bottom: 16px;
    position     : relative;
}

.product-related__title::after {
    content   : '';
    position  : absolute;
    bottom    : -2px;
    left      : 0;
    width     : 56px;
    height    : 2px;
    background: var(--pd-primary);
}

.product-related__grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : var(--pd-gap);
}

/* Product Cards */
.product-card {
    background    : var(--pd-card-bg);
    border-radius : var(--pd-radius);
    box-shadow    : var(--pd-shadow);
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
    transition    : box-shadow .25s ease, transform .25s ease;
    border        : 1px solid var(--pd-border);
}

.product-card:hover {
    box-shadow: var(--pd-shadow-lg);
    transform : translateY(-4px);
}

.product-card__image-link {
    display     : block;
    aspect-ratio: 4 / 3;
    overflow    : hidden;
}

.product-card__image {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
    transition: transform .35s ease;
}

.product-card:hover .product-card__image {
    transform: scale(1.05);
}

.product-card__image--placeholder {
    width     : 100%;
    height    : 100%;
    background: #f3f4f6;
}

.product-card__body {
    padding       : 16px 18px 18px;
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    flex          : 1;
}

.product-card__title {
    margin     : 0;
    font-size  : .9375rem;
    font-weight: 700;
    color      : var(--pd-text);
    line-height: 1.45;
}

.product-card__title a {
    color          : inherit;
    text-decoration: none;
    transition     : color .2s;
}

.product-card__title a:hover {
    color: var(--pd-primary);
}

.product-card__price {
    display    : flex;
    align-items: baseline;
    gap        : 6px;
    flex-wrap  : wrap;
}

.product-card__price-old {
    font-size      : .8125rem;
    color          : var(--pd-text-muted);
    text-decoration: line-through;
}

.product-card__price-old .woocommerce-Price-amount {
    color: var(--pd-text-muted);
}

.product-card__price-current {
    font-size  : 1rem;
    font-weight: 700;
    color      : var(--pd-text);
}

.product-card__button {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    margin-top     : auto;
    padding        : 10px 20px;
    background     : var(--pd-primary);
    color          : #fff;
    font-size      : .875rem;
    font-weight    : 600;
    text-decoration: none;
    border-radius  : 50px;
    border         : none;
    cursor         : pointer;
    transition     : background .2s, transform .15s;
    text-align     : center;
}

.product-card__button:hover,
.product-card__button:focus-visible {
    transform : translateY(-1px);
    outline   : none;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* ── Tablet ≤ 1100px ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .product-detail__main {
        grid-template-columns: 1fr 1fr;
    }

    /* Purchase box spans full width below gallery+info */
    .product-detail__purchase-box {
        grid-column   : 1 / -1;
        flex-direction: row;
        align-items   : stretch;
        position      : static;
    }

    .purchase-card {
        flex: 1;
    }

    .product-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Mobile ≤ 768px ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .product-detail {
        padding: 16px 16px 48px;
    }

    .product-detail__main {
        grid-template-columns: 1fr;
    }

    .product-detail__gallery {
        position: static;
    }

    .product-detail__gallery-thumbs {
        flex-wrap : nowrap;
        overflow-x: auto;
    }

    .product-detail__purchase-box {
        flex-direction: column;
        position      : static;
    }

    .product-detail__commitments {
        grid-template-columns: 1fr;
    }

    .product-detail__description {
        padding: 24px 20px;
    }

    .product-related__grid {
        grid-template-columns: 1fr;
    }

    .product-detail__title {
        font-size: 1.375rem;
    }

    .product-detail__price .woocommerce-Price-amount,
    .product-detail__price ins {
        font-size: 1.5rem;
    }
}

/* ── Small mobile ≤ 480px ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .product-detail__cart form.cart {
        flex-direction: column;
        align-items   : stretch;
    }

    .product-detail__cart .single_add_to_cart_button {
        width: 100%;
    }

    .product-detail__qty-wrap {
        width          : 100%;
        justify-content: center;
    }

    .product-related__grid {
        gap: 16px;
    }
}