/* ===========================================
   PUMPKIN DUKE — SINGLE PRODUCT PAGE
   File: assets/css/single-product.css
   Loads on: single product pages only
   Depends on: master.css
   =========================================== */


/* ==========================================
   1. BREADCRUMB
   ========================================== */
.pd-breadcrumb {
    padding: var(--space-5) 0 var(--space-4);
}

.pd-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
}

.pd-breadcrumb__link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-gray-dark);
    transition: color var(--t-base);
}

.pd-breadcrumb__link:hover {
    color: var(--color-primary);
}

.pd-breadcrumb__sep {
    font-size: var(--font-size-xs);
    color: var(--color-border-mid);
}

.pd-breadcrumb__item--current {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-gray);
}


/* ==========================================
   2. PRODUCT LAYOUT — TWO COLUMN
   ========================================== */
.pd-product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: start;
    padding-bottom: var(--space-8);
}

@media (min-width: 789px) {
    .pd-product-layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }
}

@media (min-width: 1239px) {
    .pd-product-layout {
        grid-template-columns: 1fr 480px;
        gap: var(--space-8);
    }
}


/* ==========================================
   3. GALLERY — LEFT COLUMN
   ========================================== */
.pd-product-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (min-width: 789px) {
    .pd-product-gallery {
        position: sticky;
        top: calc(72px + var(--space-5));
    }
}

/* Tags overlay */
.pd-product-gallery__tags {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 2;
    pointer-events: none;
}

/* Main image */
.pd-product-gallery__main {
    aspect-ratio: 1 / 1;
    background-color: var(--color-surface-2);
    overflow: hidden;
    position: relative;
}

.pd-gallery-main-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.pd-gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.pd-product-gallery__main:hover .pd-gallery-main-img {
    transform: scale(1.02);
}

.pd-gallery-main-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-gallery-main-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

/* Thumbnails */
.pd-product-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pd-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--color-border-soft);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--t-base);
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.pd-thumb:hover {
    border-color: var(--color-border-mid);
}

.pd-thumb:hover img {
    transform: scale(1.05);
}

.pd-thumb.is-active {
    border-color: var(--color-primary);
}

@media (min-width: 541px) {
    .pd-thumb {
        width: 80px;
        height: 80px;
    }
}


/* ==========================================
   4. PRODUCT INFO — RIGHT COLUMN
   ========================================== */
.pd-product-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pd-product-info__name {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

@media (min-width: 1389px) {
    .pd-product-info__name {
        font-size: var(--font-size-3xl);
    }
}

/* Price + Rating row */
.pd-product-info__price-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.pd-product-info__price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.pd-product-info__price del {
    font-size: var(--font-size-md);
    color: var(--color-gray-dark);
    font-weight: var(--font-weight-light);
    margin-right: var(--space-2);
}

/* Stars */
.pd-product-info__rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pd-stars {
    display: flex;
    gap: 1px;
}

.pd-star {
    font-size: 14px;
    color: var(--color-border-mid);
    line-height: 1;
}

.pd-star--full {
    color: var(--color-primary);
}

.pd-star--half {
    color: var(--color-primary);
    opacity: 0.6;
}

.pd-rating-count {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    transition: color var(--t-base);
}

.pd-rating-count:hover {
    color: var(--color-primary);
}

/* Divider */
.pd-product-info__divider {
    height: 1px;
    background-color: var(--color-border-soft);
}

/* Section label pattern */
.pd-product-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pd-product-section__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-gray-dark);
}


/* ==========================================
   5. GARMENT SWITCHER
   ========================================== */
.pd-garment-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pd-garment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-main);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-gray);
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--t-base), color var(--t-base);
    text-decoration: none;
}

.pd-garment-btn:hover {
    border-color: var(--color-border-mid);
    color: var(--color-white);
}

.pd-garment-btn.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    cursor: default;
}


/* ==========================================
   6. VARIATION FORM — NATIVE WC HIDDEN
      Our custom swatches sit above this
   ========================================== */
.pd-variations-wrapper .variations_form .variations {
    display: none !important; /* Hidden — our swatches replace visually */
}

.pd-variations-wrapper .variations_form .reset_variations {
    display: none !important;
}

/* Keep variation price/availability outputs visible */
.pd-variations-wrapper .woocommerce-variation-price,
.pd-variations-wrapper .woocommerce-variation-availability {
    display: block;
}

