/* Product-focus proportion and About badge refinement. */
.story-badge {
    position: absolute;
    left: 30%;
    bottom: 34px;
    padding: 15px;
    border-radius: 12px;
    background: #f0a42a;
    color: #172016;
    box-shadow: 0 18px 40px rgba(136, 85, 2, 0.2);
}

/* The content area intentionally receives more width than the image. */
.focus-product {
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: 64px;
    align-items: center;
}

.focus-visual {
    height: 540px;
}

.focus-content {
    min-width: 0;
    padding-right: 4px;
}

.focus-content h3 {
    font-size: 42px;
    line-height: 1.08;
}

.focus-description {
    max-width: 850px;
}

.focus-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.focus-detail button,
.focus-detail p,
.focus-actions > a,
.focus-tags span,
.focus-facts small,
.focus-facts strong {
    line-height: 1.5;
}

.focus-detail button {
    min-height: 50px;
}

.focus-controls {
    margin-left: calc(0.78fr + 64px);
}

.catalogue-card[data-canonical-product="true"]::after {
    content: "Specification-backed";
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(4, 63, 41, 0.92);
    color: #fff;
    font-size: 9px;
}

.catalogue-card { position: relative; }

@media (max-width: 950px) {
    .focus-product {
        grid-template-columns: 1fr;
        gap: 42px;
    }
    .focus-visual { height: 470px; }
    .focus-controls { margin-left: 0; }
}

@media (max-width: 620px) {
    .story-badge {
        left: 18%;
        bottom: 18px;
        padding: 15px;
    }
    .focus-visual { height: 360px; }
    .focus-facts { grid-template-columns: 1fr; }
    .focus-content h3 { font-size: 36px; }
}