/**
 * Single Product Page Styles
 * Your Electrics - WooCommerce product detail page
 *
 * Only loaded on single product pages (conditional in functions.php)
 *
 * Uses !important where needed to override Astra theme and
 * product-overrides.css which both use high-specificity selectors.
 *
 * Structure:
 * 1. Two-column ~50/50 Grid Layout (desktop)
 * 2. Price — 2x Larger
 * 3. Add to Cart — Full-width, Larger
 * 4. Product Meta
 * 5. Trust Signals Banner
 * 6. Tabs Styling Enhancement
 * 7. Related Products (override 4-column grid)
 * 8. Mobile Responsive
 * 9. Product Image Gallery
 * 10. Product Title & Description
 */


/* ============================================
   0. BREADCRUMBS
   Full-width navigation path above the product grid
   Moved from inside the summary column via PHP hook
   ============================================ */

/**
 * WooCommerce breadcrumb — sits above the product grid div
 * Styled as a clean navigation path: Home / Category / Product
 */
.woocommerce .woocommerce-breadcrumb {
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-body) !important;
    color: var(--medium-gray) !important;
    margin-bottom: var(--spacing-xs) !important;
    padding: var(--spacing-xs) 0 !important;
}

/**
 * Hide any duplicate breadcrumbs that Astra injects inside
 * the summary column (right side). Our PHP hook moves the
 * primary breadcrumb above the product grid, but Astra may
 * re-add it depending on load order. This CSS catches it.
 */
.woocommerce div.product .summary.entry-summary .woocommerce-breadcrumb {
    display: none !important;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--primary-red) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-medium) !important;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--red-hover) !important;
    text-decoration: underline !important;
}


/* ============================================
   1. TWO-COLUMN GRID LAYOUT
   Desktop: ~50/50 balanced split (like CEF)
   Mobile: stacked single column
   ============================================ */

/**
 * Base product wrapper — block layout on mobile, tighter top padding
 */
.woocommerce div.product {
    padding: var(--spacing-sm) 0 var(--spacing-lg);
}

/**
 * Mobile: images and summary stack vertically
 */
.woocommerce div.product div.images,
.woocommerce div.product .summary.entry-summary {
    width: 100% !important;
    float: none !important;
}

/**
 * Desktop: CSS Grid — balanced ~50/50 split
 * Image column maxes at 500px, info column gets remaining space.
 * This keeps the image moderate in size like CEF's layout.
 */
@media (min-width: 1024px) {
    .woocommerce div.product {
        display: grid !important;
        grid-template-columns: minmax(0, 500px) 1fr !important;
        gap: var(--spacing-2xl) !important;
        align-items: start !important;
    }

    /* Images fill the left column */
    .woocommerce div.product div.images {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* Summary — right column with subtle shadow for depth */
    .woocommerce div.product .summary.entry-summary {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
        background: var(--white) !important;
        padding: var(--spacing-lg) !important;
        border-radius: var(--radius-sm) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    }

    /* Full-width sections below the two-column grid */
    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related.products,
    .woocommerce div.product .upsells.products {
        grid-column: 1 / -1 !important;
    }
}


/* ============================================
   2. PRICE — 2x LARGER
   Trade customers need clear, prominent pricing
   ============================================ */

/**
 * Single product price — enlarged for visibility
 * Was ~24px (--font-size-2xl), now 40px (roughly 2x)
 */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 2.5rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--dark-gray) !important;
    margin-bottom: var(--spacing-lg) !important;
    line-height: 1.2 !important;
}

/**
 * Sale price: original struck-through, smaller
 */
.woocommerce div.product p.price del {
    font-size: 1.25rem !important;
    color: var(--medium-gray) !important;
    font-weight: var(--font-weight-normal) !important;
    margin-right: var(--spacing-sm) !important;
}

.woocommerce div.product p.price ins {
    text-decoration: none !important;
}

/**
 * "inc VAT" / tax label — smaller, subtle
 */
.woocommerce div.product p.price .woocommerce-Price-suffix,
.woocommerce div.product span.price .woocommerce-Price-suffix {
    font-size: var(--font-size-base) !important;
    color: var(--medium-gray) !important;
    font-weight: var(--font-weight-normal) !important;
    display: block !important;
    margin-top: var(--spacing-xs) !important;
}


/* ============================================
   3. ADD TO CART — FULL-WIDTH, LARGER
   Prominent CTA button with generous padding
   ============================================ */

/**
 * Cart form — flex row for quantity + button
 * !important needed to beat Astra's default form layout
 */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-lg) !important;
    align-items: stretch !important;
}

/**
 * Quantity wrapper — prevent it from being too wide
 */
.woocommerce div.product form.cart .quantity {
    flex-shrink: 0 !important;
}

/**
 * Quantity input — taller to match button
 */
