/* ==========================================================================
   Gift box page (inc/ubp/box-page.php, assets/js/giftbox.js), Figma page 19 «Presentes e caixa».
   Everything hangs from #ubp_cutom_box_product_layouts.twf-box, so the plugin's and style.css's older box rules
   (ids #ubp_boxes_container / #ubp_box_choices_container, .col-left …) lose to these.
   ========================================================================== */

/* Rey's overflow: hidden on #page would stop the box from following the scroll; clip cuts the same without it */
body.twf-box-page #page {
    overflow: clip;
}

#ubp_cutom_box_product_layouts.twf-box {
    display: grid;
    grid-template-columns: clamp(420px, 34vw, 600px) minmax(0, 1fr);
    column-gap: clamp(48px, 4.2vw, 80px);
    align-items: start;
    max-width: none !important;
    overflow: visible !important;
    margin: 0;
    /* No space below: the box template's own margin (Elementor 2460, 150 / 80 / 60 px) keeps the footer away.
       A padding here doubled it, «margem absurda» (Pedro, 10/11/2026). */
    padding: 0;
    color: #61656B;
}

#ubp_cutom_box_product_layouts.twf-box [hidden] {
    display: none !important;
}

/* ---------- left: the box ---------- */

#ubp_cutom_box_product_layouts.twf-box .twf-box__side {
    position: relative;
    float: none;
    width: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* giftbox.js lowers `top` when the column is taller than the window, so its bottom stays in view */
@media (min-width: 1025px) {
    #ubp_cutom_box_product_layouts.twf-box .twf-box__side {
        position: sticky;
        top: 100px;
    }
}

#ubp_cutom_box_product_layouts.twf-box .twf-box__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
    color: #61656B;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__crumbs a {
    color: #61656B;
    text-decoration: none;
    transition: color .2s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__crumbs a:hover {
    color: #212529;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__crumbs span:last-child {
    color: #212529;
}

#ubp_cutom_box_product_layouts.twf-box .twf-box__title {
    margin: 20px 0 0;
    padding: 0;
    max-width: none;
    font-size: 40px;
    line-height: 46px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #212529;
}

#ubp_cutom_box_product_layouts.twf-box .twf-box__sub {
    margin: 8px 0 0;
    font-size: 18px;
    line-height: 30px;
    color: #61656B;
}

/* 2 / 3 pairs: the other box of the same line */
#ubp_cutom_box_product_layouts.twf-box .twf-box__switch {
    display: flex;
    margin-top: 26px;
    border: 1px solid #CED4DA;
    background: #FFFFFF;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__opt {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 12px;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__opt b {
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__opt span,
#ubp_cutom_box_product_layouts.twf-box .twf-box__opt .amount {
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
    color: inherit;
}
#ubp_cutom_box_product_layouts.twf-box a.twf-box__opt:hover {
    background: #F1F3F5;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__opt.is-on {
    background: #212529;
    color: #FFFFFF;
}

#ubp_cutom_box_product_layouts.twf-box .twf-box__panel {
    display: flex;
    flex-direction: column;
}

#ubp_cutom_box_product_layouts.twf-box .twf-box__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 38px;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__eb {
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8E7348;
    white-space: nowrap;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__status {
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
    color: #212529;
    text-align: right;
}

/* The box seen from above: black, with the faint gold dots of the real box */
/* As wide as the 3-pair box whatever the pairs (Pedro, 05/11: the 2-pair box «deveria ficar maior»): with fewer pairs
   the compartments grow, always at the shop's 3:4 */
#ubp_cutom_box_product_layouts.twf-box .twf-box__box {
    max-width: 600px;
    margin-top: 14px;
    padding: 24px;
    background-color: #151618;
    background-image:
        radial-gradient(circle, rgba(173, 141, 92, .32) 1px, rgba(173, 141, 92, 0) 1.6px),
        radial-gradient(circle, rgba(173, 141, 92, .32) 1px, rgba(173, 141, 92, 0) 1.6px);
    background-size: 15px 15px;
    background-position: 0 0, 7.5px 7.5px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .16);
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul {
    display: grid;
    grid-template-columns: repeat(var(--twf-cols, 3), minmax(0, 1fr));
    gap: 12px;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}

