/**
 * B GREEN — product page (PDP) design layer.
 *
 * Presentation ONLY, scoped to .catalog-product-view and the REAL Hyvä hooks.
 * No template/markup change — the media gallery, configurable swatches,
 * add-to-cart form, qty, B2B price/login/find-dealer logic and the upsell/related
 * sliders all keep working. Matches the design's editorial type, square media,
 * hairline info table and serif section titles. (The design's bespoke thumbnail
 * gallery + custom qty stepper are NOT reproduced, to avoid touching the gallery
 * and cart JS.)
 */
:root {
    --bg-accent: #425034;
    --bg-accent-hover: #323C27;
    --bg-green-700: #425034;
    --bg-ink-heading: #3E3E37;
    --bg-ink-body: #57564D;
    --bg-ink-soft: #85847A;
    --bg-ink-faint: #ABAA9F;
    --bg-hairline: #E6E3D9;
    --bg-paper-warm: #F7F5EF;
    --bg-serif: 'Playfair Display', Georgia, serif;
}

/* Title */
.catalog-product-view .product-info-main .page-title,
.catalog-product-view .product-info-main h1 {
    font-family: var(--bg-serif);
    font-weight: 500;
    color: var(--bg-ink-heading);
    letter-spacing: -0.01em;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.1;
}

/* SKU */
.catalog-product-view .product-sku {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg-ink-faint);
}

/* Price — serif, large, accent */
.catalog-product-view .product-info-main .price,
.catalog-product-view .product-info-main [data-price-type="finalPrice"] .price {
    font-family: var(--bg-serif);
    color: var(--bg-ink-heading);
    font-weight: 500;
}

/* Media — square, on paper-warm */
.catalog-product-view .gallery img,
.catalog-product-view [class*="gallery"] img,
.catalog-product-view .product.media img { border-radius: 0; }
.catalog-product-view .product.media,
.catalog-product-view [class*="gallery"] { background: transparent; }

/* Description + "More information" table -> design accordion body */
.catalog-product-view .additional-attributes { width: 100%; border-collapse: collapse; font-size: 14px; }
.catalog-product-view .additional-attributes tr td { padding: 10px 0; border-bottom: 1px solid var(--bg-hairline); }
.catalog-product-view .additional-attributes tr td:first-child { color: var(--bg-ink-soft); width: 45%; }
.catalog-product-view .product.attribute .type,
.catalog-product-view .product-section-title,
.catalog-product-view [data-role="title"] {
    font-family: 'Nunito Sans', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg-ink-heading);
    font-size: 13px;
}

/* Related / upsell strips -> editorial section titles */
.catalog-product-view .product-slider .slider-title,
.catalog-product-view .product-slider h2,
.catalog-product-view .block.upsell .title strong,
.catalog-product-view .block.related .title strong {
    font-family: var(--bg-serif);
    font-weight: 500;
    color: var(--bg-ink-heading);
    font-size: clamp(24px, 2.2vw, 34px);
    text-transform: none;
    letter-spacing: normal;
}
.catalog-product-view .product-slider .product-item-link {
    font-family: var(--bg-serif);
    color: var(--bg-ink-heading);
}

/* Primary CTAs (add to cart / find dealer / B2B login) — square, accent */
.catalog-product-view .product-info-main button.action.primary,
.catalog-product-view #product-addtocart-button {
    border-radius: 0;
    background: var(--bg-accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.catalog-product-view .product-info-main button.action.primary:hover,
.catalog-product-view #product-addtocart-button:hover { background: var(--bg-accent-hover); }

/* Breadcrumbs */
.catalog-product-view .breadcrumbs { font-size: 12.5px; color: var(--bg-ink-soft); letter-spacing: 0.02em; }
.catalog-product-view .breadcrumbs a:hover { color: var(--bg-accent); }

/* --- Accordion (design look) — only when bgreen_frontend/product/accordion_enabled.
   The theme already renders these sections as an Alpine accordion; this just
   restyles the title bars (single column, uppercase hairline rows). No JS/markup
   change, so the collapse behaviour is untouched. */
.bg-pdp-accordion .Catalog-Product-Sections { grid-template-columns: 1fr !important; max-width: 900px; }
.bg-pdp-accordion .Catalog-Product-Sections section > div:first-child {
    border-top: 1px solid var(--bg-hairline);
    border-bottom: 1px solid var(--bg-hairline);
    margin-bottom: 0;
    padding-top: 18px;
    padding-bottom: 18px;
}
.bg-pdp-accordion .Catalog-Product-Sections section + section > div:first-child { border-top: none; }
.bg-pdp-accordion .Catalog-Product-Sections h2 {
    font-family: 'Nunito Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bg-ink-heading);
}
.bg-pdp-accordion .Catalog-Product-Sections section > div:last-child { padding: 4px 0 24px; color: var(--bg-ink-body); }