/* ----------------------------------- */
/* Hugo Product Single View (lloguer-single.css) */
/* ----------------------------------- */

/* Reset/Override for Product Page */
.product.description {
    padding: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 2em;
}

/* Page Title Section */
.post-title-container {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1em;
}

.post-title {
    text-transform: uppercase;
    font-size: xx-large;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2px;
    padding-left: 64px;
    padding-right: 16px;
    border-bottom: 4px solid var(--primary-color);
    padding-bottom: 4px;
    width: fit-content;
}

/* Product Main Grid Setup (Flexbox replacing Bulma 'columns') */
.product.description .product-grid {
    padding: 0 20px;
}

.product.description .product-row {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    margin: 0 -10px; /* Counteract padding on columns */
}

.product.description .product-col {
    padding: 10px;
    width: 100%; /* Default to full width on mobile */
    min-width: 0;
}

/* Product Image Column Positioning (replaces Bulma order/is-narrow) */
.product.description .product-image-col {
    order: -1; /* Image column first on mobile */
    flex-grow: 1; 
}

.product.description .product-image-col .image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media screen and (min-width: 380px) {
    .product.description .product-image-col .image {
        max-width: 380px; 
    }
}

/* Desktop/Tablet Layout (769px+) */
@media screen and (min-width: 769px) {
    .product.description .product-col {
        width: 50%; /* Two columns side-by-side */
    }
    
    .product.description .product-details {
        order: -1; /* Details column on the left (default order) */
        flex-grow: 1;
    }
    
    .product.description .product-image-col {
        order: 1; /* Image column on the right */
        flex-basis: 380px; /* Give the image a fixed width if possible */
        flex-shrink: 0;
        width: auto;
    }
}

/* Typography and Lists Scoping */
.product.description .product-details .price-block h3 {
    text-align: center; 
    color: var(--primary-color);
    font-size: 1.8em;
    font-weight: 800;
    margin-top: 0em;
    margin-bottom: 0.2em;
}

.product.description .product-details h2 {
    font-size: 1.4em;
}

.product.description .product-details p {
    margin: 1em 0;
    padding: 0;
    text-align: left;
    margin-left: 0;
}

.product.description .product-details ul {
    list-style: initial;
    padding-left: 20px;
    margin: 1em 0;
}

.product.description .product-details ul li {
    padding-left: 8px;
}

/* Call to Action Button Styling (replaces Bulma button classes) */
.product.description .cta-button-container {
    margin: 2em 0;
}

.product.description .cta-button {
    /* Styles for 'button is-rounded is-dark is-medium' */
    display: inline-block;
    padding: 12px 24px;
    border-radius: 290486px; /* High value for rounded effect */
    background-color: var(--secondary-color, #363636); /* Dark color */
    color: white;
    text-align: center;
    font-size: 1.15rem; /* Medium size */
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

.product.description .cta-button:hover {
    background-color: var(--primary-color);
}

.product.description .small-note {
    margin: 1em;
}

/* Options/Table Styling */
.product.description table {
  width: 100%;
}

.product.description tbody th,
.product.description tbody td {
  border: 0;
  border-bottom: 1px solid #ddd;
  padding: 0 24px;
}

/* Right-align last cell */
.product.description table tr td:last-child,
.product.description table tr th:last-child {
  text-align: right;
}

.product.description .options {
    margin-top: 2em;
    color: var(--secondary-color);
    font-weight: 700;
}

.product.description .cta-button-container {
    text-align: center;
}