/* ==========================================================================
   Thanyh — Flagship design system (2026-10)
   Loaded on every page after the legacy styles. Brand: one accent (#1769e8),
   deep ink for immersive chapters, paper/mist for browsing.
   Motion: transform + opacity only.
   ========================================================================== */

:root {
    /* Colour */
    --f-ink: #070b14;
    --f-ink-2: #0c1424;
    --f-ink-3: #13203a;
    --f-on-ink: #eef3ff;
    --f-on-ink-muted: rgba(226, 234, 252, .66);
    --f-line-ink: rgba(255, 255, 255, .1);
    --f-paper: #fff;
    --f-mist: #f4f6fb;
    --f-line: #e5e9f1;
    --f-text: #0b1020;
    --f-muted: #5a6478;
    --f-blue: #1769e8;
    --f-blue-deep: #0f4fc0;
    --f-blue-hi: #7cb0ff;
    --f-blue-soft: #eaf2ff;
    --f-danger: #d92d20;
    --f-success: #12b76a;

    /* Type */
    --f-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    --f-font-display: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --f-fs-display: clamp(2.3rem, 1.24rem + 4.5vw, 5.75rem);
    --f-fs-display-md: clamp(2.02rem, 1.2rem + 3.5vw, 4.6rem);
    --f-fs-h2: clamp(1.7rem, 1.15rem + 2.1vw, 3.08rem);
    --f-fs-h2-sm: clamp(1.3rem, 1.02rem + 1vw, 1.9rem);
    --f-fs-h3: clamp(.95rem, .9rem + .2vw, 1.06rem);
    --f-fs-lede: clamp(.98rem, .91rem + .38vw, 1.22rem);
    --f-fs-body: 1rem;
    --f-fs-small: .875rem;
    --f-fs-micro: .78rem;
    --f-lh-display: 1.14;
    --f-lh-title: 1.24;
    --f-lh-body: 1.85;

    /* Space & shape */
    --f-gutter: clamp(16px, 4vw, 40px);
    --f-section: clamp(72px, 5vw + 44px, 148px);
    --f-r-sm: 10px;
    --f-r: 18px;
    --f-r-lg: 28px;
    --f-shadow: 0 1px 2px rgba(11, 16, 32, .04), 0 12px 32px rgba(11, 16, 32, .07);
    --f-shadow-lg: 0 30px 80px rgba(7, 11, 20, .22);

    /* Motion */
    --f-ease: cubic-bezier(.16, 1, .3, 1);
    --f-ease-io: cubic-bezier(.65, 0, .35, 1);
    --f-t1: .28s;
    --f-t2: .7s;
    --f-t3: 1.1s;
    --f-stagger: 75ms;
    --f-rise: 28px;
}

/* ------------------------------------------- storefront background */

/* The homepage hero background (.th-f-hero-sky, values unchanged) painted once as a
   fixed layer behind every store page. The hero keeps its own copy, untouched. */
body.home,
body.woocommerce,
body.woocommerce-cart,
body.woocommerce-checkout:not(.woocommerce-order-received) {
    background: transparent;
}

body.home #main-content,
body.woocommerce #main-content,
body.woocommerce-cart #main-content,
body.woocommerce-checkout:not(.woocommerce-order-received) #main-content {
    background: transparent;
}

body.home::before,
body.woocommerce::before,
body.woocommerce-cart::before,
body.woocommerce-checkout:not(.woocommerce-order-received)::before,
body.home::after,
body.woocommerce::after,
body.woocommerce-cart::after,
body.woocommerce-checkout:not(.woocommerce-order-received)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

