/*!
Theme Name: Miramori
Theme URI: https://miramori.ee/
Author: Underscores
Author URI: https://underscores.me/
Description: Custom WooCommerce theme for Miramori — official licensed anime collectibles store.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miramori
Tags: e-commerce, custom-menu, translation-ready
*/


/* base tokens
========================================================================== */
:root {
    /* brand */
    --tm-color-ink: #181818;
    --tm-color-orange: #ff6a00;
    --tm-color-orange-light: #ff8b33;
    --tm-color-orange-dark: #a2530f;
    --tm-color-yellow: #ffdd00;

    /* surfaces */
    --tm-color-paper: #fff;
    --tm-color-soft: #f7f5f1;
    --tm-color-shell: #e9e6e0;
    --tm-color-line: #eae7df;

    /* text */
    --tm-color-text: #5a5568;
    --tm-color-text-light: #4a4a4a;
    --tm-color-muted: #7a756c;
    --tm-color-inverse: #cfcbc4;

    /* pastel palette for tiles, thumbs and badges */
    --tm-color-mint: #c4efe0;
    --tm-color-mint-light: #d7f3ea;
    --tm-color-lilac: #e7ddf9;
    --tm-color-lilac-light: #efe7fb;
    --tm-color-sky: #d5ecfb;
    --tm-color-peach: #ffe1cd;
    --tm-color-lemon: #fff2b0;
    --tm-color-rose: #ffd9e2;

    /* status */
    --tm-color-success: #1a9a5a;
    --tm-color-success-deep: #0d6b53;
    --tm-color-info-deep: #0b5c8a;
    --tm-color-warning-deep: #7a6200;
    --tm-color-danger: #d33;
    --tm-color-danger-deep: #a3132b;

    /* typography */
    --tm-font-display: 'Fredoka', system-ui, sans-serif;
    --tm-font-body: 'Nunito Sans', system-ui, sans-serif;
    --tm-font-size-min: 14px;
    --tm-font-size-small: 14px;
    --tm-font-size-base: 15px;
    --tm-font-size-lead: 17px;
    --tm-font-size-h4: 17px;
    --tm-font-size-h3: 19px;
    --tm-font-size-h2: 26px;
    --tm-font-size-h1: 32px;
    --tm-font-size-display: 52px;

    /* radii */
    --tm-radius-small: 10px;
    --tm-radius-input: 12px;
    --tm-radius-card: 18px;
    --tm-radius-large: 26px;
    --tm-radius-pill: 999px;

    /* shadows */
    --tm-shadow-card: 0 12px 26px rgba(0, 0, 0, .08);
    --tm-shadow-float: 0 10px 24px rgba(24, 24, 58, .12);
    --tm-shadow-hero: 0 30px 60px rgba(24, 24, 58, .12);

    /* layout */
    --tm-container: 1320px;
    --tm-gutter: 40px;
}

/* base elements
========================================================================== */
html,
body {
    height: 100%;
}

body {
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-base);
    line-height: 1.5;
    color: var(--tm-color-ink);
    background: var(--tm-color-shell);
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

img,
svg {
    max-width: 100%;
}

h1,
h2,
h3,
h4 {
    font-family: var(--tm-font-display);
    font-weight: 600;
    line-height: 1.1;
}

h1 {
    font-size: var(--tm-font-size-h1);
}

h2 {
    font-size: var(--tm-font-size-h2);
}

h3 {
    font-size: var(--tm-font-size-h3);
}

h4 {
    font-size: var(--tm-font-size-h4);
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

input,
select,
textarea,
button {
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-base);
}

/* page skeleton
---------------------------------------- */
.tm-page {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tm-color-paper);
}

.tm-main {
    flex: 1 1 auto;
}

/* header
========================================================================== */

/* announcement bar
---------------------------------------- */
.tm-topbar {
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
    text-align: center;
    font-weight: 700;
    font-size: var(--tm-font-size-min);
    padding: 7px 20px;
}

/* locks the page while the mobile menu is open */
.tm-fix-body {
    overflow: hidden;
}

/* main header
---------------------------------------- */
.tm-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
}

.tm-header__row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
    padding: 12px var(--tm-gutter);
}

.tm-header__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.tm-logo {
    height: 38px;
    width: auto;
    display: block;
}

.tm-header__nav {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: var(--tm-font-size-small);
}

.tm-header__nav-list {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
}

.tm-header__nav a {
    white-space: nowrap;
}

.tm-header__nav a:hover,
.tm-header__nav a.tm-is-active {
    color: var(--tm-color-yellow);
}

.tm-header-mobile-wrapper {
    display: none;
}

.tm-header__icons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.tm-nav-toggle {
    display: none;
}

.tm-nav-toggle__label {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    cursor: pointer;
}

.tm-nav-toggle__label span {
    height: 2px;
    margin: 2px 0;
    border-radius: 3px;
    background: var(--tm-color-paper);
    transition: transform .3s cubic-bezier(.68, -.6, .32, 1.6), width .3s ease;
}

.tm-nav-toggle__label span:nth-of-type(1) {
    width: 100%;
}

.tm-nav-toggle__label span:nth-of-type(2) {
    width: 70%;
}

.tm-nav-toggle__label span:nth-of-type(3) {
    width: 45%;
}

.tm-nav-toggle:checked ~ .tm-nav-toggle__label span:nth-of-type(1) {
    transform: translateY(6px) rotate(45deg);
}

.tm-nav-toggle:checked ~ .tm-nav-toggle__label span:nth-of-type(2) {
    width: 100%;
    transform: rotate(-45deg);
}

.tm-nav-toggle:checked ~ .tm-nav-toggle__label span:nth-of-type(3) {
    width: 0;
}

@media (max-width: 1180px) {
    .tm-header__nav-list {
        gap: 12px;
    }
}

/* below this width the same header turns into the mobile one */
@media (max-width: 1080px) {
    .tm-header__row {
        position: relative;
        gap: 12px;
        padding: 12px 16px;
    }

    .tm-nav-toggle__label {
        display: flex;
    }

    .tm-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 60;
        width: 100%;
        height: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--tm-color-ink);
        visibility: hidden;
        overflow: hidden;
        transition: height .3s ease, visibility .3s ease;
    }

    .tm-nav-toggle:checked ~ .tm-header__nav {
        height: var(--tm-nav-height, calc(100vh - 100%));
        visibility: visible;
        overflow-y: auto;
        box-shadow: 0 18px 30px rgba(0, 0, 0, .25);
    }

    .tm-header__nav-list {
        flex-direction: column;
        gap: 0;
        padding: 6px 16px 14px;
        font-size: var(--tm-font-size-base);
    }

    .tm-header__nav-list a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .tm-header-mobile-wrapper {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .tm-header-mobile-wrapper_top {
        padding: 14px 16px 4px;
    }

    .tm-header-mobile-wrapper_bottom {
        padding: 4px 16px 20px;
    }

    /* elements moved here from the header row keep the full width */
    .tm-header-mobile-wrapper .tm-search,
    .tm-header-mobile-wrapper .tm-search__input {
        width: 100%;
    }

    .tm-header-mobile-wrapper .tm-lang {
        font-size: var(--tm-font-size-base);
    }
}

/* header search and language
---------------------------------------- */
.tm-search {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #242424;
    border-radius: var(--tm-radius-pill);
    padding: 7px 12px;
}

.tm-search__input {
    width: 120px;
    background: none;
    border: 0;
    color: var(--tm-color-paper);
    font-size: var(--tm-font-size-min);
    outline: none;
}

.tm-lang {
    font-size: var(--tm-font-size-min);
    color: #bbb;
}

.tm-lang i {
    margin: 0 4px;
    font-style: normal;
    color: #555;
}

.tm-lang b {
    color: var(--tm-color-paper);
}

/* header icon links
---------------------------------------- */
/* one box for all three icons keeps the glyphs and the counters on a single line */
.tm-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--tm-color-paper);
    font-size: 18px;
    line-height: 1;
}

/* header icons are dimmed until pointed at */
.tm-icon-link__svg {
    display: block;
    width: 22px;
    height: 22px;
    opacity: .55;
    transition: opacity .18s ease;
}

.tm-icon-link:hover .tm-icon-link__svg {
    opacity: 1;
}

/* the cart glyph is optically lighter, so it runs bigger than the other two */
.tm-header-cart__icon .tm-icon-link__svg {
    width: 24px;
    height: 24px;
}

/* the wishlist plugin empties its counter when the list is empty */
.tm-icon-link__count:empty {
    display: none;
}

.tm-icon-link__count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
    font-style: normal;
    font-size: var(--tm-font-size-min);
    font-weight: 800;
    line-height: 1.15;
    border-radius: var(--tm-radius-pill);
    padding: 0 6px;
}

/* header mini-cart
---------------------------------------- */
.tm-header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* the counter is always printed so the AJAX fragment has a node to replace */
.tm-header-cart__count.tm-is-empty {
    display: none;
}

.tm-header-cart__dropdown {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    z-index: 60;
    width: 340px;
    padding: 18px;
    border-radius: var(--tm-radius-card);
    background: var(--tm-color-paper);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    color: var(--tm-color-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.tm-header-cart.tm-is-open .tm-header-cart__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 480px) {
    .tm-header-cart__dropdown {
        width: calc(100vw - 32px);
    }
}

.tm-mini-cart {
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    list-style: none;
}

.tm-mini-cart__row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--tm-color-line);
}

.tm-mini-cart__thumb img {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: var(--tm-radius-small);
    object-fit: cover;
}

/* a grid column does not shrink below its content unless told to */
.tm-mini-cart__info {
    min-width: 0;
}

.tm-mini-cart__name {
    display: block;
    overflow-wrap: anywhere;
    color: var(--tm-color-ink);
    font-weight: 700;
    font-size: var(--tm-font-size-small);
    line-height: 1.3;
}

.tm-mini-cart__line {
    margin-top: 4px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

.tm-mini-cart__remove {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.tm-mini-cart__remove:hover {
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
}

.tm-mini-cart__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 0;
    font-family: var(--tm-font-display);
    font-weight: 600;
}

.tm-mini-cart__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 0;
}

.tm-mini-cart__empty {
    margin: 0;
    padding: 12px 0;
    color: var(--tm-color-muted);
    text-align: center;
}