.pd-variations-wrapper .woocommerce-variation-price .price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* Quantity + Add to Cart row */
.pd-variations-wrapper .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pd-variations-wrapper .quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-2);
    flex-shrink: 0;
}

.pd-variations-wrapper .qty {
    width: 48px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--color-white);
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}

.pd-variations-wrapper .qty::-webkit-outer-spin-button,
.pd-variations-wrapper .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.pd-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    background: none;
    border: none;
    color: var(--color-gray);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: color var(--t-base);
    flex-shrink: 0;
    line-height: 1;
}

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

.pd-variations-wrapper .single_add_to_cart_button {
    flex: 1;
    min-width: 160px;
    height: 44px;
    background-color: var(--color-primary);
    color: var(--color-bg);
    border: none;
    font-family: var(--font-main);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--t-base);
}

.pd-variations-wrapper .single_add_to_cart_button:hover {
    background-color: var(--color-primary-light);
}

.pd-variations-wrapper .single_add_to_cart_button:disabled,
.pd-variations-wrapper .single_add_to_cart_button.disabled {
    background-color: var(--color-surface-3);
    color: var(--color-gray-dark);
    cursor: not-allowed;
}

/* Custom swatches — injected by JS */
.pd-swatch-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pd-swatch-group__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-gray-dark);
}

.pd-swatch-group__label span {
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
    text-transform: none;
    letter-spacing: 0;
}

.pd-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Text swatches (placement, size) */
.pd-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border);
    font-family: var(--font-main);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-gray);
    cursor: pointer;
    transition: border-color var(--t-base), color var(--t-base), background-color var(--t-base);
}

.pd-swatch:hover:not(.is-disabled) {
    border-color: var(--color-border-mid);
    color: var(--color-white);
}

.pd-swatch.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary-glow);
}

.pd-swatch.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
}




/* ==========================================
   7. GIFT SECTION
   ========================================== */
.pd-gift-section {
    border: 1px solid var(--color-border-soft);
}

.pd-gift-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
    text-align: left;
    transition: background-color var(--t-base);
}

.pd-gift-toggle:hover {
    background-color: var(--color-surface-2);
}

.pd-gift-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-border-mid);
    color: var(--color-primary);
    font-size: var(--font-size-md);
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--t-base);
}

.pd-gift-toggle[aria-expanded="true"] .pd-gift-toggle__icon {
    transform: rotate(45deg);
}

.pd-gift-toggle__text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-white);
}

.pd-gift-body {
    padding: 0 var(--space-5) var(--space-5);
    display: none;
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-4);
}

.pd-gift-body.is-open {
    display: block;
}

.pd-gift-note {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-base);
}

.pd-gift-optional {
    font-weight: var(--font-weight-light);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
}

.pd-gift-textarea {
    min-height: 100px;
    resize: vertical;
}

.pd-gift-counter {
    display: block;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    margin-top: var(--space-2);
}


/* ==========================================
   8. TRUST SIGNALS
   ========================================== */
.pd-trust-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface-1);
    border: 1px solid var(--color-border-soft);
}

.pd-trust-item {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    letter-spacing: var(--letter-spacing-wide);
    padding-left: var(--space-4);
    position: relative;
}

.pd-trust-item::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-primary);
}


/* ==========================================
   9. SECURE CHECKOUT
   ========================================== */
.pd-secure-checkout {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.pd-secure-checkout__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-gray-dark);
}

.pd-secure-checkout__icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.pd-payment-icon {
    width: 38px;
    height: 24px;
    border-radius: 3px;
    flex-shrink: 0;
}


/* ==========================================
   10. BELOW — TABS
   ========================================== */
.pd-product-below {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-bottom: var(--space-9);
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-7);
}

/* Tab Nav */
.pd-tabs__nav {
    display: flex;
    border-bottom: 1px solid var(--color-border-soft);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
}

.pd-tabs__nav::-webkit-scrollbar {
    display: none;
}

.pd-tab-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-main);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-gray-dark);
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color var(--t-base), border-color var(--t-base);
}

.pd-tab-btn:hover {
    color: var(--color-gray);
}

.pd-tab-btn.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Tab Panels */
.pd-tab-panel {
    display: none;
    padding: var(--space-6) 0;
}

.pd-tab-panel.is-active {
    display: block;
}