body.home::before,
body.woocommerce::before,
body.woocommerce-cart::before,
body.woocommerce-checkout:not(.woocommerce-order-received)::before {
    background:
        radial-gradient(55% 60% at 22% 48%, rgba(23, 105, 232, .32), transparent 70%),
        radial-gradient(35% 40% at 85% 10%, rgba(124, 176, 255, .14), transparent 70%),
        radial-gradient(60% 50% at 50% 115%, rgba(23, 105, 232, .25), transparent 70%),
        linear-gradient(180deg, #060a12 0%, var(--f-ink) 60%, var(--f-ink-2) 100%);
}

body.home::after,
body.woocommerce::after,
body.woocommerce-cart::after,
body.woocommerce-checkout:not(.woocommerce-order-received)::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask: radial-gradient(70% 70% at 40% 45%, #000 20%, transparent 75%);
    mask: radial-gradient(70% 70% at 40% 45%, #000 20%, transparent 75%);
}

/* ------------------------------------------------------------------ base */

body {
    font-family: var(--f-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
}

::selection {
    background: var(--f-blue);
    color: #fff;
}

.th-f-skip {
    position: fixed;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: var(--f-r-sm);
    background: var(--f-ink);
    color: #fff;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform var(--f-t1) var(--f-ease);
}

.th-f-skip:focus {
    transform: none;
}

/* Saudi riyal symbol follows the text colour (works on dark and light). */
.th-price-unit {
    color: inherit;
}

.th-price-unit .th-woo-riyal-symbol {
    background: currentColor;
    -webkit-mask: url("../images/saudi-riyal-symbol.svg") center / contain no-repeat;
    mask: url("../images/saudi-riyal-symbol.svg") center / contain no-repeat;
}

/* ----------------------------------------------------------- typography */

.th-f-display,
.th-f-title,
.th-f-story-words,
.th-f-footer-mark {
    font-family: var(--f-font-display);
    font-weight: 800;
    letter-spacing: 0;
    text-wrap: balance;
}

.th-f-display {
    margin: 0;
    font-size: var(--f-fs-display);
    line-height: var(--f-lh-display);
}

.th-f-display--md {
    font-size: var(--f-fs-display-md);
}

.th-f-title {
    margin: 0;
    font-size: var(--f-fs-h2);
    font-weight: 700;
    line-height: var(--f-lh-title);
}

.th-f-title--sm {
    font-size: var(--f-fs-h2-sm);
}

.th-f-lede,
.th-f-sub {
    margin: 0;
    max-width: 38rem;
    font-size: var(--f-fs-lede);
    line-height: var(--f-lh-body);
    text-wrap: pretty;
}

.th-f-sub {
    font-size: var(--f-fs-body);
    color: var(--f-muted);
}

.th-f-dark .th-f-sub,
.th-f-dark .th-f-lede {
    color: var(--f-on-ink-muted);
}

.th-f-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--f-blue);
    font-size: var(--f-fs-small);
    font-weight: 700;
    letter-spacing: 0;
}

.th-f-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.th-f-dark .th-f-eyebrow {
    color: var(--f-blue-hi);
}

.th-f-eyebrow--pill {
    padding: 7px 14px;
    border: 1px solid rgba(124, 176, 255, .28);
    border-radius: 999px;
    background: rgba(23, 105, 232, .12);
}

.th-f-eyebrow--pill::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--f-success);
    box-shadow: 0 0 0 4px rgba(18, 183, 106, .18);
}

/* -------------------------------------------------------------- buttons */

.th-f-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.th-f-cta,
.th-f-ghost,
.th-f-btn.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--f-font);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--f-t1), color var(--f-t1), border-color var(--f-t1), transform var(--f-t1) var(--f-ease);
}

.th-f-cta {
    background: var(--f-blue);
    color: #fff;
}

.th-f-cta:hover {
    background: var(--f-blue-deep);
    color: #fff;
}

.th-f-cta--light {
    background: #fff;
    color: var(--f-ink);
}

.th-f-cta--light:hover {
    background: var(--f-blue-soft);
    color: var(--f-ink);
}

.th-f-cta:active,
.th-f-ghost:active,
.th-f-btn.button:active {
    transform: scale(.97);
}

.th-f-arrow {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--f-t1) var(--f-ease);
}

.th-f-cta:hover .th-f-arrow,
.th-f-more:hover .th-f-arrow {
    transform: translateX(-4px);
}

.th-f-ghost {
    border-color: var(--f-line);
    background: transparent;
    color: var(--f-text);
}

.th-f-ghost:hover {
    border-color: var(--f-text);
    color: var(--f-text);
}

