/* ================================================================== */
/*  Concrete Strengthening Products page                              */
/*  Site-styled adaptation of the dark virtual-showroom reference:     */
/*  same scenario tabs + system stack + filter/search catalog +        */
/*  detail drawer, but in the light Inter / brand-blue language.       */
/* ================================================================== */

/* Allow the scenario section's lead to span the container width so it
   reads as one line on desktop. The default .ab-pillars__head has
   max-width:720px AND .ab-pillars__lead has max-width:64ch — both must be
   overridden. */
.str-scenario .ab-pillars__head,
.str-design .ab-pillars__head { max-width: none; }
.str-scenario .ab-pillars__lead,
.str-design .ab-pillars__lead { max-width: none; }

/* Eyebrow above the scenario title, matching the site's amber eyebrows. */
.str-scenario .ab-pillars__eyebrow,
.str-design .ab-pillars__eyebrow {
    margin: 0 0 12px;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent-amber);
}

/* Same treatment for the closing CTA lead — fits on one line on desktop. */
.ab-cta__lead { max-width: none; }

/* ---------- AnchorDesign360 design-software band ---------- */

.str-design {
    scroll-margin-top: 88px;       /* land below the sticky navbar when jumped to via #anchordesign360 */
}

.str-design__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-top: clamp(24px, 3vw, 40px);
}

@media (max-width: 860px) {
    .str-design__grid { grid-template-columns: 1fr; }
}

/* App screenshot. A hairline border + soft shadow keeps the light UI of the
   screenshot from bleeding into the light page background. */
.str-design__media {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px -24px rgba(11, 18, 32, 0.35);
}

.str-design__img {
    display: block;
    width: 100%;
    height: auto;
}

.str-design__bullets {
    list-style: none;
    margin: 0 0 clamp(20px, 2.5vw, 28px);
    padding: 0;
    display: grid;
    gap: 12px;
}

.str-design__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}

.str-design__bullets svg {
    flex: none;
    margin-top: 5px;
    color: var(--brand);
}

/* Mobile: full-width CTA button, same treatment as every other CTA card. */
@media (max-width: 600px) {
    .str-design__body .ab-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Scenario panel ---------- */

/* Two-column on desktop: SVG image on the left, control panel (tabs row +
   stack card) on the right. Stacks vertically on tablet/mobile. */
.str-scenario__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
@media (min-width: 920px) {
    .str-scenario__grid {
        /* Image card 40%, control panel takes the rest. */
        grid-template-columns: 40% 1fr;
        gap: 32px;
        align-items: stretch;   /* image card matches right column height */
    }
}
.str-control {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Fill the full grid cell height so the stack card below the tabs can
       grow to match the image card's bottom edge on the left. */
    height: 100%;
}
/* Stack card grows to consume whatever vertical space remains after the
   tabs row, so its bottom aligns with the image card's bottom. */
.str-control > .str-stack { flex: 1 1 auto; }

/* ---------- Visualisation card — inherits the .vD__sheet chrome from
   showcase-variants.css (background, padding, corners, stamp). We just
   override the inner view aspect for a column-friendly portrait. */

/* Make the image card stretch to fill the grid cell height (matching the
   right column = tabs + stack), and become a flex column so the view can
   centre vertically inside whatever extra space that creates. */
.str-viz {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
}
.str-viz__view {
    position: relative;
    display: block;                      /* override .vD__view's display:flex so the box can size from width+aspect-ratio with no in-flow children */
    width: 100%;
    max-width: 416px;                    /* +5% on the previous 396px cap (dashed border grows) */
    aspect-ratio: 1721 / 1491;           /* match the natural ratio of both stack SVGs */
    /* Pinned to the top of the card: the card stretches with the product
       list beside it, and a centred view jumped down when a list opened. */
    margin: 8px auto auto;
    padding: 0;
}
/* Image inset increased to compensate for the +5% container so the visual
   image size matches the previous render (≈ 356px wide at the 416px cap). */
.str-viz__layer {
    position: absolute;
    inset: 7%;
    width: 86%;
    height: 86%;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
    pointer-events: none;
}
.str-viz__layer.is-active { opacity: 1; }

/* Tabs row out 3-up on tablet and desktop, stacking on phones.
   minmax(0, 1fr) forces equal columns even when one tab's content is longer. */
.str-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 600px) {
    .str-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Tab cards: solid white with a brand-tinted left rail. Visually distinct
   from the stack list rows below, which are flat unbordered text rows. */
.str-tab {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas:
        "num name"
        "num desc";
    column-gap: 16px;
    row-gap: 4px;
    padding: 18px 20px 18px 22px;
    background: var(--bg-elevated);
    background-image: none;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    text-align: start;
    cursor: pointer;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-med) var(--ease-out);
}
.str-tab:hover {
    border-color: var(--brand);
    border-left-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(4, 44, 113, 0.30);
}
.str-tab.is-active {
    background: var(--brand-fill);
    background-image: none;
    border-color: var(--brand-fill);
    border-left-color: var(--brand);
    color: #ffffff;
    box-shadow: 0 8px 18px -10px rgba(4, 44, 113, 0.45);
}
/* RTL: the 3px accent rail (and its extra 2px of padding) moves to the
   right edge, where the reading direction starts. */
