/* The Monograma's product page, loaded only there (inc/woocommerce/monograma.php): the preview of the «Gallery (BBD)»
   widget, the price per pair and its table, the text field, the line under the button and the phone strip.
   Colours as the rest of the product page: ink #212529, text #61656B, muted #737373, lines #DFE3E7, fields #CED4DA. */

/* --- preview ------------------------------------------------------------------------------------------------- */

.twf-mono-gallery {
    display: grid;
    grid-template-columns: 115px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.twf-mono-thumbs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.twf-mono-thumb {
    display: block;
    width: 115px;
    height: 115px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: #EAEAEA;
    overflow: hidden;
    cursor: pointer;
}

/* Elementor's «.elementor img { height: auto }» outranks a single class: these photos must fill their boxes, or the
   text is placed on a crop the photo does not have. */
.twf-mono-gallery .twf-mono-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.twf-mono-thumb.is-active {
    border-color: #212529;
}

/* The shop's 3:4 crop; on a computer it fits under the header so it can stay in view while the options are chosen
   (never narrower than 480 px: on a low window only the foot of the sock goes under the fold, not the text). */
.twf-mono-stage {
    position: relative;
    width: min(100%, max(480px, calc((100vh - 140px) * 0.75)));
    aspect-ratio: 3 / 4;
    background: #FFFFFF;
    overflow: hidden;
}

.twf-mono-gallery .twf-mono-stage img.twf-mono-stage__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.twf-mono-stage__tiny,
.twf-mono-stage__big,
.twf-mono-strip__big {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: "Helvetica Neue", Arial, sans-serif;   /* the embroidery's plain capitals */
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.twf-mono-stage__tiny {
    text-shadow: none;
}

.twf-mono-stage__ring {
    position: absolute;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #FFFFFF, 0 0 0 1px rgba(33, 37, 41, 0.35);
    pointer-events: none;
}

.twf-mono-stage__line {
    position: absolute;
    height: 1px;
    background: rgba(33, 37, 41, 0.45);
    transform-origin: 0 50%;
    pointer-events: none;
}

.twf-mono-stage__lupa {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 4px #FFFFFF, 0 8px 28px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* Before a model is chosen, and on the gallery's photos: only the photo. While a photo is read for where the leg is,
   the marks wait. */
.twf-mono-stage.is-idle > span,
.twf-mono-stage.is-photo > span {
    display: none;
}

.twf-mono-stage.is-reading > span {
    visibility: hidden;
}

/* A model without a photo: its colour, and the lupa with the text. */
.twf-mono-stage.is-flat {
    background: var(--twf-mono-flat, #212529);
}

.twf-mono-stage.is-flat .twf-mono-stage__photo,
.twf-mono-stage.is-flat .twf-mono-stage__ring,
.twf-mono-stage.is-flat .twf-mono-stage__tiny,
.twf-mono-stage.is-flat .twf-mono-stage__line {
    display: none;
}

/* Rey's page wrapper has overflow: hidden, which stops sticky; clip still cuts what spills out (as on the cart) */
body.twf-monograma-page .rey-siteWrapper {
    --site-wrapper-overflow: clip;
}

@media (min-width: 1025px) {
    .elementor-widget-bbd-woo-wm-gallery {
        position: sticky;
        top: calc(100px + var(--wp-admin--admin-bar--height, 0px));   /* under the header's black bar (80 px) */
    }
}

@media (max-width: 767px) {
    .twf-mono-gallery {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .twf-mono-thumbs {
        order: 2;
        flex-direction: row;
        gap: 10px;
    }

    /* The square is the photo's, not the button's: with aspect-ratio on the <button>, Safari (WebKit) measured the
       gallery's column 128 px short and the price covered the thumbnails. */
    .twf-mono-thumb {
        width: calc((100% - 20px) / 3);
        height: auto;
    }

    .twf-mono-gallery .twf-mono-thumb img {
        height: auto;
        aspect-ratio: 1;
    }

    .twf-mono-stage {
        width: 100%;
    }
}

/* --- price per pair and the table under it ------------------------------------------------------------------ */

.twf-mono-per {
    margin-left: 4px;
    font-size: 18px;
    font-weight: 400;
    color: #61656B;
}

/* Information, not a choice: text in columns with a hairline between them, no boxes like the size buttons (Pedro,
   06/11: the boxed version looked clickable). The quantity's own row is in ink and heavier. */
.twf-mono-tiers {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.twf-mono-tier {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0 22px;
    border-left: 1px solid #DFE3E7;
    cursor: default;
}

.twf-mono-tier:first-child {
    padding-left: 0;
    border-left: 0;
}

.twf-mono-tier__q {
    font-size: 14px;
    line-height: 18px;
    color: #737373;
}

.twf-mono-tier__v,
.twf-mono-tier__v .woocommerce-Price-amount {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #61656B;
}

.twf-mono-tier.is-on .twf-mono-tier__q {
    color: #212529;
}

.twf-mono-tier.is-on .twf-mono-tier__v,
.twf-mono-tier.is-on .twf-mono-tier__v .woocommerce-Price-amount {
    font-weight: 600;
    color: #212529;
}

@media (max-width: 767px) {
    .twf-mono-per {
        font-size: 16px;
    }

    .twf-mono-tiers {
        grid-auto-columns: minmax(0, 1fr);
        margin-top: 14px;
    }

    .twf-mono-tier {
        padding: 0 6px;
    }

    .twf-mono-tier__q {
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;   /* «9 a 11 pares» on one line, as the other columns */
    }

    .twf-mono-tier__v,
    .twf-mono-tier__v .woocommerce-Price-amount {
        font-size: 15px;
        line-height: 19px;
    }
}

/* --- options: the chosen value beside the title, the models' lines ------------------------------------------ */

.twf-mono-val {
    margin-left: 8px;
    font-weight: 400;
    color: #61656B;
}

.twf-mono-group {
    flex: 0 0 100%;
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 18px;
    color: #737373;
}

.twf-mono-group.is-first {
    margin-top: 0;
}

/* --- the text --------------------------------------------------------------------------------------------- */

div.product form.cart .twf-mono-field {
    max-width: 400px;
    margin: 0 0 40px;
}

div.product form.cart .twf-mono-field__label {
    display: block;
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: #212529;
    text-transform: none;
}

.twf-mono-field__box {
    position: relative;
}

div.product form.cart .twf-mono-field__box input {
    width: 100%;
    height: 53px;
    margin: 0;
    padding: 0 64px 0 16px;
    border: 1px solid #CED4DA;
    border-radius: 0;
    font-size: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #212529;
}

.twf-mono-field__count {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 15px;
    color: #737373;
    pointer-events: none;
}

.twf-mono-field__help,
.twf-mono-field__error {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 20px;
    color: #737373;
}

.twf-mono-field__error {
    color: var(--colors-red, #C0392B);
}

div.product form.cart .twf-mono-field.is-bad .twf-mono-field__box input {
    border-color: var(--colors-red, #C0392B);
}

/* --- under the button: the total and the next price -------------------------------------------------------- */

.twf-mono-sum {
    flex: 0 0 100%;
    order: 99;
    width: 100%;
}

.twf-mono-sum p {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 22px;
    color: #61656B;
}

.twf-mono-sum .twf-mono-sum__total {
    font-weight: 500;
    color: #212529;
}

.twf-mono-sum .twf-mono-sum__total:not([hidden]) + .twf-mono-sum__next {
    margin-top: 4px;
}

.twf-mono-sum b {
    font-weight: 500;
    color: #212529;
}

.twf-mono-sum [hidden],
.twf-mono-field [hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    div.product form.cart .twf-mono-field {
        max-width: none;
        margin-bottom: 30px;
    }

    div.product form.cart .twf-mono-field__label {
        font-size: 18px;
        line-height: 23px;
    }

    div.product form.cart .twf-mono-field__box input {
        height: 50px;
        font-size: 18px;
    }

    .twf-mono-field__help,
    .twf-mono-field__error {
        font-size: 14px;
    }

    .twf-mono-sum p {
        font-size: 15px;
        line-height: 21px;
    }
}

/* --- phones: the strip under the header while the options are on screen ----------------------------------- */

.twf-mono-strip {
    position: fixed;
    top: var(--twf-mono-strip-top, 0px);
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100px;
    padding: 0 20px;
    background: #FFFFFF;
    border-bottom: 1px solid #DFE3E7;
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
}

.twf-mono-strip.is-on {
    transform: none;
    visibility: visible;
}

.twf-mono-strip__lupa {
    position: relative;
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 2px #FFFFFF, 0 2px 10px rgba(0, 0, 0, 0.18);
}

.twf-mono-strip__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.twf-mono-strip__m {
    overflow: hidden;
    font-size: 14px;
    line-height: 18px;
    color: #61656B;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.twf-mono-strip__t {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 1.5px;
    color: #212529;
}

.twf-mono-strip__p {
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    color: #212529;
}

@media (min-width: 768px) {
    .twf-mono-strip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .twf-mono-strip {
        transition: none;
    }
}