/**
 * The homepage's category blocks — picture on one side, products on the other.
 *
 * Everything here is scoped under `.siggi-showcase`, because the products half
 * of a block is the shop's own loop markup (`ul.shop-page.columns-2`) and the
 * theme already dresses it everywhere else. This file only says where the two
 * halves sit and how tightly they are packed; it never restyles a product card.
 *
 * Four things are worth knowing before changing a rule.
 *
 * The checkerboard is one rule — `nth-child(even) { flex-direction: row-reverse }`
 * — and it is **not** overridden for RTL. In Hebrew the whole page is
 * `direction: rtl`, so "picture first" naturally lands on the right and the
 * alternation mirrors along with it. The client asked for exactly that on
 * 2026-08-24, so an RTL override here would be undoing what was asked for, not
 * fixing it.
 *
 * The picture's panel is stretched to the full height of the block rather than
 * sized to the picture. These are cut-outs of standing figures, roughly 0.7
 * wide-to-tall, and a block of four products is about three times as tall as
 * one of them is in a column this wide. Left to size itself the picture floats
 * in a field of nothing and reads as a rendering fault; given a panel that
 * spans the block it reads as a panel with a figure standing in it.
 *
 * The products column is padded on both sides on purpose, and the padding
 * changes with the breakpoint. `ul.shop-page` bleeds past whatever box it is in
 * — `margin: 0 -15px` normally, `0 -10px` under 767px, `0 -5px` under 479px
 * ([style.css:12042](assets/css/style.css), and the two media blocks at
 * [12133](assets/css/style.css) and [12155](assets/css/style.css)). Each of
 * those three numbers is cancelled here, which is what makes the gap between
 * the picture and the first card the gap this file actually declares.
 *
 * The cards' own bottom margin is overridden down to a single number. The theme
 * gives a card 70px of it, tapering to 20px on a phone — right for a shop
 * archive scrolling through dozens of them, far too much for a fixed grid of
 * four. The last row's is then pulled back off the column so the block ends
 * where its cards do.
 */

.siggi-showcase {
    padding: 30px 0 0;
}

.siggi-showcase-block {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
}

.siggi-showcase-block:last-child {
    margin-bottom: 0;
}

/* The whole checkerboard. */
.siggi-showcase-block:nth-child(even) {
    flex-direction: row-reverse;
}

/* ----- the picture half ----- */

.siggi-showcase-figure {
    flex: 0 0 26%;
    max-width: 26%;
    text-align: center;
}

.siggi-showcase-image {
    display: block;
    background: #f7f7f7;
    overflow: hidden;
}

.siggi-showcase-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform .35s ease;
}

.siggi-showcase-image:hover img {
    transform: scale(1.04);
}

/* Above the picture since 2026-08-25: it is the block's heading and reads as
   one. What is left below is «Смотреть все», which is what you do after having
   looked. */
.siggi-showcase-title {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.3;
}

/* The category's own colour, as a mark above its name rather than on it. On the
   name itself it is unreadable for two of the six — #FDC40B is 1.6:1 against
   white and #42B7C2 is 2.4:1, where text wants 4.5 — and #E3001A, which does
   pass, reads as an error rather than a heading. A rule carries no text, so
   none of that applies to it.
   It is the width of the picture under it, not of the name: the name's own
   width is six different numbers in three languages, and the picture's is the
   one edge every block already shares. That also makes it the block's own top
   edge, which is what it was asked to be once the separator between blocks
   went away — with a rule under every block as well, the page carried two
   coloured lines per category and the colour stopped meaning anything. */
.siggi-showcase-title::before {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin: 0 0 10px;
    background: var(--siggi-showcase-line, #e5e5e5);
}

.siggi-showcase-title a {
    color: inherit;
}

.siggi-showcase-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    text-decoration: underline;
}

.siggi-showcase-count {
    opacity: .6;
}

/* ----- the products half ----- */

.siggi-showcase-products {
    flex: 1 1 auto;
    /* Without `min-width: 0` a long product title stops the column from ever
       shrinking back — a flex item refuses to go below its content width. */
    min-width: 0;
    padding: 0 15px;
}

.siggi-showcase-products ul.shop-page {
    margin-bottom: -30px;
}

.siggi-showcase-products ul.shop-page .product-item {
    margin-bottom: 30px;
}

/* The button here has 179px to fill — a card is 209px and 15px of each side is
   the grid's own gutter — against the shop archive's 270. The theme's
   add-to-cart button is `white-space: nowrap` with an ellipsis, so a label too
   long for that was cut to «Выберите пара…», which says none of it; two short
   lines say the whole thing.

   No label reaches either state today: the longest is «Заказать» at 67px, and
   [product-variable-button.php](../../framework/product-variable-button.php) is
   what made it so — «Выберите параметры» needed 209px and is why this rule was
   written on 2026-08-27. It stays for the label the client may yet type: two
   lines are still the better failure. The side padding it used to declare here
   went with the wrap — 12px never applied in any case, losing to the theme's own
   `.product-item.style-01 .add-to-cart > a` on specificity, and 12px would not
   have fitted that label either. */
.siggi-showcase-products .product-item .button {
    white-space: normal;
    text-overflow: clip;
}

/* ----- narrower ----- */

@media (max-width: 1199px) {
    .siggi-showcase-block {
        gap: 20px;
    }

    .siggi-showcase-title {
        font-size: 20px;
    }
}

/* Below the theme's tablet breakpoint the two halves stack, and they stack the
   same way in every block — `row-reverse` has no meaning in a column, and
   `column-reverse` would put a picture under its own products. The panel stops
   stretching here: with nothing beside it there is no height to fill. */
@media (max-width: 991px) {
    .siggi-showcase-block,
    .siggi-showcase-block:nth-child(even) {
        display: block;
        margin-bottom: 40px;
    }

    .siggi-showcase-figure {
        display: block;
        max-width: 320px;
        margin: 0 auto 25px;
    }
}

@media (max-width: 767px) {
    .siggi-showcase-products {
        padding: 0 10px;
    }
}

@media (max-width: 479px) {
    .siggi-showcase-figure {
        max-width: 240px;
    }

    .siggi-showcase-title {
        font-size: 18px;
    }

    .siggi-showcase-products {
        padding: 0 5px;
    }
}