[dir="rtl"] .str-tab {
    padding: 18px 22px 18px 20px;
    border-left: 1px solid var(--border);
    border-right: 3px solid var(--border-strong);
}
[dir="rtl"] .str-tab:hover { border-right-color: var(--brand); }
[dir="rtl"] .str-tab.is-active { border-right-color: var(--brand); }
.str-tab__num {
    grid-area: num;
    align-self: start;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--brand);
    padding: 4px 8px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-2xs);
    background: var(--bg-elevated);
    line-height: 1;
}
.str-tab.is-active .str-tab__num {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
}
.str-tab__name {
    grid-area: name;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}
.str-tab__desc {
    grid-area: desc;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}
.str-tab.is-active .str-tab__desc { color: rgba(255, 255, 255, 0.8); }

/* Stack panel — re-uses the .vD__sheet card chrome from the products page
   (corner brackets, dot grid, border) so it visually matches the existing
   product cards. */
.str-stack {
    padding: 28px 24px 24px;
    /* Override the .vD__sheet dot-grid background — keep just the border. */
    background: transparent;
    background-image: none;
}
.str-stack__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}
.str-stack__title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--text);
}
.str-stack__count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-subtle);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.str-stack__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.str-stack__list li {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}
.str-stack__list li:last-child { border-bottom: 0; }
.str-stack__list li:hover { color: var(--brand); }
.str-stack__list .idx {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    color: var(--brand);
}
.str-stack__list .info { min-width: 0; }
.str-stack__list .role {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-subtle);
    margin-bottom: 2px;
}
.str-stack__list .pname {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
    line-height: 1.3;
}
.str-stack__list .pmodel {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.str-stack__list .arrow {
    font-family: var(--font-mono);
    color: var(--text-subtle);
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.str-stack__list li:hover .arrow {
    color: var(--brand);
    transform: translateX(3px);
}
.str-stack__cta {
    width: 100%;
    justify-content: center;
}

/* ---------- Catalog ---------- */

.str-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    margin-bottom: 24px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.str-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.str-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}
.str-chip em {
    font-style: normal;
    font-size: 10px;
    color: var(--text-subtle);
    padding-left: 6px;
    border-left: 1px solid var(--border);
    margin-left: 2px;
}
.str-chip:hover {
    color: var(--text);
    border-color: var(--border-strong);
}
.str-chip.is-active {
    background: var(--brand-fill);
    border-color: var(--brand-fill);
    color: #ffffff;
}
.str-chip.is-active em {
    color: rgba(255, 255, 255, 0.7);
    border-left-color: rgba(255, 255, 255, 0.4);
}

.str-filter__search {
    position: relative;
    flex: 0 0 auto;
    min-width: 240px;
}
.str-filter__search svg {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
}
.str-filter__search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 36px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-base);
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    color: var(--text);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.str-filter__search input:focus { border-color: var(--brand); }
.str-filter__search input::placeholder { color: var(--text-subtle); }

@media (max-width: 600px) {
    .str-filter__search { min-width: 0; width: 100%; }
}