/* the two buttons under the list come from WooCommerce without the theme's class */
.tm-mini-cart__buttons a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 2px solid var(--tm-color-orange);
    border-radius: var(--tm-radius-pill);
    background: transparent;
    color: var(--tm-color-orange);
    font-weight: 800;
    font-size: var(--tm-font-size-small);
    text-align: center;
    text-decoration: none;
}

.tm-mini-cart__buttons a.button.checkout {
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
}

.tm-mini-cart__buttons a.button:hover {
    border-color: var(--tm-color-orange-light);
    background: var(--tm-color-orange-light);
    color: var(--tm-color-paper);
}

/* ======================================================================= */
/* BLOCKS
========================================================================== */

/* buttons
---------------------------------------- */
.tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
    font-weight: 800;
    font-size: var(--tm-font-size-base);
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.tm-btn:hover {
    background: var(--tm-color-orange-light);
}

.tm-btn:active {
    background: var(--tm-color-orange-dark);
}

.tm-btn_big {
    padding: 14px 24px;
    font-size: 16px;
}

.tm-btn_small {
    padding: 8px 13px;
    font-size: var(--tm-font-size-min);
}

.tm-btn_block {
    width: 100%;
    justify-content: center;
}

.tm-btn_ghost {
    background: var(--tm-color-paper);
    color: var(--tm-color-ink);
    border: 2px solid var(--tm-color-ink);
}

.tm-btn_ghost:hover,
.tm-btn_ghost:active {
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
}


.tm-btn_full {
    width: 100%;
}

.tm-btn_grow {
    flex: 1;
}

/* section head
---------------------------------------- */
.tm-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.tm-section-head__sub {
    margin-top: 3px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-base);
    font-weight: 600;
}

.tm-link-more {
    color: var(--tm-color-orange);
    font-weight: 700;
    font-size: var(--tm-font-size-min);
}

/* badges
---------------------------------------- */
.tm-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 7px;
    background: var(--tm-color-yellow);
    color: var(--tm-color-ink);
    font-family: var(--tm-font-display);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.tm-badge_soon,
.tm-badge_pre {
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
}

.tm-badge_off {
    top: 14px;
    right: 14px;
    left: auto;
    z-index: 2;
    background: var(--tm-color-paper);
    color: var(--tm-color-ink);
    border: 1px solid var(--tm-color-line);
    text-transform: none;
}

/* a product can carry several badges at once so they sit in a row */
.tm-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tm-badges .tm-badge {
    position: static;
}

/* one step up the scale for the product gallery, where the badge sits on a large image */
.tm-badge_large {
    padding: 6px 13px;
    border-radius: 9px;
    font-size: var(--tm-font-size-base);
}

/* status badges
---------------------------------------- */
.tm-status {
    display: inline-block;
    padding: 5px 11px;
    border-radius: var(--tm-radius-pill);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
}

.tm-status_shipped,
.tm-status_onhold {
    background: var(--tm-color-sky);
    color: var(--tm-color-info-deep);
}

.tm-status_processing {
    background: var(--tm-color-lemon);
    color: var(--tm-color-warning-deep);
}

.tm-status_done,
.tm-status_completed {
    background: var(--tm-color-mint);
    color: var(--tm-color-success-deep);
}

.tm-status_warning,
.tm-status_pending {
    background: var(--tm-color-peach);
    color: var(--tm-color-orange-dark);
}

/* statuses the layout never showed but WooCommerce hands out */
.tm-status_cancelled,
.tm-status_refunded {
    background: var(--tm-color-shell);
    color: var(--tm-color-muted);
}

.tm-status_failed {
    background: var(--tm-color-rose);
    color: var(--tm-color-danger-deep);
}

/* breadcrumbs and page head
---------------------------------------- */
.tm-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

.tm-breadcrumbs a:hover {
    color: var(--tm-color-orange);
}

.tm-breadcrumbs i {
    color: #ccc;
    font-style: normal;
}

.tm-page-head {
    margin-bottom: 18px;
}

.tm-page-head__title {
    margin-bottom: 6px;
}

.tm-page-head_center {
    text-align: center;
}

/* product card
---------------------------------------- */
.tm-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tm-product-grid_three {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
    .tm-product-grid,
    .tm-product-grid_three {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .tm-product-grid,
    .tm-product-grid_three {
        gap: 12px;
    }
}

.tm-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tm-color-paper);
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-card);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}

.tm-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tm-shadow-card);
}

/* the whole card is clickable, so the add button has to sit above the link */
.tm-product-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tm-product-card__thumb {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: 52px;
}

.tm-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* name takes the slack so price rows line up across the grid */
.tm-product-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px;
}

.tm-product-card__type {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 16px;
}

.tm-product-card__series {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the series can be missing, the stars stay on the right either way. In a card they
   run smaller than on the product page: a narrow card has to fit the brand too */
.tm-product-card__type .tm-stars {
    margin-left: auto;
    font-size: 12px;
    letter-spacing: 0;
}

/* two cards per row leave no space for a long brand beside the stars, so the stars
   drop under it — in every card, otherwise the rows sit at different heights */
@media (max-width: 600px) {
    .tm-product-card__type {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .tm-product-card__series {
        white-space: normal;
    }

    .tm-product-card__type .tm-stars {
        align-self: flex-end;
        margin-left: 0;
    }
}

.tm-product-card__name {
    flex: 1 1 auto;
    font-size: var(--tm-font-size-base);
    font-weight: 700;
    line-height: 1.25;
}

.tm-product-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.tm-product-card__release {
    color: var(--tm-color-orange);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
}

.tm-price {
    font-family: var(--tm-font-display);
    font-weight: 600;
    font-size: 17px;
}

.tm-add {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
    font-size: 22px;
    line-height: 1;
}

.tm-product-card:hover .tm-add {
    background: var(--tm-color-orange);
}

/* wishlist
---------------------------------------- */

/* the heart sits in the corner of the card thumb; the plugin renders the control inside */
.tm-wish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* on the wishlist page the card carries a remove button in place of the heart */
.tm-product-card__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tm-color-paper);
    color: var(--tm-color-ink);
    font-size: 15px;
    line-height: 1;
    box-shadow: var(--tm-shadow-card);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.tm-product-card__remove:hover {
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
}

/* the plugin sizes and colours its icon with four-class selectors, so these match it */
.tm-wish .tinv-wishlist a.tinvwl_add_to_wishlist_button.no-txt {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tm-color-paper);
    color: var(--tm-color-ink);
    font-size: 15px;
    line-height: 1;
    box-shadow: var(--tm-shadow-card);
    cursor: pointer;
}

.tm-wish .tinv-wishlist a.tinvwl_add_to_wishlist_button.no-txt:hover,
.tm-wish .tinv-wishlist a.tinvwl_add_to_wishlist_button.no-txt.tinvwl-product-in-list {
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
}

.tm-wish .tinvwl_add_to_wishlist_button-text,
.tm-wish .tinvwl-tooltip {
    display: none;
}

/* button under the buy row on a product page, spaced like .tm-product-info__wish */
.tm-product-info .tinv-wraper.woocommerce.tinv-wishlist {
    display: block;
    margin-bottom: 18px;
}

/* plugin paints its control as a serif link, here it repeats the outlined button */
.tinv-wishlist a.tinvwl_add_to_wishlist_button.tm-btn {
    gap: 8px;
    background: var(--tm-color-paper);
    color: var(--tm-color-ink);
    border: 2px solid var(--tm-color-ink);
    font-family: var(--tm-font-body);
    font-weight: 800;
    font-size: var(--tm-font-size-base);
    line-height: 1.2;
    text-decoration: none;
}

.tinv-wishlist a.tinvwl_add_to_wishlist_button.tm-btn:hover,
.tinv-wishlist a.tinvwl_add_to_wishlist_button.tm-btn:active {
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
}

/* wishlist table in project typography, selectors repeat the plugin class depth */
.tinv-wishlist table.tinvwl-table-manage-list {
    width: 100%;
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-small);
}

.tinv-wishlist table.tinvwl-table-manage-list th {
    color: var(--tm-color-muted);
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.tinv-wishlist table.tinvwl-table-manage-list td,
.tinv-wishlist table.tinvwl-table-manage-list th {
    border-color: var(--tm-color-line);
}

.tinv-wishlist table.tinvwl-table-manage-list a:not(.button) {
    color: var(--tm-color-ink);
    font-weight: 700;
    text-decoration: none;
}

.tinv-wishlist table.tinvwl-table-manage-list a:not(.button):hover {
    color: var(--tm-color-orange);
}

.tinv-wishlist table.tinvwl-table-manage-list .product-thumbnail img {
    border-radius: var(--tm-radius-small);
}

.tinv-wishlist .tinvwl-table-manage-list button.button,
.tinv-wishlist .tinvwl-table-manage-list button.button.alt,
.tinv-wishlist .tinvwl-buttons-group button.button,
.tinv-wishlist button.button.alt {
    padding: 10px 16px;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
    font-family: var(--tm-font-body);
    font-weight: 800;
    font-size: var(--tm-font-size-min);
}

.tinv-wishlist .tinvwl-table-manage-list button.button:hover,
.tinv-wishlist .tinvwl-table-manage-list button.button.alt:hover,
.tinv-wishlist .tinvwl-buttons-group button.button:hover,
.tinv-wishlist button.button.alt:hover {
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
}

/* SweetAlert box of cf7-popups, only the shape needs correcting */
/* this build of SweetAlert names the box .swal2-modal; newer ones use .swal2-popup */
.swal2-container .swal2-modal,
.swal2-container .swal2-popup {
    padding: 26px;
    border-radius: var(--tm-radius-card);
}

.swal2-container .swal2-title {
    color: var(--tm-color-ink);
    font-family: var(--tm-font-display);
}

.swal2-container .swal2-content {
    color: var(--tm-color-text);
    font-size: var(--tm-font-size-base);
}

/* added to wishlist dialog, wider box keeps the long label on one line */
.tinv-modal .tinv-modal-inner {
    max-width: 520px;
    padding: 28px 26px;
    border-radius: var(--tm-radius-card);
}

.tinv-modal .tinv-txt {
    margin-bottom: 18px;
    color: var(--tm-color-text);
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-base);
}

