/* ==========================================================================
   Account pages
   --------------------------------------------------------------------------
   Loaded by the thirteen pages under /Pages/Account plus Career-adjacent
   account screens: sign in, register, account details, addresses, orders,
   order detail, newsletters, wishlist, lost and reset password.

   EVERYTHING VISUAL HERE IS SCOPED TO `section`.

   That is not decoration. These pages render the whole app around them - the
   header, the bottom navigation, the account and wishlist drawers, the mobile
   menu - and this file used to reach all of it. `h2 { font-size: 16px
   !important }`, a bare `select { -webkit-appearance: auto !important }` and
   an unscoped `a:hover` sat at the top level and applied to the drawers too,
   which is why headings in the drawer shrank on these thirteen pages and
   nowhere else.

   `section` works as the fence because the app chrome contains none: not one
   <section> in the template, the footer drawer, the mobile menu or tags.incx.
   Every <section> on one of these pages is page content. Anything that must
   stay outside the fence is marked below and there is very little of it.

   The look follows editorial.css - Cormorant titles, underlined fields, soft
   #f9f9f9 cards, black rectangles for buttons - but the values are repeated
   here rather than imported, because this file loads on its own thirteen
   pages and @import would cost a second blocking request on each of them.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Outside the fence: visibility helpers the markup toggles directly
   -------------------------------------------------------------------------- */
.hide-desktop {
    display: none !important;
}

.hide-mobile {
    display: none !important;
}

@media screen and (max-width: 991px) {

    .hide-desktop {
        display: block !important;
        margin-bottom: 20px;
    }

    .account-nav,
    .account-options-box {
        display: none !important;
    }
}

@media screen and (min-width: 992px) {

    .hide-mobile {
        display: block !important;
        margin-bottom: 20px;
    }

    #dropdownMenuButton {
        display: none;
    }
}


/* ==========================================================================
   Page furniture
   ========================================================================== */
section .container {
    width: 100%;
    max-width: 100%;
    padding: 0 18px;
    margin: 0 auto;
}

/* The page title, quietly.

   It was 35px, centred and uppercased - display type on a screen that carries
   no display content. Nobody arrives at "My orders" wondering where they are;
   they came from a menu that said so, and the heading is a confirmation, not
   an announcement. At 35px it pushed the first actual order below the fold.

   So it is set as a label rather than a headline - the same 12px uppercase
   Inter as the section headings inside the drawer and the cards below it, so
   a title and the headings under it read as one hierarchy instead of two
   competing ones.

   Centred display type is a landing-page gesture besides; reading starts at
   the left edge, where every other line on the page starts.
   -------------------------------------------------------------------------- */
section.section-my-account-hero > h1,
section.section-address-book > h1,
section.section-wishlist-hero > h1,
section.section-registration > h1,
section.section-register > h1,
section > .container > h1 {
    margin: 2px 0 14px;
    padding: 0 18px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .11em;
    text-transform: uppercase;
    text-align: left;
    color: #1a1c1c;
}

/* The line under it drops with the title: at 14px it outweighed a 12px
   heading and read as the more important of the two. */
section.section-my-account-hero > p,
section.section-address-book > p,
section.section-wishlist-hero > p {
    margin: -8px 0 20px;
    padding: 0 18px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    color: #7e7576;
}

section .user-name,
section .username {
    font-size: inherit;
    font-weight: 600;
    color: #1a1c1c;
}

/* The app carries its own back control in the header and its own navigation at
   the foot of the screen. A second trail of links is furniture from the
   website that costs a line of screen and leads nowhere new. */
section .breadcrumbs,
section .breadcrumb,
section .breadcrumb-content {
    display: none;
}

/* .back-button was absolutely positioned at left:48px, top:-11px - measured
   against a desktop header that is not on screen here, so it landed over the
   page title. In flow, as a plain control. */
section .back-button {
    display: inline-flex !important;
    position: static;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px 18px;
    padding: 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7e7576;
}


/* ==========================================================================
   The grid these pages were written against

   .tb-row and .tb-col-* carry the layout of the orders list, the order detail
   and the address book - and nothing anywhere defined them. The columns were
   inert, so every "table" on these pages collapsed into one field per line:
   order number, then date, then status, then total, each on its own row,
   separated by rules. Twelve columns, defined once, put them back.
   ========================================================================== */
section .tb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}

/* Anything named like a column but not matched below falls back to full
   width, which is the right answer on a phone. Same specificity as the
   numbered rules, declared first, so those win where they apply. */
section [class*="tb-col-"] {
    flex: 0 0 auto;
    width: 100%;
}

