@charset "UTF-8";
/* CSS Document */


/* ---------------------------------------------------- */
/* --- MAIN WRAPPER: Border and Padding --- */
/* ---------------------------------------------------- */

.wg-single-product-display {
    /* Uses --wg-green defined externally */
    border: 1px solid var(--wg-green); 
    border-radius: 10px; 
    padding: 30px; /* Default for Desktop */
    margin-bottom: 30px; 
    background-color: #fff; 
}

/* ---------------------------------------------------- */
/* --- GRID LAYOUT: 2/3 and 1/3 split --- */
/* ---------------------------------------------------- */

.wg-single-product-grid {
    display: grid;
    /* Defines the 2/3 (left) and 1/3 (right) columns */
    grid-template-columns: 2fr 1fr; 
    gap: 40px; 
}

.wg-product-content-col {
    /* Left column content */
}

.wg-product-image-col {
    /* Right column content */
    display: flex; 
    justify-content: flex-end; 
}

/* ---------------------------------------------------- */
/* --- CONTENT STYLING --- */
/* ---------------------------------------------------- */

.wg-single-product-display h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2em;
}

/* Short Description (Handles internal spacing from wpautop) */
.wg-product-short-description {
    margin-bottom: 20px;
}

/* Merchant Details */
.wg-product-merchant-details {
    margin-top: 30px;
}

/* Merchant Name (Now paragraph, without "Merchant:") */
.wg-merchant-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
}

.wg-product-merchant-details p {
    margin-top: 0;
    margin-bottom: 5px;
}

/* Price Display */
.wg-product-price-container {
    margin-top: 20px;
    margin-bottom: 0;
}
.wg-product-sale-price {
    font-weight: bold;
    /* Uses --wg-red defined externally */
    color: var(--wg-red); 
    font-size: 1.1em;
}
.wg-product-reg-price-large {
    font-weight: bold;
    font-size: 1.1em;
}
.wg-product-reg-price-small {
    font-size: 90%; 
    opacity: 0.7;
    text-decoration: line-through;
}

/* ---------------------------------------------------- */
/* --- WEBSITE BUTTON STYLING --- */
/* ---------------------------------------------------- */

.wg-website-link {
    margin-top: 15px !important;
}

.wg-button {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
    color: #fff; /* Default text color for buttons */
}

.wg-button.red {
    /* Uses --wg-red defined externally */
    background-color: var(--wg-red);
}

.wg-button.red:hover {
    background-color: #cc0000; /* Darker red on hover */
}


/* ---------------------------------------------------- */
/* --- IMAGE STYLING --- */
/* ---------------------------------------------------- */

.wg-product-single-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; 
    object-fit: cover;
}

.wg-product-image-col a {
    display: block; 
    line-height: 0;
}

/* ---------------------------------------------------- */
/* --- RESPONSIVE ADJUSTMENTS --- */
/* ---------------------------------------------------- */

/* Tablet/Smaller Desktop (Adjust grid and padding) */
@media (max-width: 1024px) {
    .wg-single-product-display {
        padding: 20px; /* Tablet padding */
    }
    .wg-single-product-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 30px;
    }
    .wg-product-image-col {
        order: -1; /* Move image to the top on smaller screens */
    }
}

/* Mobile Adjustments (Only padding change needed) */
@media (max-width: 768px) {
    .wg-single-product-display {
        padding: 20px; /* Mobile padding */
    }
    .wg-single-product-display h2 {
        font-size: 1.6em;
    }
}