.tinv-modal .tinvwl-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.tinv-modal .tinvwl-buttons-group button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 11px 18px;
    border: 2px solid var(--tm-color-ink);
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-small);
    font-weight: 800;
    white-space: nowrap;
}

.tinv-modal .tinvwl-buttons-group button.button:hover {
    border-color: var(--tm-color-orange);
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
}

/* closing is the secondary action of the two */
.tinv-modal .tinvwl-buttons-group button.tinvwl_button_close {
    background: var(--tm-color-paper);
    color: var(--tm-color-ink);
}

/* below this the two pills no longer fit side by side, so each takes its own row */
@media (max-width: 560px) {
    .tinv-modal .tinvwl-buttons-group {
        flex-direction: column;
    }

    .tinv-modal .tinvwl-buttons-group button.button {
        width: 100%;
    }
}

/* plugin pads every button in its wrapper and the round remove button came out an oval */
.tinv-wishlist button.tm-product-card__remove {
    width: 34px;
    height: 34px;
    padding: 0;
    line-height: 1;
}

/* category tiles
---------------------------------------- */
.tm-category-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 980px) {
    .tm-category-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tm-category-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 132px;
    padding: 24px 20px;
    border-radius: var(--tm-radius-card);
    color: var(--tm-color-ink);
    font-family: var(--tm-font-display);
    font-size: 18px;
    font-weight: 600;
    transition: transform .15s;
}

.tm-category-tile:hover {
    transform: translateY(-3px);
}

.tm-category-tile__icon {
    font-size: 26px;
    line-height: 1;
}

.tm-category-tile__note {
    display: block;
    margin-top: 2px;
    color: rgba(0, 0, 0, .47);
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-min);
    font-weight: 600;
}

/* form fields
---------------------------------------- */
.tm-field {
    margin-bottom: 10px;
}

.tm-field_two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 520px) {
    .tm-field_two {
        grid-template-columns: 1fr;
    }
}

/* WooCommerce prints one wrapper per field; this grid pairs the short ones */
.tm-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
}

.tm-fields > .tm-field {
    grid-column: 1 / -1;
}

.tm-fields > .tm-field_half {
    grid-column: span 1;
}

@media (max-width: 520px) {
    .tm-fields {
        grid-template-columns: 1fr;
    }

    .tm-fields > .tm-field_half {
        grid-column: 1 / -1;
    }
}

/* Contact Form 7 markup used across these projects */
.tm-content-form .tm-grid {
    margin-left: -10px;
    row-gap: 10px;
}

.tm-content-form .tm-grid > * {
    padding-left: 10px;
}

.tm-form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
    font-weight: 800;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease;
}

.tm-form-btn:hover {
    background: var(--tm-color-orange-light);
}

.tm-form-btn:active {
    background: var(--tm-color-orange-dark);
}

.tm-input,
.tm-select,
.tm-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-input);
    background: var(--tm-color-paper);
}

.tm-textarea {
    min-height: 120px;
    resize: vertical;
}

/* checkbox and radio, drawn by the theme
---------------------------------------- */

/* native controls are stripped and redrawn, inputs stay for plugins and keyboard */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--tm-color-shell);
    background: var(--tm-color-paper);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

input[type="checkbox"] {
    border-radius: 6px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--tm-color-orange-light);
}

/* keyboard focus lives in the control own language, a border not an outline ring */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    border-color: var(--tm-color-orange);
}

input[type="checkbox"]:checked {
    border-color: var(--tm-color-orange);
    background-color: var(--tm-color-orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 10px;
}

/* orange ring, paper gap and dot all from the border and one inset shadow */
input[type="radio"]:checked {
    border-color: var(--tm-color-orange);
    background-color: var(--tm-color-orange);
    box-shadow: inset 0 0 0 3px var(--tm-color-paper);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: .5;
    cursor: default;
}

.tm-sort {
    padding: 8px 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-small);
    background: var(--tm-color-paper);
}

/* quantity control
---------------------------------------- */
.tm-qty {
    display: flex;
    align-items: center;
    border: 2px solid var(--tm-color-line);
    border-radius: var(--tm-radius-input);
    overflow: hidden;
}

.tm-qty button {
    width: 40px;
    height: 44px;
    border: 0;
    background: var(--tm-color-paper);
    font-size: 18px;
    cursor: pointer;
}

.tm-qty input {
    width: 44px;
    height: 44px;
    border: 0;
    border-left: 2px solid var(--tm-color-line);
    border-right: 2px solid var(--tm-color-line);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

/* own stepper instead of the browser one which pushes the number off centre */
.tm-qty input::-webkit-outer-spin-button,
.tm-qty input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.tm-qty_small button {
    width: 32px;
    height: 36px;
}

.tm-qty_small input {
    width: 38px;
    height: 36px;
}

/* order summary
---------------------------------------- */
.tm-summary {
    padding: 20px;
    border-radius: 16px;
    background: var(--tm-color-soft);
}

.tm-summary__title {
    margin-bottom: 14px;
}

.tm-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    color: var(--tm-color-text);
}

.tm-summary__row_total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--tm-color-line);
    color: var(--tm-color-ink);
    font-size: 18px;
}

.tm-summary__row_total b {
    font-family: var(--tm-font-display);
    font-size: 20px;
}

.tm-summary_sticky {
    position: sticky;
    top: 90px;
}

@media (max-width: 900px) {
    .tm-summary_sticky {
        position: static;
    }
}

/* accordion
---------------------------------------- */
.tm-accordion details {
    padding: 12px 0;
    border-bottom: 1px solid var(--tm-color-line);
}

.tm-accordion summary {
    font-family: var(--tm-font-display);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.tm-accordion p {
    margin-top: 8px;
    color: var(--tm-color-text);
}

/* pagination
---------------------------------------- */
.tm-pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.tm-pager__item {
    padding: 8px 13px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-small);
    font-weight: 700;
}

.tm-pager__item.tm-is-active {
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
}

/* toggle switch
---------------------------------------- */
.tm-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: var(--tm-radius-pill);
    background: #d9d5cd;
    transition: background .15s;
}

.tm-toggle i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tm-color-paper);
    transition: left .15s;
}

.tm-toggle.tm-is-on {
    background: var(--tm-color-orange);
}

.tm-toggle.tm-is-on i {
    left: 18px;
}

/* pastel surfaces for thumbs and tiles
---------------------------------------- */
.tm-bg-mint {
    background: var(--tm-color-mint);
}

.tm-bg-mint-light {
    background: var(--tm-color-mint-light);
}

.tm-bg-lilac {
    background: var(--tm-color-lilac);
}

.tm-bg-lilac-light {
    background: var(--tm-color-lilac-light);
}

.tm-bg-sky {
    background: var(--tm-color-sky);
}

.tm-bg-peach {
    background: var(--tm-color-peach);
}

.tm-bg-lemon {
    background: var(--tm-color-lemon);
}

.tm-bg-rose {
    background: var(--tm-color-rose);
}

.tm-bg-soft {
    background: var(--tm-color-soft);
}

/* ======================================================================= */
/* PAGE SECTIONS
========================================================================== */

/* home — hero
---------------------------------------- */
.tm-hero {
    position: relative;
    overflow: hidden;
    padding: 44px 0;
    background: linear-gradient(125deg, #c4efe0 0%, #d9ecfb 52%, #e7ddf9 100%);
}

.tm-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 36px;
    align-items: center;
}

.tm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 15px;
    border-radius: var(--tm-radius-pill);
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 4px 14px rgba(24, 24, 24, .07);
    font-family: var(--tm-font-display);
    font-size: var(--tm-font-size-min);
    font-weight: 600;
}

.tm-kicker__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
}

.tm-hero__title {
    margin: 2px 0 14px;
    font-size: var(--tm-font-size-display);
    line-height: 1.02;
}

.tm-hero__accent {
    color: var(--tm-color-orange);
}

.tm-hero__sub {
    max-width: 460px;
    margin-bottom: 22px;
    color: var(--tm-color-text-light);
    font-size: var(--tm-font-size-lead);
}

.tm-hero__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-hero__card {
    width: 100%;
    max-width: 340px;
    padding: 18px;
    border-radius: 28px;
    background: var(--tm-color-paper);
    box-shadow: var(--tm-shadow-hero), 0 6px 18px rgba(24, 24, 58, .07);
    transform: rotate(-2deg);
}

.tm-hero__card img {
    width: 100%;
    display: block;
    border-radius: 16px;
}

.tm-hero__float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-paper);
    box-shadow: var(--tm-shadow-float);
    font-family: var(--tm-font-display);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
}

.tm-hero__float_top {
    top: 14px;
    left: 2px;
}

.tm-hero__float_bottom {
    right: 0;
    bottom: 16px;
}

.tm-hero__float-price {
    color: var(--tm-color-orange);
}

@media (max-width: 980px) {
    .tm-hero {
        padding: 24px 0;
    }

    .tm-hero__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .tm-hero__title {
        font-size: 34px;
    }

    .tm-hero__card {
        max-width: 270px;
        transform: none;
    }

    .tm-hero__float {
        display: none;
    }
}

/* home — trust strip
---------------------------------------- */
.tm-trust {
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
    padding: 16px 0;
}

.tm-trust__row {
    display: flex;
    justify-content: center;
    gap: 44px;
    flex-wrap: wrap;
    font-size: var(--tm-font-size-min);
    font-weight: 600;
}

.tm-trust__row b {
    color: var(--tm-color-yellow);
    font-weight: 800;
}

@media (max-width: 980px) {
    .tm-trust {
        padding: 14px 0;
    }

    .tm-trust__row {
        justify-content: flex-start;
        gap: 10px 20px;
    }
}

/* home — creator unboxings
---------------------------------------- */
.tm-ugc-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.tm-ugc {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .15s;
}

.tm-ugc:hover {
    transform: translateY(-3px);
}