/* A compartment: the sock as in the shop (3:4); the plugin puts the picture in and takes it out */
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li {
    position: relative;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    aspect-ratio: 3 / 4;
    background: #FFFFFF;
    border: 0;
    overflow: hidden;
    line-height: normal;
    cursor: pointer;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    object-fit: cover;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li::before {
    content: attr(data-twf-n);
    position: absolute;
    left: 12px;
    top: 10px;
    right: auto;
    bottom: auto;
    z-index: 30;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    opacity: 1;
    transition: none;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #AD8D5C;
}
/* The × on a pair in the box (the whole compartment takes it out) */
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:not(:empty)::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 30;
    width: 26px;
    height: 26px;
    border: 1px solid #E4E4E4;
    border-radius: 50%;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9m0-9l-9 9' fill='none' stroke='%23212529' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    transition: border-color .2s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:not(:empty):hover::after {
    border-color: #212529;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:focus-visible {
    outline: 2px solid #AD8D5C;
    outline-offset: 2px;
}
/* The pair still to choose: the dashed outline of a sock, the same seam as the 404 and the empty cart */
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:empty {
    cursor: default;
    background-color: #1E1F22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 374 691'%3E%3Cpath d='M166 0 L141 4 L100 16 L48 40 L27 56 L0 86 L1 92 L144 338 L162 376 L172 410 L175 431 L172 466 L144 552 L129 587 L113 605 L99 614 L80 621 L43 628 L38 631 L35 639 L41 665 L63 672 L111 676 L112 678 L204 674 L226 669 L231 664 L289 562 L314 530 L349 496 L356 486 L361 471 L360 456 L347 427 L329 404 L293 366 L269 318 L228 187 L197 105 L180 38 L170 6 Z' fill='none' stroke='%23AD8D5C' stroke-width='10' stroke-dasharray='30 24' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center 14%;
    background-size: auto 52%;
    border: 1.5px dashed rgba(173, 141, 92, .7);
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:empty::before {
    content: attr(data-twf-label);
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(10% + 26px);
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:empty::after {
    content: attr(data-twf-empty);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10%;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    color: #8C8F94;
}

/* The message */
#ubp_cutom_box_product_layouts.twf-box .twf-box__msg {
    display: flex;
    flex-direction: column;
    margin: 36px 0 0;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__msg label {
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6C757D;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__msg textarea,
#ubp_cutom_box_product_layouts.twf-box .twf-box__msg input {
    width: 100%;
    height: auto;
    min-height: 53px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #CED4DA;
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: none;
    font-family: inherit;
    font-size: 17px;
    line-height: 26px;
    font-weight: 400;
    color: #212529;
    resize: none;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__msg textarea {
    min-height: 96px;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__msg textarea:focus,
#ubp_cutom_box_product_layouts.twf-box .twf-box__msg input:focus {
    border-color: #6C757D;
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, .14);
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__msgfoot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 16px;
    color: #6C757D;
}

/* Total and button */
#ubp_cutom_box_product_layouts.twf-box .twf-box__total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #E4E4E4;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__totalname {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    line-height: 24px;
    color: #61656B;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__total .price {
    display: block;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
    color: #212529;
    white-space: nowrap;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__total .price b,
#ubp_cutom_box_product_layouts.twf-box .twf-box__total .price .amount {
    font-size: inherit;
    font-weight: 700;
    color: inherit;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    margin: 20px 0 0;
    padding: 0 30px;
    border: 0;
    border-radius: 0;
    background: #212529;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 1;
    transition: background-color .3s, color .3s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__go:hover:not(:disabled) {
    background: #AD8D5C;
    color: #FFFFFF;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__go:disabled {
    background: #E9ECEF;
    color: #8C9196;
    cursor: not-allowed;
}

/* Only on phones and tablets */
#ubp_cutom_box_product_layouts.twf-box .twf-box__sheethead,
#ubp_cutom_box_product_layouts.twf-box .twf-box__bar,
#ubp_cutom_box_product_layouts.twf-box .twf-box__veil {
    display: none;
}

/* ---------- right: the socks ---------- */

#ubp_cutom_box_product_layouts.twf-box .twf-box__main {
    min-width: 0;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-top: 38px;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__h2 {
    margin: 0;
    padding: 0;
    font-size: 32px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #212529;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__count {
    font-size: 16px;
    line-height: 24px;
    color: #61656B;
    white-space: nowrap;
}

#ubp_cutom_box_product_layouts.twf-box .twf-box__filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 26px;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__chips,
#ubp_cutom_box_product_layouts.twf-box .twf-box__selects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__chip {
    height: 40px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #CED4DA;
    border-radius: 0;
    background: #FFFFFF;
    color: #212529;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__chip:hover {
    border-color: #212529;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__chip.is-on {
    background: #212529;
    border-color: #212529;
    color: #FFFFFF;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select {
    margin: 0;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select select {
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    min-width: 140px;
    margin: 0;
    padding: 0 40px 0 16px;
    border: 1px solid #CED4DA;
    border-radius: 0;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23212529' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 10px 6px no-repeat;
    box-shadow: none;
    color: #212529;
    font-family: inherit;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select select:hover,
#ubp_cutom_box_product_layouts.twf-box .twf-box__select.is-set select {
    border-color: #212529;
}

/* The same lists with selectWoo (giftbox.js), as the account's country picker and the shop's «Ordenar por» */
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container {
    display: block;
    min-width: 170px;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container .select2-selection--single {
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #CED4DA;
    border-radius: 0;
    background: #FFFFFF;
    outline: none;
    transition: border-color .2s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container:hover .select2-selection--single,
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container--focus .select2-selection--single,
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container--open .select2-selection--single,
#ubp_cutom_box_product_layouts.twf-box .twf-box__select.is-set .select2-selection--single {
    border-color: #212529;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 40px 0 16px;
    color: #212529;
    font-size: 13px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 12px;
    width: 16px;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23212529' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 6px no-repeat;
    transition: transform .2s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container .select2-selection--single .select2-selection__arrow b {
    display: none;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__select .select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
}
/* The open list: selectWoo appends it to <body>, so it carries its own class */
.select2-container--open .select2-dropdown.twf-box-drop {
    overflow: hidden;
    min-width: 200px;
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 0;
    box-shadow: 0 14px 32px rgba(34, 38, 42, .1);
}
.select2-container--open .select2-dropdown--below.twf-box-drop {
    margin-top: 4px;
}
.select2-container--open .select2-dropdown--above.twf-box-drop {
    margin-top: -4px;
}
.twf-box-drop .select2-results > .select2-results__options {
    max-height: 320px;
}
.twf-box-drop .select2-results__option {
    margin: 0;
    padding: 9px 16px;
    background: transparent;
    color: #22262A;
    font: 400 15px/1.4 "Roboto Condensed", sans-serif;
}
.twf-box-drop .select2-results__option[data-selected="true"] {
    background: transparent;
    color: #8E7348;
    font-weight: 700;
}
.twf-box-drop .select2-results__option--highlighted,
.twf-box-drop .select2-results__option--highlighted[data-selected] {
    background: #F3F2EF;
    color: #22262A;
}

#ubp_cutom_box_product_layouts.twf-box .twf-box__full {
    display: flex;
    align-items: stretch;
    margin-top: 24px;
    background: #FFFFFF;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__full i {
    flex: none;
    width: 3px;
    background: #AD8D5C;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__full span {
    padding: 16px 20px;
    font-size: 16px;
    line-height: 24px;
    color: #212529;
}

/* One card per sock, its sizes as buttons */
#ubp_cutom_box_product_layouts.twf-box .twf-box__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 46px 30px;
    margin-top: 30px;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk__ph {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    aspect-ratio: 3 / 4;
    background: #FFFFFF;
    overflow: hidden;
    cursor: pointer;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk__ph:focus-visible {
    outline: 2px solid #AD8D5C;
    outline-offset: 2px;
}
/* «Pôr na caixa» over the photo, where there is a mouse */
#ubp_cutom_box_product_layouts.twf-box .twf-sk__put {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 12px 10px;
    background: rgba(33, 37, 41, .9);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
@media (hover: hover) {
    #ubp_cutom_box_product_layouts.twf-box .twf-sk__ph:hover .twf-sk__put {
        opacity: 1;
        transform: none;
    }
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk__n a {
    color: inherit;
    text-decoration: none;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk__n a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* A sock with several sizes, its photo clicked: the sizes call for a choice */
#ubp_cutom_box_product_layouts.twf-box .twf-sk.is-asking .twf-sz:not(:disabled) {
    animation: twf-box-ask .8s ease 2;
}
@keyframes twf-box-ask {
    0%, 100% { border-color: #CED4DA; background-color: #FFFFFF; }
    40% { border-color: #AD8D5C; background-color: #F6F0E6; }
}
@media (prefers-reduced-motion: reduce) {
    #ubp_cutom_box_product_layouts.twf-box .twf-sk.is-asking .twf-sz:not(:disabled) {
        animation: none;
        border-color: #AD8D5C;
    }
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk__ph img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk.is-in .twf-sk__ph::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #AD8D5C;
    pointer-events: none;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk__badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    max-width: calc(100% - 24px);
    padding: 6px 9px;
    background: #AD8D5C;
    color: #FFFFFF;
    font-size: 11px;
    line-height: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk__n {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
    margin: 16px 0 0;
    padding: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #212529;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sk__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sz {
    min-width: 64px;
    height: 38px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #CED4DA;
    border-radius: 0;
    background: #FFFFFF;
    color: #212529;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sz:hover {
    border-color: #212529;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sz.is-on {
    background: #212529;
    border-color: #212529;
    color: #FFFFFF;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sz.is-off {
    background: #F1F3F5;
    border-color: #E9ECEF;
    color: #ADB5BD;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sz:disabled {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}
#ubp_cutom_box_product_layouts.twf-box .twf-sz:focus-visible,
#ubp_cutom_box_product_layouts.twf-box .twf-box__chip:focus-visible,
#ubp_cutom_box_product_layouts.twf-box .twf-box__opt:focus-visible,
#ubp_cutom_box_product_layouts.twf-box .twf-box__select select:focus-visible,
#ubp_cutom_box_product_layouts.twf-box .twf-box__go:focus-visible {
    outline: 2px solid #AD8D5C;
    outline-offset: 2px;
}

#ubp_cutom_box_product_layouts.twf-box .twf-box__none {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 30px;
    font-size: 18px;
    line-height: 30px;
    color: #212529;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__clear {
    height: 45px;
    margin: 0;
    padding: 0 25px;
    border: 1px solid #212529;
    border-radius: 0;
    background: transparent;
    color: #212529;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s, border-color .3s, color .3s;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__clear:hover {
    background: #AD8D5C;
    border-color: #AD8D5C;
    color: #FFFFFF;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 56px;
    font-size: 15px;
    line-height: 20px;
    color: #61656B;
}
#ubp_cutom_box_product_layouts.twf-box .twf-box__ring {
    width: 28px;
    height: 28px;
    border: 2px solid #E3E1DB;
    border-top-color: #AD8D5C;
    border-radius: 50%;
    animation: twf-box-spin .8s linear infinite;
}
@keyframes twf-box-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #ubp_cutom_box_product_layouts.twf-box .twf-box__ring { animation-duration: 2.4s; }
}

/* «A caixa está cheia.»: ours, and the plugin's own messages in the same place */
#ubp_cutom_box_product_layouts.twf-box .twf-box__toast,
body.twf-box-page #ubp_error {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 32px;
    z-index: 1100;
    max-width: calc(100% - 40px);
    padding: 14px 22px;
    border: 0;
    border-radius: 0;
    background: #212529;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    transform: translateX(-50%);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
}
body.twf-box-page #ubp_error p {
    margin: 0;
    color: #FFFFFF;
}