section .tb-col-1  { flex: 0 0 auto; width: 8.3333%; }
section .tb-col-2  { flex: 0 0 auto; width: 16.6667%; }
section .tb-col-3  { flex: 0 0 auto; width: 25%; }
section .tb-col-4  { flex: 0 0 auto; width: 33.3333%; }
section .tb-col-5  { flex: 0 0 auto; width: 41.6667%; }
section .tb-col-6  { flex: 0 0 auto; width: 50%; }
section .tb-col-7  { flex: 0 0 auto; width: 58.3333%; }
section .tb-col-8  { flex: 0 0 auto; width: 66.6667%; }
section .tb-col-9  { flex: 0 0 auto; width: 75%; }
section .tb-col-10 { flex: 0 0 auto; width: 83.3333%; }
section .tb-col-11 { flex: 0 0 auto; width: 91.6667%; }
section .tb-col-12 { flex: 0 0 auto; width: 100%; }

/* The phone-width variants the markup asks for by name. They are the same
   widths - this is a phone - and exist so the class in the markup matches
   something rather than being ignored. */
section .tb-col-xs-3,
section .tb-col-sm-3 { flex: 0 0 auto; width: 25%; }

section .tb-col-xs-12,
section .tb-col-sm-12,
section .tb-sm-12,
section .tb-xs-12 { flex: 0 0 auto; width: 100%; }

section .tb-d-none { display: none; }

@media screen and (min-width: 768px) {
    section .tb-d-md-block { display: block; }
    section .tb-col-md-1 { width: 8.3333%; }
    section .tb-col-md-2 { width: 16.6667%; }
    section .tb-col-md-3 { width: 25%; }
    section .tb-col-md-12 { width: 100%; }
}

section .tb-align-items-center { align-items: center; }
section .tb-text-right { text-align: right; }
section .tb-font-weight-bolder { font-weight: 600; }
section .tb-mt-3 { margin-top: 12px; }
section .tb-mt-4 { margin-top: 18px; }
section .tb-mt-5 { margin-top: 26px; }
section .tb-mb-4 { margin-bottom: 18px; }
section .tb-img-fluid { max-width: 100%; height: auto; }
section .tb-padding-bottom { padding-bottom: 16px; }
section .tb-zeroMarginPadding { margin: 0 !important; padding: 0 !important; }
section .tb-pl-2, section .tb-px-2 { padding-left: 8px; }
section .tb-pr-2, section .tb-px-2 { padding-right: 8px; }

section .tb-row p {
    margin: 0;
    padding: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: #57534f;
}


/* ==========================================================================
   Cards
   ========================================================================== */
section .account-info-wrapper,
section .account-password-wrapper,
section .acount-main-box,
section .account-options-box {
    max-width: 100%;
    margin: 0 0 14px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background-color: #f9f9f9;
    box-shadow: none;
}

section .account-info-wrapper h2,
section .account-password-wrapper h2,
section .hh2 {
    margin: 0 0 16px;
    padding: 0;
    background: none;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1a1c1c;
}

section .tb-TitleNameSize {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a1c1c;
}

/* Divider between orders, addresses, order lines. */
section .tb-row hr,
section hr {
    height: 0;
    margin: 12px 0;
    border: 0;
    border-top: 1px solid #e2e2e2;
}

section .textcolor1 {
    color: #9a9192;
}

section .textcolor2 {
    color: #1a1c1c !important;
}

section .textcolor3 {
    color: #7e7576 !important;
}

/* The column headers of the orders and address tables. */
section .tb-row.textcolor1 {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9a9192;
}

section .mb-small-text {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

section .mb-small-text-color {
    color: #57534f;
}


/* ==========================================================================
   The account menu - one row per destination

   Seven dashed boxes, each 100px tall with a title and a line of explanation,
   was most of a screen per item and a lot of scrolling to reach "sign out".
   The same seven as rows: the title carries the meaning, the description is
   the caption under it, and the chevron says where it goes.
   ========================================================================== */
section .my-account-row {
    display: block;
    max-width: 100%;
    margin: 0;
    gap: 0;
}

/* A stock photograph is not an answer to "where are my orders". */
section .my-account-col--image {
    display: none;
}

section .my-account-col--menu {
    flex-basis: auto;
    width: 100%;
}

section .my-account-menu-tab {
    position: relative;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #e2e2e2;
}

section .my-account-menu-tab:hover {
    box-shadow: none;
}

/* The theme drew the arrow with content: url(...) on ::after. Replaced with a
   drawn chevron so it takes the text colour and needs no image request. */
section .my-account-menu-tab::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-right: 1.5px solid #c6c6c6;
    border-bottom: 1.5px solid #c6c6c6;
    transform: rotate(-45deg);
}