.tm-ugc_rose {
    background: linear-gradient(160deg, #ffd9e2, #e7ddf9);
}

.tm-ugc_sky {
    background: linear-gradient(160deg, #d5ecfb, #c4efe0);
}

.tm-ugc_lemon {
    background: linear-gradient(160deg, #fff2b0, #ffe1cd);
}

.tm-ugc_lilac {
    background: linear-gradient(160deg, #e7ddf9, #d5ecfb);
}

.tm-ugc_mint {
    background: linear-gradient(160deg, #c4efe0, #fff2b0);
}

.tm-ugc__icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 34px;
    left: 0;
    display: grid;
    place-items: center;
    font-size: 54px;
}

.tm-ugc__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .87);
    color: var(--tm-color-ink);
    font-size: 17px;
    transform: translate(-50%, -60%);
}

.tm-ugc__foot {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .67));
    color: var(--tm-color-paper);
    line-height: 1.2;
}

.tm-ugc__foot b {
    font-size: var(--tm-font-size-min);
}

.tm-ugc__foot span {
    font-size: var(--tm-font-size-min);
    opacity: .85;
}

@media (max-width: 980px) {
    .tm-ugc-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 520px) {
    .tm-ugc-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* home — Mira band
---------------------------------------- */
.tm-mira {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 26px;
    align-items: center;
    padding: 34px 40px;
    border-radius: var(--tm-radius-large);
    background: linear-gradient(120deg, #181818, #242424);
    color: var(--tm-color-paper);
}

.tm-mira__avatar {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: var(--tm-radius-card);
    background: var(--tm-color-yellow);
    font-size: 32px;
}

.tm-mira h3 {
    font-size: 22px;
}

.tm-mira__text {
    max-width: 640px;
    margin-top: 4px;
    color: var(--tm-color-inverse);
}

.tm-mira .tm-btn {
    white-space: nowrap;
}

@media (max-width: 980px) {
    .tm-mira {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 26px 20px;
        text-align: center;
    }
}

/* catalogue — toolbar
---------------------------------------- */
.tm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tm-count {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
}

/* catalogue — listing with filters
---------------------------------------- */
.tm-listing {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .tm-listing {
        grid-template-columns: 1fr;
    }
}

.tm-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 900px) {
    .tm-filters {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
}

.tm-filter-block {
    padding: 13px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
}

.tm-filter-block h4 {
    margin-bottom: 9px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    letter-spacing: .5px;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .tm-filter-block {
        flex: 1;
        min-width: 44%;
    }
}

.tm-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: var(--tm-font-size-small);
    cursor: pointer;
}

.tm-range {
    width: 100%;
}

.tm-range__labels {
    display: flex;
    justify-content: space-between;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

.tm-filter-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

@media (max-width: 900px) {
    .tm-filter-actions {
        flex: 1;
        min-width: 44%;
    }
}

.tm-filter-reset {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

.tm-filter-reset:hover {
    color: var(--tm-color-orange);
}

.tm-sort-form {
    display: flex;
}

/* catalogue — category band and SEO text
---------------------------------------- */
.tm-category-band {
    padding: 30px 0;
}

.tm-category-band__icon {
    font-size: 52px;
    line-height: 1;
}

.tm-category-band h1 {
    font-size: 34px;
}

.tm-category-band__text {
    max-width: 560px;
    margin-top: 4px;
    color: var(--tm-color-text);
}

@media (max-width: 980px) {
    .tm-category-band {
        padding: 22px 0;
    }

    .tm-category-band h1 {
        font-size: 28px;
    }
}

.tm-seo-block {
    margin-top: 26px;
    padding: 20px;
    border-radius: 14px;
    background: var(--tm-color-soft);
}

.tm-seo-block h3 {
    margin-bottom: 6px;
}

/* product — layout and gallery
---------------------------------------- */
.tm-product {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 34px;
}

@media (max-width: 900px) {
    .tm-product {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.tm-gallery__main {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-size: 120px;
}

@media (max-width: 900px) {
    .tm-gallery__main {
        font-size: 80px;
    }
}

/* the slider fills the tile; the emoji placeholder stays centred */
.tm-gallery__slider {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.tm-gallery__slider .swiper-slide {
    display: grid;
    place-items: center;
}

.tm-gallery__slider a {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.tm-gallery__video {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(135deg, #22252b, #3a3f47);
}

.tm-gallery__video .tm-gallery__play {
    font-size: 64px;
}

.tm-gallery__main img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
}

/* Swiper lays the thumbs out and spaces them, so the strip itself stays plain */
.tm-gallery__thumbs {
    margin-top: 12px;
}

.tm-gallery__thumb {
    position: relative;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border: 2px solid transparent;
    border-radius: 13px;
    font-size: 30px;
    cursor: pointer;
}

/* Swiper sizes slides to 100% and loads after this file */
.tm-gallery__thumb.swiper-slide {
    width: 70px;
    height: 70px;
}

.tm-gallery__thumb.swiper-slide-thumb-active {
    border-color: var(--tm-color-ink);
}

.tm-gallery__thumb img {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    object-fit: cover;
}

.tm-gallery__thumb_video {
    background: linear-gradient(135deg, #22252b, #3a3f47);
    color: var(--tm-color-paper);
}

.tm-gallery__play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    color: var(--tm-color-paper);
    font-size: 20px;
    font-style: normal;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* product — info column
---------------------------------------- */
.tm-product-info__type {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tm-product-info__title {
    margin: 6px 0 12px;
    font-size: 30px;
}

.tm-product-info__row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tm-product-info__price {
    font-family: var(--tm-font-display);
    font-size: 28px;
    font-weight: 600;
}

.tm-product-info__desc {
    margin-bottom: 18px;
    color: var(--tm-color-text);
}

.tm-product-info__wish {
    margin-bottom: 18px;
}

.tm-stock_in {
    color: var(--tm-color-success);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
}

.tm-stock_preorder {
    color: var(--tm-color-orange-dark);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
}

.tm-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tm-font-size-min);
}

.tm-rating a {
    color: var(--tm-color-muted);
    text-decoration: underline;
}

/* stars: grey row of five, the gold row above it clipped to the rating */
.tm-stars {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    color: #d8d8d8;
    font-size: var(--tm-font-size-min);
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
}

.tm-stars::before {
    content: '★★★★★';
}

.tm-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #e2a900;
    white-space: nowrap;
}

.tm-stars__fill::before {
    content: '★★★★★';
}

.tm-option {
    margin-bottom: 16px;
}

.tm-option__label {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
    text-transform: uppercase;
}

.tm-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.tm-chip {
    padding: 8px 14px;
    border: 2px solid var(--tm-color-line);
    border-radius: 11px;
    font-weight: 700;
    cursor: pointer;
}

.tm-chip.tm-is-active {
    border-color: var(--tm-color-ink);
}

.tm-buy-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.tm-product-trust {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--tm-color-line);
    border-bottom: 1px solid var(--tm-color-line);
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
}

/* the select stays in the DOM for WooCommerce scripts; chips are what is shown */
.tm-option_chips select,
.tm-option_chips .reset_variations {
    display: none;
}

.tm-chip.tm-is-disabled {
    opacity: .45;
    pointer-events: none;
}

.tm-specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    color: var(--tm-color-text);
    font-size: var(--tm-font-size-small);
}

.tm-specs dt {
    color: var(--tm-color-muted);
}

.tm-specs dd {
    margin: 0;
}

/* product — pre-order note
---------------------------------------- */
.tm-preorder-box {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #ffd9bd;
    border-radius: 13px;
    background: #fff7f1;
    color: #5a4636;
    font-size: var(--tm-font-size-small);
}

.tm-preorder-box b {
    color: var(--tm-color-ink);
}

.tm-preorder-box__alert {
    display: block;
    margin-top: 8px;
    color: var(--tm-color-orange-dark);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
}

/* product — unboxing video
---------------------------------------- */
.tm-video-box {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
}

.tm-video-box__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 190px;
    height: 106px;
    display: grid;
    place-items: center;
    border-radius: var(--tm-radius-small);
    overflow: hidden;
    background: linear-gradient(135deg, #22252b, #3a3f47);
}

/* the poster sits behind the controls, out of the grid so the play stays centred */
.tm-video-box__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-video-box__play {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--tm-color-ink);
    font-size: var(--tm-font-size-base);
}

.tm-video-box__tag {
    position: absolute;
    z-index: 1;
    right: 6px;
    bottom: 6px;
    left: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .6);
    color: var(--tm-color-paper);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-video-box__note {
    display: block;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

@media (max-width: 520px) {
    .tm-video-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .tm-video-box__thumb {
        width: 100%;
        height: 110px;
    }
}

/* account — order cards (WooCommerce data, prototype styling)
---------------------------------------- */
.tm-order-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
}

.tm-order-card__number {
    font-family: var(--tm-font-display);
    font-size: var(--tm-font-size-h4);
    font-weight: 600;
}

.tm-order-card__number:hover {
    color: var(--tm-color-orange);
}

.tm-order-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-small);
    font-weight: 600;
}

.tm-order-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 780px) {
    .tm-order-card {
        grid-template-columns: 1fr auto;
    }

    .tm-order-card__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* account — single order view
---------------------------------------- */
.tm-order-view__intro {
    margin-bottom: 18px;
    color: var(--tm-color-text);
}

.tm-order-view__box {
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
}

.tm-order-view__title {
    margin-bottom: 12px;
    font-family: var(--tm-font-display);
    font-size: var(--tm-font-size-h3);
    font-weight: 600;
}

.tm-order-view__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tm-color-line);
}

.tm-order-view__line:last-child {
    border-bottom: 0;
}

.tm-order-view__line_total {
    font-family: var(--tm-font-display);
    font-size: var(--tm-font-size-h4);
    font-weight: 600;
}

.tm-order-view__product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tm-order-view__thumb {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    overflow: hidden;
    font-size: 22px;
}

.tm-order-view__note {
    padding: 12px 0;
    border-bottom: 1px solid var(--tm-color-line);
}

.tm-order-view__note:last-child {
    border-bottom: 0;
}

.tm-order-view__note-date {
    display: block;
    margin-bottom: 2px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-small);
    font-weight: 700;
}

.tm-order-view__addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.tm-order-view__addresses address {
    color: var(--tm-color-text);
    font-style: normal;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .tm-order-view__addresses {
        grid-template-columns: 1fr;
    }
}

/* a saved address stands alone in its box, without the two-column grid */
.tm-order-view__box address {
    color: var(--tm-color-text);
    font-style: normal;
    line-height: 1.7;
}