.pd-tab-content p,
.pd-tab-content li {
    font-size: var(--font-size-base);
    color: var(--color-gray);
    line-height: var(--line-height-loose);
}

.pd-tab-empty {
    color: var(--color-gray-dark);
    font-style: italic;
}

/* Size Table */
.pd-size-guide__note {
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-gray);
}

.pd-size-table-wrapper {
    overflow-x: auto;
}

.pd-size-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 400px;
}

.pd-size-table th,
.pd-size-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border-soft);
}

.pd-size-table th {
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-gray-dark);
    font-size: var(--font-size-xs);
}

.pd-size-table td {
    color: var(--color-gray);
}

.pd-size-table tbody tr:hover td {
    background-color: var(--color-surface-2);
}

/* Care + Shipping lists */
.pd-care-list,
.pd-shipping-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pd-care-list li,
.pd-shipping-list li {
    padding-left: var(--space-4);
    position: relative;
}

.pd-care-list li::before,
.pd-shipping-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-primary);
}


/* ==========================================
   11. REVIEWS
   ========================================== */
.pd-reviews {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.pd-reviews .woocommerce-Reviews-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-5);
}

.pd-reviews .commentlist {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pd-reviews .comment_container {
    display: flex;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-soft);
}

.pd-reviews .comment-text {
    flex: 1;
}

.pd-reviews .woocommerce-review__author {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

.pd-reviews .woocommerce-review__dash {
    color: var(--color-gray-dark);
    margin: 0 var(--space-2);
}

.pd-reviews .woocommerce-review__published-date {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
}

.pd-reviews .star-rating {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-3);
}

.pd-reviews .star-rating span::before {
    color: var(--color-primary);
}

.pd-reviews .description p {
    font-size: var(--font-size-base);
    color: var(--color-gray);
    line-height: var(--line-height-base);
}

/* Review form */
.pd-reviews #review_form_wrapper {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-soft);
}

.pd-reviews .comment-reply-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    display: block;
    margin-bottom: var(--space-5);
}

.pd-reviews .comment-form-rating {
    margin-bottom: var(--space-5);
}

.pd-reviews .comment-form-rating label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-gray);
    margin-bottom: var(--space-2);
}

.pd-reviews select#rating {
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-white);
    font-family: var(--font-main);
    padding: var(--space-3) var(--space-4);
    appearance: none;
    outline: none;
    width: 100%;
    max-width: 240px;
    cursor: pointer;
}

.pd-reviews .comment-form p {
    margin-bottom: var(--space-4);
}

.pd-reviews .comment-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-gray);
    margin-bottom: var(--space-2);
}

.pd-reviews .comment-form input[type="text"],
.pd-reviews .comment-form input[type="email"],
.pd-reviews .comment-form textarea {
    width: 100%;
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-white);
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-4);
    outline: none;
    transition: border-color var(--t-base);
}

.pd-reviews .comment-form input:focus,
.pd-reviews .comment-form textarea:focus {
    border-color: var(--color-primary);
}

.pd-reviews .comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.pd-reviews .comment-form .form-submit input[type="submit"] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-bg);
    border: none;
    font-family: var(--font-main);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--t-base);
}

.pd-reviews .comment-form .form-submit input[type="submit"]:hover {
    background-color: var(--color-primary-light);
}

.pd-reviews .woocommerce-noreviews,
.pd-reviews .woocommerce-verification-required {
    font-size: var(--font-size-base);
    color: var(--color-gray-dark);
}


/* ==========================================
   12. YOU MAY ALSO LIKE
   ========================================== */
.pd-related__header {
    margin-bottom: var(--space-6);
}

.pd-related__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.pd-related__heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
    letter-spacing: var(--letter-spacing-tight);
}

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

@media (min-width: 789px) {
    .pd-related__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ==========================================
   13. LIGHTBOX
   ========================================== */
.pd-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}

.pd-lightbox.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
}

.pd-lightbox__content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-lightbox__close {
    position: absolute;
    top: calc(-1 * var(--space-6));
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border-mid);
    color: var(--color-gray);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: color var(--t-base), border-color var(--t-base);
}

.pd-lightbox__close:hover {
    color: var(--color-white);
    border-color: var(--color-white);
}

.pd-lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    display: block;
}


/* ==========================================
   14. WC NOTICES ON SINGLE PRODUCT
   ========================================== */
.woocommerce-notices-wrapper {
    margin-bottom: var(--space-5);
}