section .my-account-menu-tab a {
    display: block;
    padding: 15px 28px 15px 2px;
    text-decoration: none;
}

section .my-account-menu-tab h3 {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #1a1c1c;
}

section .my-account-menu-tab p {
    margin: 2px 0 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #7e7576;
}

section .account-options li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e2e2e2;
    list-style: none;
    line-height: 1.4;
}

section .account-options li a {
    display: block;
    padding: 13px 2px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #57534f;
    text-decoration: none;
}

section .account-options .selected a {
    font-weight: 600;
    color: #1a1c1c;
}


/* ==========================================================================
   Orders, as a list rather than a table

   Four columns of equal width is a desktop table, and a phone is not wide
   enough to hold one: "Ολοκληρωμένη" is twelve characters and had 25% of 390px
   to sit in, so the status ran straight through the price beside it.

   A table is the wrong shape here anyway. It exists to let the eye compare
   values down a column, and nobody scans their own order history that way -
   they look for one order, and what identifies it is the date and the amount.

   So each order becomes a two-line card, and none of the markup changes: the
   same five divs are re-laid by position. The header row goes with it. Its
   labels were only ever there to name the columns, and a date still looks like
   a date, a price like a price, a status like a status.

       1100590118              22/11/2024
       (ΑΠΕΣΤΑΛΜΕΝΗ)               72,00€
   ========================================================================== */
section .tb-row.textcolor1 {
    display: none;
}

/* The rules between orders are gone: the cards are separated by the gaps
   between them, and a line as well is one divider too many.

   Scoped to the wrapper that actually holds orders. ViewOrder builds its
   totals block out of the same .tb-row and <hr>, and there the lines are doing
   real work separating subtotal from shipping from total. */
section .account-info-wrapper:has(.tb-row.mb-small-text-color) .tb-row hr {
    display: none;
}

/* Only the wrapper that holds orders loses its tint - the cards inside it
   carry their own, and grey on grey reads as one flat block. Other pages keep
   the card. On a browser without :has() the tint simply stays. */
section .account-info-wrapper:has(.tb-row.mb-small-text-color) {
    padding: 0;
    background-color: transparent;
}

/* Grid, not flex.

   The first attempt gave the top two cells 58% and 42% and trusted the sum to
   push the status onto a second line. It does not take much to break that -
   a gap, a border, a rounding - and when it breaks the status simply stays up
   on line one and collides with everything, which is the problem this was
   supposed to fix.

   A grid says where each cell goes instead of hoping widths add up. Two
   columns, two rows, and the second column is only as wide as the longest
   thing in it.

       1100590118              22/11/2024
       (ΑΠΕΣΤΑΛΜΕΝΗ)               72,00€

   Placement is by position because the classes on these five divs describe
   a grid layout that no longer applies. */
section .tb-row.mb-small-text-color {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 9px;

    margin: 0 0 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background-color: #f9f9f9;
}

/* The columns are placed by grid now, so their old widths would only fight it. */
section .tb-row.mb-small-text-color > div {
    width: auto;
    min-width: 0;
}

/* No truncation here.

   The first version clipped this cell with text-overflow: ellipsis as a guard
   against a long number pushing the date off the card. The guard fired on a
   number that fits perfectly well and turned it into "11...".

   It was the wrong guard to reach for regardless. An order number is the one
   string on this screen somebody may need to read out to support, and half of
   it is no use to them - if it ever did not fit, wrapping to a second line
   would cost a few pixels and still say what it says. */
section .tb-row.mb-small-text-color > div:nth-child(1) {
    grid-column: 1;
    grid-row: 1;

    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1c1c;
    overflow-wrap: anywhere;
    padding:0;
}

section .tb-row.mb-small-text-color > div:nth-child(1) a {
    color: #1a1c1c;
    text-decoration: none;
    white-space: nowrap;
}

section .tb-row.mb-small-text-color > div:nth-child(2) {
    grid-column: 2;
    grid-row: 1;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
    color: #9a9192;
}

/* justify-self keeps the pill the width of its own text; without it a grid
   item stretches to fill its column and the badge becomes a bar. */
section .tb-row.mb-small-text-color > div:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;

    padding: 5px 11px;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .07em;
    background-color: #e2e2e2;
    color: #57534f;
}

section .tb-row.mb-small-text-color > div:nth-child(4) {
    grid-column: 2;
    grid-row: 2;

    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
    color: #1a1c1c;
}

/* The fifth cell is the "view order" eye, hidden at this width by .tb-d-none.
   Named so it cannot be auto-placed into a third row if that ever changes. */