.tm-order-view__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.tm-field__note {
    display: block;
    margin-top: 6px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

/* cart and checkout — layout
---------------------------------------- */
.tm-cart {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 26px;
    align-items: start;
}

@media (max-width: 900px) {
    .tm-cart {
        grid-template-columns: 1fr;
    }
}

/* checkout left column, accordions carry their own form */
.tm-checkout-main {
    min-width: 0;
}

.tm-cart-line {
    display: grid;
    grid-template-columns: 104px 1fr auto;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
}

.tm-cart-line__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* the quantity control lines up with the bottom edge of the thumbnail */
.tm-cart-line__info .tm-qty {
    margin-top: auto;
}

/* keeps a gap under the name even when there is no free space left */
.tm-cart-line__info .tm-cart-line__name {
    margin-bottom: 6px;
}

.tm-cart-line__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    gap: 10px;
}

/* stretches to the row height, so its bottom edge always meets the quantity control */
.tm-cart-line__thumb {
    width: 104px;
    min-height: 104px;
    align-self: stretch;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 44px;
}

.tm-cart-line__name {
    font-weight: 700;
}

.tm-cart-line__remove {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    line-height: 1;
    transition: background-color .18s ease, color .18s ease;
}

.tm-cart-line__remove:hover {
    background: var(--tm-color-soft);
    color: var(--tm-color-ink);
}

.tm-cart-line__price {
    font-family: var(--tm-font-display);
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .tm-cart-line {
        grid-template-columns: 84px 1fr auto;
        gap: 12px;
    }

    .tm-cart-line__thumb {
        width: 84px;
        min-height: 84px;
        font-size: 32px;
    }
}

.tm-promo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.tm-promo .tm-input {
    flex: 1;
    border-radius: 11px;
}

.tm-summary__btn {
    margin-top: 14px;
}

/* checkout — steps, radios, consent
---------------------------------------- */
.tm-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
}

.tm-step__number {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
}

.tm-step h3 {
    font-size: 18px;
}

.tm-radios {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tm-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 2px solid var(--tm-color-line);
    border-radius: 13px;
    cursor: pointer;
}

.tm-radio.tm-is-active {
    border-color: var(--tm-color-orange);
    background: #fff7f1;
}

.tm-radio span:first-of-type {
    flex: 1;
}

/* checkout login and coupon notices above the form */
.tm-checkout-notice {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--tm-color-line);
    border-left: 3px solid var(--tm-color-orange);
    border-radius: var(--tm-radius-small);
    background: var(--tm-color-soft);
}

.tm-checkout-notice__head {
    cursor: pointer;
    font-size: var(--tm-font-size-base);
}

.tm-checkout-notice__head b {
    color: var(--tm-color-orange);
    text-decoration: underline;
}

.tm-checkout-notice__body {
    margin-top: 14px;
}

.tm-checkout-notice__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tm-checkout-notice__inline {
    margin: 0;
}

.tm-checkout-notice .tm-promo {
    margin-top: 0;
}

/* consent and the order button, moved out of the payment block */
.tm-place-order {
    margin-top: 22px;
}

.tm-summary__row_coupon a {
    margin-left: 4px;
    color: var(--tm-color-orange);
    font-size: var(--tm-font-size-small);
    text-decoration: underline;
}

.tm-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0;
    color: var(--tm-color-text);
    font-size: var(--tm-font-size-small);
}

.tm-consent a {
    color: var(--tm-color-orange);
    text-decoration: underline;
}

.tm-mini-line {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--tm-color-line);
    font-size: var(--tm-font-size-small);
}

.tm-mini-line__thumb {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 18px;
}

/* order received
---------------------------------------- */
.tm-check {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--tm-color-mint);
    color: var(--tm-color-success-deep);
    font-size: 44px;
}

.tm-lead {
    margin-top: 6px;
    color: var(--tm-color-muted);
}

.tm-order-recap {
    margin-top: 22px;
    margin-bottom: 22px;
    text-align: left;
}

.tm-order-actions {
    margin-top: 20px;
}

/* account — layout and navigation
---------------------------------------- */
.tm-account {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .tm-account {
        grid-template-columns: 1fr;
    }
}

.tm-account__title {
    margin: 20px 0 12px;
}

.tm-account-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px;
    border-radius: 16px;
    background: var(--tm-color-soft);
}

.tm-account-nav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px;
}

/* flex item does not shrink below its content on its own */
.tm-account-nav__user > div {
    min-width: 0;
}

.tm-account-nav__avatar {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tm-color-paper);
    font-size: 20px;
}

/* a real address is longer than the demo one so it is cut with an ellipsis */
.tm-account-nav__mail {
    display: block;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-account-nav__link {
    padding: 10px 12px;
    border-radius: var(--tm-radius-small);
    font-size: var(--tm-font-size-small);
    font-weight: 700;
}

.tm-account-nav__link:hover {
    background: var(--tm-color-paper);
}

.tm-account-nav__link.tm-is-active {
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
}

.tm-account-nav__link_out {
    margin-top: 8px;
    color: var(--tm-color-muted);
}

/* account — dashboard
---------------------------------------- */
.tm-account-hello {
    font-size: var(--tm-font-size-lead);
}

.tm-account-intro {
    margin-top: 8px;
    color: var(--tm-color-text);
}

.tm-account-intro a,
.tm-account-hello a {
    color: var(--tm-color-orange);
    text-decoration: underline;
}

.tm-account-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 22px;
}

.tm-account-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
    transition: border-color .18s ease, background-color .18s ease;
}

.tm-account-tile:hover {
    border-color: var(--tm-color-ink);
    background: var(--tm-color-soft);
}

.tm-account-tile__icon {
    margin-bottom: 6px;
    font-size: 24px;
}

.tm-account-tile__note {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-small);
}

@media (max-width: 640px) {
    .tm-account-tiles {
        grid-template-columns: 1fr;
    }
}

/* account — order rows
---------------------------------------- */
.tm-order-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--tm-color-line);
    border-radius: 13px;
}

/* still used by the pre-orders layout in NotNow */
.tm-order-row_big {
    gap: 16px;
}

.tm-order-row__info b {
    display: block;
}

.tm-order-row__info span {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

.tm-order-row__date {
    display: block;
    margin-top: 2px;
}

.tm-order-row__actions {
    display: flex;
    gap: 8px;
}

/* sign in and register
---------------------------------------- */
.tm-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 820px;
    margin: 0 auto;
}

@media (max-width: 780px) {
    .tm-auth {
        grid-template-columns: 1fr;
    }
}

.tm-auth-card {
    padding: 24px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-card);
}

.tm-auth-card_alt {
    background: var(--tm-color-soft);
}

.tm-auth-card__title {
    margin-bottom: 14px;
    font-size: 23px;
}

.tm-auth-card__mini {
    display: inline-block;
    margin: 2px 0 12px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    text-decoration: underline;
}

.tm-or {
    position: relative;
    margin: 14px 0;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    text-align: center;
}

.tm-or:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--tm-color-line);
}

.tm-or span {
    position: relative;
    z-index: 1;
    padding: 0 10px;
    background: var(--tm-color-paper);
}

.tm-auth-card_alt .tm-or span {
    background: var(--tm-color-soft);
}

/* information pages
---------------------------------------- */
.tm-info-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 26px;
    border-radius: var(--tm-radius-card);
    background: var(--tm-color-soft);
}

.tm-info-hero__icon {
    font-size: 52px;
    line-height: 1;
}

.tm-info-hero h1 {
    font-size: 34px;
}

@media (max-width: 640px) {
    .tm-info-hero {
        gap: 14px;
        padding: 18px;
    }

    .tm-info-hero h1 {
        font-size: 26px;
    }
}

.tm-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 780px) {
    .tm-info-grid {
        grid-template-columns: 1fr;
    }
}

.tm-info-block {
    padding: 18px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
}

.tm-info-block h3 {
    margin-bottom: 7px;
    font-size: var(--tm-font-size-h4);
}

.tm-link-underline {
    color: var(--tm-color-orange);
    text-decoration: underline;
}

.tm-info-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 780px) {
    .tm-info-layout {
        grid-template-columns: 1fr;
    }
}

.tm-info-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: var(--tm-radius-card);
    background: var(--tm-color-soft);
}

.tm-info-nav__link {
    padding: 10px 12px;
    border-radius: var(--tm-radius-small);
    font-size: var(--tm-font-size-small);
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease;
}

.tm-info-nav__link:hover {
    background: var(--tm-color-shell);
}

.tm-info-nav__link.tm-is-active {
    background: var(--tm-color-ink);
    color: var(--tm-color-paper);
}

.tm-info-nav__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 4px;
    padding-left: 12px;
}

.tm-info-nav__sub a {
    padding: 7px 12px;
    border-left: 2px solid var(--tm-color-shell);
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-small);
    font-weight: 600;
}

.tm-info-nav__sub a:hover,
.tm-info-nav__sub a.tm-is-active {
    border-left-color: var(--tm-color-orange);
    color: var(--tm-color-ink);
}

.tm-info-body h2 {
    margin: 22px 0 6px;
    font-size: var(--tm-font-size-h3);
}

.tm-info-body h2:first-child {
    margin-top: 0;
}

/* content comes from the editor without the prototype's tm-text-body class */
.tm-info-body p {
    color: var(--tm-color-text);
}

.tm-info-body p + p {
    margin-top: 10px;
}

/* contact page keeps its own two-column layout */
.tm-contact {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 780px) {
    .tm-contact {
        grid-template-columns: 1fr;
    }
}

.tm-contact__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 404
---------------------------------------- */
.tm-error__art {
    font-size: 90px;
    line-height: 1;
}

.tm-error__title {
    margin: 10px 0;
    font-size: 34px;
}

/* release calendar
---------------------------------------- */
.tm-release-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tm-release-month {
    margin: 16px 0 4px;
    font-family: var(--tm-font-display);
    font-size: 18px;
    font-weight: 600;
}

.tm-release-card {
    display: grid;
    grid-template-columns: 64px 64px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
}

.tm-release-card__date {
    padding: 8px 0;
    border-radius: 11px;
    background: var(--tm-color-soft);
    text-align: center;
}

.tm-release-card__date b {
    display: block;
    font-family: var(--tm-font-display);
    font-size: 22px;
    line-height: 1;
}