.woocommerce div.product form.cart .quantity .qty {
    width: 80px !important;
    min-height: 56px !important;
    height: 56px !important;
    font-size: var(--font-size-lg) !important;
    font-family: var(--font-body) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    text-align: center !important;
    padding: var(--spacing-sm) !important;
}

/**
 * Add to basket button — fills remaining width, bold, red
 * !important needed to override Astra's button styles
 */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 !important;
    min-height: 56px !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    background-color: var(--primary-red) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-bold) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast) !important;
}

.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: var(--red-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}


/* ============================================
   4. PRODUCT META
   SKU, categories, tags — compact, below add-to-cart
   ============================================ */

.woocommerce div.product .product_meta {
    padding-top: var(--spacing-md) !important;
    border-top: 1px solid var(--border-color) !important;
    margin-top: var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--medium-gray) !important;
}

.woocommerce div.product .product_meta > span {
    display: block !important;
    margin-bottom: var(--spacing-xs) !important;
}

.woocommerce div.product .product_meta a {
    color: var(--primary-red) !important;
    text-decoration: none !important;
}

.woocommerce div.product .product_meta a:hover {
    color: var(--red-hover) !important;
    text-decoration: underline !important;
}


/* ============================================
   4B. PRODUCT DOWNLOADS / DATASHEETS
   Download buttons for PDFs, spec sheets, manuals
   Displayed after product meta in the summary column
   ============================================ */

/**
 * Downloads container — sits below product meta with
 * a top border for visual separation.
 */
.ye-product-downloads {
    margin-top: var(--spacing-md) !important;
    padding-top: var(--spacing-md) !important;
    border-top: 1px solid var(--border-color) !important;
}

.ye-product-downloads__title {
    font-family: var(--font-heading) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--dark-gray) !important;
    margin: 0 0 var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.ye-product-downloads__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-sm) !important;
}

/**
 * Download button — red outline style consistent with brand.
 * Uses outline instead of filled to distinguish from the
 * primary "Add to Basket" CTA button above.
 */
.ye-product-downloads__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    padding: 10px 16px !important;
    background-color: var(--white) !important;
    color: var(--primary-red) !important;
    border: 2px solid var(--primary-red) !important;
    border-radius: var(--radius-sm) !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast) !important;
}

.ye-product-downloads__link:hover {
    background-color: var(--primary-red) !important;
    color: var(--white) !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
}

.ye-product-downloads__icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.ye-product-downloads__name {
    display: inline-block !important;
}


/* ============================================
   5. TRUST SIGNALS BANNER
   Inside the summary column — individual info boxes
   ============================================ */

/**
 * Trust signals container — 3-column grid of individual cards.
 * Each box gets its own background, border, and subtle shadow
 * for better contrast and visual separation.
 */
.ye-trust-signals {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-sm) !important;
    margin: var(--spacing-lg) 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/**
 * Individual trust signal card — light background with
 * subtle shadow for depth instead of flat colour blocks.
 */
.ye-trust-signal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.25rem !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--spacing-md) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.ye-trust-signal__icon {
    width: 28px !important;
    height: 28px !important;
    color: var(--primary-red) !important;
    flex-shrink: 0 !important;
}

.ye-trust-signal__title {
    font-family: var(--font-heading) !important;
    font-size: 0.75rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--dark-gray) !important;
    line-height: var(--line-height-tight) !important;
}

.ye-trust-signal__text {
    font-size: 0.65rem !important;
    color: var(--medium-gray) !important;
    line-height: 1.3 !important;
}


/* ============================================
   6. TABS STYLING ENHANCEMENT
   Clean white panels with subtle shadows for depth
   ============================================ */

/**
 * Tab navigation — clean underline style
 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none !important;
    padding: 0 !important;
    margin: var(--spacing-2xl) 0 0 !important;
    display: flex !important;
    border-bottom: 2px solid var(--border-color) !important;
    gap: 0 !important;
    background: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    color: var(--medium-gray) !important;
    text-decoration: none !important;
    font-family: var(--font-heading) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-sm) !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast) !important;
}

/**
 * Active tab — red bottom border (3px) for clear indication
 */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--primary-red) !important;
    border-bottom-color: var(--primary-red) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--dark-gray) !important;
}

/**
 * Tab panels — white background with subtle shadow for depth.
 * Replaces the coloured backgrounds (blue/yellow/green) with
 * a cleaner, more professional appearance.
 */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: var(--spacing-xl) !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    background: var(--white) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/**
 * Tab heading inside panel — clear spacing below
 */
.woocommerce div.product .woocommerce-tabs .panel h2:first-child {
    font-family: var(--font-heading) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--dark-gray) !important;
    margin-bottom: 20px !important;
}

/**
 * Specs/attributes table — clean rows
 */
.woocommerce div.product .woocommerce-tabs table.woocommerce-product-attributes,
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    display: table !important;
}

.woocommerce div.product .woocommerce-tabs table.woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
    text-align: left !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--dark-gray) !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-bottom: 1px solid var(--border-color) !important;
    width: 35% !important;
    font-size: var(--font-size-sm) !important;
}