section .tb-row.mb-small-text-color > div:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* An empty div with style="height: 60px" sits after the last order. It was
   padding out a desktop card and here it is just a hole in the page - the
   inline height needs !important to answer. */
section .account-info-wrapper:has(.tb-row.mb-small-text-color) .row > [class*="tb-col-"][style] {
    height: 0 !important;
}

/* "You have no orders yet." */
section .tb-row > .tb-col-12.text-center {
    padding: 28px 0;
    text-align: center;
}


/* ==========================================================================

   Address book

   Each address was a dashed box with its two controls positioned absolutely
   at bottom:30px right:25px - "edit" pushed 100px further left to make room
   for "delete". That spacing was measured against an 865px card. At phone
   width the two of them sit on top of each other and land over the last line
   of the address.

   In flow instead, as a pair of controls under the details they act on.
   ========================================================================== */
section .add-new-address-wrapper {
    max-width: 100%;
    width: auto;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    text-align: left;
}

/* An underlined link was doing the work of the primary action on this screen -
   the one thing somebody arrives here to do when the list is empty. */
section .add-new-address-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin: 0 0 10px;
    padding: 15px 24px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;

    background-color: #000000;
    color: #ffffff;
}

section .add-new-address-wrapper p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #7e7576;
}

section .edit-address-wrapper {
    position: static;
    max-width: 100%;
    width: auto;
    margin: 0 0 12px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background-color: #f9f9f9;
}

section .edit-address-info {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: #57534f;
}

section .edit-address-info .user-name {
    margin-bottom: 4px;

    font-size: 14px;
    font-weight: 600;
    color: #1a1c1c;
}

section .edit-address-info .user-street,
section .edit-address-info .user-phone,
section .edit-address-info .user-address {
    margin-bottom: 2px;
}

/* "Default address" was a grey line of text among other grey lines of text.
   As a badge it is the one thing on the card that is a status. */
section .edit-address-info .textcolor3 {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 9999px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    background-color: #e2e2e2;
    color: #57534f !important;
}

section .edit-address-wrapper .edit-address-btn,
section .edit-address-wrapper .remove-address-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    margin: 14px 8px 0 0;
    padding: 0 18px;
    border: 1px solid #d6d6d6;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04em;
    text-decoration: none;

    background-color: #ffffff;
    color: #1a1c1c;
}

/* Delete is the destructive one and reads as such, but quietly - it is not the
   action this screen is for, and a red button invites the eye to it. */
section .edit-address-wrapper .remove-address-btn {
    margin-right: 0;
    border-color: transparent;
    background-color: transparent;
    color: #a12b1e;
}

section .edit-address-wrapper .edit-address-btn:active,
section .edit-address-wrapper .remove-address-btn:active {
    background-color: #e2e2e2;
}


/* ==========================================================================

   Fields

   Boxed inputs with a #AFAEAE border and 9px placeholders become the same
   underlined field as the sign-in drawer and the contact form.

   font-size is 16px and must stay there: iOS zooms the page in when a focused
   input is smaller, which inside a WebView reads as the app breaking. Set the
   visual size with padding, never by going under 16px.
   ========================================================================== */
section .input-wrapper,
section .pop-input-wrapper {
    padding: 0;
    margin-bottom: 22px;
}

section .input-wrapper--half {
    width: 50%;
}

section fieldset.double-field {
    display: flex;
    gap: 14px;
    padding: 0;
    margin: 0;
    border: 0;
}

/* .account-form is a flex-wrap row in the theme, and it re-declares the two
   rules below at two classes of specificity - .account-form .input-wrapper and
   .account-form .telephone-input-wrapper::before - so the single-class rules
   further down lose to it. Matched here rather than raised everywhere else.

   A flex item with no width sizes to its content, and an <input> with no size
   attribute is about twenty characters wide, so full-width fields came out
   two thirds of the way across. Told to fill the row explicitly. */
section .account-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
}

section .account-form .input-wrapper {
    flex: 1 1 100%;
    padding: 0;
    margin-bottom: 22px;
}

section .account-form .input-wrapper--half {
    flex: 1 1 calc(50% - 7px);
    width: auto;
}

section .account-form .telephone-input-wrapper::before,
section .account-form .telephone-input-wrapper::after {
    display: none;
}

section .account-form .input-label--info::after {
    display: none;
}

/* Same story on the sign-in and register forms: .registration-form re-declares
   these at two classes, so the single-class rules below never applied there.
   Checked against bundle.css rather than guessed - the other two-class field
   rules in the theme (.gift-form, .pop-input-wrapper, .contact-wrapper__left,
   .single-product-size__select) belong to wrappers that do not appear on any
   account page, so they are left alone. */