.tm-release-card__date span {
    font-size: var(--tm-font-size-min);
    color: var(--tm-color-muted);
    text-transform: uppercase;
}

.tm-release-card__thumb {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 30px;
}

.tm-release-card__note {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

.tm-release-card__action {
    text-align: right;
}

.tm-release-card__label {
    display: block;
    margin-bottom: 6px;
    color: var(--tm-color-orange);
    font-size: var(--tm-font-size-min);
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .tm-release-card {
        grid-template-columns: 52px 52px 1fr;
        gap: 10px;
    }

    .tm-release-card__thumb {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }

    .tm-release-card__action {
        grid-column: 2 / span 2;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
    }

    .tm-release-card__label {
        margin-bottom: 0;
    }
}

.tm-alert-cta {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--tm-color-peach);
    font-size: var(--tm-font-size-base);
}

.tm-alert-cta a {
    color: var(--tm-color-orange-dark);
    font-weight: 700;
    text-decoration: underline;
}

/* account — pre-orders and hints
---------------------------------------- */
.tm-hint {
    margin-bottom: 14px;
    color: var(--tm-color-muted);
}

.tm-order-row__changed {
    color: var(--tm-color-orange-dark);
    font-weight: 700;
    text-decoration: line-through;
    opacity: .7;
}

/* account — notification settings
---------------------------------------- */
.tm-notif-table {
    max-width: 640px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
    overflow: hidden;
}

.tm-notif-table__head,
.tm-notif-table__row {
    display: grid;
    grid-template-columns: 1fr 130px 130px;
    align-items: center;
    padding: 13px 16px;
}

.tm-notif-table__head {
    background: var(--tm-color-soft);
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
    text-transform: uppercase;
}

.tm-notif-table__row {
    border-top: 1px solid var(--tm-color-line);
}

.tm-notif-table__cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    cursor: pointer;
}

@media (max-width: 640px) {
    .tm-notif-table__head,
    .tm-notif-table__row {
        grid-template-columns: 1fr 78px 78px;
        padding: 12px;
    }

    .tm-notif-table__cell {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}

/* account — notification feed
---------------------------------------- */
.tm-feed {
    max-width: 640px;
    margin-top: 24px;
}

.tm-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: 12px;
}

.tm-feed-item__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c9c4bc;
}

.tm-feed-item__dot_warning {
    background: var(--tm-color-orange);
}

.tm-feed-item__dot_ok {
    background: #2ecc71;
}

.tm-feed-item b {
    display: block;
}

.tm-feed-item__text {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-small);
}

.tm-feed-item__time {
    margin-left: auto;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

/* footer
========================================================================== */
.tm-footer {
    background: var(--tm-color-ink);
    color: var(--tm-color-inverse);
    padding: 40px var(--tm-gutter);
}

.tm-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 24px;
}

.tm-footer__logo {
    height: 32px;
    width: auto;
    display: block;
    margin-bottom: 12px;
}

.tm-footer__desc {
    max-width: 280px;
    margin-bottom: 14px;
    font-size: var(--tm-font-size-min);
}

.tm-footer__col h4 {
    margin-bottom: 12px;
    color: var(--tm-color-paper);
    font-size: var(--tm-font-size-base);
}

.tm-footer__col a {
    display: block;
    padding: 5px 0;
    font-size: var(--tm-font-size-min);
}

.tm-footer__col a:hover {
    color: var(--tm-color-paper);
}

.tm-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid #2c2c2c;
    color: #8a857d;
    font-size: var(--tm-font-size-min);
}

.tm-newsletter {
    display: flex;
    gap: 8px;
}

.tm-newsletter input {
    flex: 1;
    min-width: 0;
    padding: 11px;
    border: 0;
    border-radius: var(--tm-radius-input);
}

@media (max-width: 980px) {
    .tm-footer {
        padding: 32px 16px;
    }

    .tm-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .tm-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================= */
/* UTILITIES
========================================================================== */

/* containers
---------------------------------------- */
.tm-centered-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--tm-container);
    margin: 0 auto;
    padding: 0 var(--tm-gutter);
}

.tm-max440 {
    max-width: 440px;
}

.tm-max640 {
    max-width: 640px;
}



.tm-max-center {
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 980px) {
    .tm-centered-content {
        padding: 0 16px;
    }
}

/* section paddings
---------------------------------------- */
.tm-padding {
    padding-top: 44px;
    padding-bottom: 44px;
}

.tm-padding-middle {
    padding-top: 34px;
    padding-bottom: 34px;
}

.tm-padding-small {
    padding-top: 24px;
    padding-bottom: 24px;
}


.tm-padding-no-bottom {
    padding-bottom: 0;
}

@media (max-width: 980px) {
    .tm-padding {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .tm-padding-middle {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .tm-padding-small {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* flex
---------------------------------------- */
.tm-flex {
    display: flex;
    flex-wrap: wrap;
}

.tm-flex-nw {
    display: flex;
}

.tm-flex-middle {
    align-items: center;
}

.tm-flex-center {
    justify-content: center;
}



.tm-flex-grow {
    flex-grow: 1;
}

/* flex grid
---------------------------------------- */
.tm-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -30px;
    row-gap: 30px;
}

.tm-grid > * {
    padding-left: 30px;
    box-sizing: border-box;
}

.tm-grid__width-1-1 {
    width: 100%;
}

.tm-grid__width-1-2 {
    width: 50%;
}

.tm-grid__width-1-3 {
    width: 33.333%;
}

.tm-grid__width-1-4 {
    width: 25%;
}

@media (max-width: 980px) {
    .tm-grid__width-1-3,
    .tm-grid__width-1-4 {
        width: 50%;
    }
}

@media (max-width: 570px) {
    .tm-grid__width-1-2,
    .tm-grid__width-1-3,
    .tm-grid__width-1-4 {
        width: 100%;
    }
}

/* gaps
---------------------------------------- */


.tm-gap12 {
    gap: 12px;
}


.tm-gap20 {
    gap: 20px;
}

/* bottom margins
---------------------------------------- */

.tm-margin-xsmall-bottom {
    margin-bottom: 10px;
}

.tm-margin-small-bottom {
    margin-bottom: 15px;
}

.tm-margin-standart-bottom {
    margin-bottom: 20px;
}


.tm-margin-xdefault-bottom {
    margin-bottom: 40px;
}

/* text helpers
---------------------------------------- */

.tm-text-body {
    color: var(--tm-color-text);
}

.tm-text-center {
    text-align: center;
}

/* WooCommerce bridge
========================================================================== */

/* plugin styles .button stronger than a single class so project buttons repeat here */
.woocommerce a.button.tm-btn,
.woocommerce button.button.tm-btn,
.woocommerce input.button.tm-btn,
.woocommerce a.button.alt.tm-btn,
.woocommerce button.button.alt.tm-btn,
.woocommerce input.button.alt.tm-btn,
.woocommerce-page button.button.alt.tm-btn {
    padding: 11px 18px;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
    font-weight: 800;
    font-size: var(--tm-font-size-base);
    /* plugin sets line-height 1 and the button came out shorter than the same link */
    line-height: 1.5;
}

.woocommerce a.button.tm-btn:hover,
.woocommerce button.button.tm-btn:hover,
.woocommerce input.button.tm-btn:hover,
.woocommerce button.button.alt.tm-btn:hover,
.woocommerce-page button.button.alt.tm-btn:hover {
    background: var(--tm-color-orange-light);
    color: var(--tm-color-paper);
}

.woocommerce button.button.alt.tm-btn:disabled,
.woocommerce button.button.alt.tm-btn:disabled[disabled] {
    padding: 11px 18px;
    background: var(--tm-color-shell);
    color: var(--tm-color-muted);
}

/* the rule above swallowed the _big modifier, restored at the same weight later */
.woocommerce .tm-btn_big,
.woocommerce a.button.tm-btn_big,
.woocommerce button.button.tm-btn_big,
.woocommerce input.button.tm-btn_big,
.woocommerce a.button.alt.tm-btn_big,
.woocommerce button.button.alt.tm-btn_big,
.woocommerce input.button.alt.tm-btn_big {
    padding: 14px 24px;
    font-size: 16px;
}

/* reviews in plugin markup and project card look */
#reviews .woocommerce-Reviews-title,
#reviews .comment_container img.avatar {
    display: none;
}

.tm-reviews .woocommerce-Reviews {
    margin-top: 25px;
}

#reviews .commentlist {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

#reviews .commentlist li {
    margin-bottom: 10px;
}

#reviews .comment_container {
    padding: 13px 15px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-small);
    background: var(--tm-color-paper);
}

/* plugin draws a second bordered box inside the card, selector repeated a class deeper */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

#reviews .woocommerce-review__author {
    color: var(--tm-color-ink);
    font-weight: 700;
    font-style: normal;
}

#reviews .woocommerce-review__published-date,
#reviews .woocommerce-review__verified {
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    font-style: normal;
}

#reviews .comment-text p {
    margin-top: 6px;
    color: var(--tm-color-text);
}

#reviews .star-rating,
#reviews .stars a {
    color: #e2a900;
}

#reviews .comment-form-rating label,
#reviews .comment-form label {
    display: block;
    margin-bottom: 5px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
    font-weight: 800;
}

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-input);
    background: var(--tm-color-paper);
}

#reviews .comment-form textarea {
    min-height: 110px;
    resize: vertical;
}

#reviews .comment-form p {
    margin-bottom: 12px;
}

.woocommerce #reviews #respond input#submit {
    padding: 11px 18px;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
    font-weight: 800;
    cursor: pointer;
}

.woocommerce #reviews #respond input#submit:hover {
    background: var(--tm-color-orange-light);
}

/* notices in plugin markup and project card look */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin-bottom: 16px;
    padding: 13px 16px;
    border: 1px solid var(--tm-color-line);
    border-left: 4px solid var(--tm-color-orange);
    border-radius: var(--tm-radius-small);
    background: var(--tm-color-soft);
    list-style: none;
}

.woocommerce-error {
    border-left-color: var(--tm-color-danger, #d33);
}

/* plugin places its notice icon absolutely counting on its own padding */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
    content: none;
}