/* Catalog grid — many small product cards with a corner-bracket detail
   borrowed from the .vD__sheet idiom but compressed for density. */
.str-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 600px) { .str-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 920px) { .str-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1200px) { .str-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.str-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 18px 18px;
    background: var(--bg-soft);
    background-image: radial-gradient(rgba(4, 44, 113, 0.06) 1px, transparent 1.5px);
    background-size: 18px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: start;
    color: inherit;
    cursor: pointer;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-med) var(--ease-out);
}
.str-card:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -16px rgba(4, 44, 113, 0.30);
}
.str-card::before,
.str-card::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--brand);
    pointer-events: none;
}
.str-card::before {
    top: 6px;
    left: 6px;
    border-right: 0;
    border-bottom: 0;
}
.str-card::after {
    bottom: 6px;
    right: 6px;
    border-left: 0;
    border-top: 0;
}
.str-card__cat {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.str-card__model {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
    line-height: 1.25;
    word-break: break-word;
}
.str-card__name {
    margin: 0;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    /* Clamp to two lines so cards stay even-height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.str-card__foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-subtle);
}
.str-card__arrow {
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.str-card:hover .str-card__arrow {
    color: var(--brand);
    transform: translateX(4px);
}

.str-empty {
    padding: 64px 24px;
    text-align: center;
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* ---------- Detail drawer ---------- */

.str-drawer__overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(11, 18, 32, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
}
.str-drawer__overlay[hidden] { display: block; pointer-events: none; }
.str-drawer__overlay.is-open { opacity: 1; pointer-events: auto; }
.str-drawer__overlay.is-open[hidden] { display: block; }

.str-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 61;
    width: min(720px, 100vw);
    max-width: 100vw;             /* defensive — never exceed viewport */
    height: 100vh;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    box-shadow: -16px 0 40px -16px rgba(11, 18, 32, 0.20);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
}
.str-drawer.is-open { transform: translateX(0); }

[dir="rtl"] .str-drawer {
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    box-shadow: 16px 0 40px -16px rgba(11, 18, 32, 0.20);
}
[dir="rtl"] .str-drawer.is-open { transform: translateX(0); }

.str-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
}
.str-drawer__label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-subtle);
}
.str-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-base);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.str-drawer__close:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.str-drawer__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;           /* never let inner cards force a sideways scroll */
    padding: 24px;
}
/* Drawer header (above the list of product cards) */
.str-drawer__group-head {
    margin-bottom: 24px;
}
.str-drawer__group-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Per-product card. Desktop: image on left spanning the height of the right
   column (head + details). Mobile: stacks as head → image → details. */
.str-pcard {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas:
        "media head"
        "media details";
    gap: 0 22px;
    align-items: stretch;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    min-width: 0;                 /* allow children to shrink below intrinsic size */
}
.str-pcard:last-child { border-bottom: 0; padding-bottom: 0; }
.str-pcard__media   { grid-area: media;   min-width: 0; }
.str-pcard__head    { grid-area: head;    min-width: 0; margin-bottom: 12px; }
.str-pcard__details { grid-area: details; min-width: 0; }

/* Outer card chrome (.vD__sheet provides dot-grid bg + corners). Become a
   flex column so the inner view can stretch to fill the height of the
   right-hand text column. */
.str-pcard__media {
    display: flex;
    flex-direction: column;
    margin: 0;
    /* 30px clears the 8px + 18px corner brackets so they never touch the dashed frame. */
    padding: 30px;
    height: 100%;
}
/* Role label — plain text (no box, no border, no background) — replaces
   the .vD__stamp pill that used to wrap "Anchoring Resin". */
.str-pcard__role {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--brand);
}
.str-pcard__view {
    /* Stretch to fill remaining vertical space so it matches the height of
       the right text column. Aspect-ratio removed for that reason. */
    flex: 1 1 auto;
    margin: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 220px;
}
/* 4px gap between the cross marker and the dashed corner of the view. */
.str-pcard__view .vD__cross--tl { top:    4px; left:   4px; }
.str-pcard__view .vD__cross--tr { top:    4px; right:  4px; left: auto; }
.str-pcard__view .vD__cross--bl { bottom: 4px; left:   4px; top: auto; }
.str-pcard__view .vD__cross--br { bottom: 4px; right:  4px; top: auto; left: auto; }