.woocommerce div.product .woocommerce-tabs table.woocommerce-product-attributes td,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: var(--font-size-sm) !important;
}

.woocommerce div.product .woocommerce-tabs table.woocommerce-product-attributes p,
.woocommerce div.product .woocommerce-tabs table.shop_attributes p {
    margin: 0 !important;
}


/* ============================================
   7. RELATED PRODUCTS
   Override the 4-column grid from product-overrides.css
   Related products should be a clean 4-col grid at full width
   ============================================ */

.woocommerce div.product .related.products {
    margin-top: var(--spacing-3xl) !important;
    padding-top: var(--spacing-xl) !important;
    border-top: 1px solid var(--border-color) !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    overflow: visible !important;
}

.woocommerce div.product .related.products > h2 {
    font-family: var(--font-heading) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--dark-gray) !important;
    margin-bottom: var(--spacing-lg) !important;
}

/**
 * Related products grid — 4 columns spanning full container width.
 * The UL must be forced to width:100% because Astra/WooCommerce
 * can constrain it. LI items need width:auto + min-width:0 so
 * they respect the grid tracks instead of using a fixed width.
 */
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .related.products .products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--spacing-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: both !important;
}

/**
 * Related product cards — let them fill grid cells naturally.
 * Reset any fixed widths from Astra/WooCommerce float grid.
 */
.woocommerce div.product .related.products ul.products li.product,
.woocommerce div.product .related.products .products li.product {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Tablet: 2 columns */
@media (max-width: 1023px) {
    .woocommerce div.product .related.products ul.products,
    .woocommerce div.product .related.products .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile: 2 columns, tighter gap */
@media (max-width: 767px) {
    .woocommerce div.product .related.products ul.products,
    .woocommerce div.product .related.products .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm) !important;
    }
}


/* ============================================
   8. MOBILE RESPONSIVE
   Stack vertically, adjust sizes
   ============================================ */

/**
 * Mobile: stacked layout, slightly smaller price
 * Sticky cart bar behaviour preserved from responsive.css
 */
@media (max-width: 1023px) {
    .woocommerce div.product {
        display: block !important;
    }

    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 2rem !important;
    }

    .ye-trust-signals {
        padding: var(--spacing-sm) !important;
    }
}

@media (max-width: 767px) {
    .ye-trust-signals {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-sm) !important;
    }

    .ye-trust-signal {
        flex-direction: row !important;
        text-align: left !important;
        gap: var(--spacing-sm) !important;
    }

    .ye-trust-signal__icon {
        width: 24px !important;
        height: 24px !important;
    }

    /* Tabs: stack tab labels if needed */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap !important;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: var(--spacing-md) !important;
    }
}


/* ============================================
   9. PRODUCT IMAGE GALLERY
   Rounded, clean presentation
   ============================================ */

.woocommerce div.product div.images {
    margin-bottom: var(--spacing-md) !important;
}

/**
 * Main product image — moderate size, not dominating.
 * max-height prevents tall images from pushing content down.
 * object-fit: contain keeps aspect ratio without cropping.
 */
.woocommerce div.product div.images img {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    max-height: 450px !important;
    width: auto !important;
    object-fit: contain !important;
}

/**
 * Image wrapper — centred with subtle shadow for depth.
 * Light background keeps the product image visually contained.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--spacing-md) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/**
 * Gallery thumbnails — consistent sizing
 */
.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: var(--spacing-sm) !important;
    display: flex !important;
    gap: var(--spacing-sm) !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 auto !important;
}

.woocommerce div.product div.images .flex-control-thumbs img {
    border-radius: var(--radius-sm) !important;
    opacity: 0.7 !important;
    transition: opacity var(--transition-fast) !important;
    cursor: pointer !important;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
    opacity: 1 !important;
}


/* ============================================
   10. PRODUCT TITLE & DESCRIPTION
   Clean heading on single product page
   ============================================ */

.woocommerce div.product .product_title {
    font-family: var(--font-heading) !important;
    font-size: var(--font-size-2xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--dark-gray) !important;
    margin-bottom: 16px !important;
    line-height: var(--line-height-tight) !important;
}

/**
 * Short description — readable with spacing
 */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: var(--font-size-base) !important;
    color: var(--medium-gray) !important;
    line-height: var(--line-height-relaxed) !important;
    margin-bottom: var(--spacing-lg) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description ul {
    padding-left: var(--spacing-lg) !important;
    margin: var(--spacing-sm) 0 !important;
}

.woocommerce div.product .woocommerce-product-details__short-description li {
    margin-bottom: var(--spacing-xs) !important;
}

/**
 * Stock status
 */
.woocommerce div.product .stock.in-stock {
    color: #059669 !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.woocommerce div.product .stock.out-of-stock {
    color: var(--primary-red) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
}