/* notice buttons come without the theme class so the bridge never reaches them */
.woocommerce-message a.button,
.woocommerce-info a.button {
    margin-left: 10px;
    padding: 8px 16px;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
    font-weight: 800;
    font-size: var(--tm-font-size-small);
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
    background: var(--tm-color-orange-light);
    color: var(--tm-color-paper);
}

/* Variation price block sits above the buy row */
.woocommerce-variation-price {
    margin-bottom: 10px;
    font-family: var(--tm-font-display);
    font-weight: 600;
    font-size: 17px;
}

.woocommerce-variation-availability {
    margin-bottom: 10px;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

/* selectWoo on the catalogue sorting, select2.css loads after this file */
.select2-container--default .select2-selection--single.tm-select-box {
    height: auto;
    padding: 8px 34px 8px 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-small);
    background: var(--tm-color-paper);
}

.select2-container--open .select2-selection--single.tm-select-box {
    border-color: var(--tm-color-orange);
}

/* plugin squares off the edge facing the open list, this list is detached */
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single.tm-select-box,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single.tm-select-box {
    border-radius: var(--tm-radius-small);
}

.select2-container--default .select2-selection--single.tm-select-box .select2-selection__rendered {
    padding: 0;
    color: var(--tm-color-ink);
    font-size: var(--tm-font-size-base);
    line-height: 1.3;
}

.select2-container--default .select2-selection--single.tm-select-box .select2-selection__arrow {
    top: 0;
    right: 12px;
    width: 10px;
    height: 100%;
}

/* plugin builds its arrow from borders, dropped in favour of the theme chevron */
.select2-container--default .select2-selection--single.tm-select-box .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single.tm-select-box .select2-selection__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border: 2px solid var(--tm-color-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.select2-container--open .select2-selection--single.tm-select-box .select2-selection__arrow::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

/* plugin flattens the corners facing the control, both variants restored */
.select2-container--default .tm-select-drop.select2-dropdown--below,
.select2-container--default .tm-select-drop.select2-dropdown--above {
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-small);
    background: var(--tm-color-paper);
    box-shadow: var(--tm-shadow-float);
    overflow: hidden;
}

.select2-container--default .tm-select-drop.select2-dropdown--below {
    margin-top: 6px;
}

.select2-container--default .tm-select-drop.select2-dropdown--above {
    margin-top: -6px;
}

/* room at the top and bottom so a hovered row never runs into the rounded corners */
.select2-container--default .tm-select-drop .select2-results__options {
    padding: 5px 0;
}

.select2-container--default .tm-select-drop .select2-results__option {
    padding: 9px 12px;
    color: var(--tm-color-text);
    font-size: var(--tm-font-size-small);
}

/* data-selected marks the chosen option while aria-selected follows the pointer */
.select2-container--default .tm-select-drop .select2-results__option[data-selected="true"] {
    background: transparent;
    color: var(--tm-color-orange);
}

.select2-container--default .tm-select-drop .select2-results__option--highlighted[aria-selected],
.select2-container--default .tm-select-drop .select2-results__option--highlighted[data-selected] {
    background: var(--tm-color-soft);
}

/* the plugin turns the hovered row's text white, which its blue background needed */
.select2-container--default .tm-select-drop .select2-results__option--highlighted[data-selected="false"] {
    color: var(--tm-color-text);
}

/* plugin sets .quantity .qty in em with a stronger selector */
.woocommerce .quantity.tm-qty .qty {
    width: 44px;
}

.woocommerce .quantity.tm-qty_small .qty {
    width: 38px;
}

/* payment block sits on the plugin grey panel, the design has none of that */
.woocommerce-checkout #payment.woocommerce-checkout-payment {
    border-radius: 0;
    background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods.tm-radios {
    padding: 0;
    border-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods.tm-radios li {
    line-height: inherit;
}

/* plugin spaces the radio with its own margin while the card already has a gap */
.woocommerce-checkout #payment ul.payment_methods.tm-radios input {
    margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods div.payment_box {
    margin: 8px 0 0;
    padding: 12px 14px;
    border-radius: var(--tm-radius-small);
    background-color: var(--tm-color-soft);
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-small);
}

/* the bubble's pointer at the panel is part of the look we are dropping */
.woocommerce-checkout #payment ul.payment_methods div.payment_box::before {
    display: none;
}

/* rejected coupon comes as a span next to the field, not as a notice */
.tm-checkout-notice .tm-input.has-error {
    border-color: var(--tm-color-danger, #d33);
}

.tm-checkout-notice .coupon-error-notice {
    flex-basis: 100%;
    color: var(--tm-color-danger, #d33);
    font-size: var(--tm-font-size-small);
}

/* wishlist plugin restyles everything inside its wrapper including the font */
body .tinv-wishlist {
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-base);
    line-height: 1.5;
}

body .tinv-wishlist a:not(.button):not(.social) {
    color: inherit;
    text-decoration: none;
}

/* the round add to cart button is not body text so it keeps white */
body .tinv-wishlist a.tm-add:not(.button):not(.social),
body .tinv-wishlist .tm-product-card:hover a.tm-add:not(.button):not(.social) {
    color: var(--tm-color-paper);
}

/* WooCommerce styles its fields through its own variables and three classes */
:root {
    --wc-form-border-color: var(--tm-color-line);
    --wc-form-border-radius: var(--tm-radius-input);
    --wc-form-border-width: 1px;
}

/* padding is set directly in that rule, so it needs its own answer */
body .woocommerce form .form-row .input-text,
body .woocommerce form .form-row select {
    padding: 12px;
}

/* the plugin turns the border to currentColor on focus, which reads as a black frame */
body .woocommerce form .form-row .input-text:focus,
body .woocommerce form .form-row select:focus {
    border-color: var(--tm-color-orange);
}

/* plugin nudges its checkboxes with a margin meant for its own inline layout */
body .woocommerce form .form-row .input-checkbox,
body .woocommerce form .form-row .input-radio {
    margin: 0;
}

/* and it doubles the line-height of the row */
body .woocommerce form .form-row label.tm-consent {
    line-height: 1.5;
}

/* country field is a select2 box and kept the plugin padding */
.select2-container--default .select2-selection--single:not(.tm-select-box) {
    height: auto;
}

.select2-container--default .select2-selection--single:not(.tm-select-box) .select2-selection__rendered {
    padding: 12px;
    line-height: normal;
}

.select2-container--default .select2-selection--single:not(.tm-select-box) .select2-selection__arrow {
    height: 100%;
}

/* select2 moves the open dropdown into body without a width and the page gained a scrollbar */
body > .select2-container--open {
    width: auto;
}

/* and the list it opens is the plugin own, square corners and a blue highlight */
.select2-container--default .select2-dropdown:not(.tm-select-drop) {
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-small);
    background: var(--tm-color-paper);
    box-shadow: var(--tm-shadow-float);
    overflow: hidden;
}

.select2-container--default .select2-dropdown:not(.tm-select-drop) .select2-search--dropdown {
    padding: 8px;
}

.select2-container--default .select2-dropdown:not(.tm-select-drop) .select2-search__field {
    padding: 9px 12px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-input);
    font-size: var(--tm-font-size-small);
}

.select2-container--default .select2-dropdown:not(.tm-select-drop) .select2-results__options {
    padding: 4px 0;
}

.select2-container--default .select2-dropdown:not(.tm-select-drop) .select2-results__option {
    padding: 9px 12px;
    color: var(--tm-color-text);
    font-size: var(--tm-font-size-small);
}

/* the row under the pointer keeps the theme's soft background instead of the blue bar */
.select2-container--default .select2-dropdown:not(.tm-select-drop) .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-dropdown:not(.tm-select-drop) .select2-results__option--highlighted[data-selected] {
    background: var(--tm-color-soft);
    color: var(--tm-color-ink);
}

.select2-container--default .select2-dropdown:not(.tm-select-drop) .select2-results__option[aria-selected="true"],
.select2-container--default .select2-dropdown:not(.tm-select-drop) .select2-results__option[data-selected="true"] {
    background: transparent;
    color: var(--tm-color-orange);
}

/* plugin styles its widget lists for another layout with floated thumbnails */
.tm-header-cart__dropdown ul.tm-mini-cart li.tm-mini-cart__row::before,
.tm-header-cart__dropdown ul.tm-mini-cart li.tm-mini-cart__row::after {
    display: none;
}

.tm-header-cart__dropdown ul.tm-mini-cart li.tm-mini-cart__row {
    padding: 10px 0;
}

.tm-header-cart__dropdown ul.tm-mini-cart .tm-mini-cart__thumb img {
    float: none;
    width: 52px;
    height: 52px;
    margin: 0;
}

/* add to cart button states, the slot is reserved on both sides so the label stays centred */
.woocommerce button.single_add_to_cart_button.tm-btn::before,
.woocommerce button.single_add_to_cart_button.tm-btn::after {
    content: "";
    display: inline-block;
    width: 18px;
    vertical-align: middle;
}

.woocommerce button.single_add_to_cart_button.tm-btn::before {
    margin-right: 8px;
}

.woocommerce button.single_add_to_cart_button.tm-btn::after {
    margin-left: 8px;
    font-family: WooCommerce;
    font-weight: 400;
    text-align: center;
}

.woocommerce button.single_add_to_cart_button.tm-btn.loading,
.woocommerce button.single_add_to_cart_button.tm-btn.added {
    padding-right: 18px;
    opacity: 1;
}

.woocommerce button.single_add_to_cart_button.tm-btn.loading::after {
    position: static;
    top: auto;
    right: auto;
    margin-left: 8px;
    content: "\e01c";
    animation: spin 2s linear infinite;
}

/* the tick must not inherit the spin when both classes are briefly present */
.woocommerce button.single_add_to_cart_button.tm-btn.added::after {
    position: static;
    margin-left: 8px;
    content: "\e017";
    vertical-align: middle;
    animation: none;
}

/* WooCommerce prints its own view cart link which the header cart already covers */
body a.added_to_cart.wc-forward,
body a.added_to_cart {
    display: none;
}

/* FiboSearch in the header, the plugin ships a light 54px field */
.tm-search_live {
    padding: 0;
    background: none;
    border-radius: 0;
}

.tm-search_live .dgwt-wcas-search-wrapp {
    width: 240px;
    max-width: 100%;
}