.str-pcard__placeholder {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: break-word;
}
/* Product render inside the view frame: pinned to the frame and scaled to
   fit (object-fit: contain), so it can never spill over the dashed corners
   or the text, whatever the image proportions. */
.str-pcard__view { position: relative; }
.str-pcard__device {
    position: absolute;
    inset: 14%;
    display: block;
}
.str-pcard__device img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Product photos with a white (not transparent) background blend into the panel. */
    mix-blend-mode: multiply;
}
/* Fabric rolls are bulky and short: let them use more of the frame. */
.str-pcard__device:has(img[src*="/C-Sheet_"]),
.str-pcard__device:has(img[src*="/CTB_"]),
.str-pcard__device:has(img[src*="/G-Sheet_"]) { inset: 6%; }
@media (max-width: 540px) { .str-pcard__device { inset: 8%; } }

.str-pcard__body { min-width: 0; }
.str-pcard__sku {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--brand);
    letter-spacing: 0.10em;
}
.str-pcard__title {
    margin: 4px 0 4px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--text);
    word-break: break-word;
}
.str-pcard__subtitle {
    margin: 0 0 12px;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}
.str-pcard__desc {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-loose);
}
.str-pcard__desc p { margin: 0 0 6px; }
.str-pcard__desc p:last-child { margin-bottom: 0; }

.str-pcard__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 2px solid var(--brand);
    border-radius: var(--radius-2xs);
    font-family: var(--font-mono);
    font-size: 11px;
}
.str-pcard__row span {
    font-size: 9px;
    color: var(--brand);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.str-pcard__row strong {
    color: var(--text);
    font-weight: 600;
}

.str-pcard__cta {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

/* Mobile: stack vertically with title block first, image in the middle,
   long-form details (description / approvals / pack) underneath. */
@media (max-width: 540px) {
    .str-pcard {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "media"
            "details";
        gap: 14px 0;
    }
    .str-pcard__head { margin-bottom: 0; }
    .str-pcard__view {
        min-height: 220px;
        aspect-ratio: 4 / 3;
    }
}

/* Mobile drawer trim — give the cards more horizontal room and drop the
   side shadow now the panel is edge-to-edge. */
@media (max-width: 640px) {
    .str-drawer { box-shadow: none; border-left: 0; }
    .str-drawer__head { padding: 16px; }
    .str-drawer__body { padding: 16px; }
    .str-drawer__foot { padding: 14px 16px; }
    .str-pcard__media { padding: 28px; }
    .str-pcard__cta span { min-width: 0; }
}

.str-drawer__cat {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--brand);
}
.str-drawer__name {
    margin: 8px 0 4px;
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--text);
    word-break: break-word;
}
.str-drawer__desc {
    margin: 0 0 24px;
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: var(--lh-loose);
}
/* Spec rows reuse the .vD__specs visual language from the products page —
   white tile, 2px brand-blue left bar, monospace text. */
.str-drawer__specs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.str-drawer__specs > div {
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 2px solid var(--brand);
    border-radius: var(--radius-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    color: var(--text);
}
.str-drawer__specs span {
    display: block;
    font-size: 9px;
    color: var(--brand);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.str-drawer__foot {
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
}
.str-drawer__foot .ab-btn { width: 100%; justify-content: center; }


/* ---------- Full product catalogue (server-rendered by build.js) ---------- */
/* Every SKU from assets/data/strengthening.{lang}.csv as plain HTML, so the
   range is readable without JavaScript. Tables scroll sideways on phones. */

.str-catalog__stack + .str-catalog__stack { margin-top: 56px; }

.str-catalog__stack-title {
    margin: 0 0 20px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--text);
}

.str-catalog__role {
    padding: 20px 0;
    border-top: 1px solid var(--deploy-guide);
}

.str-catalog__role-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text);
}
.str-catalog__role-tag {
    display: inline-block;
    margin-inline-start: 6px;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--text-subtle);
}

.str-catalog__group + .str-catalog__group { margin-top: 16px; }

.str-catalog__desc {
    margin: 0 0 10px;
    max-width: 80ch;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}