.th-f-dark .th-f-ghost {
    border-color: rgba(255, 255, 255, .22);
    color: var(--f-on-ink);
}

.th-f-dark .th-f-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.th-f-ghost--sm,
.th-f-btn.button {
    min-height: 44px;
    padding: 0 20px;
    font-size: .92rem;
}

.th-f-btn.button {
    background: var(--f-ink);
    color: #fff;
}

.th-f-btn.button:hover {
    background: var(--f-blue);
    color: #fff;
}

.th-f-dark .th-f-btn.button {
    background: #fff;
    color: var(--f-ink);
}

.th-f-dark .th-f-btn.button:hover {
    background: var(--f-blue);
    color: #fff;
}

/* WooCommerce's own AJAX states on loop buttons. */
.add_to_cart_button.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.add_to_cart_button.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: th-x-spin .7s linear infinite;
}

.th-f-dark .add_to_cart_button.loading::after {
    border-color: rgba(7, 11, 20, .25);
    border-top-color: var(--f-ink);
}

.add_to_cart_button.added {
    background: var(--f-success) !important;
    color: #fff !important;
}

.th-f-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--f-text);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.th-f-more small {
    color: var(--f-muted);
    font-weight: 500;
}

.th-f-dark .th-f-more {
    color: var(--f-on-ink);
}

/* ------------------------------------------------------- section header */

.th-f-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: clamp(28px, 3vw, 52px);
}

.th-f-head-copy {
    display: grid;
    gap: 14px;
    max-width: 46rem;
}

/* ------------------------------------------------------------- header */

.th-topbar {
    font-size: var(--f-fs-micro);
}

.th-f-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid var(--f-line);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    transition: transform .45s var(--f-ease), background-color .35s ease, border-color .35s ease, color .35s ease;
}

.th-f-header.is-hidden {
    transform: translateY(-100%);
}

.th-f-header .th-nav-bar {
    border: 0;
    background: transparent;
}

.th-f-header .th-brand-name {
    font-family: var(--f-font-display);
    font-weight: 800;
}

.th-f-header .th-header-search {
    border-radius: 999px;
    background: var(--f-mist);
    border-color: transparent;
}

.th-f-header .th-header-search:focus-within {
    background: #fff;
    border-color: var(--f-blue);
    box-shadow: 0 0 0 4px rgba(23, 105, 232, .12);
}

.th-f-header .th-header-search input {
    background: transparent;
}

.th-f-header .th-header-icon {
    border-color: transparent;
    border-radius: 999px;
    transition: background-color var(--f-t1), color var(--f-t1);
}

.th-f-header .th-header-icon:hover {
    background: var(--f-mist);
    color: var(--f-text);
}

.th-f-header .th-cart-count {
    font-weight: 700;
}

.th-f-header .th-nav-menu {
    gap: clamp(18px, 2.4vw, 36px);
}

.th-f-header .th-nav-menu a {
    position: relative;
    color: var(--f-text);
    font-weight: 600;
}

.th-f-header .th-nav-menu a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: var(--f-blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--f-t1) var(--f-ease);
}

.th-f-header .th-nav-menu a:hover::after,
.th-f-header .th-nav-menu .current-menu-item > a::after {
    transform: scaleX(1);
}

/* Homepage: header melts into the dark hero, turns light once past it. */
.home .th-f-header.is-over-hero {
    background: rgba(7, 11, 20, .62);
    border-color: var(--f-line-ink);
    color: var(--f-on-ink);
}

.home .th-f-header.is-over-hero .th-brand-name,
.home .th-f-header.is-over-hero .th-header-icon,
.home .th-f-header.is-over-hero .th-nav-menu a,
.home .th-f-header.is-over-hero .th-menu-toggle {
    color: var(--f-on-ink);
}

.home .th-f-header.is-over-hero .th-menu-toggle span {
    background: var(--f-on-ink);
}

.home .th-f-header.is-over-hero .th-brand-logo {
    filter: brightness(0) invert(1);
}