/* plugin pads its form wrapper for a 40px field, the pill has to hug the input */
.tm-search_live .dgwt-wcas-sf-wrapp {
    height: 36px;
    padding: 0;
    border-radius: var(--tm-radius-pill);
    background: #242424;
}

.tm-search_live .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    height: 36px;
    /* room on the left for the magnifier, which sits inside the field */
    padding: 0 14px 0 38px;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: transparent;
    color: var(--tm-color-paper);
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-min);
    line-height: normal;
    box-shadow: none;
}

.tm-search_live .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
    background: transparent;
    box-shadow: none;
}

/* with text in it the plugin drops the left padding back to its own and the query slid under the magnifier */
.tm-search_live .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    padding-left: 38px;
}

.tm-search_live .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
    color: #8d8d8d;
    font-style: normal;
    opacity: 1;
}

/* submit turns into the magnifier, the plugin places it as a 40x50 block of its own */
.tm-search_live .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
    position: absolute;
    top: 50%;
    left: 12px;
    right: auto;
    width: 18px;
    height: 18px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: transparent;
    color: var(--tm-color-paper);
    /* dimmed until the field is pointed at, like the placeholder next to it */
    opacity: .4;
    transform: translateY(-50%);
    transition: opacity .18s ease;
}

/* pointing at the field lights it up and the text and the magnifier turn dark */
.tm-search_live .dgwt-wcas-sf-wrapp:hover,
.tm-search_live .dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp {
    background: var(--tm-color-paper);
}

.tm-search_live .dgwt-wcas-sf-wrapp:hover input[type="search"].dgwt-wcas-search-input,
.tm-search_live .dgwt-wcas-search-focused input[type="search"].dgwt-wcas-search-input {
    color: var(--tm-color-ink);
}

.tm-search_live .dgwt-wcas-sf-wrapp:hover input[type="search"].dgwt-wcas-search-input::placeholder,
.tm-search_live .dgwt-wcas-search-focused input[type="search"].dgwt-wcas-search-input::placeholder {
    color: var(--tm-color-muted);
}

/* plugin paints the icon through its pirx selectors so the dark state repeats that path */
.tm-search_live .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp:hover button.dgwt-wcas-search-submit,
.tm-search_live .dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
    color: var(--tm-color-ink);
    opacity: 1;
}

.tm-search_live .dgwt-wcas-style-pirx.dgwt-wcas-has-submit .dgwt-wcas-sf-wrapp:hover button.dgwt-wcas-search-submit svg path,
.tm-search_live .dgwt-wcas-style-pirx.dgwt-wcas-has-submit.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg path {
    fill: currentColor;
}

.tm-search_live .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:hover {
    background: transparent;
    color: var(--tm-color-orange);
}

/* plugin fills the icon path itself with a selector one class longer */
.tm-search_live .dgwt-wcas-search-submit svg,
.tm-search_live .dgwt-wcas-style-pirx.dgwt-wcas-has-submit .dgwt-wcas-search-submit svg path {
    fill: currentColor;
}

/* voice search is not part of the design */
.tm-search_live .dgwt-wcas-voice-search {
    display: none;
}

/* suggestions panel is also styled through .dgwt-wcas-details-left */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-left .dgwt-wcas-suggestions-wrapp {
    border: 0;
    border-radius: 0 0 var(--tm-radius-small) var(--tm-radius-small);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    font-family: var(--tm-font-body);
}

.dgwt-wcas-suggestion {
    font-size: var(--tm-font-size-small);
}

.dgwt-wcas-st--title {
    font-weight: 700;
}

.dgwt-wcas-suggestion-selected {
    background-color: var(--tm-color-soft);
}

/* plugin script wraps password fields and adds a reveal button without styling */
.password-input {
    position: relative;
    display: block;
}

/* one class stronger than the field bridge above, which sets the padding on all sides */
body .woocommerce form .form-row .password-input .input-text {
    padding-right: 42px;
}

.show-password-input {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: transparent;
    transform: translateY(-50%);
    opacity: .5;
    cursor: pointer;
}

.show-password-input:after {
    content: "👁";
    font-size: 14px;
    line-height: 1;
}

.show-password-input:hover,
.show-password-input.display-password {
    opacity: 1;
}

/* sign in and register come as the plugin own bordered boxes */
.woocommerce form.tm-auth-card {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-card);
}

/* plugin floats the sign in button, here the checkbox stands above it */
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    float: none;
    margin-right: 0;
}

/* Catalogue filters — Filter Everything
   ==========================================================================
   The plugin brings its own markup and hangs its AJAX on those class names, so the
   theme dresses them instead of replacing its templates. Blocks below repeat
   .tm-filter-block / .tm-filter-option from the layout. */

.tm-filters_plugin .wpc-filters-widget-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tm-filters_plugin .wpc-filters-section {
    margin: 0;
    padding: 13px;
    border: 1px solid var(--tm-color-line);
    border-radius: 14px;
}

.tm-filters_plugin .wpc-filter-header {
    margin: 0;
}

.tm-filters_plugin .wpc-filter-title {
    margin: 0 0 9px;
    color: var(--tm-color-muted);
    font-family: var(--tm-font-body);
    font-size: var(--tm-font-size-min);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.tm-filters_plugin .wpc-filters-ul-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm-filters_plugin .wpc-term-item {
    margin: 0;
    padding: 3px 0;
    font-size: var(--tm-font-size-small);
}

.tm-filters_plugin .wpc-term-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    cursor: pointer;
}

/* the plugin puts the count in its own span after the name */
.tm-filters_plugin .wpc-term-count {
    margin: 0;
    color: var(--tm-color-muted);
    font-size: var(--tm-font-size-min);
}

/* the toolbar above the grid already counts the products */
.tm-filters_plugin .wpc-posts-found {
    display: none;
}

/* inside a category the category filter can only offer that same category */
.tax-product_cat .tm-filters_plugin .wpc-filter-product_cat {
    display: none;
}

/* chips strip above the filters took height while empty */
.tm-filters_plugin .wpc-filters-widget-top-container:not(:has(.wpc-filter-chip)) {
    display: none;
}

/* a list filter with no terms says so instead of disappearing, the price keeps its range form */
.tm-filters_plugin .wpc-filter-layout-checkboxes.wpc-filter-terms-count-0 {
    display: none;
}

/* chips of the active filters, above the sidebar */
.tm-filters_plugin .wpc-filter-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.tm-filters_plugin .wpc-filter-chips-list .wpc-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-soft);
    color: var(--tm-color-text);
    font-size: var(--tm-font-size-min);
}

.tm-filters_plugin .wpc-filter-chips-list .wpc-filter-chip a {
    color: inherit;
}

.tm-filters_plugin .wpc-filter-chips-list .wpc-filter-chip:hover {
    border-color: var(--tm-color-orange);
    color: var(--tm-color-ink);
}

/* the reset link stands apart from the value chips */
.tm-filters_plugin .wpc-filter-chips-list .wpc-chip-reset-all {
    border-color: var(--tm-color-ink);
    background: transparent;
    color: var(--tm-color-ink);
    font-weight: 700;
}

.tm-filters_plugin .wpc-chip-remove-icon {
    color: var(--tm-color-muted);
    font-size: 15px;
    line-height: 1;
}

/* price is two number fields plus a jQuery UI slider */
.tm-filters_plugin .wpc-filters-range-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.tm-filters_plugin .wpc-filters-range-column {
    flex: 1;
    min-width: 0;
}

.tm-filters_plugin .wpc-filters-range-min,
.tm-filters_plugin .wpc-filters-range-max {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--tm-color-line);
    border-radius: var(--tm-radius-input);
    background: var(--tm-color-paper);
    font-size: var(--tm-font-size-small);
}

/* handles stick out half their width so the track is inset by the same amount */
.tm-filters_plugin .wpc-filters-range-slider-wrapper {
    /* the plugin also keeps a 13px right margin here, which cut the track short */
    margin: 14px 0 4px;
    padding: 0 9px;
}

/* plugin styles the slider through .wpc-filters-range-inputs */
.tm-filters_plugin .wpc-filters-range-inputs .ui-slider {
    height: 4px;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-shell);
}

.tm-filters_plugin .wpc-filters-range-inputs .ui-slider .ui-slider-range {
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-orange);
}

.tm-filters_plugin .wpc-filters-range-inputs .ui-slider .ui-slider-handle,
.tm-filters_plugin .wpc-filters-range-inputs .ui-slider-horizontal .ui-slider-handle {
    top: -7px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border: 2px solid var(--tm-color-orange);
    border-radius: 50%;
    background: var(--tm-color-paper);
    box-shadow: none;
    cursor: grab;
}

.tm-filters_plugin .wpc-filters-range-inputs .ui-slider-handle:active {
    cursor: grabbing;
}

/* on mobile the plugin folds the sidebar into a panel behind its own button */
.tm-filters_plugin .wpc-open-close-filters-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 18px;
    border: 2px solid var(--tm-color-ink);
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-paper);
    color: var(--tm-color-ink);
    font-size: var(--tm-font-size-small);
    font-weight: 800;
}

.tm-filters_plugin .wpc-filters-apply-button {
    padding: 11px 18px;
    border: 0;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-orange);
    color: var(--tm-color-paper);
    font-size: var(--tm-font-size-small);
    font-weight: 800;
}

.tm-filters_plugin .wpc-filters-close-button {
    padding: 11px 18px;
    border: 2px solid var(--tm-color-ink);
    border-radius: var(--tm-radius-pill);
    background: var(--tm-color-paper);
    color: var(--tm-color-ink);
    font-size: var(--tm-font-size-small);
    font-weight: 800;
}

/* narrow screens lay the blocks out in two columns like the theme own filter form */
@media (max-width: 900px) {
    .tm-filters_plugin .wpc-filters-widget-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tm-filters_plugin .wpc-filters-section {
        flex: 1;
        min-width: 44%;
    }
}

/* on a phone two columns leave the category names too narrow to read */
@media (max-width: 600px) {
    .tm-filters_plugin .wpc-filters-widget-wrapper {
        flex-direction: column;
    }
}

/* accessibility
---------------------------------------- */

/* WordPress and WooCommerce markup relies on this class for labels kept off-screen */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}