/* The plugin's list is the source of the cards; it shows only if giftbox.js could not start */
#ubp_cutom_box_product_layouts.twf-box #ubp_box_choices_container,
#ubp_cutom_box_product_layouts.twf-box .cSplit-scroll {
    display: none !important;
}
#ubp_cutom_box_product_layouts.twf-box.twf-box--fallback #ubp_box_choices_container {
    display: block !important;
    float: none;
    width: auto;
    margin: 30px 0 0;
}

/* ---------- smaller desktops ---------- */

@media (max-width: 1200px) {
    #ubp_cutom_box_product_layouts.twf-box .twf-box__title {
        font-size: 34px;
        line-height: 40px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__sub {
        font-size: 17px;
        line-height: 28px;
    }
}

/* ---------- phones and tablets: a bar at the bottom, the box as a sheet ---------- */

@media (max-width: 1024px) {
    #ubp_cutom_box_product_layouts.twf-box {
        display: block;
        padding: 8px 0 0;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__title {
        margin-top: 12px;
        font-size: 30px;
        line-height: 36px;
        letter-spacing: 1.5px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__switch {
        margin-top: 16px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__opt {
        min-height: 48px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__head {
        margin-top: 30px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__h2 {
        font-size: 26px;
        line-height: 32px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__filters {
        flex-direction: column;
        align-items: stretch;
        margin-top: 18px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__chips::-webkit-scrollbar {
        display: none;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__chip {
        flex: none;
        height: 36px;
        padding: 0 14px;
        font-size: 12px;
        line-height: 15px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__selects {
        flex-wrap: nowrap;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__select {
        flex: 1 1 0;
        min-width: 0;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__select select {
        width: 100%;
        min-width: 0;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 20px;
        margin-top: 20px;
    }

    /* The box: a sheet that rises from the bottom */
    #ubp_cutom_box_product_layouts.twf-box .twf-box__panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        max-height: calc(100% - 70px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 20px 24px;
        background: #FFFFFF;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
    }
    #ubp_cutom_box_product_layouts.twf-box.is-open .twf-box__panel {
        transform: none;
        visibility: visible;
        transition: transform .3s ease;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__sheethead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding-top: 28px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__sheethead::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 12px;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        background: #D5D5D5;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__sheettitle {
        font-size: 21px;
        line-height: 28px;
        font-weight: 700;
        text-transform: uppercase;
        color: #212529;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 -10px 0 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #212529;
        cursor: pointer;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__label {
        margin-top: 2px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__label .twf-box__eb {
        display: none;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__status {
        text-align: left;
        font-weight: 400;
        color: #61656B;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__box {
        margin-top: 16px;
        padding: 14px;
        box-shadow: none;
        background-size: 10px 10px;
        background-position: 0 0, 5px 5px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__box ul {
        gap: 8px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li::before {
        left: 8px;
        top: 6px;
        font-size: 11px;
        line-height: 13px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:not(:empty)::after {
        right: 6px;
        top: 6px;
        width: 22px;
        height: 22px;
        background-size: 9px 9px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:empty::before {
        left: 0;
        top: auto;
        bottom: calc(8% + 20px);
        font-size: 11px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__box ul li:empty::after {
        bottom: 8%;
        font-size: 12px;
        line-height: 15px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__msg {
        margin-top: 18px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__msg textarea {
        min-height: 76px;
        font-size: 16px;
        line-height: 24px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__total {
        margin-top: 16px;
        padding-top: 14px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__total .price {
        font-size: 22px;
        line-height: 26px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__go {
        height: 52px;
        margin-top: 14px;
    }

    /* The bar */
    #ubp_cutom_box_product_layouts.twf-box .twf-box__bar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 996;
        height: 84px;
        padding: 0 20px;
        background: #FFFFFF;
        border-top: 1px solid #E4E4E4;
        box-shadow: 0 -10px 24px rgba(0, 0, 0, .08);
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__mini {
        display: flex;
        flex: none;
        gap: 5px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__ms {
        position: relative;
        width: 34px;
        height: 45px;
        background: #FFFFFF;
        border: 1.2px dashed rgba(173, 141, 92, .9);
        overflow: hidden;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__ms.is-on {
        border: 1px solid #E4E4E4;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__ms img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__bartext {
        display: flex;
        flex-direction: column;
        gap: 3px;
        flex: 1 1 auto;
        min-width: 0;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__bartext b {
        font-size: 11px;
        line-height: 13px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #8E7348;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__barstatus {
        overflow: hidden;
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        color: #212529;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__open {
        flex: none;
        height: 44px;
        margin: 0;
        padding: 0 18px;
        border: 0;
        border-radius: 0;
        background: #212529;
        color: #FFFFFF;
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .3s;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__open:hover {
        background: #AD8D5C;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__veil {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 998;
        background: rgba(0, 0, 0, .5);
    }
    html.twf-box-lock,
    html.twf-box-lock body {
        overflow: hidden;
    }
    /* Rey's back-to-top arrow (z-index 1040) would sit over the open box */
    html.twf-box-lock .rey-scrollTop {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__toast,
    body.twf-box-page #ubp_error {
        bottom: 100px;
    }
    /* The chat button above the bar (Rey's panels, the cookie bar and the menus stay above the box) */
    body.twf-box-page .chaty-widget {
        bottom: 100px !important;
    }
}

@media (max-width: 767px) {
    #ubp_cutom_box_product_layouts.twf-box .twf-box__crumbs {
        font-size: 13px;
        line-height: 16px;
        gap: 8px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__title {
        font-size: 28px;
        line-height: 34px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__sub {
        font-size: 16px;
        line-height: 24px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__opt b,
    #ubp_cutom_box_product_layouts.twf-box .twf-box__opt span,
    #ubp_cutom_box_product_layouts.twf-box .twf-box__opt .amount {
        font-size: 14px;
        line-height: 17px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__h2 {
        font-size: 21px;
        line-height: 28px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__count {
        font-size: 14px;
        line-height: 20px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-box__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-sk__badge {
        left: 8px;
        top: 8px;
        max-width: calc(100% - 16px);
        padding: 5px 7px;
        font-size: 10px;
        line-height: 12px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-sk__n {
        min-height: 40px;
        margin-top: 12px;
        font-size: 16px;
        line-height: 20px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-sk__sizes {
        gap: 6px;
        margin-top: 10px;
    }
    #ubp_cutom_box_product_layouts.twf-box .twf-sz {
        min-width: 0;
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
        line-height: 16px;
    }
}