section .registration-form .input-wrapper {
    padding: 0;
    margin-bottom: 22px;
}

section .registration-form .input-select {
    color: #1a1c1c;
}

/* The empty-wishlist button carried padding: 17px 86px - 172px of horizontal
   padding, which is wider than the phone it has to fit on. */
section .empty-wishlist-container .btn {
    padding: 15px 24px;
}

section .input-label,
section .tb-col-form-label {
    display: block;
    margin-bottom: 6px;
    padding: 0;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7e7576;
}

section .input-label--info {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

section .input-text,
section .input-select,
section .tb-form-control,
section textarea.input-text {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    line-height: 1.5;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #cfc4c5;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;

    font-family: Inter, sans-serif;
    font-size: 16px;
    letter-spacing: .01em;
    color: #1a1c1c;

    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s ease;
}

section .input-text:focus,
section .input-select:focus,
section .tb-form-control:focus {
    outline: none;
    border: 0;
    border-bottom: 2px solid #000000;
    padding-bottom: 9px;
    background-color: transparent;
    box-shadow: none;
}

section .input-text::placeholder,
section textarea::placeholder {
    font-size: 15px;
    color: #9a9192;
}

section .input-text::-webkit-input-placeholder {
    font-size: 15px;
    color: #9a9192;
}

/* Chrome paints a pale yellow over autofilled fields. A long inset shadow
   repaints it without covering the underline. The colour matches the card the
   field sits on, not white. */
section .input-text:-webkit-autofill,
section .input-text:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f9f9f9 inset;
    -webkit-text-fill-color: #1a1c1c;
}

section textarea.input-text {
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid #cfc4c5;
    resize: vertical;
}

/* A select cannot hold an icon element, so the arrow is a background image.
   Inlined rather than linked: one less request, and it still draws when the
   network does not. */
section .input-select,
section select.tb-form-control {
    padding-right: 26px;
    cursor: pointer;
    text-overflow: ellipsis;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a1c1c' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
}

/* The theme puts a grey plate and a flag behind the dialling code, positioned
   against the old 27px field padding. Both are measured off the wrong edge now
   that the field is an underline. */
section .telephone-input-wrapper::before,
section .telephone-input-wrapper::after {
    display: none;
}

section .telephone-input-wrapper input {
    padding-left: 0;
}

section .acc-has-error,
section .input-text--invalid {
    border: 0 !important;
    border-bottom: 2px solid #a12b1e !important;
    box-shadow: none;
}

section .under-text-error,
section .custom-validation {
    display: block;
    position: static;
    margin-top: 6px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #a12b1e;
}


/* ==========================================================================
   Checkboxes
   ========================================================================== */
section .cust-check input.checkbox {
    display: none;
}

section .cust-check input.checkbox + label {
    position: relative;
    display: inline-block;
    padding: 1px 0 0 32px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #57534f;
    cursor: pointer;
}

section .cust-check input.checkbox + label span {
    color: #9a9192;
}

section .cust-check input.checkbox + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #cfc4c5;
    border-radius: 4px;
    background: #ffffff;
}

section .cust-check input.checkbox:disabled + label::before {
    background: #e2e2e2;
}

/* The tick is drawn rather than fetched: the old rule loaded
   /images/icon---check.svg, one request for two strokes. */
section .cust-check input.checkbox:checked + label::before {
    border-color: #1a1c1c;
    background: #1a1c1c;
}

section .cust-check input.checkbox:checked + label::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    background: none;
    transform: rotate(45deg);
}

section #login_tab .cust-check input.checkbox + label {
    color: #1a1c1c;
    font-weight: 500;
}

section .custom-checkbox,
section .terms-and-conditions-checkbox input {
    accent-color: #1a1c1c;
}


/* ==========================================================================
   Buttons

   Five button vocabularies met on these pages - .btn, .btn--black, .btn--gray,
   .tb-btn, .tb-btn-info, .tb-btn-secondary, .tb-btn-outline-info - in black,
   #929292 grey, #001489 blue and #00263E navy. None of those blues appear
   anywhere else in the app. One shape, two weights: filled to go on, outlined
   to step back.
   ========================================================================== */
section .btn,
section .tb-btn,
section button.tb-btn,
section .tb-btn-info,
section .tb-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin: 0;
    padding: 15px 24px;
    border: 0 !important;
    border-radius: 0 !important;

    font-family: Inter, sans-serif;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;

    background-color: #000000 !important;
    color: #ffffff !important;
    cursor: pointer;
    min-width: 0;
    transition: opacity .2s ease, transform .12s ease;
}

section .btn--full-width,
section .tb-btn-info {
    width: 100%;
}