.str-catalog__scroll { overflow-x: auto; }

.str-catalog__table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
}
.str-catalog__table th,
.str-catalog__table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--deploy-guide);
    text-align: start;
    vertical-align: top;
    color: var(--text-muted);
}
.str-catalog__table thead th {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--text-subtle);
    background: var(--bg-soft);
    white-space: nowrap;
}
.str-catalog__table tbody th {
    font-weight: var(--fw-semibold);
    color: var(--text);
}
.str-catalog__sub {
    display: block;
    font-weight: var(--fw-regular);
    font-size: var(--fs-caption);
    color: var(--text-subtle);
}

/* "AnchorDesign360™" on its own line above the slogan. */
.str-design__brand { display: block; }

/* Catalogue collapsed behind a standard site button (.ab-btn .ab-btn--ghost,
   see template comment). Only the <summary> specifics and the chevron are
   added here; the list opens below at full width. */
.str-catalog.ab-pillars { margin-top: -64px; }   /* sits just under the product panel */
.str-catalog__summary { list-style: none; cursor: pointer; user-select: none; }
.str-catalog__summary::-webkit-details-marker { display: none; }
.str-catalog__summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur-med) var(--ease-out);
}
[dir="rtl"] .str-catalog__summary::after { margin-left: 0; margin-right: 2px; }
.str-catalog__details[open] .str-catalog__summary::after { transform: translateY(2px) rotate(-135deg); }
.str-catalog__summary-note { color: rgba(255, 255, 255, 0.72); font-weight: var(--fw-regular); }

/* Same button and position as the "Open AnchorDesign360™" CTA above it:
   primary style, under the content of the right-hand column (the panel grid
   is 40% | 32px gap | rest from 920px). Full width on phones, like every CTA. */
@media (min-width: 920px) {
    .str-catalog__summary { margin-left: calc(40% + 32px); }
    [dir="rtl"] .str-catalog__summary { margin-left: 0; margin-right: calc(40% + 32px); }
}
@media (max-width: 600px) {
    .str-catalog__summary { display: flex; width: 100%; justify-content: center; }
}
.str-catalog__body {
    margin-top: 16px;
    padding: 4px 22px 24px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 1px var(--border);
}
.str-catalog__lead {
    margin: 16px 0 24px;
    max-width: 80ch;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}

/* ---------- Product list: compact group overview + search ---------- */

.str-cat__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 18px 0 8px;
}
.str-cat__tools[hidden] { display: none; }
.str-cat__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.str-cat__chip {
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-elevated);
    font: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.str-cat__chip:hover { border-color: var(--brand-300); color: var(--text); }
.str-cat__chip[aria-pressed="true"] { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
/* Phones: all chips in ONE row, sharing the width; a long label (RU/KK/AR)
   wraps inside its own chip instead of pushing the row off-screen. */
@media (max-width: 600px) {
    .str-cat__tools { flex-wrap: nowrap; }
    .str-cat__chips { flex-wrap: nowrap; gap: 6px; width: 100%; }
    .str-cat__chip {
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 8px;
        border-radius: 18px;
        font-size: 13px;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }
    .str-cat__chip[data-cat-stack="all"] { flex: 0 0 auto; padding: 6px 14px; }
}
.str-cat__empty { margin: 16px 0 0; color: var(--text-subtle); font-size: var(--fs-body-sm); }

.str-catalog__stack { margin-top: 20px; }
.str-catalog__stack + .str-catalog__stack { margin-top: 28px; }
.str-catalog__stack[hidden] { display: none; }
.str-catalog__stack-title {
    margin: 0 0 8px;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--brand-500);
}