.home .th-f-header.is-over-hero .th-header-search {
    background: rgba(255, 255, 255, .08);
}

.home .th-f-header.is-over-hero .th-header-search input,
.home .th-f-header.is-over-hero .th-header-search button {
    color: var(--f-on-ink);
}

.home .th-f-header.is-over-hero .th-header-search input::placeholder {
    color: var(--f-on-ink-muted);
}

.home .th-f-header.is-over-hero .th-header-search:focus-within {
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 4px rgba(124, 176, 255, .18);
}

.home .th-f-header.is-over-hero .th-header-icon:hover {
    background: rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------- product cards */

.th-f-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--f-line);
    border-radius: var(--f-r-lg);
    background: var(--f-paper);
    overflow: hidden;
    transition: transform .5s var(--f-ease), border-color var(--f-t1);
}

.th-f-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: var(--f-mist);
    overflow: hidden;
}

.th-f-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--f-ease);
}

.th-f-card-flag {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--f-ink);
    color: #fff;
    font-size: var(--f-fs-micro);
    font-weight: 700;
}

.th-f-card-flag--muted {
    background: rgba(255, 255, 255, .92);
    color: var(--f-text);
}

.th-f-card.is-out .th-f-card-media img {
    opacity: .55;
    filter: grayscale(.6);
}

.th-f-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 20px;
}

.th-f-card-cat {
    color: var(--f-blue);
    font-size: var(--f-fs-micro);
    font-weight: 700;
}

.th-f-card-title {
    margin: 0;
    font-size: var(--f-fs-h3);
    font-weight: 700;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.th-f-card-title a {
    color: var(--f-text);
    text-decoration: none;
}

.th-f-card-title a::after {
    /* Whole card is clickable; buttons stay above it. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.th-f-card-foot {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}

.th-f-card-foot .screen-reader-text,
.th-f-spot-buy .screen-reader-text {
    position: absolute;
}

.th-f-price {
    color: var(--f-text);
    font-family: var(--f-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.th-f-price del {
    margin-inline-end: 6px;
    color: var(--f-muted);
    font-size: .8em;
    font-weight: 500;
    opacity: .8;
}

.th-f-price ins {
    text-decoration: none;
}

.th-f-price--lg {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
}

.th-f-dark .th-f-price {
    color: #fff;
}

/* Existing badge/rating markup (thanyh_render_custom_card_meta) inside new cards. */
.th-f-card .th-card-inline-meta,
.th-f-spot .th-card-inline-meta,
.th-f-pick .th-card-inline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.th-f-card .th-card-inline-labels,
.th-f-spot .th-card-inline-labels,
.th-f-pick .th-card-inline-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.th-f-card .th-card-inline-labels span,
.th-f-spot .th-card-inline-labels span,
.th-f-pick .th-card-inline-labels span {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--f-mist);
    color: var(--f-muted);
    font-size: var(--f-fs-micro);
    font-weight: 600;
}

.th-f-dark .th-card-inline-labels span {
    background: rgba(255, 255, 255, .08);
    color: var(--f-on-ink-muted);
}

.th-f-card .th-card-inline-reviews,
.th-f-spot .th-card-inline-reviews,
.th-f-pick .th-card-inline-reviews {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--f-muted);
    font-size: var(--f-fs-micro);
}

.th-card-inline-reviews span {
    color: #f5a524;
}

.th-f-dark .th-card-inline-reviews strong {
    color: #fff;
}

@media (hover: hover) {
    .th-f-card:hover {
        transform: translateY(-6px);
        border-color: #d3dae7;
    }

    .th-f-card:hover .th-f-card-media img {
        transform: scale(1.05);
    }
}

/* --------------------------------------------------- reveal choreography */

.th-motion [data-reveal] {
    transition:
        opacity var(--f-t2) var(--f-ease),
        transform var(--f-t3) var(--f-ease);
    transition-delay: calc(var(--delay, 0) * 90ms);
}

.th-motion [data-reveal="up"]:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, var(--f-rise), 0);
}

.th-motion [data-reveal="fade"]:not(.is-in) {
    opacity: 0;
}