/* Secondary: cancel, back, "use a different address". Grey #929292 filled read
   as a disabled primary rather than as a second choice. */
section .btn--gray,
section .tb-btn-outline-info,
section .btn--secondary {
    background-color: transparent !important;
    color: #1a1c1c !important;
    border: 1px solid #1a1c1c !important;
}

section .btn:active,
section .tb-btn:active,
section button.tb-btn:active {
    transform: scale(.985);
    opacity: .9;
}

section .btn:disabled,
section .tb-disabled,
section .tb-btn-info:disabled {
    opacity: .45;
    cursor: default;
}

section .btn i,
section .tb-btn i,
section button.tb-btn i {
    margin-left: 8px;
    font-size: 13px;
}

section .tb-btn:focus,
section .btn:focus {
    box-shadow: none;
}


/* ==========================================================================
   Alerts
   ========================================================================== */
section .tb-alert,
section .con-alert-warning,
section .con-alert-success {
    display: block;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

section .tb-alert-danger,
section .con-alert-warning {
    background-color: #fdf1f0;
    color: #a12b1e;
}

section .tb-alert-success,
section .con-alert-success {
    background-color: #eef4ef;
    color: #2c5c3b;
}


/* ==========================================================================
   Odds and ends the markup still asks for
   ========================================================================== */
section .wishlist-div {
    min-width: 0;
    margin: 0;
    float: none;
}

section .main-bg {
    background: transparent;
}

section .dropdown {
    margin: 0;
}

section .dropdown-menu {
    width: 100%;
}

section .dropdown-item {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background-color: transparent;
    text-align: left;
    white-space: normal;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1a1c1c;
}

/* ==========================================================================
   Postcode lookup (easy-autocomplete)

   The plugin wraps #TK in its own div and ships a stylesheet that puts the
   field back the way it found it: 1px solid #ccc, 4px radius, an inset shadow
   and colour #555. Its bootstrap theme then adds padding-top: 1.5em on top,
   which is why the markup carried an inline style="padding-top:0px" - somebody
   was already fighting this by hand.

   Both of those beat a single-class override, so the rules below name the
   plugin's own wrapper to outrank them rather than reaching for !important.

   The list it drops underneath was a white box with a dotted top border and
   2px corners, which is the one piece of UI on this screen that nobody chose.
   ========================================================================== */
section .easy-autocomplete {
    position: relative;
    display: block;
    width: 100%;
}

section .easy-autocomplete input.input-text,
section .easy-autocomplete.eac-bootstrap input.input-text {
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #cfc4c5;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    color: #1a1c1c;
}

section .easy-autocomplete input.input-text:focus,
section .easy-autocomplete.eac-bootstrap input.input-text:focus {
    border-bottom: 2px solid #000000;
    padding-bottom: 9px;
    box-shadow: none;
}

/* The suggestions. Sits clear of the underline rather than growing out of it,
   so the field still reads as a field while the list is open. */
section .easy-autocomplete-container {
    left: 0;
    right: 0;
    width: 100%;

    /* Above the fields below it, below the header and the drawers. */
    z-index: 30;
}

section .easy-autocomplete-container ul {
    top: 6px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    border-radius: 14px;

    background-color: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);

    /* Six or so rows, then it scrolls - a postcode search can return a long
       list and a dropdown taller than the phone cannot be dismissed. */
    max-height: 264px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

section .easy-autocomplete-container ul li {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    list-style: none;
}

section .easy-autocomplete-container ul li:last-child {
    border-radius: 0;
    border-width: 0;
}

section .easy-autocomplete-container ul li div {
    padding: 0;
    word-break: normal;
}

/* The rows are links - template type "links" - so the padding belongs on the
   anchor, otherwise only the text is tappable and the row around it is dead. */
section .easy-autocomplete-container ul li a {
    display: block;
    padding: 12px 16px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
    color: #1a1c1c;
}

section .easy-autocomplete-container ul li b {
    font-weight: 600;
}

section .easy-autocomplete-container ul li.selected,
section .easy-autocomplete-container ul li:active {
    background-color: #f3f3f3;
    cursor: pointer;
}

section .easy-autocomplete-container ul li.selected div {
    font-weight: 400;
}

/* The plugin's "no results" and "loading" rows come through the same list.

   Two rules rather than one selector list on purpose: an invalid selector
   invalidates the whole rule it sits in, so if :has() is missing the category
   row would lose its padding along with it. Split, it only loses the half that
   needs :has(). */
section .easy-autocomplete-container ul .eac-category {
    padding: 12px 16px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #7e7576;
}

section .easy-autocomplete-container ul li div:not(:has(a)) {
    padding: 12px 16px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #7e7576;
}

/* This is why Country and Nomos had no underline.

   .control-border was written to strip the theme's box off those two selects,
   and "border: 0" is a shorthand: it reset border-bottom along with the other
   three. It carries the same specificity as the .input-select rule that sets
   the underline and sits further down the file, so it won on order alone -
   the underline was being drawn and then wiped, on the only two controls that
   happen to have this class.

   The underline is restored here rather than by deleting the rule, because the
   class also has to keep beating the theme's own border on those selects. */
/* ==========================================================================
   Wishlist cards

   The grid itself is the listing grid and is already styled in editorial.css.
   What follows only undoes what .product-card--wishlist adds on top of it -
   rules written for a five-across desktop row that do not survive being two
   across on a phone.
   ========================================================================== */

/* The theme pads the image box 25px from the top, and 30px on hover, to make
   room for the remove button above the photo. Inside an aspect-ratio box that
   padding is taken out of the picture, so every image was squashed by a
   different amount depending on its own proportions - which is most of why the
   cards looked uneven. The button moves onto the photo instead. */
.wishlistpage .product-card--wishlist .product-card--top,
.wishlistpage .product-card--wishlist:hover .product-card--top {
    padding-top: 0;
}

.wishlistpage .product-card--wishlist {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Card bottoms line up because the text block grows, not the picture. */
.wishlistpage .product-card--wishlist .product-card--bottom {
    flex: 1 1 auto;
}

/* One line for the category. The name above it is already clamped to two, and
   a card whose subtitle wraps sits a line lower than the one beside it. */
.wishlistpage .product-card--bottom .product-details {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #9a9192;
}

/* --------------------------------------------------------------------------
   Remove

   A 12px target at the very corner, which is both too small to hit and too
   easy to hit by accident while scrolling.

   White on a soft shadow rather than a grey plate: the shadow is what lifts it
   off the photograph, so the button does not need a tint of its own and no
   grey lands next to the product. Over a pale image the shadow alone still
   reads, which a flat white circle would not.
   -------------------------------------------------------------------------- */
.wishlistpage .product-card--wishlist .remove-from-wishlist,
.wishlistpage .product-card--wishlist:hover .remove-from-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9999px;

    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    color: #1a1c1c;
    transition: transform .12s ease;
}

.wishlistpage .product-card--wishlist .remove-from-wishlist svg {
    width: 14px;
    height: 14px;
    display: block;
}

.wishlistpage .product-card--wishlist .remove-from-wishlist:active {
    transform: scale(.9);
}

/* The badge sat at top: 35px to clear the padding that is now gone, and it
   would have landed on the remove button. Moved to the other corner. */
.wishlistpage .product-card--wishlist .product-card__ribbon {
    top: 8px;
    left: 8px;
    right: auto;

    width: auto;
    height: auto;
    padding: 4px 8px;
    border-radius: 9999px;
    background-color: #1a1c1c;
}

.wishlistpage .product-card--wishlist .product-card__ribbon span {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Prices

   The theme strikes through .product-price__new as well as __old, so the price
   somebody would actually pay was drawn with a line through it. Only the old
   price should carry one.

   Scoped to this page rather than fixed in editorial.css, because the same two
   classes are used by every listing on the site and that is a wider change
   than this screen.
   -------------------------------------------------------------------------- */
.wishlistpage .product-card--bottom .product-price__new {
    text-decoration: none;
    font-weight: 600;
    color: #1a1c1c;
}

.wishlistpage .product-card--bottom .product-price__old {
    text-decoration: line-through;
    color: #9a9192;
}

/* --------------------------------------------------------------------------
   Add to basket
   -------------------------------------------------------------------------- */
.wishlistpage .product-card--wishlist .add-to-basket-btn,
.wishlistpage .product-card--wishlist:hover .add-to-basket-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    margin: 12px 0 0;
    padding: 0 12px;
    border: 1px solid #1a1c1c;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;

    background-color: transparent;
    color: #1a1c1c;
}

/* The "Coming soon" spacer is a div with an inline min-height of 1.5rem on
   every card, occupied on almost none of them. */
.wishlistpage .product-card--bottom > div[style*="min-height"]:not(:has(.product-coming-soon)) {
    min-height: 0 !important;
}

section .control-border {
    border: 0;
    border-bottom: 1px solid #cfc4c5;
}

section .control-border:focus {
    border: 0;
    border-bottom: 2px solid #000000;
}

/* Room under the last card so the floating bottom navigation never covers the
   final button. The variable is set in editorial.css and measured from the
   bar itself; the fallback is its resting height. */
section:last-of-type {
    padding-bottom: calc(var(--app-bottomnav-h, 64px) + 24px);
}

/* ==========================================================================
   ONE ORDER  (Pages/Account/ViewOrder.aspx)

   The page is built on the theme's tb-* grid, which puts the product name in
   a quarter of the screen and the headings at browser defaults. Everything
   below re-reads that markup rather than replacing it: the page still creates
   the order rows, this only says how they look.
   ========================================================================== */
.vo-page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.vo-page > h1 {
    margin: 0 0 14px;
    padding: 0 4px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7e7576;
}

.vo-page h3,
.vo-page h4 {
    margin: 0;
    padding: 0;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7e7576;
}

/* The theme's rules under these headings sit right on the words. */
.vo-page hr {
    margin: 10px 0 0;
    border: 0;
    border-top: 1px solid #e2e2e2;
}

/* The date and status line, as a panel rather than as bold text. */
.vo-page .account-info-wrapper > .tb-row:first-child {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
}

.vo-page .account-info-wrapper > .tb-row:first-child strong {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #1a1c1c;
}

/* --------------------------------------------------------------------------
   One product

   tb-col-3 for the picture and tb-col-3 for the name means the name gets a
   quarter of a phone. Rebuilt as a flex row: the photograph keeps its 64px,
   the name takes what is left, and the price stays on the right.
   -------------------------------------------------------------------------- */
.vo-page .tb-row.tb-align-items-center {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 14px;

    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #e2e2e2;
}

.vo-page .tb-row.tb-align-items-center > [class*="tb-col"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

.vo-page .tb-row.tb-align-items-center > .tb-col-3:first-child {
    width: 64px;
}

.vo-page .tb-row.tb-align-items-center > .tb-col-3:first-child img {
    display: block;
    width: 64px;
    height: auto;
    border-radius: 6px;
    background-color: #f4f4f4;
}

.vo-page .tb-row.tb-align-items-center > .tb-col-md-5 {
    flex: 1 1 auto;
    min-width: 0;
}

.vo-page .tb-row.tb-align-items-center p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: #7e7576;
}

.vo-page .tb-row.tb-align-items-center > .tb-col-md-5 p:first-child {
    font-size: 13px;
    font-weight: 500;
    color: #1a1c1c;
}

.vo-page .tb-row.tb-align-items-center > .tb-col-md-2:last-child {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.vo-page .tb-row.tb-align-items-center > .tb-col-md-2:last-child p {
    font-size: 13px;
    font-weight: 600;
    color: #1a1c1c;
}

/* --------------------------------------------------------------------------
   Money
   -------------------------------------------------------------------------- */
.vo-page .tb-row.tb-mt-3,
.vo-page .tb-row.tb-mt-4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 16px;
    margin: 0;
}

.vo-page .tb-row .tb-col-sm-12,
.vo-page .tb-row .tb-col-12,
.vo-page .tb-row .tb-col-sm-6 {
    grid-column: 1 / -1;
}

.vo-page .tb-row.tb-mt-3 > [class*="tb-col"],
.vo-page .tb-row.tb-mt-4 > [class*="tb-col"] {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    padding: 4px 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: #7e7576;
}

.vo-page .tb-row.tb-mt-3 > .tb-text-right,
.vo-page .tb-row.tb-mt-4 > .tb-text-right {
    font-weight: 500;
    color: #1a1c1c;
    white-space: nowrap;
}

/* The final line is the one that carries h4 on both sides. */
.vo-page .tb-row.tb-mt-4 h4 {
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: #1a1c1c;
}

.vo-page .tb-row.tb-mt-4 .tb-text-right h4 {
    font-size: 18px;
}

/* --------------------------------------------------------------------------
   Addresses and delivery
   -------------------------------------------------------------------------- */
/* Each part gets its own air, and its heading sits on a rule so the eye can
   see where one ends. */
.vo-page .tb-row.tb-mt-5 {
    margin: 34px 0 0;
}

.vo-page .tb-row.tb-mt-5 h3 {
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
}

.vo-page .tb-row.tb-mt-5 hr {
    display: none;
}

.vo-page .tb-row.tb-mt-3 {
    margin-top: 6px;
}

.vo-page .tb-row.tb-mt-4 .tb-col-sm-12 hr {
    margin: 14px 0 2px;
}

.vo-page .tb-col-sm-6,
.vo-page .tb-col-sm-12 {
    padding: 0;
}

.vo-page .tb-col-sm-6 {
    margin-top: 30px;
}

.vo-page .tb-col-sm-6 h3 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
}

.vo-page .tb-col-sm-6 p,
.vo-page .tb-col-sm-6 span {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
    color: #1a1c1c;
}