/* One row per product group */
.str-cat__role { border-top: 1px solid var(--deploy-guide); }
.str-cat__role:last-child { border-bottom: 1px solid var(--deploy-guide); }
.str-cat__role[hidden] { display: none; }
.str-cat__role-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 14px 40px 14px 2px;
    list-style: none;
    cursor: pointer;
}
.str-cat__role-head::-webkit-details-marker { display: none; }
.str-cat__role-head::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--text-subtle);
    border-bottom: 1.5px solid var(--text-subtle);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--dur-med) var(--ease-out);
}
[dir="rtl"] .str-cat__role-head { padding: 14px 2px 14px 40px; }
[dir="rtl"] .str-cat__role-head::after { right: auto; left: 8px; }
.str-cat__role[open] > .str-cat__role-head::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--brand-500); }
.str-cat__role-name {
    font-size: var(--fs-eyebrow);   /* same size as the ANCHORING stack title */
    font-weight: var(--fw-semibold);
    color: var(--text);
    transition: color var(--dur-fast) var(--ease-out);
}
/* Group name stays black (owner); the whole heading line is one size. */
.str-cat__role-meta { font-size: var(--fs-eyebrow); color: var(--text-subtle); }

/* Opened group: bounded height, own scroll, sticky table header */
/* No inner scroll box: only one group is open at a time, so the page scrolls
   normally (an inner scroller put its scrollbar over the buttons and fought
   with page scrolling on touch). */
.str-cat__role-body {
    padding: 0 2px 16px;
}
.str-cat__role-body .str-catalog__desc { margin: 4px 0 10px; }
/* Product-group photo beside the group description (build.js groupImg). */
/* Photo + description block, split from the product list below by a solid line. */
.str-catalog__grouphead { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border-strong); }
.str-cat__role-body .str-catalog__grouphead .str-catalog__desc { margin: 0; flex: 1 1 auto; min-width: 0; }
.str-catalog__groupimg {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
    padding: 8px;
    box-sizing: border-box;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.str-cat__role-body .str-catalog__scroll + .str-catalog__desc { margin-top: 18px; }
.str-cat__role-body .str-catalog__table thead th { position: sticky; top: 0; z-index: 1; }
.str-cat__role-body [hidden] { display: none; }

/* ---------- Catalogue under the tabs (replaces the 4-item stack) ---------- */
.str-control > .str-catpanel { flex: 1 1 auto; }
.str-catpanel {
    position: relative;
    padding: 28px 24px 24px;
    background: transparent;
    background-image: none;
    min-width: 0;
}
.str-catpanel .str-catalog__stack[hidden] { display: none; }
.str-catpanel .str-catalog__stack + .str-catalog__stack { margin-top: 28px; }
.str-catalog__stack-count {
    margin-left: 8px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-subtle);
}
.str-prod-list { list-style: none; margin: 0 0 6px; padding: 0; }
.str-prod {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    padding: 12px 0;
    border-top: 1px dashed var(--border);
}
.str-prod:first-child { border-top: 0; }
.str-prod__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.str-prod__name { font-size: var(--fs-eyebrow); line-height: 1.35;   /* same size as the ANCHORING stack title */ font-weight: var(--fw-semibold); color: var(--brand-500); }
.str-prod__sub { font-size: var(--fs-body-sm); color: var(--text-muted); }
.str-prod__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--text-subtle);
}
.str-prod__actions { flex: 0 0 auto; display: flex; gap: 8px; }
.str-prod__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--brand-fill);
    border-radius: var(--radius-sm);
    background: var(--brand-fill);
    color: #fff;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.str-prod__btn:hover { background: var(--brand-fill-600); border-color: var(--brand-fill-600); }