.th-motion [data-reveal="clip"] {
    overflow: hidden;
}

.th-motion [data-reveal="clip"]:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
}

.th-motion [data-reveal="clip"] img {
    transition: transform 1.4s var(--f-ease);
    transition-delay: calc(var(--delay, 0) * 90ms);
}

.th-motion [data-reveal="clip"]:not(.is-in) img {
    transform: scale(1.18);
}

/* Word-by-word headline: each word rises out of its own mask. */
.th-w {
    display: inline-block;
    overflow: hidden;
    padding-block: .12em;
    margin-block: -.12em;
    vertical-align: top;
}

.th-w > span {
    display: inline-block;
}

.th-motion [data-reveal="words"] {
    transition: none;
}

.th-motion [data-reveal="words"] .th-w > span {
    transform: translate3d(0, 110%, 0);
    transition: transform 1s var(--f-ease);
    transition-delay: calc(var(--i, 0) * var(--f-stagger) + var(--delay, 0) * 90ms);
}

.th-motion [data-reveal="words"].is-in .th-w > span {
    transform: none;
}

/* ------------------------------------------------------------- footer */

.th-site-footer {
    position: relative;
    overflow: hidden;
    background: var(--f-ink);
    color: var(--f-on-ink-muted);
}

.th-site-footer h4 {
    color: #fff;
    font-family: var(--f-font-display);
    font-weight: 700;
}

.th-site-footer a {
    color: var(--f-on-ink-muted);
    transition: color var(--f-t1);
}

.th-site-footer a:hover {
    color: #fff;
}

.th-site-footer .th-brand-name {
    color: #fff;
    font-family: var(--f-font-display);
    font-weight: 800;
}

.th-f-footer-mark {
    margin: 0 auto -0.28em;
    padding-inline: var(--f-gutter);
    color: transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(5rem, 24vw, 22rem);
    line-height: 1;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

/* ------------------------------------------------------- mobile header */

@media (max-width: 767px) {
    .th-f-header .th-nav-bar.is-open {
        border-top: 1px solid var(--f-line);
        background: var(--f-paper);
    }

    .home .th-f-header.is-over-hero .th-nav-bar.is-open {
        background: var(--f-ink);
        border-color: var(--f-line-ink);
    }

    .th-f-header .th-nav-bar.is-open .th-nav-menu a {
        padding-block: 14px;
        border-bottom: 1px solid var(--f-line);
        font-family: var(--f-font-display);
        font-size: 1.2rem;
    }

    .home .th-f-header.is-over-hero .th-nav-bar.is-open .th-nav-menu a {
        border-color: var(--f-line-ink);
    }

    .th-f-header .th-nav-menu a::after {
        display: none;
    }

    .th-motion .th-f-header .th-nav-bar.is-open .th-nav-menu li {
        animation: th-f-menu-in .5s var(--f-ease) both;
    }

    .th-f-header .th-nav-bar.is-open .th-nav-menu li:nth-child(2) { animation-delay: 40ms; }
    .th-f-header .th-nav-bar.is-open .th-nav-menu li:nth-child(3) { animation-delay: 80ms; }
    .th-f-header .th-nav-bar.is-open .th-nav-menu li:nth-child(4) { animation-delay: 120ms; }
    .th-f-header .th-nav-bar.is-open .th-nav-menu li:nth-child(5) { animation-delay: 160ms; }
    .th-f-header .th-nav-bar.is-open .th-nav-menu li:nth-child(n+6) { animation-delay: 200ms; }

    .th-f-cta,
    .th-f-ghost {
        min-height: 52px;
    }
}

@keyframes th-f-menu-in {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .th-f-header,
    .th-f-card,
    .th-f-card-media img,
    .th-f-arrow {
        transition: none;
    }

    .th-f-header.is-hidden {
        transform: none;
    }
}

/* Drawer + live search in the flagship language */
.th-x-drawer-head h2,
.th-x-drawer-subtotal strong {
    font-family: var(--f-font-display);
}

.th-x-drawer-checkout.th-btn {
    border-radius: 999px;
}

.th-x-suggest {
    border-radius: 20px;
}