/* ==========================================================================
   Minha conta (inc/woocommerce/account.php and the templates in woocommerce/myaccount/),
   redesign of 26/10/2026, Figma page 12.
   Everything hangs from #twf-account: the page is Elementor Pro's «My Account» widget, whose own
   styles reach deep into .woocommerce, and an id outweighs them without !important.
   The purchase pages (inc/woocommerce/purchase.php, Figma page 13) wear the same buttons, cards,
   fields and «costura» from #twf-buy, hence :is(#twf-account, #twf-buy), which weighs as one id;
   their own layout is in purchase.css.
   ========================================================================== */

:is(#twf-account, #twf-buy) {
    --twf-ink: #22262A;
    --twf-gold: #AD8D5C;
    --twf-gold-text: #8E7348;   /* gold that passes for small text on white */
    --twf-stone: #737373;
    --twf-line: #E3E1DD;
    --twf-dash: #BDB8AF;
    --twf-off: #EDEBE8;
    --twf-red: #B3261E;
    --twf-dashes-x: linear-gradient(to right, var(--twf-dash) 7px, transparent 7px) 0 0 / 13px 2px repeat-x;
    --twf-dashes-y: linear-gradient(to bottom, var(--twf-dash) 7px, transparent 7px) 0 0 / 2px 13px repeat-y;

    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 0 112px;
    color: var(--twf-ink);
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
:is(#twf-account, #twf-buy) *,
:is(#twf-account, #twf-buy) *::before,
:is(#twf-account, #twf-buy) *::after {
    box-sizing: border-box;
}
/* The resets leave the shop's product cards alone (Favoritos uses them as they are in the shop):
   ":where(:not(.products, .products *))" keeps each selector's weight as it was. */
:is(#twf-account, #twf-buy) :is(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, address, fieldset):where(:not(.products, .products *)) {
    margin: 0;
    padding: 0;
    border: 0;
}
:is(#twf-account, #twf-buy) :is(h1, h2, h3, h4, h5):where(:not(.products *)) {
    color: var(--twf-ink);
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
}
:is(#twf-account, #twf-buy) a:where(:not(.products *)) {
    color: inherit;
    text-decoration: none;
}
/* The widget paints strong, em and address in its own grey */
:is(#twf-account, #twf-buy) :is(strong, b):where(:not(.products *)) {
    color: inherit;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) :is(em, address):where(:not(.products *)) {
    color: inherit;
    font-size: inherit;
}
/* Rey underlines every link of the dashboard with an ::after bar */
:is(#twf-account, #twf-buy) .rey-myAccContent a::after {
    content: none;
}
:is(#twf-account, #twf-buy) img:where(:not(.products *)) {
    display: block;
    max-width: 100%;
    height: auto;
}
:is(#twf-account, #twf-buy) .twf-ic {
    flex-shrink: 0;
}
:is(#twf-account, #twf-buy) [hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-h1 {
    font-size: 40px;
    line-height: 46px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
:is(#twf-account, #twf-buy) .twf-h1--sm {
    font-size: 40px;
    line-height: 46px;
}
:is(#twf-account, #twf-buy) .twf-h2 {
    font-size: 32px;
    line-height: 38px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-h3 {
    font-size: 24px;
    line-height: 31px;
    font-weight: 500;
}
:is(#twf-account, #twf-buy) .twf-h4 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}
:is(#twf-account, #twf-buy) .twf-h5 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-lead {
    font-size: 20px;
    line-height: 32px;
}
:is(#twf-account, #twf-buy) .twf-meta {
    color: var(--twf-stone);
    font-size: 15px;
    line-height: 22px;
}
:is(#twf-account, #twf-buy) .twf-small {
    color: var(--twf-stone);
    font-size: 14px;
    line-height: 20px;
}
:is(#twf-account, #twf-buy) .twf-num {
    font-variant-numeric: tabular-nums;
}
:is(#twf-account, #twf-buy) .twf-ink {
    color: var(--twf-ink);
    font-weight: 500;
}
:is(#twf-account, #twf-buy) .twf-link {
    color: var(--twf-ink);
    font-size: 15px;
    line-height: 22px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-link:hover,
:is(#twf-account, #twf-buy) .twf-link:focus-visible {
    color: var(--twf-gold-text);
}
:is(#twf-account, #twf-buy) .twf-link--stone {
    color: var(--twf-stone);
}

/* --------------------------------------------------------------------------
   Buttons: the site's own, as «Adicionar ao carrinho» (Rey's primary button):
   dark, capitals, hover gold; the colours are Rey's accent settings. No rounded
   corners on buttons or fields (Pedro, 27/10/2026).
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 45px;
    margin: 0;
    padding: 10px 25px;
    color: var(--accent-text-color, #f8f8f8);
    background: var(--accent-color, #212529);
    border: 1px solid var(--accent-color, #212529);
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
:is(#twf-account, #twf-buy) .twf-btn:hover,
:is(#twf-account, #twf-buy) .twf-btn:focus-visible {
    color: var(--accent-text-hover-color, #f8f8f8);
    background: var(--accent-hover-color, #ad8d5c);
    border-color: var(--accent-hover-color, #ad8d5c);
}
:is(#twf-account, #twf-buy) .twf-btn:focus-visible {
    outline: 2px solid var(--accent-color, #212529);
    outline-offset: 3px;
}
:is(#twf-account, #twf-buy) .twf-btn--line {
    color: var(--accent-color, #212529);
    background: transparent;
}
:is(#twf-account, #twf-buy) .twf-btn--gold {
    background: var(--accent-hover-color, #ad8d5c);
    border-color: var(--accent-hover-color, #ad8d5c);
}
/* Gold buttons turn to ink on hover, as across the site (homes, popups, newsletter) */
:is(#twf-account, #twf-buy) .twf-btn--gold:hover,
:is(#twf-account, #twf-buy) .twf-btn--gold:focus-visible {
    background: var(--accent-color, #212529);
    border-color: var(--accent-color, #212529);
}
:is(#twf-account, #twf-buy) .twf-btn--sm {
    min-height: 38px;
    padding: 8px 18px;
    font-size: 13px;
    letter-spacing: 1px;
}
:is(#twf-account, #twf-buy) .twf-btn--tall {
    min-height: 50px;
}
:is(#twf-account, #twf-buy) .twf-btn--block {
    display: flex;
    width: 100%;
}
:is(#twf-account, #twf-buy) .twf-btn--off,
:is(#twf-account, #twf-buy) .twf-btn--off:hover {
    color: var(--twf-stone);
    background: var(--twf-off);
    border-color: var(--twf-off);
    cursor: default;
}
:is(#twf-account, #twf-buy) .twf-btn.loading {
    opacity: 0.6;
}
:is(#twf-account, #twf-buy) .twf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
:is(#twf-account, #twf-buy) .twf-actions > .twf-link {
    margin-left: 12px;   /* a link sits a little further from the buttons */
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-card {
    background: #fff;
    border: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-card--gold {
    border-top: 3px solid var(--twf-gold);
}
:is(#twf-account, #twf-buy) .twf-dashed {
    padding: 22px 26px;
    border: 1px dashed var(--twf-dash);
}
:is(#twf-account, #twf-buy) .twf-dashed .twf-meta {
    margin-top: 4px;
}
:is(#twf-account, #twf-buy) .twf-dashed .twf-link {
    display: inline-block;
    margin-top: 10px;
}
/* A link inside a sentence (WhatsApp in «Quer trocar um tamanho?») */
:is(#twf-account, #twf-buy) .twf-dashed .twf-link--inline {
    display: inline;
    margin-top: 0;
    font-size: inherit;
    line-height: inherit;
}
:is(#twf-account, #twf-buy) .twf-section-head {
    margin-bottom: 28px;
}
:is(#twf-account, #twf-buy) .twf-section-head .twf-meta {
    margin-top: 6px;
}
/* A head with a button on the right (Favoritos, Métodos de pagamento) */
:is(#twf-account, #twf-buy) .twf-section-head--row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
}
:is(#twf-account, #twf-buy) .twf-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--twf-stone);
    font-size: 15px;
    line-height: 22px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
:is(#twf-account, #twf-buy) .twf-back:hover {
    color: var(--twf-ink);
}

/* Status tags */
:is(#twf-account, #twf-buy) .twf-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    color: var(--twf-ink);
    background: #fff;
    border: 1px solid var(--twf-line);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-tag__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-tag--pay {
    color: var(--twf-gold-text);
    border-color: var(--twf-gold);
}
:is(#twf-account, #twf-buy) .twf-tag--pay .twf-tag__dot {
    background: var(--twf-gold);
}
:is(#twf-account, #twf-buy) .twf-tag--done,
:is(#twf-account, #twf-buy) .twf-tag--cancel,
:is(#twf-account, #twf-buy) .twf-tag--failed,
:is(#twf-account, #twf-buy) .twf-tag--refunded {
    color: var(--twf-stone);
}
:is(#twf-account, #twf-buy) .twf-tag--done .twf-tag__dot {
    background: #9A968F;
}
:is(#twf-account, #twf-buy) .twf-tag--cancel .twf-tag__dot,
:is(#twf-account, #twf-buy) .twf-tag--failed .twf-tag__dot,
:is(#twf-account, #twf-buy) .twf-tag--refunded .twf-tag__dot {
    background: #fff;
    border: 1.5px solid #9A968F;
}

/* Product photos (the dashed sock when the product is gone) */
:is(#twf-account, #twf-buy) .twf-thumbs {
    display: flex;
    align-items: center;
    gap: 8px;
}
:is(#twf-account, #twf-buy) .twf-thumb {
    display: block;
    flex-shrink: 0;
    width: 48px;    /* 3:4, the shape of the shop's photos (Pedro 05/11: they did not fill the square) */
    height: 64px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-thumb--big {
    width: 84px;
    height: 112px;
}
:is(#twf-account, #twf-buy) .twf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* A wider photo (glasses, masks, boxes) whole, on the photos' own near-white, as on the shop's cards */
:is(#twf-account, #twf-buy) :is(.twf-thumb, .twf-pick__photo) img.twf-fit {
    object-fit: contain;
    background-color: #FCFCFC;
}
:is(#twf-account, #twf-buy) .twf-thumb__ghost {
    display: block;
    width: 100%;
    height: 100%;
    background: #F3F2EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M27 14h11v22l7 7c2.5 2.5 2.5 6.5 0 9-2.5 2.5-6.5 2.5-9 0l-9-9z' fill='none' stroke='%23C9C5BE' stroke-width='1.6' stroke-dasharray='3 2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
:is(#twf-account, #twf-buy) .twf-thumbs__more {
    padding-left: 2px;
    color: var(--twf-stone);
    font-size: 14px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Head: greeting, e-mail, log out, tabs
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-acc__head {
    padding-top: 0;
}
:is(#twf-account, #twf-buy) .twf-acc__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 28px;
}
:is(#twf-account, #twf-buy) .twf-acc__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 28px;
    padding-bottom: 6px;
}
:is(#twf-account, #twf-buy) .twf-tabs {
    margin-top: 36px;
    border-bottom: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-tabs__list {
    display: flex;
    gap: 44px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
:is(#twf-account, #twf-buy) .twf-tabs__list::-webkit-scrollbar {
    display: none;
}
:is(#twf-account, #twf-buy) .twf-tabs__item {
    flex-shrink: 0;
    margin: 0;
}
:is(#twf-account, #twf-buy) .twf-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 18px;
    color: var(--twf-stone);
    border-bottom: 3px solid transparent;
    font-size: 17px;
    line-height: 24px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s;
}
:is(#twf-account, #twf-buy) .twf-tab:hover {
    color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-tab.is-active {
    color: var(--twf-ink);
    border-bottom-color: var(--twf-gold);
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-tab__count {
    padding: 1px 7px;
    color: var(--twf-stone);
    background: var(--twf-off);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-tab.is-active .twf-tab__count {
    color: #fff;
    background: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-acc__body {
    padding-top: 48px;
}
/* The widget wraps each tab's content in a bordered box of its own */
:is(#twf-account, #twf-buy) .woocommerce-MyAccount-content-wrapper,
:is(#twf-account, #twf-buy) .woocommerce-MyAccount-content-wrapper-no-data {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

/* WooCommerce notices: assets/css/notices.css, the same on the whole site (inc/woocommerce/notices.php) */

/* --------------------------------------------------------------------------
   The «costura»: five steps on a seam, solid up to the current step
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-seam__steps {
    display: flex;
    list-style: none;
}
:is(#twf-account, #twf-buy) .twf-seam__step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    text-align: center;
}
/* The thread from the previous step: dashed, or sewn once this step is reached */
:is(#twf-account, #twf-buy) .twf-seam__step + .twf-seam__step::before {
    content: "";
    position: absolute;
    top: 11px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--twf-dashes-x);
}
:is(#twf-account, #twf-buy) .twf-seam__step + .twf-seam__step:not(.is-todo)::before {
    background: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-seam__mark {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #fff;
    background: #fff;
    border: 1.6px dashed var(--twf-dash);
    border-radius: 50%;
}
:is(#twf-account, #twf-buy) .twf-seam__mark svg {
    stroke-width: 2.6;
}
:is(#twf-account, #twf-buy) .is-done > .twf-seam__mark {
    background: var(--twf-ink);
    border: 0;
}
:is(#twf-account, #twf-buy) .is-now > .twf-seam__mark {
    background: var(--twf-gold);
    border: 0;
}
:is(#twf-account, #twf-buy) .is-wait > .twf-seam__mark {
    border: 2px solid var(--twf-gold);
}
:is(#twf-account, #twf-buy) .is-now > .twf-seam__mark::after,
:is(#twf-account, #twf-buy) .is-wait > .twf-seam__mark::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}
:is(#twf-account, #twf-buy) .is-wait > .twf-seam__mark::after {
    background: var(--twf-gold);
}
:is(#twf-account, #twf-buy) .twf-seam__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
:is(#twf-account, #twf-buy) .twf-seam__label {
    color: var(--twf-stone);
    font-size: 18px;
    line-height: 24px;
}
:is(#twf-account, #twf-buy) .is-done .twf-seam__label {
    color: var(--twf-ink);
    font-weight: 500;
}
:is(#twf-account, #twf-buy) .is-now .twf-seam__label {
    color: var(--twf-ink);
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .is-wait .twf-seam__label {
    color: var(--twf-gold-text);
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-seam__date {
    color: var(--twf-stone);
    font-size: 14px;
    line-height: 20px;
}
:is(#twf-account, #twf-buy) .twf-seam__legend {
    display: none;
}

/* Four stitches in the orders list */
:is(#twf-account, #twf-buy) .twf-mini {
    display: flex;
    gap: 4px;
    width: 200px;
    max-width: 100%;
}
:is(#twf-account, #twf-buy) .twf-mini i {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, var(--twf-dash) 5px, transparent 5px) 0 0 / 9px 2px repeat-x;
}
:is(#twf-account, #twf-buy) .twf-mini i.is-on {
    background: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-mini--pay i.is-on {
    background: var(--twf-gold);
}

/* --------------------------------------------------------------------------
   Multibanco details
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-mb__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-mb dt {
    color: var(--twf-stone);
    font-size: 15px;
    font-weight: 400;
}
:is(#twf-account, #twf-buy) .twf-mb dd {
    display: flex;
    align-items: center;
    gap: 18px;
}
:is(#twf-account, #twf-buy) .twf-mb__value {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-mb--small .twf-mb__value {
    font-size: 20px;
    line-height: 26px;
}
:is(#twf-account, #twf-buy) .twf-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 0;
    color: var(--twf-stone);
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) .twf-copy:hover {
    color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-copy.is-copied {
    color: var(--twf-gold-text);
}

/* --------------------------------------------------------------------------
   Hints, empty states
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
    padding: 22px 28px;
    border: 1px dashed var(--twf-dash);
    font-size: 18px;
}
:is(#twf-account, #twf-buy) .twf-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 40px 44px;
}
:is(#twf-account, #twf-buy) .twf-empty .twf-btn {
    margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Resumo
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-dash {
    display: flex;
    flex-direction: column;
    gap: 72px;
}
:is(#twf-account, #twf-buy) .twf-dash__now {
    display: grid;
    gap: 24px;
}
:is(#twf-account, #twf-buy) .twf-dash__now--two {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
/* «Tem mais 1 encomenda em curso. Ver encomendas»: across the cards, right under them */
:is(#twf-account, #twf-buy) .twf-dash__more {
    grid-column: 1 / -1;
    margin: 0;
}
:is(#twf-account, #twf-buy) .twf-dash__more .twf-link {
    margin-left: 6px;
}
:is(#twf-account, #twf-buy) .twf-follow {
    padding: 32px 36px 34px;
}
:is(#twf-account, #twf-buy) .twf-follow__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}
:is(#twf-account, #twf-buy) .twf-follow__top .twf-h2 {
    margin-top: 6px;
}
:is(#twf-account, #twf-buy) .twf-follow .twf-seam {
    margin-top: 34px;
}
:is(#twf-account, #twf-buy) .twf-follow__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px 24px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-follow__items {
    display: flex;
    align-items: center;
    gap: 20px;
}
:is(#twf-account, #twf-buy) .twf-follow__count {
    display: block;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-follow__items .twf-meta {
    display: block;
}
/* The payment card is drawn for the column beside the order on its way. Its body follows the card's own width: narrow,
   it stands; wide (alone in its row, or under the other card on a tablet), it lies down, because standing at that
   width its rows and its button ran across the whole page (Pedro, 06/11/2026). */
:is(#twf-account, #twf-buy) .twf-paycard {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: 28px 32px 32px;
}
:is(#twf-account, #twf-buy) .twf-paycard__body {
    display: flex;
    flex: 1;   /* the card stretches to the other card's height: the body follows, the button stays at the foot */
    flex-direction: column;
}
:is(#twf-account, #twf-buy) .twf-paycard .twf-h2 {
    margin-top: 6px;
}
:is(#twf-account, #twf-buy) .twf-paycard .twf-h2 + .twf-meta {
    margin-top: 8px;
}
:is(#twf-account, #twf-buy) .twf-paycard .twf-mb {
    margin-top: 14px;
}
/* The button sits at the foot of the card, at least 24px under the text */
:is(#twf-account, #twf-buy) .twf-paycard__body > :nth-last-child(2) {
    margin-bottom: 24px;
}
:is(#twf-account, #twf-buy) .twf-paycard__body > .twf-btn {
    margin-top: auto;
}
/* Lying down: the text and the button, at its own width, on the left; the Multibanco rows on the right */
@container (min-width: 600px) {
    :is(#twf-account, #twf-buy) .twf-paycard__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr;
        column-gap: 72px;
    }
    :is(#twf-account, #twf-buy) .twf-paycard__body > * {
        grid-column: 1;
    }
    :is(#twf-account, #twf-buy) .twf-paycard__body > .twf-mb {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        margin: 0;
    }
    :is(#twf-account, #twf-buy) .twf-paycard__body > :nth-last-child(2) {
        margin-bottom: 0;
    }
    :is(#twf-account, #twf-buy) .twf-paycard__body > .twf-btn {
        justify-self: start;
        align-self: end;
        width: auto;
        margin-top: 24px;
    }
}
:is(#twf-account, #twf-buy) .twf-dash__blocks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 33px;
}
:is(#twf-account, #twf-buy) .twf-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
    border-top: 1px solid var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-block__body {
    margin-top: 10px;
    font-size: 18px;
    line-height: 30px;
}
:is(#twf-account, #twf-buy) .twf-block .twf-link {
    margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Encomendas
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-orders__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
:is(#twf-account, #twf-buy) .twf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
:is(#twf-account, #twf-buy) .twf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin: 0;
    padding: 0 16px;
    color: var(--twf-ink);
    background: #fff;
    border: 1px solid HSL(var(--neutral-4, 210, 14%, 83%));
    border-radius: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) .twf-chip:hover {
    border-color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-chip.is-on {
    color: #fff;
    background: var(--twf-ink);
    border-color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-chip__n {
    color: var(--twf-stone);
    font-size: 13px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-chip.is-on .twf-chip__n {
    color: #D9D6D0;
}
:is(#twf-account, #twf-buy) .twf-orders__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}
:is(#twf-account, #twf-buy) .twf-order {
    display: grid;
    grid-template-columns: 236px 150px minmax(0, 1fr) 100px 110px 300px;
    grid-template-areas: "thumbs id state what total actions";
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 22px 28px;
}
:is(#twf-account, #twf-buy) .twf-order__thumbs {
    grid-area: thumbs;
}
:is(#twf-account, #twf-buy) .twf-order__id {
    grid-area: id;
    display: flex;
    flex-direction: column;
}
:is(#twf-account, #twf-buy) .twf-order__number {
    font-size: 18px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-order__number:hover {
    color: var(--twf-gold-text);
}
:is(#twf-account, #twf-buy) .twf-order__state {
    grid-area: state;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
:is(#twf-account, #twf-buy) .twf-order__what {
    grid-area: what;
    display: flex;
    flex-direction: column;
    font-weight: 500;
}
:is(#twf-account, #twf-buy) .twf-order__total {
    grid-area: total;
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-order__total.is-struck {
    color: var(--twf-stone);
    text-decoration: line-through;
}
:is(#twf-account, #twf-buy) .twf-order__actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
:is(#twf-account, #twf-buy) .twf-pages {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

/* --------------------------------------------------------------------------
   One order
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-view__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 24px;
    margin-top: 22px;
}
:is(#twf-account, #twf-buy) .twf-view__head .twf-meta {
    margin-top: 8px;
}
:is(#twf-account, #twf-buy) .twf-view__head-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
:is(#twf-account, #twf-buy) .twf-due {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    margin-top: 28px;
}
:is(#twf-account, #twf-buy) .twf-due--single {
    display: block;
}
:is(#twf-account, #twf-buy) .twf-due__main,
:is(#twf-account, #twf-buy) .twf-due__side {
    padding: 36px 40px 38px;
}
:is(#twf-account, #twf-buy) .twf-due__main {
    border-right: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-due--single .twf-due__main {
    border-right: 0;
}
:is(#twf-account, #twf-buy) .twf-due__main .twf-lead {
    margin-top: 10px;
}
:is(#twf-account, #twf-buy) .twf-due__main .twf-mb {
    margin-top: 22px;
}
:is(#twf-account, #twf-buy) .twf-due__main > .twf-small {
    margin-top: 12px;
}
:is(#twf-account, #twf-buy) .twf-due__main .twf-actions {
    margin-top: 24px;
}
:is(#twf-account, #twf-buy) .twf-due__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
}
:is(#twf-account, #twf-buy) .twf-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    list-style: none;
}
:is(#twf-account, #twf-buy) .twf-checks li {
    display: flex;
    gap: 12px;
    margin: 0;
}
:is(#twf-account, #twf-buy) .twf-track {
    margin-top: 24px;
    padding: 34px 36px 30px;
}
:is(#twf-account, #twf-buy) .twf-track__ship {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px 24px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-track__carrier {
    display: flex;
    align-items: center;
    gap: 16px;
}
:is(#twf-account, #twf-buy) .twf-track__carrier > div {
    display: flex;
    flex-direction: column;
}
:is(#twf-account, #twf-buy) .twf-updates {
    margin-top: 24px;
    padding: 24px 28px;
    border: 1px dashed var(--twf-dash);
}
:is(#twf-account, #twf-buy) .twf-updates__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
    list-style: none;
}
:is(#twf-account, #twf-buy) .twf-updates__list li {
    margin: 0;
}
:is(#twf-account, #twf-buy) .twf-updates__list p {
    margin-top: 2px;
}
:is(#twf-account, #twf-buy) .twf-view__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 516px;
    align-items: start;
    gap: 24px 64px;   /* 64px between the columns (Pedro, 29/10), as the cart's; 24px once they stack */
    margin-top: 48px;
}
:is(#twf-account, #twf-buy) .twf-items {
    margin-top: 6px;
    list-style: none;
    border-top: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-item {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
:is(#twf-account, #twf-buy) .twf-item__name {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) a.twf-item__name:hover {
    color: var(--twf-gold-text);
}
:is(#twf-account, #twf-buy) .twf-item__meta {
    list-style: none;
}
:is(#twf-account, #twf-buy) .twf-item__meta li {
    margin: 0;
}
:is(#twf-account, #twf-buy) .twf-item__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    text-align: right;
}
:is(#twf-account, #twf-buy) .twf-item__price {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-again {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-again:hover {
    color: var(--twf-gold-text);
}
:is(#twf-account, #twf-buy) .twf-view__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
:is(#twf-account, #twf-buy) .twf-sum {
    padding: 26px 30px 28px;
}
:is(#twf-account, #twf-buy) .twf-sum__rows {
    margin-top: 10px;
}
:is(#twf-account, #twf-buy) .twf-sum__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}
:is(#twf-account, #twf-buy) .twf-sum__row dt {
    font-weight: 400;
}
:is(#twf-account, #twf-buy) .twf-sum__row dd {
    text-align: right;
}
:is(#twf-account, #twf-buy) .twf-sum__row small {
    display: block;
    color: var(--twf-stone);
    font-size: 13px;
}
:is(#twf-account, #twf-buy) .twf-sum__row--total {
    align-items: baseline;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-sum__row--total dt {
    font-size: 18px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-sum__row--total dd {
    font-size: 26px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-sum > .twf-small {
    margin-top: 4px;
}
:is(#twf-account, #twf-buy) .twf-addr {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 30px 28px;
}
:is(#twf-account, #twf-buy) .twf-addr > div + div {
    padding-top: 18px;
    border-top: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-addr p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;   /* Pedro, 29/10 */
}

/* --------------------------------------------------------------------------
   Moradas
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-addresses__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
:is(#twf-account, #twf-buy) .twf-address {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 32px 36px 34px;
}
:is(#twf-account, #twf-buy) .twf-address__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
:is(#twf-account, #twf-buy) .twf-address__lines {
    margin-top: 18px;
    font-size: 18px;
    font-style: normal;
    line-height: 30px;
}
:is(#twf-account, #twf-buy) .twf-address__lines + .twf-meta {
    margin-top: 16px;
}
:is(#twf-account, #twf-buy) .twf-edit-address > .twf-h2 {
    margin-top: 18px;
}
:is(#twf-account, #twf-buy) .twf-edit-address__cols {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-top: 28px;
}
:is(#twf-account, #twf-buy) .twf-edit-address__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --------------------------------------------------------------------------
   Forms: fields, labels and pickers as on the rest of the site (Rey's checkout)
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-card.twf-form {
    padding: 40px 44px 44px;
}
:is(#twf-account, #twf-buy) .woocommerce-address-fields__field-wrapper,
:is(#twf-account, #twf-buy) .twf-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 32px;
    margin-top: 28px;
}
/* The widget boxes the address fields; Rey wraps each row as a flex line, labels in capitals */
:is(#twf-account, #twf-buy) .woocommerce-address-fields {
    padding: 0;
    background: none;
    border: 0;
}
:is(#twf-account, #twf-buy) .form-row {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}
:is(#twf-account, #twf-buy) .form-row .woocommerce-input-wrapper,
:is(#twf-account, #twf-buy) .form-row .password-input {
    display: block;
    flex: none;
    width: 100%;
}
:is(#twf-account, #twf-buy) .form-row-first,
:is(#twf-account, #twf-buy) .form-row-last,
:is(#twf-account, #twf-buy) #billing_postcode_field,
:is(#twf-account, #twf-buy) #shipping_postcode_field,
:is(#twf-account, #twf-buy) #billing_city_field,
:is(#twf-account, #twf-buy) #shipping_city_field {
    grid-column: auto;
}
/* Labels as in the site's WooCommerce forms (Rey: small capitals in grey) */
:is(#twf-account, #twf-buy) .form-row label {
    display: block;
    margin: 0;
    color: #212529;
    font-size: 14px;
    line-height: 17px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
:is(#twf-account, #twf-buy) .form-row .required {
    color: #e2401c;
    border: 0;
    text-decoration: none;
}
:is(#twf-account, #twf-buy) .form-row .optional {
    color: HSL(var(--neutral-6, 210, 7%, 46%));
    font-weight: 400;
    text-transform: none;
}
/* Fields as Rey draws them on the rest of the site (checkout, product page): white box, light border, square */
:is(#twf-account, #twf-buy) .form-row .input-text,
:is(#twf-account, #twf-buy) .form-row select,
:is(#twf-account, #twf-buy) .form-row textarea {
    width: 100%;
    height: var(--inp-h, calc(2.5625rem + 2px));
    margin: 0;
    padding: var(--inp-p, 0.625rem 0.8125rem);
    color: var(--inp-c, HSL(var(--neutral-7, 210, 9%, 31%)));
    background: var(--inp-bgc, #fff);
    border: var(--inp-bw, 1px) var(--inp-bs, solid) var(--inp-bc, HSL(var(--neutral-4, 210, 14%, 83%)));
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--inp-fz, 0.875rem);
    font-weight: var(--inp-fw, 400);
    line-height: var(--inp-lh, 1.5);
    outline: none;
}
:is(#twf-account, #twf-buy) .form-row textarea {
    height: auto;
    min-height: 92px;
}
:is(#twf-account, #twf-buy) .form-row .input-text:focus,
:is(#twf-account, #twf-buy) .form-row select:focus,
:is(#twf-account, #twf-buy) .form-row textarea:focus {
    border-color: HSL(var(--neutral-6, 210, 7%, 46%));
    box-shadow: var(--inp-bxs, 0 3px 10px HSLa(var(--neutral-4, 210, 14%, 83%), 0.25));
}
:is(#twf-account, #twf-buy) .form-row.woocommerce-invalid .input-text,
:is(#twf-account, #twf-buy) .form-row.woocommerce-invalid select {
    border-color: #e2401c;
}
:is(#twf-account, #twf-buy) .form-row input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--twf-ink);
}
/* Country / state pickers (selectWoo) drawn like the fields, as Rey does on the checkout.
   The account page's Elementor widget gives .select2-container its own grey box. */
:is(#twf-account, #twf-buy) .select2-container {
    background: none;
    border: 0;
    border-radius: 0;
}
:is(#twf-account, #twf-buy) .select2-container .select2-selection--single {
    height: var(--inp-h, calc(2.5625rem + 2px));
    padding: 0;
    background: var(--inp-bgc, #fff);
    border: 1px solid HSL(var(--neutral-4, 210, 14%, 83%));
    border-radius: 0;
    outline: none;
}
:is(#twf-account, #twf-buy) .select2-container--focus .select2-selection--single,
:is(#twf-account, #twf-buy) .select2-container--open .select2-selection--single {
    border-color: HSL(var(--neutral-6, 210, 7%, 46%));
    box-shadow: 0 3px 10px HSLa(var(--neutral-4, 210, 14%, 83%), 0.25);
}
:is(#twf-account, #twf-buy) .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 36px 0 0.8125rem;
    color: HSL(var(--neutral-7, 210, 9%, 31%));
    font-size: var(--inp-fz, 0.875rem);
    line-height: 2.5625rem;
}
:is(#twf-account, #twf-buy) .select2-container .select2-selection__placeholder {
    color: HSL(var(--neutral-5, 210, 11%, 71%));
}
:is(#twf-account, #twf-buy) .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 8px;
    width: 20px;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23495057' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform 0.2s;
}
:is(#twf-account, #twf-buy) .select2-container .select2-selection--single .select2-selection__arrow b {
    display: none;
}
:is(#twf-account, #twf-buy) .select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
}
/* The eye sits in the field's own row. WooCommerce puts the strength meter and the hint inside the same
   wrapper, so an eye centred on the wrapper dropped below the field while creating an account. */
:is(#twf-account, #twf-buy) .form-row .password-input {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}
:is(#twf-account, #twf-buy) .password-input > * {
    grid-column: 1 / -1;
}
:is(#twf-account, #twf-buy) .password-input .input-text {
    grid-row: 1;
    padding-right: 40px;
}
/* The dots of a password: Roboto Condensed is narrow, so the larger dots some systems draw ran into each other */
:is(#twf-account, #twf-buy) .form-row input[type="password"] {
    letter-spacing: 0.2em;
}
:is(#twf-account, #twf-buy) .show-password-input {
    position: relative;
    z-index: 1;
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    margin: 0 6px 0 0;
    padding: 6px;
    color: var(--twf-stone);
    background: none;
    border: 0;
}
/* Rey draws its own eye (it hides WooCommerce's) in a toggle as tall as its wrapper, and the wrapper also holds
   the strength meter and the hint (style.css even sets the toggle to 100% on #customer_login), so the eye dropped
   below the field while creating an account. The wrapper is a grid and the eye sits in the field's row. */
:is(#twf-account, #twf-buy) .__passVisibility-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}
:is(#twf-account, #twf-buy) .__passVisibility-wrapper > * {
    grid-column: 1 / -1;
}
:is(#twf-account, #twf-buy) .__passVisibility-wrapper > .password-input {
    grid-row: 1;
}
:is(#twf-account, #twf-buy) #customer_login .__passVisibility-wrapper > .__passVisibility-toggle,
:is(#twf-account, #twf-buy) .__passVisibility-wrapper > .__passVisibility-toggle {
    position: relative;
    inset: auto;
    z-index: 1;
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    height: 3em;
    max-height: none;
}
/* Rey marks a shown password with --text on the field's parent, here WooCommerce's .password-input, so its own
   «on» look never showed (Pedro, 29/10: «não dá para saber se está ativo»): while the password is in plain text,
   the eye turns dark and crossed out */
:is(#twf-account, #twf-buy) .__passVisibility-wrapper:has(input[type="text"]) > .__passVisibility-toggle {
    opacity: 1;
}
:is(#twf-account, #twf-buy) .__passVisibility-wrapper:has(input[type="text"]) > .__passVisibility-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 21px;
    height: 1.5px;
    background: currentColor;
    box-shadow: 0 0 0 1.5px #fff;
    transform: translate(-50%, -50%) rotate(-40deg);
    pointer-events: none;
}
:is(#twf-account, #twf-buy) .woocommerce-password-strength,
:is(#twf-account, #twf-buy) .woocommerce-password-hint,
:is(#twf-account, #twf-buy) .twf-help-text {
    color: var(--twf-stone);
    font-size: 13px;
    line-height: 18px;
}
:is(#twf-account, #twf-buy) .twf-help-text .twf-link {
    font-size: inherit;
    line-height: inherit;
}
:is(#twf-account, #twf-buy) .woocommerce-password-strength {
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .woocommerce-password-strength.bad,
:is(#twf-account, #twf-buy) .woocommerce-password-strength.short {
    color: var(--twf-red);
}
:is(#twf-account, #twf-buy) .woocommerce-password-strength.strong {
    color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) input[type="checkbox"] {
    accent-color: var(--twf-ink);
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
:is(#twf-account, #twf-buy) .twf-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 36px;
}
:is(#twf-account, #twf-buy) .twf-account-form__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}
:is(#twf-account, #twf-buy) .twf-account-form .twf-card > .twf-meta {
    margin-top: 6px;
}
:is(#twf-account, #twf-buy) .twf-account-form .twf-form__grid {
    margin-top: 22px;
}
:is(#twf-account, #twf-buy) .twf-savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--twf-line);
}

/* --------------------------------------------------------------------------
   Entrar / Criar conta (client's request of 29/10/2026, Figma page 12, 00b / 00c): the «Minha conta» page's
   featured image fills the left half from the header to the footer; on the right, a 440px column with a switch
   over the two forms, the line to change over and the note for westmister.pt customers. The lost and new password
   pages wear the same layout, with a title instead of the switch (Pedro, 29/10).
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy).twf-acc--auth {
    --twf-auth-h: clamp(640px, 42.7vw, 1100px);   /* 820px on a 1920px screen, as in the Figma */
    max-width: none;
    padding: 0;
}
:is(#twf-account, #twf-buy) .twf-auth {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: var(--twf-auth-h);
}
:is(#twf-account, #twf-buy) .twf-auth--solo {
    grid-template-columns: minmax(0, 1fr);
}
:is(#twf-account, #twf-buy) .twf-auth__photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--twf-off);
}
:is(#twf-account, #twf-buy) .twf-auth__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 62%;   /* framed for the Clube photo: both socks */
}
/* The column starts where the log-in form (about 520px tall) sits in the middle; «Criar conta», longer, grows
   downwards, so the switch stays put when changing over */
:is(#twf-account, #twf-buy) .twf-auth__side {
    display: flex;
    justify-content: center;
    padding: max(48px, calc((var(--twf-auth-h) - 520px) / 2)) 40px 64px;
}
:is(#twf-account, #twf-buy) .twf-auth__col {
    width: 100%;
    max-width: 440px;
}
:is(#twf-account, #twf-buy) .twf-auth__col > .woocommerce-notices-wrapper:not(:empty) {
    margin-bottom: 24px;
}
/* Lost and new password: no switch to keep in place, so the column sits in the middle */
:is(#twf-account, #twf-buy) .twf-auth--center .twf-auth__side {
    align-items: center;
    padding-top: 64px;
}
:is(#twf-account, #twf-buy) .twf-auth__head {
    margin-bottom: 32px;
}
:is(#twf-account, #twf-buy) .twf-auth__lead {
    margin-top: 8px;
}
/* The switch: the open form in the site's dark button, the other one outlined (gold on hover) */
:is(#twf-account, #twf-buy) .twf-auth__switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--accent-color, #212529);
}
:is(#twf-account, #twf-buy) .twf-auth__tab {
    min-height: 46px;
    margin: 0;
    padding: 8px 12px;
    color: var(--accent-color, #212529);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
:is(#twf-account, #twf-buy) .twf-auth__tab[aria-selected="true"] {
    color: var(--accent-text-color, #f8f8f8);
    background: var(--accent-color, #212529);
    cursor: default;
}
:is(#twf-account, #twf-buy) .twf-auth__tab[aria-selected="false"]:hover {
    color: #fff;
    background: var(--accent-hover-color, #ad8d5c);
}
:is(#twf-account, #twf-buy) .twf-auth__tab:focus-visible {
    outline: 2px solid var(--accent-color, #212529);
    outline-offset: 3px;
}
/* #customer_login (kept for the password eye below) is a row of two columns in style.css */
:is(#twf-account, #twf-buy) .twf-auth__forms {
    display: block;
    margin-top: 40px;
}
/* The widget boxes .login and .register. Its script also gives both forms the height of the taller one as the page
   loads, while «Criar conta» is hidden: the log-in form's, so «Criar conta» ran over the note (Pedro, 29/10) */
:is(#twf-account, #twf-buy) .twf-auth .twf-form {
    display: flex;
    flex-direction: column;
    gap: 26px;
    height: auto !important;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
/* WooCommerce's clearfix after each row would take one more gap in the column */
:is(#twf-account, #twf-buy) .twf-auth .form-row::before,
:is(#twf-account, #twf-buy) .twf-auth .form-row::after {
    display: none;
}
:is(#twf-account, #twf-buy) .twf-auth__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 16px;
    margin-top: -4px;
}
:is(#twf-account, #twf-buy) .twf-auth__row label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;   /* Rey gives «remember me» a 40px !important margin */
    color: var(--twf-ink);
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) .twf-auth__row label input {
    margin: 0;
}
/* The widget sets the checkbox's text in 16-18px */
:is(#twf-account, #twf-buy) .twf-auth__row label span {
    color: inherit;
    font-size: inherit;
}
/* «Ainda não tem conta? Criar conta» / «Já tem conta? Entrar» */
:is(#twf-account, #twf-buy) .twf-auth__other {
    margin-top: 26px;
    color: var(--twf-stone);
    font-size: 15px;
    line-height: 22px;
    text-align: center;
}
:is(#twf-account, #twf-buy) .twf-auth__to {
    display: inline;
    margin: 0 0 0 2px;
    padding: 0;
    color: var(--twf-ink);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-transform: none;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) .twf-auth__to:hover,
:is(#twf-account, #twf-buy) .twf-auth__to:focus-visible {
    color: var(--twf-gold-text);
}
:is(#twf-account, #twf-buy) .twf-auth__note {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--twf-line);
    color: var(--twf-stone);
    font-size: 13px;
    line-height: 19px;
    text-align: center;
}
:is(#twf-account, #twf-buy) .twf-form__submit {
    margin-top: 6px;
}
/* Criar conta: first and last name side by side */
:is(#twf-account, #twf-buy) .twf-form__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 24px;
}
:is(#twf-account, #twf-buy) .twf-form__pair .form-row {
    grid-column: auto;
}
/* Empty blocks WooCommerce puts in the form (order attribution, privacy text when none is set) would add gaps */
:is(#twf-account, #twf-buy) .twf-auth .twf-form wc-order-attribution-inputs,
:is(#twf-account, #twf-buy) .twf-auth .twf-form .woocommerce-privacy-policy-text:empty {
    display: none;
}
:is(#twf-account, #twf-buy) .woocommerce-privacy-policy-text p {
    color: var(--twf-stone);
    font-size: 14px;
    line-height: 20px;
}
:is(#twf-account, #twf-buy) .woocommerce-privacy-policy-text a {
    text-decoration: underline;
}
/* The widget gives the lost / new password forms half the width, centred */
:is(#twf-account, #twf-buy) .twf-auth .woocommerce-ResetPassword {
    width: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   Favoritos: the shop's own product cards (favoritos.php), with the «×» of account.php in the photo's
   top-right corner
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-fav__remove {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    color: var(--twf-ink);
    background: #fff;
    border: 1px solid var(--twf-line);
    border-radius: 50%;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) .twf-fav__remove:hover {
    border-color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-favs .twf-empty {
    margin-top: 0;
}
/* Elementor Pro's «My Account» widget dresses every h2 and link of the account (45px under a «section title», its
   link colour), the cards' titles included: they keep the shop's spacing (Rey's) and colour. */
:is(#twf-account, #twf-buy) .products .woocommerce-loop-product__title {
    margin: 0 0 var(--components-spacing, 15px);
}
:is(#twf-account, #twf-buy) .products .woocommerce-loop-product__title a {
    color: inherit;
}
/* The same widget takes the background off every `a.button:hover` (six classes, above the shop's rule in style.css):
   the cards' «Adicionar» kept its white text on the photo and vanished (Pedro 09/11). It turns ink, as in the shop. */
:is(#twf-account, #twf-buy) .products .twf-loopAtc .button:hover,
:is(#twf-account, #twf-buy) .products .twf-loopAtc .button:focus-visible {
    background: #212529;   /* the shop's hover ink (style.css), not the account's --twf-ink */
    color: #fff;
}

/* «Adicionar todos ao carrinho» (favoritos.php, account.js): each favourite with a box to leave it out, its size and
   the total at the foot */
html.twf-dialog-open {
    overflow: hidden;
}
:is(#twf-account, #twf-buy) .twf-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
:is(#twf-account, #twf-buy) .twf-dialog {
    width: min(680px, calc(100% - 32px));
    max-width: none;
    max-height: min(88vh, 860px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--twf-ink);
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 24px 64px rgba(34, 38, 42, 0.22);
}
:is(#twf-account, #twf-buy) .twf-dialog::backdrop {
    background: rgba(34, 38, 42, 0.55);
}
:is(#twf-account, #twf-buy) .twf-dialog__box {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}
:is(#twf-account, #twf-buy) .twf-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 36px 22px;
    border-bottom: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-dialog__head .twf-h3 {
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
:is(#twf-account, #twf-buy) .twf-dialog__head .twf-meta {
    margin-top: 6px;
}
:is(#twf-account, #twf-buy) .twf-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin: -3px -6px 0 0;
    padding: 0;
    color: var(--twf-ink);
    background: #fff;
    border: 1px solid var(--twf-line);
    border-radius: 50%;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) .twf-dialog__close:hover {
    border-color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-pick {
    flex: 1;
    min-height: 0;
    padding: 0 36px;
    overflow-y: auto;
    list-style: none;
}
:is(#twf-account, #twf-buy) .twf-pick__row {
    display: grid;
    grid-template-columns: 18px 72px minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-pick__row:last-child {
    border-bottom: 0;
}
:is(#twf-account, #twf-buy) .twf-pick__check {
    width: 18px;
    height: 18px;
    margin: 39px 0 0;   /* level with the middle of the photo */
    accent-color: var(--twf-ink);
    cursor: pointer;
}
:is(#twf-account, #twf-buy) .twf-pick__photo {
    display: block;
    width: 72px;
    height: 96px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-pick__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
:is(#twf-account, #twf-buy) .twf-pick__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 2px;
}
/* The name as on the shop's cards */
:is(#twf-account, #twf-buy) .twf-pick__name {
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
:is(#twf-account, #twf-buy) .twf-pick__size {
    color: var(--twf-stone);
    font-size: 14px;
    line-height: 20px;
}
:is(#twf-account, #twf-buy) .twf-pick__hint {
    display: none;
    color: var(--twf-gold-text);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-pick__row.is-missing .twf-pick__hint {
    display: block;
}
:is(#twf-account, #twf-buy) .twf-pick__price {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 2px;
    padding-top: 2px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-pick__price del {
    color: var(--twf-stone);
    font-size: 13px;
    font-weight: 400;
}
:is(#twf-account, #twf-buy) .twf-pick__price ins {
    text-decoration: none;
}
:is(#twf-account, #twf-buy) .twf-pick__row.is-off :is(.twf-pick__photo, .twf-pick__info, .twf-pick__price) {
    opacity: 0.4;
}
:is(#twf-account, #twf-buy) .twf-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    margin-top: 2px;
}
:is(#twf-account, #twf-buy) .twf-size {
    position: relative;
    margin: 0;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) .twf-size input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
:is(#twf-account, #twf-buy) .twf-size span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 34px;
    padding: 0 12px;
    color: var(--twf-ink);
    background: #fff;
    border: 1px solid HSL(var(--neutral-4, 210, 14%, 83%));
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: border-color 0.15s, box-shadow 0.15s;
}
:is(#twf-account, #twf-buy) .twf-size:hover span {
    border-color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) .twf-size input:checked + span {
    border-color: var(--twf-ink);
    box-shadow: inset 0 0 0 1px var(--twf-ink);
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-size input:focus-visible + span {
    outline: 2px solid var(--twf-ink);
    outline-offset: 2px;
}
:is(#twf-account, #twf-buy) .twf-size input[data-twf-sold] + span {
    color: #A9A6A0;
    background: var(--twf-off);
    border-color: var(--twf-off);
    text-decoration: line-through;
}
:is(#twf-account, #twf-buy) .twf-size:has(input[data-twf-sold]) {
    cursor: default;
}
:is(#twf-account, #twf-buy) .twf-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 36px 24px;
    border-top: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-pick__sum {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--twf-stone);
    font-size: 14px;
    line-height: 20px;
}
:is(#twf-account, #twf-buy) .twf-pick__total {
    color: var(--twf-ink);
    font-size: 15px;
}
:is(#twf-account, #twf-buy) .twf-pick__total strong {
    margin-left: 4px;
    font-size: 20px;
    line-height: 26px;
}
:is(#twf-account, #twf-buy) .twf-dialog__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
:is(#twf-account, #twf-buy) .twf-dialog__foot .twf-btn:disabled {
    color: var(--twf-stone);
    background: var(--twf-off);
    border-color: var(--twf-off);
    cursor: default;
}

/* --------------------------------------------------------------------------
   Métodos de pagamento (payment-methods.php) and Adicionar método de pagamento (form-add-payment-method.php).
   The «My Account» widget draws that form (rounded grey box, its blue button) at up to three ids; the form keeps
   WooCommerce's ids for Stripe, so these rules start from #twf-account #add_payment_method.
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-paymethods__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}
:is(#twf-account, #twf-buy) .twf-paymethod {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 22px 28px;
}
:is(#twf-account, #twf-buy) .twf-paymethod__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 40px;
    border: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-paymethod__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
:is(#twf-account, #twf-buy) .twf-paymethod__name {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-paymethod__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
:is(#twf-account, #twf-buy) .twf-paynew > .twf-h2 {
    margin-top: 18px;
}
:is(#twf-account, #twf-buy) .twf-paynew > .twf-meta {
    margin-top: 6px;
}
:is(#twf-account, #twf-buy) #add_payment_method {
    max-width: 760px;
    margin-top: 28px;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment {
    padding: 4px 32px 30px;
    background: #fff;
    border: 1px solid var(--twf-line);
    border-radius: 0;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment ul.payment_methods {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment ul.payment_methods > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin: 0;
    padding: 22px 0;
    list-style: none;
    border-bottom: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) #add_payment_method #payment ul.payment_methods > li::marker {
    content: none;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment ul.payment_methods > li > input.input-radio {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--twf-ink);
}
:is(#twf-account, #twf-buy) #add_payment_method #payment ul.payment_methods > li > label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--twf-ink);
    font-family: inherit;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment ul.payment_methods > li > label img {
    width: auto;
    max-height: 24px;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment div.payment_box {
    flex: 1 1 100%;
    margin: 18px 0 0;
    padding: 0 !important;   /* style.css gives it 15px !important */
    color: var(--twf-stone);
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 15px;
    line-height: 22px;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment div.payment_box::before {
    content: none;
}
/* The button's row (the payment box has rows of its own, left alone) */
:is(#twf-account, #twf-buy) #add_payment_method #payment > .form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px 28px;
    margin: 28px 0 0;
    padding: 0;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment #place_order {
    float: none;
    width: auto;
    min-height: 45px;
    margin: 0;
    padding: 10px 25px;
    color: var(--accent-text-color, #f8f8f8);
    background: var(--accent-color, #212529);
    border: 1px solid var(--accent-color, #212529);
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
}
:is(#twf-account, #twf-buy) #add_payment_method #payment #place_order:hover,
:is(#twf-account, #twf-buy) #add_payment_method #payment #place_order:focus-visible {
    color: var(--accent-text-hover-color, #f8f8f8);
    background: var(--accent-hover-color, #ad8d5c);
    border-color: var(--accent-hover-color, #ad8d5c);
}

/* --------------------------------------------------------------------------
   Encomendas antigas (westmister.pt, inc/customer-import/legacy-orders.php): an archive by year
   -------------------------------------------------------------------------- */
:is(#twf-account, #twf-buy) .twf-old__intro {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px 48px;
    margin-bottom: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-old__text {
    max-width: 720px;
}
:is(#twf-account, #twf-buy) .twf-old__text .twf-lead {
    margin-top: 12px;
}
:is(#twf-account, #twf-buy) .twf-old__stats {
    display: flex;
}
:is(#twf-account, #twf-buy) .twf-old__stats > div {
    padding: 0 40px;
    border-left: 1px solid var(--twf-line);
}
:is(#twf-account, #twf-buy) .twf-old__stats > div:last-child {
    padding-right: 0;
}
:is(#twf-account, #twf-buy) .twf-old__stats dt {
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
:is(#twf-account, #twf-buy) .twf-old__year {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 40px;
    padding-bottom: 40px;
}
:is(#twf-account, #twf-buy) .twf-old__when {
    display: flex;
    flex-direction: column;
}
:is(#twf-account, #twf-buy) .twf-old__year-n {
    color: var(--twf-gold);
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
}
:is(#twf-account, #twf-buy) .twf-old__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}
:is(#twf-account, #twf-buy) .twf-old__row {
    display: grid;
    grid-template-columns: 96px 184px 110px 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 16px 24px;
}
:is(#twf-account, #twf-buy) .twf-old__day {
    display: flex;
    flex-direction: column;
}
:is(#twf-account, #twf-buy) .twf-old__day strong {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-old .twf-thumb {
    width: 42px;
    height: 56px;
}
:is(#twf-account, #twf-buy) .twf-old__end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
}
:is(#twf-account, #twf-buy) .twf-old__total {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}
:is(#twf-account, #twf-buy) .twf-tag--first {
    height: 26px;
    color: var(--twf-gold-text);
    border-color: var(--twf-gold);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   The open list of the country / state pickers: select2 appends it to <body>,
   outside #twf-account, so it takes the body class of the account or of the new
   checkout (and plain colours, the --twf-* tokens live on #twf-account).
   -------------------------------------------------------------------------- */
:is(body.woocommerce-account, body.twf-checkout) .select2-container--open .select2-dropdown {
    overflow: hidden;
    background: #fff;
    border: 1px solid HSL(var(--neutral-4, 210, 14%, 83%));
    border-radius: 0;
    box-shadow: 0 14px 32px rgba(34, 38, 42, 0.1);
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container--open .select2-dropdown--below {
    margin-top: 4px;
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container--open .select2-dropdown--above {
    margin-top: -4px;
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-search--dropdown {
    padding: 12px;
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-search--dropdown .select2-search__field {
    height: 2.25rem;
    padding: 0 0.625rem;
    color: HSL(var(--neutral-7, 210, 9%, 31%));
    background: #fff;
    border: 1px solid HSL(var(--neutral-4, 210, 14%, 83%));
    border-radius: 0;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 0.875rem;
    outline: none;
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-search--dropdown .select2-search__field:focus {
    border-color: HSL(var(--neutral-6, 210, 7%, 46%));
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-results > .select2-results__options {
    max-height: 288px;
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-results__option {
    margin: 0;
    padding: 9px 16px;
    color: #22262A;
    background: transparent;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 0.875rem;
    line-height: 1.4;
}
/* WooCommerce's selectWoo marks the chosen country with data-selected (aria-selected follows the keyboard) */
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-results__option[data-selected="true"] {
    color: #8E7348;
    background: transparent;
    font-weight: 700;
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-results__option--highlighted,
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-results__option--highlighted[data-selected] {
    color: #22262A;
    background: #F3F2EF;
}
:is(body.woocommerce-account, body.twf-checkout) .select2-container .select2-results__message {
    color: #737373;
}

/* --------------------------------------------------------------------------
   Around the account: the page's Elementor container leaves the spacing to
   :is(#twf-account, #twf-buy), and the footer goes without the Newsletter block (Pedro, 26/10),
   so its dark band loses the margin that sat under that block.
   -------------------------------------------------------------------------- */
body.woocommerce-account .rey-siteMain > .elementor > .e-con {
    margin-top: 0;
    margin-bottom: 0;
}
/* The logged-out pages run edge to edge: the container drops its side padding and its width */
body.woocommerce-account .rey-siteMain > .elementor > .e-con:has(.twf-acc--auth) {
    --padding-left: 0px;
    --padding-right: 0px;
    padding-left: 0;
    padding-right: 0;
}
body.woocommerce-account .rey-siteMain > .elementor > .e-con:has(.twf-acc--auth) > .e-con-inner {
    max-width: none;
}
body.woocommerce-account .rey-siteFooter .elementor-element-229ca6b {
    display: none !important;
}
body.woocommerce-account .rey-siteFooter .elementor-element-919f23c {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    :is(#twf-account, #twf-buy),
    :is(#twf-account, #twf-buy) .twf-seam__label,
    :is(#twf-account, #twf-buy) .twf-block__body {
        font-size: 17px;
    }
    :is(#twf-account, #twf-buy) .twf-block__body,
    :is(#twf-account, #twf-buy) .twf-address__lines {
        font-size: 17px;
        line-height: 28px;
    }
    :is(#twf-account, #twf-buy) .twf-h4 {
        font-size: 18px;
        line-height: 24px;
    }
}
@media (max-width: 1279px) {
    :is(#twf-account, #twf-buy) .twf-order {
        grid-template-columns: 236px minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "thumbs id    what  total"
            "thumbs state state actions";
        gap: 16px 24px;
    }
    :is(#twf-account, #twf-buy) .twf-view__cols {
        grid-template-columns: minmax(0, 1fr) 420px;
    }
    :is(#twf-account, #twf-buy) .twf-due {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :is(#twf-account, #twf-buy) .twf-old__row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 24px;
    }
    :is(#twf-account, #twf-buy) .twf-old__end {
        margin-left: auto;
    }
}

@media (max-width: 1023px) {
    :is(#twf-account, #twf-buy) .twf-dash__now--two,
    :is(#twf-account, #twf-buy) .twf-view__cols,
    :is(#twf-account, #twf-buy) .twf-edit-address__cols,
    :is(#twf-account, #twf-buy) .twf-account-form__cards {
        grid-template-columns: minmax(0, 1fr);
    }
    :is(#twf-account, #twf-buy) .twf-dash__blocks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Entrar: the photo becomes a band above the forms */
    :is(#twf-account, #twf-buy) .twf-auth {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    :is(#twf-account, #twf-buy) .twf-auth__photo {
        width: 100%;   /* with the max-height alone, the ratio narrowed it on tablets */
        aspect-ratio: 3 / 2;
        max-height: 480px;
    }
    :is(#twf-account, #twf-buy) .twf-auth__photo img {
        object-position: 50% 37%;   /* the upper sock */
    }
    :is(#twf-account, #twf-buy) .twf-auth__side,
    :is(#twf-account, #twf-buy) .twf-auth--center .twf-auth__side {
        padding: 28px 20px 44px;
    }
}

@media (max-width: 767px) {
    :is(#twf-account, #twf-buy) {
        padding-bottom: 48px;
        font-size: 16px;
    }
    :is(#twf-account, #twf-buy) .twf-seam__label,
    :is(#twf-account, #twf-buy) .twf-block__body {
        font-size: 16px;
    }
    :is(#twf-account, #twf-buy) .twf-block__body {
        line-height: 27px;
    }
    :is(#twf-account, #twf-buy) .twf-h4 {
        font-size: 17px;
        line-height: 22px;
    }
    :is(#twf-account, #twf-buy) .twf-h1 {
        font-size: 30px;
        line-height: 36px;
    }
    :is(#twf-account, #twf-buy) .twf-h2 {
        font-size: 26px;
        line-height: 32px;
    }
    :is(#twf-account, #twf-buy) .twf-h3 {
        font-size: 21px;
        line-height: 28px;
    }
    :is(#twf-account, #twf-buy) .twf-lead {
        font-size: 17px;
        line-height: 27px;
    }
    :is(#twf-account, #twf-buy) .twf-acc__who {
        gap: 4px 20px;
        padding-bottom: 0;
    }

    /* Tabs: one sliding row of chips */
    :is(#twf-account, #twf-buy) .twf-tabs {
        margin: 20px -20px 0;
        border-bottom: 0;
    }
    :is(#twf-account, #twf-buy) .twf-tabs__list {
        gap: 8px;
        padding: 0 20px;
    }
    :is(#twf-account, #twf-buy) .twf-tab {
        height: 36px;
        padding: 0 14px;
        background: #fff;
        border: 1px solid var(--twf-line);
        font-size: 15px;
    }
    :is(#twf-account, #twf-buy) .twf-tab.is-active {
        color: #fff;
        background: var(--twf-ink);
        border-color: var(--twf-ink);
    }
    :is(#twf-account, #twf-buy) .twf-tab__count,
    :is(#twf-account, #twf-buy) .twf-tab.is-active .twf-tab__count {
        padding: 0;
        color: inherit;
        background: none;
        font-size: 12px;
        opacity: 0.7;
    }
    :is(#twf-account, #twf-buy) .twf-acc__body {
        padding-top: 24px;
    }

    :is(#twf-account, #twf-buy) .twf-card.twf-form,
    :is(#twf-account, #twf-buy) .twf-follow,
    :is(#twf-account, #twf-buy) .twf-paycard,
    :is(#twf-account, #twf-buy) .twf-track,
    :is(#twf-account, #twf-buy) .twf-sum,
    :is(#twf-account, #twf-buy) .twf-addr,
    :is(#twf-account, #twf-buy) .twf-address,
    :is(#twf-account, #twf-buy) .twf-empty,
    :is(#twf-account, #twf-buy) .twf-due__main,
    :is(#twf-account, #twf-buy) .twf-due__side {
        padding: 22px 20px;
    }
    :is(#twf-account, #twf-buy) .twf-hint {
        padding: 20px;
    }
    :is(#twf-account, #twf-buy) .twf-actions .twf-btn {
        flex: 1 1 100%;
    }

    /* Resumo */
    :is(#twf-account, #twf-buy) .twf-dash {
        gap: 32px;
    }
    :is(#twf-account, #twf-buy) .twf-dash__now {
        gap: 14px;
    }
    :is(#twf-account, #twf-buy) .twf-dash__blocks {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    :is(#twf-account, #twf-buy) .twf-follow__top {
        flex-direction: column-reverse;
        gap: 10px;
    }
    :is(#twf-account, #twf-buy) .twf-follow .twf-seam {
        margin-top: 20px;
    }
    :is(#twf-account, #twf-buy) .twf-follow__bottom {
        margin-top: 20px;
        padding-top: 0;
        border-top: 0;
    }

    /* The «costura» in Resumo: the marks only, with the current step named underneath */
    :is(#twf-account, #twf-buy) .twf-seam--compact .twf-seam__step {
        gap: 0;
    }
    :is(#twf-account, #twf-buy) .twf-seam--compact .twf-seam__text {
        display: none;
    }
    :is(#twf-account, #twf-buy) .twf-seam--compact .twf-seam__mark {
        width: 20px;
        height: 20px;
    }
    :is(#twf-account, #twf-buy) .twf-seam--compact .twf-seam__step + .twf-seam__step::before {
        top: 9px;
    }
    :is(#twf-account, #twf-buy) .twf-seam__legend {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
        color: var(--twf-stone);
        font-size: 14px;
        line-height: 20px;
    }
    :is(#twf-account, #twf-buy) .twf-seam__legend strong {
        color: var(--twf-ink);
    }
    :is(#twf-account, #twf-buy) .twf-seam__legend strong.is-wait {
        color: var(--twf-gold-text);
    }

    /* The «costura» of an order: vertical */
    :is(#twf-account, #twf-buy) .twf-seam--full .twf-seam__steps {
        flex-direction: column;
    }
    :is(#twf-account, #twf-buy) .twf-seam--full .twf-seam__step {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 22px;
        text-align: left;
    }
    :is(#twf-account, #twf-buy) .twf-seam--full .twf-seam__step:last-child {
        padding-bottom: 0;
    }
    :is(#twf-account, #twf-buy) .twf-seam--full .twf-seam__step + .twf-seam__step::before {
        content: none;
    }
    :is(#twf-account, #twf-buy) .twf-seam--full .twf-seam__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 12px;
        bottom: -12px;
        left: 11px;
        width: 2px;
        background: var(--twf-dashes-y);
    }
    :is(#twf-account, #twf-buy) .twf-seam--full .twf-seam__step:has(+ .twf-seam__step:not(.is-todo))::after {
        background: var(--twf-ink);
    }

    /* Encomendas: one card per order */
    :is(#twf-account, #twf-buy) .twf-chips {
        flex-wrap: nowrap;
        margin: 0 -20px;
        padding: 0 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    :is(#twf-account, #twf-buy) .twf-chip {
        height: 36px;
        padding: 0 14px;
    }
    :is(#twf-account, #twf-buy) .twf-order {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "id      total"
            "thumbs  what"
            "state   state"
            "actions actions";
        gap: 14px;
        padding: 20px;
    }
    :is(#twf-account, #twf-buy) .twf-order__what {
        align-items: flex-end;
        text-align: right;
    }
    :is(#twf-account, #twf-buy) .twf-thumb {
        width: 42px;
        height: 56px;
    }
    :is(#twf-account, #twf-buy) .twf-order__state .twf-mini {
        width: 100%;
    }
    :is(#twf-account, #twf-buy) .twf-order__actions .twf-btn {
        flex: 1;
    }

    /* One order */
    :is(#twf-account, #twf-buy) .twf-view__head .twf-h1--sm {
        font-size: 30px;
        line-height: 36px;
    }
    :is(#twf-account, #twf-buy) .twf-due {
        grid-template-columns: minmax(0, 1fr);
    }
    :is(#twf-account, #twf-buy) .twf-due__main {
        border-right: 0;
        border-bottom: 1px solid var(--twf-line);
    }
    :is(#twf-account, #twf-buy) .twf-mb__value {
        font-size: 20px;
        line-height: 26px;
    }
    :is(#twf-account, #twf-buy) .twf-mb dd {
        gap: 12px;
    }
    :is(#twf-account, #twf-buy) .twf-view__cols {
        margin-top: 30px;
    }
    :is(#twf-account, #twf-buy) .twf-item {
        gap: 14px;
        align-items: flex-start;
    }
    :is(#twf-account, #twf-buy) .twf-thumb--big {
        width: 60px;
        height: 80px;
    }
    :is(#twf-account, #twf-buy) .twf-item__name {
        font-size: 15px;
        line-height: 20px;
    }
    :is(#twf-account, #twf-buy) .twf-item__side {
        gap: 8px;
    }
    :is(#twf-account, #twf-buy) .twf-item__price {
        font-size: 16px;
    }
    :is(#twf-account, #twf-buy) .twf-again {
        font-size: 14px;
    }
    :is(#twf-account, #twf-buy) .twf-again .twf-ic {
        display: none;
    }

    /* Moradas, forms */
    :is(#twf-account, #twf-buy) .twf-addresses__cards,
    :is(#twf-account, #twf-buy) .woocommerce-address-fields__field-wrapper,
    :is(#twf-account, #twf-buy) .twf-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    :is(#twf-account, #twf-buy) .twf-address__lines {
        font-size: 16px;
        line-height: 27px;
    }

    /* Entrar */
    :is(#twf-account, #twf-buy) .twf-auth__tab {
        min-height: 44px;
    }
    :is(#twf-account, #twf-buy) .twf-auth__row {
        column-gap: 12px;
    }
    :is(#twf-account, #twf-buy) .twf-auth__row label,
    :is(#twf-account, #twf-buy) .twf-auth__row .twf-link {
        font-size: 14px;   /* one line on a 390px phone, as in the Figma */
    }
    :is(#twf-account, #twf-buy) .twf-auth__forms {
        margin-top: 28px;
    }
    :is(#twf-account, #twf-buy) .twf-auth__note {
        margin-top: 34px;
    }

    /* Encomendas antigas */
    :is(#twf-account, #twf-buy) .twf-old__intro {
        margin-bottom: 28px;
        padding-bottom: 28px;
    }
    :is(#twf-account, #twf-buy) .twf-old__stats > div {
        padding: 0 20px;
    }
    :is(#twf-account, #twf-buy) .twf-old__stats > div:first-child {
        padding-left: 0;
        border-left: 0;
    }
    :is(#twf-account, #twf-buy) .twf-old__stats dt,
    :is(#twf-account, #twf-buy) .twf-old__year-n {
        font-size: 28px;
        line-height: 32px;
    }
    :is(#twf-account, #twf-buy) .twf-old__year {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding-bottom: 28px;
    }
    :is(#twf-account, #twf-buy) .twf-old__when {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
    }
    :is(#twf-account, #twf-buy) .twf-old__row {
        padding: 16px;
    }
    :is(#twf-account, #twf-buy) .twf-old__end {
        width: 100%;
        justify-content: space-between;
    }

    /* Favoritos and Métodos de pagamento: the head's button under the text; the dialog as a sheet from the bottom */
    :is(#twf-account, #twf-buy) .twf-section-head--row .twf-btn {
        width: 100%;
    }
    :is(#twf-account, #twf-buy) .twf-dialog {
        width: 100%;
        max-height: 92vh;
        margin: auto 0 0;
    }
    :is(#twf-account, #twf-buy) .twf-dialog__head {
        padding: 22px 20px 18px;
    }
    :is(#twf-account, #twf-buy) .twf-pick {
        padding: 0 20px;
    }
    :is(#twf-account, #twf-buy) .twf-pick__row {
        grid-template-columns: 18px 60px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        gap: 6px 12px;
        padding: 16px 0;
    }
    :is(#twf-account, #twf-buy) .twf-pick__check {
        grid-row: 1 / span 2;
        margin-top: 31px;
    }
    :is(#twf-account, #twf-buy) .twf-pick__photo {
        grid-row: 1 / span 2;
        width: 60px;
        height: 80px;
    }
    :is(#twf-account, #twf-buy) .twf-pick__name {
        font-size: 14px;
    }
    /* the price under the name, the old one after it */
    :is(#twf-account, #twf-buy) .twf-pick__price {
        grid-column: 3;
        grid-row: 2;
        align-self: start;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: baseline;
        gap: 8px;
        padding-top: 0;
    }
    :is(#twf-account, #twf-buy) .twf-dialog__foot {
        padding: 16px 20px 20px;
    }
    :is(#twf-account, #twf-buy) .twf-pick__sum {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
    }
    :is(#twf-account, #twf-buy) .twf-dialog__buttons {
        flex-direction: column-reverse;
        width: 100%;
    }
    :is(#twf-account, #twf-buy) .twf-dialog__buttons .twf-btn {
        width: 100%;
    }

    /* Métodos de pagamento */
    :is(#twf-account, #twf-buy) .twf-paymethod {
        flex-wrap: wrap;
        gap: 12px 16px;
        padding: 20px;
    }
    :is(#twf-account, #twf-buy) .twf-paymethod__actions {
        flex: 1 1 100%;
    }
    :is(#twf-account, #twf-buy) #add_payment_method #payment {
        padding: 0 20px 20px;
    }
    :is(#twf-account, #twf-buy) #add_payment_method #payment #place_order {
        width: 100%;
    }
}