/*
 * tlc-pdp.css
 * --------------------------------------------------------------------------
 * Layout for the custom Torklift PDP (product-detail-page.phtml + the inline
 * JS that builds .tlc-options-box). These classes are NOT Tailwind utilities,
 * so they live in a plain stylesheet loaded via catalog_product_view.xml
 * rather than the Tailwind build. They reuse the theme's global design tokens
 * (--spacing, --color-primary, --radius-*, etc.) already defined in styles.css.
 *
 * NOTE: this is a faithful reconstruction from the template markup + JS, not
 * the byte-for-byte CSS from the other site. If you have the original .tlc-*
 * rules, drop them in here instead to match that site exactly.
 * --------------------------------------------------------------------------
 */

/* Section wrapper around the whole PDP */
.tlc-pdp-section {
    display: block;
}

/* Top row: gallery | info+options. Single column on mobile, two on desktop. */
.tlc-pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--spacing) * 8);
    align-items: start;
}

@media (min-width: 64rem) { /* lg */
    .tlc-pdp-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: calc(var(--spacing) * 10);
    }
}

/* The info column (also targeted by the inline JS via #tlc-pdp-center).
   The white card surface itself comes from the theme's `.card` class added
   in product-detail-page.phtml, so it matches the description box exactly. */
#tlc-pdp-center {
    min-width: 0; /* prevent grid blowout from long unbreakable strings */
}

.tlc-pdp-grid .product-media {
    min-width: 0;
}

/*
 * .tlc-options-box is created at runtime by the inline script in
 * product-detail-page.phtml; it collects the add-to-cart form, price block
 * and add-to links into one bordered card beneath the short description.
 */
.tlc-options-box {
    margin-top: calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 5);
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--color-surface, #fff);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
}

/* CTA links container that sits below the Add to Cart button */
.tlc-below-atc {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
}

.tlc-cta-row {
    display: block;
}

.tlc-cta-center {
    text-align: center;
}

/* Full-width outlined link styled like a secondary CTA */
.tlc-button-link {
    display: block;
    width: 100%;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border: 1px solid var(--color-primary, #c8102e);
    border-radius: var(--radius-md, 0.375rem);
    color: var(--color-primary, #c8102e);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tlc-button-link:hover {
    background-color: var(--color-primary, #c8102e);
    color: #fff;
    text-decoration: none;
}

/*
 * Pie blocks (Torklift_Pages). Show the desktop variant from lg up, hide it
 * on small screens; mirror for the mobile variant if/when it is enabled.
 */
.tlc-pie-desktop { display: none; }
.tlc-pie-mobile  { display: block; }

@media (min-width: 64rem) { /* lg */
    .tlc-pie-desktop { display: block; }
    .tlc-pie-mobile  { display: none; }
}

/* --------------------------------------------------------------------------
 * Description / details block (product.info.details)
 * Span the full content width instead of the narrow ~prose (~65ch) column,
 * and hide the "Description / {product name}" heading above it.
 * The wrapper class .tlc-pdp-description is set in product-detail-page.phtml.
 * -------------------------------------------------------------------------- */
.tlc-pdp-description,
.tlc-pdp-description > * {
    width: 100%;
    max-width: 100%;
}

/* The details block lays its sections in a 2-column grid on lg
   (.lg:grid-cols-2), which caps the description at half width. Collapse it
   to a single full-width column. */
.tlc-pdp-description .lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
}

/* Neutralise any prose / utility max-width cap inside the description. */
.tlc-pdp-description .prose,
.tlc-pdp-description [class*="max-w-"] {
    max-width: 100%;
}

/* Hide the "Description / {product name}" heading
   (the <h2> inside <section id="description">). */
.tlc-pdp-description #description > h2 {
    display: none;
}