.str-prod__btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--brand); }
.str-prod__btn--ghost:hover { background: var(--surface-hover); border-color: var(--brand-300); }
.str-prod__btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
@media (max-width: 1100px) {
    .str-prod { flex-direction: column; align-items: stretch; }
    .str-prod__actions { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .str-catpanel { padding: 24px 16px 16px; }
    .str-prod__btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Anchor prices + quote bar ---------- */
/* Price in a fixed-width column (unit/VAT on a second line) so every
   quantity box lines up vertically, whatever the price or product name. */
.str-prod__buy {
    display: grid;
    grid-template-columns: 8em auto;
    align-items: center;
    justify-content: start;
    gap: 8px 14px;
    margin-top: 8px;
}
/* Price sits on the same 30px line as the quantity box (--buy-h). */
.str-prod__buy { --buy-h: 26px; }
.str-prod__price {
    font-size: 13px;
    font-weight: var(--fw-semibold);
    line-height: var(--buy-h);
    color: var(--accent-amber);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Unit line sits under both the price and the quantity box, so the price and the box share one row. */
.str-prod__unit { grid-column: 1 / -1; margin-top: -6px; font-size: 12px; line-height: 1.2; color: var(--text-subtle); }
/* Shown after a typed quantity was rounded up to whole packs (js/strengthening.js). */
.str-prod__packnote { grid-column: 1 / -1; margin-top: -4px; font-size: 12px; line-height: 1.3; color: var(--accent-amber); }
.str-prod__packnote[hidden] { display: none; }
.str-prod__onrequest { margin: 6px 0 0; font-size: 12px; color: var(--text-subtle); }
.str-qty {
    display: inline-flex;
    height: var(--buy-h, 30px);
    box-sizing: border-box;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-elevated);
}
.str-qty[hidden] { display: none; }
.str-qty__btn {
    width: 26px;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.str-qty__btn:hover { background: var(--surface-hover); }
.str-qty__input {
    width: 38px;
    border: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-align: center;
    font: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.str-qty__input::-webkit-outer-spin-button,
.str-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.str-prod.is-selected .str-qty { border-color: var(--brand-500); }

.str-quotebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;                 /* under the mobile menu and dropdowns (50) */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -12px 32px -16px rgba(4, 44, 113, 0.35);
}
.str-quotebar[hidden] { display: none; }
.str-quotebar__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
}
/* Summary doubles as the toggle for the item list (js/strengthening.js). */
.str-quotebar__sum {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: start;
    cursor: pointer;
}
.str-quotebar__sum [data-qb-total] { font-weight: var(--fw-semibold); color: var(--brand-500); }
.str-quotebar__chev { flex: 0 0 auto; color: var(--brand); transition: transform var(--dur-fast) var(--ease-out); }
.str-quotebar.is-open .str-quotebar__chev { transform: rotate(180deg); }
.str-quotebar__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.str-quotebar__list {
    flex-basis: 100%;
    max-height: min(50vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 0 4px;
    padding: 0 0 8px;
    list-style: none;
    border-bottom: 1px solid var(--border);
}
.str-quotebar__list[hidden] { display: none; }
.str-quotebar__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.str-quotebar__item:last-child { border-bottom: 0; }
.str-quotebar__item-name { grid-column: 1 / -1; color: var(--text); }
.str-quotebar__item-name small { color: var(--text-subtle); }
.str-quotebar__item-qty { color: var(--text-muted); }
.str-quotebar__item-sum { font-weight: var(--fw-semibold); color: var(--text); text-align: end; }
/* Clear and WhatsApp: two equal-width buttons. */
.str-quotebar__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.str-quotebar__clear {
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: 14px;
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.str-quotebar__clear:hover { background: var(--surface-hover); border-color: var(--brand-300); }
.str-quotebar__wa { padding: 9px 16px; font-size: 14px; justify-content: center; gap: 8px; }
.str-quotebar__wa-icon { flex: 0 0 auto; width: 28px; height: 28px; margin-block: -5px; }
.str-quotebar__note { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--text-subtle); }
body.has-quotebar { padding-bottom: 110px; }
@media (max-width: 600px) {
    .str-quotebar__actions { width: 100%; }
    .str-quotebar__clear, .str-quotebar__wa { padding: 9px 10px; white-space: normal; text-align: center; line-height: 1.25; }
    body.has-quotebar { padding-bottom: 150px; }
}

/* Phones: photo full width with the description below it, and the small
   12px desktop titles (group line, product name, price) made readable. */
@media (max-width: 600px) {
    .str-catalog__grouphead { flex-direction: column; gap: 12px; }
    .str-catalog__groupimg { width: 100%; height: 200px; padding: 12px; }
    .str-cat__role-name { font-size: 16px; }
    .str-cat__role-meta { font-size: 13px; }
    .str-prod__name { font-size: 16px; }
    .str-prod__price { font-size: 15px; }
    .str-prod__buy { --buy-h: 32px; }
    .str-qty__btn { width: 34px; font-size: 16px; }
    .str-qty__input { width: 44px; font-size: 15px; }
    .str-prod__unit, .str-prod__packnote { font-size: 12.5px; }
}