/* ==========================================================================
   Presentes page (Figma page 19) and its «Pares da caixa» widget (inc/elementor/widgets/gift-pairs-widget.php).
   Elementor draws the page: containers, photos, names and texts, linked to the kit's globals. This file draws only
   what Elementor cannot:
   - the pairs choice and its gold button (.twf-gp);
   - the two steps of the first screen, numbered 01 / 02 in gold circles joined by a dashed seam (.twf-gifts-steps,
     a Text Editor widget holding a numbered list, so the client edits plain list items);
   - the socks' panel of each line and the photos of «Outras ideias» (.twf-gifts-fan, .twf-gifts-photo);
   - the «Gift Boxes» carousel where its cards all fit (.twf-gifts-boxes).
   Type comes from the kit 28 globals through Elementor's variables, never typed here. inc/setup/assets.php loads this
   file in the <head> of pages whose Elementor data uses these classes; the widget asks for it too (Elementor's preview).
   ========================================================================== */

/* ---------- the two steps ---------- */

/* `ol > li` on purpose: in the editor Elementor puts its own list of handles inside the widget */
.twf-gifts-steps ol {
    --twf-step-gap: 120px;
    position: relative;
    display: flex;
    justify-content: center;
    gap: var(--twf-step-gap);
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: twf-step;
}
.twf-gifts-steps ol > li {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0 45px;
    text-align: center;
    counter-increment: twf-step;
}
.twf-gifts-steps ol > li::before {
    content: counter(twf-step, decimal-leading-zero);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #AD8D5C;
    color: #FFFFFF;
    font-family: var(--e-global-typography-twfnum-font-family), sans-serif;
    font-size: var(--e-global-typography-twfnum-font-size);
    font-weight: var(--e-global-typography-twfnum-font-weight);
    line-height: var(--e-global-typography-twfnum-line-height);
    letter-spacing: var(--e-global-typography-twfnum-letter-spacing, normal);
}
/* the seam: from the centre of one circle to the centre of the next, under both circles */
.twf-gifts-steps ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 21px;
    left: 50%;
    width: calc(100% + var(--twf-step-gap));
    border-top: 1.5px dashed #AD8D5C;
}

@media (max-width: 1024px) {
    .twf-gifts-steps ol {
        --twf-step-gap: 64px;
    }
    .twf-gifts-steps ol > li {
        padding: 0 16px;
    }
}

/* phones: one step under the other, the circle on the left and the seam going down between them */
@media (max-width: 767px) {
    .twf-gifts-steps ol {
        --twf-step-gap: 26px;
        flex-direction: column;
        max-width: 330px;
    }
    .twf-gifts-steps ol > li {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 9px 0 0;
        text-align: left;
    }
    .twf-gifts-steps ol > li::before {
        margin-top: -9px;
    }
    .twf-gifts-steps ol > li:not(:last-child)::after {
        top: 44px;
        left: 21px;
        width: 0;
        height: calc(100% - 44px + var(--twf-step-gap));
        border-top: 0;
        border-left: 1.5px dashed #AD8D5C;
    }
}

/* ---------- the socks' panel and the photos ---------- */

.twf-gifts-fan,
.twf-gifts-fan > .elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFEDEA;
}
.twf-gifts-fan img {
    display: block;
    width: 100%;
    height: auto;
}

/* Square, and as tall as its card when the text beside it is taller (laptop widths). Each photo says how it fills the
   square with a class next to twf-gifts-photo in the image widget's «CSS Classes». */
.twf-gifts-photo,
.twf-gifts-photo > .elementor-widget-container {
    display: flex;
}
.twf-gifts-photo img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 50%;
}
/* the subject sits low in the photo (the Clube's two shoes): the square starts lower */
.twf-gifts-photo.is-low img {
    object-position: 50% 62%;
}
/* a product shot on white (the Monograma sock): whole, on the card's own white */
.twf-gifts-photo.is-whole img {
    object-fit: contain;
}
/* a studio shot on a black backdrop (the boxes): the photo stays square at the bottom and the black goes on above it,
   so a card made taller by its text never cuts the box at the sides */
.twf-gifts-photo.is-backdrop,
.twf-gifts-photo.is-backdrop > .elementor-widget-container {
    align-items: flex-end;
    background: #000000;
}
.twf-gifts-photo.is-backdrop img {
    min-height: 0;
}

/* ---------- «Gift Boxes»: the ready-made boxes in the shop's cards ---------- */

/* The section is Rey's product grid as a carousel, the widget of the homes' Best Sellers, with the boxes chosen by hand
   (custom query presentes_caixas, inc/woocommerce/queries.php). It holds six cards a row from 1750 px, as the shops'
   rows; where all the boxes fit, Rey does not start the carousel and its list stood at the left of the row with the
   empty places on the right: the cards stand in the middle. assets/js/shop-ui.js (capGridStart) marks those grids
   with twf-grid-fits before Rey looks at them; a rule on the carousel not yet started would also hold while Splide
   measures the cards, and every carousel then stopped half a card off. */
.twf-gifts-boxes .twf-grid-fits .splide__list {
    justify-content: center;
}
/* Rey spaces the cards with a right margin, the last one's too: without it the row is centred to the pixel, and five
   cards that fill the row exactly (five a row at 1476–1749 px) no longer stick out 12 px at each end */
.twf-gifts-boxes .twf-grid-fits li.product:last-child {
    margin-right: 0;
}

/* ---------- «Pares da caixa»: the pairs choice and the gold button ---------- */

.twf-gp {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.twf-gp .twf-gp__pairs {
    display: flex;
    border: 1px solid #CED4DA;
    background: #FFFFFF;
}
/* (0,3,0) on purpose: the kit styles every button, also on focus, at (0,2,1) */
.twf-gp .twf-gp__opt,
.twf-gp .twf-gp__opt:focus {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: auto;
    min-height: 54px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: #212529;
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    line-height: var(--e-global-typography-accent-line-height);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, color .2s;
    -webkit-appearance: none;
    appearance: none;
}
.twf-gp .twf-gp__n {
    font-weight: var(--e-global-typography-accent-font-weight);
    letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
    text-transform: var(--e-global-typography-accent-text-transform, none);
}
.twf-gp .twf-gp__p,
.twf-gp .twf-gp__p .amount {
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
.twf-gp .twf-gp__opt:hover {
    background: #F1F3F5;
    color: #212529;
}
.twf-gp .twf-gp__opt.is-on,
.twf-gp .twf-gp__opt.is-on:focus,
.twf-gp .twf-gp__opt.is-on:hover {
    background: #212529;
    color: #FFFFFF;
    cursor: default;
}

.twf-gp .twf-gp__go,
.twf-gp .twf-gp__go:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 40px;
    border: 0;
    border-radius: 0;
    background: #AD8D5C;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    line-height: var(--e-global-typography-accent-line-height);
    letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
    text-transform: var(--e-global-typography-accent-text-transform, none);
    transition: background-color .2s, color .2s;
}
/* gold → ink, the site's hover rule */
.twf-gp .twf-gp__go:hover {
    background: #212529;
    color: #FFFFFF;
}

.twf-gp .twf-gp__opt:focus-visible,
.twf-gp .twf-gp__go:focus-visible {
    outline: 2px solid #AD8D5C;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .twf-gp {
        gap: 12px;
    }
    .twf-gp .twf-gp__opt,
    .twf-gp .twf-gp__opt:focus {
        min-height: 48px;
    }
    .twf-gp .twf-gp__go,
    .twf-gp .twf-gp__go:focus {
        min-height: 50px;
    }
}