:root {
    --brand: #cf0a4b;
    --brand-dark: #aa083d;
    --ink: #222;
    --muted: #6b7280;
    --line: #d9dde3;
    --soft: #f5f6f8;
    --panel: #fff;
    --wire: #eef0f3;
    --accent: #ffe500;
    --danger: #d60000;
    --radius: 6px;
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    --content: 1200px;

    /* --- Typography: the one scale the whole storefront is set in ----------------
       The seven steps below are the raw scale; rules never use them directly but
       through the text roles further down, so a size is changed in one place. Every
       weight is one of three. The steps are Tailwind's (xs 12 / sm 14 / base 16 / lg 18 / xl 20 /
       2xl 24 / 3xl 30), so the few Bagisto views still dressed in utility classes land
       on the same sizes. The body is 16px because the shop's buyers include older
       readers; nothing a shopper has to read goes below 14px, and 12px is kept for
       badges, captions and the copyright line. */
    --font-sans: "Poppins", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 22px;
    --fs-3xl: 26px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    --lh-tight: 1.3;
    --lh-body: 1.6;

    /* --- Text roles: THE place to change a size ----------------------------------
       Every rule in this file takes its size from one of these, never from the scale
       above directly. To make every panel title bigger, change --text-panel-title
       here and nothing else. Tablets and phones scale these down through the
       device block just below. */
    --text-page-title: var(--fs-3xl);
    /* h1: 加工デザインを設定, カート, Mens */
    --text-section-title: var(--fs-2xl);
    /* h2, section heads, the product name on its own page */
    --text-panel-title: var(--fs-lg);
    /* panel / box / filter-group / card heads: 加工する位置 */
    --text-card-title: var(--fs-lg);
    /* a product or item name inside a card or list */
    --text-lead: var(--fs-base);
    /* the description under a page title */
    --text-body: var(--fs-base);
    /* running text, table cells, list rows */
    --text-label: var(--fs-base);
    /* form labels and small bold headings */
    --text-input: 16px;
    /* inputs, selects, textareas: fixed at 16px on every device - below it iOS zooms on focus */
    --text-button: var(--fs-base);
    /* buttons and link-buttons */
    --text-button-lg: var(--fs-lg);
    /* the main call to action of a page */
    --text-choice: var(--fs-base);
    /* things picked from a set: tabs, positions, faces, sizes, steps */
    --text-nav: var(--fs-base);
    /* the header's navigation */
    --text-nav-caption: var(--fs-sm);
    /* the words under the header icons */
    --text-price: var(--fs-xl);
    /* a price in a card or a total */
    --text-price-lg: var(--fs-3xl);
    /* the price on the product page */
    --text-meta: var(--fs-sm);
    /* hints, help, breadcrumbs, table heads, codes, notes */
    --text-caption: var(--fs-xs);
    /* badges, 必須, counters, legal */
}

/* --- By device: THE place to make everything smaller on a tablet or a phone ----
   Only the raw scale changes per device, so every role above - titles, body,
   buttons, hints - steps down together and keeps its place relative to the others.
   Two things are held regardless of the device:
     - inputs stay at 16px: below that, iOS zooms the page when a field is focused;
     - nothing goes under 12px. */

/* Tablet: iPad mini (768px) up to 1024px. */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --fs-xs: 12px;
        --fs-sm: 13px;
        --fs-base: 15px;
        --fs-lg: 17px;
        --fs-xl: 19px;
        --fs-2xl: 22px;
        --fs-3xl: 26px;
    }
}

/* Phone: below 768px. */
@media (max-width: 767px) {
    :root {
        --fs-xs: 12px;
        --fs-sm: 13px;
        --fs-base: 15px;
        --fs-lg: 16px;
        --fs-xl: 18px;
        --fs-2xl: 20px;
        --fs-3xl: 24px;

        /* The header is the one place a phone needs more than the scale gives:
           two nav bars side by side and three icon captions in a row. */
        --text-nav: var(--fs-sm);
        --text-nav-caption: var(--fs-xs);
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* `html body` so it outranks Bagisto's Tailwind layer, which sets its own family on
   the body and was what the storefront actually rendered in. */
html body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
}

/* The headings, once. Page-specific rules below may move a heading's margin or
   colour, but take its size from here or from the same scale. */
h1,
h2,
h3,
h4 {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

h1 {
    font-size: var(--text-page-title);
}

h2 {
    font-size: var(--text-section-title);
}

h3 {
    font-size: var(--text-panel-title);
}

h4 {
    font-size: var(--text-card-title);
}

p {
    line-height: var(--lh-body);
}

/* Where running text has to wrap, it wraps at a phrase and never leaves two or three
   characters alone on the last line. Japanese has no spaces, so without
   `auto-phrase` a line breaks between any two characters - mid-word, as in
   「設定カ／ード」. Browsers that know neither keep their ordinary breaking. */
p,
li,
dd,
td,
label,
.sim-hint,
.sim-note {
    text-wrap: pretty;
}

:lang(ja) p,
:lang(ja) li,
:lang(ja) dd,
:lang(ja) .sim-hint,
:lang(ja) .sim-note,
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
    word-break: auto-phrase;
}

small {
    font-size: var(--text-meta);
}

/* Bagisto's views still carry its heading faces as utilities; they are the same
   family as everything else here. */
.font-poppins,
.font-dm-serif,
.font-serif {
    font-family: var(--font-sans) !important;
}

.font-semibold,
.font-bold,
.font-extrabold {
    font-weight: var(--fw-bold);
}

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

button,
input,
select,
textarea {
    font: inherit;
}

/* Form controls read at body size wherever they sit, rather than inheriting a
   smaller toolbar or table size. 16px is also the size below which iOS zooms the
   page when a field is focused. A rule on a field's own class still wins. */
input,
select,
textarea {
    font-size: var(--text-input);
}

button {
    cursor: pointer;
}

.topbar {
    background: #222;
    color: #fff;
    font-size: var(--text-meta);
}

.topbar__inner {
    max-width: var(--content);
    min-height: 34px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.topbar__links {
    display: flex;
    gap: 18px;
    white-space: nowrap;
}

.header {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.header__main {
    max-width: var(--content);
    min-height: 92px;
    margin: auto;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 190px minmax(320px, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.logo {
    display: block;
    width: 190px;
    max-width: 100%;
    line-height: 0;
}

.logo img {
    display: block;
    width: 100%;
    height: auto;
}

.search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    border: 2px solid var(--brand);
    border-radius: 5px;
    overflow: hidden;
    min-height: 48px;
    background: #fff;
}

.search input {
    border: 0;
    min-width: 0;
    outline: none;
    background: #fff;
    padding: 0 13px;
}

.search input::placeholder {
    color: #8a8f98;
}

.search button {
    border: 0;
    color: #fff;
    background: var(--brand);
    font-weight: 700;
}

.search button:hover {
    background: var(--brand-dark);
}

.search-help {
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--text-meta);
}

.header-actions {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-left: 1px solid #edf0f3;
    border-right: 1px solid #edf0f3;
}

.action {
    min-width: 84px;
    min-height: 66px;
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--text-nav-caption);
    line-height: 1.2;
    font-weight: 700;
    color: #064776;
    background: #fff;
    border-right: 1px solid #edf0f3;
}

.action:last-child {
    border-right: 0;
}

.action:hover {
    background: #f7f9fb;
}

.action__icon {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto 5px;
    color: #064776;
}

.action__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
}

.nav {
    position: relative;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.nav__inner {
    position: relative;
    max-width: var(--content);
    margin: auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #fff;
}

.nav__item {
    position: static;
}

.nav__trigger {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    background: #333;
    font-size: var(--text-nav);
    font-weight: 700;
    text-align: center;
}

.nav__item:first-child .nav__trigger {
    background: var(--brand);
}

.nav__trigger:hover,
.nav__trigger:focus-visible,
.nav__item:focus-within .nav__trigger {
    filter: brightness(0.92);
    outline: none;
}

.nav__caret {
    font-size: var(--text-caption);
    transition: transform 0.16s ease;
}

/* Workway風：PCではhover / keyboard focusだけで展開。
   JavaScriptを使わずBagistoへ移植しやすい構成。 */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        visibility 0.14s;
    background: #fff;
    border: 1px solid #cfd3d9;
    border-top: 3px solid var(--brand);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    text-align: left;
}

.nav__item:hover .mega-menu,
.nav__item:focus-within .mega-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret {
    transform: rotate(180deg);
}

.mega-menu__head {
    min-height: 48px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #f6f7f8;
    border-bottom: 1px solid var(--line);
}

.mega-menu__title {
    font-size: var(--text-panel-title);
    font-weight: 700;
}

.mega-menu__all {
    color: var(--brand);
    font-size: var(--text-meta);
    font-weight: 700;
}

.mega-menu__body {
    padding: 17px 18px 20px;
}

.mega-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 14px;
}

.mega-link {
    min-height: 38px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #e1e4e8;
    background: #fff;
    color: #333;
    font-size: var(--text-button);
    font-weight: 700;
}

.mega-link:hover,
.mega-link:focus-visible {
    border-color: #b8bdc5;
    background: #f5f6f8;
    color: var(--brand);
    outline: none;
}

.mega-link span:last-child {
    color: #9298a1;
}

.mega-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.mega-category {
    min-width: 0;
}

.mega-category__title {
    display: block;
    padding: 0 0 7px;
    margin-bottom: 6px;
    border-bottom: 2px solid #333;
    font-size: var(--text-panel-title);
    font-weight: 700;
}

.mega-category__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-category__list a {
    min-height: 30px;
    padding: 5px 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4a4f57;
    font-size: var(--text-body);
    border-bottom: 1px dotted #d7dae0;
}

.mega-category__list a:hover,
.mega-category__list a:focus-visible {
    color: var(--brand);
    outline: none;
}

.mega-category__list a::before {
    content: "›";
    color: #9ba0a7;
    font-weight: 700;
}

.breadcrumb {
    max-width: var(--content);
    margin: 0 auto;
    padding: 12px 20px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.page {
    max-width: var(--content);
    margin: 0 auto 56px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* ===== Catalog filter transition =====
   Filters, sort, paging and the view switcher swap `.page` in place instead of
   reloading the document. The old results stay on screen, dimmed, until the new
   ones arrive, so nothing collapses and the scroll position never jumps. */
.page>.sidebar,
.page>.main {
    transition: opacity 0.18s ease;
}

.page.is-loading>.sidebar,
.page.is-loading>.main {
    opacity: 0.45;
    pointer-events: none;
}

/* A thin progress bar, pinned to the viewport, is the only thing that moves
   while the next page is in flight. */
.page.is-loading::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--brand);
    z-index: 55;
    animation: workway-progress 1.4s ease-out infinite;
}

.page.is-entering>.main {
    animation: workway-fade-in 0.22s ease-out;
}

@keyframes workway-progress {
    0% {
        width: 0;
    }

    60% {
        width: 72%;
    }

    100% {
        width: 92%;
    }
}

@keyframes workway-fade-in {
    from {
        opacity: 0.35;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .page>.sidebar,
    .page>.main {
        transition: none;
    }

    .page.is-loading::before,
    .page.is-entering>.main {
        animation: none;
    }
}

.sidebar {
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow);
}

.side-block+.side-block {
    border-top: 1px solid var(--line);
}

.side-title {
    padding: 13px 15px;
    background: #333;
    color: #fff;
    font-size: var(--text-panel-title);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.side-title--brand {
    background: var(--brand);
}

.side-body {
    padding: 8px 14px 14px;
}

.side-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-list li {
    border-bottom: 1px solid #eceef1;
}

.side-list li:last-child {
    border-bottom: 0;
}

.side-list a,
.side-check {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--text-choice);
}

.side-list a:hover {
    color: var(--brand);
}

.side-check {
    justify-content: flex-start;
    cursor: pointer;
}

.side-check input {
    accent-color: var(--brand);
}

.count {
    color: #8b9098;
    font-size: var(--text-meta);
}

.side-more {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: #444;
    border-radius: 3px;
    font-size: var(--text-button);
}

.main {
    min-width: 0;
    flex: 1 1 0%;
}

.wire-note {
    border: 1px dashed #aeb4bd;
    background: #fafbfc;
    color: #656b74;
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: var(--text-caption);
}

.notice {
    min-height: 46px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e4e6e9;
    background: #fafafa;
    margin-bottom: 18px;
    font-size: var(--text-meta);
}

.notice strong {
    color: var(--brand);
}

.title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 12px;
}

h1 {
    margin: 0;
    font-size: var(--text-page-title);
    line-height: 1.25;
}

.title-sub {
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--text-lead);
}

.keyword-box {
    border: 1px solid var(--line);
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 18px;
}

.keyword-label {
    display: inline-block;
    margin-right: 10px;
    font-size: var(--text-label);
    font-weight: 700;
}

.tag {
    display: inline-block;
    padding: 5px 10px;
    margin: 3px;
    background: var(--soft);
    border: 1px solid #e1e4e8;
    border-radius: 999px;
    font-size: var(--text-choice);
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 11px 0;
    margin-bottom: 18px;
    font-size: var(--text-meta);
}

.toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar select {
    height: 36px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 0 28px 0 10px;
}

.view-button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: #fff;
}

.view-button.active {
    color: #fff;
    background: #333;
    border-color: #333;
}

.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.product {
    position: relative;
    min-width: 0;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.product__image {
    aspect-ratio: 1/1;
    background: linear-gradient(135deg,
            #f5f6f7 25%,
            #eceef1 25%,
            #eceef1 50%,
            #f5f6f7 50%,
            #f5f6f7 75%,
            #eceef1 75%);
    background-size: 26px 26px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818792;
    font-size: var(--text-meta);
    font-weight: 700;
}

.product__body {
    padding: 11px 11px 9px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.product__maker {
    min-height: 18px;
    color: #60656e;
    font-size: var(--text-meta);
    margin-bottom: 3px;
}

.product__name {
    min-height: 48px;
    font-size: var(--text-card-title);
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 7px;
}

/* The item number is what a buyer quotes back to the shop, so it is set as a label
   and a value on a tinted strip rather than as the small print it used to be. */
.product__code {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 3px 8px;
    border-left: 3px solid var(--brand);
    border-radius: 2px;
    background: var(--soft);
    color: #4a4f57;
    font-size: var(--text-meta);
}

.product__code strong {
    color: var(--ink);
    font-size: var(--text-body);
    letter-spacing: 0.02em;
}

/* The colours a configurable product comes in - its alias colours - as small
   circles; a ring keeps white and pale ones visible on the white card. */
.product__colours {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.product__colour {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--swatch, #c9c9c9);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.product__price {
    margin-top: auto;
    font-size: var(--text-body);
}

.product__price strong {
    color: #c80030;
    font-size: var(--text-price);
}

.product__tax {
    margin-left: 3px;
    color: #6d737b;
    font-size: var(--text-meta);
}

/* Under the price on a card whose product goes on sale later. */
.product__launch {
    margin-top: 4px;
    color: #8a5a00;
    font-size: var(--text-meta);
    font-weight: 700;
}

.product__stock {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #d7d9dd;
    font-size: var(--text-meta);
    color: #444;
    display: flex;
    justify-content: space-between;
}

.stock-number {
    font-weight: 700;
}

.product__actions {
    padding: 0 11px 11px;
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 7px;
}

.detail-button {
    border: 1px solid #333;
    background: #333;
    color: #fff;
    min-height: 44px;
    font-size: var(--text-button);
    font-weight: 700;
}

.fav-button {
    border: 1px solid var(--line);
    background: #fff;
    font-size: 20px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 28px;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    background: #fff;
}

.page-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.implementation {
    max-width: var(--content);
    margin: 0 auto 34px;
    padding: 0 20px;
}

.implementation__box {
    border: 1px dashed #9ba1aa;
    background: #f7f8fa;
    padding: 14px 16px;
    font-size: var(--text-meta);
    color: #4b5159;
}

.implementation__box strong {
    color: #222;
}

footer {
    margin-top: 40px;
    background: #2c2c2c;
    color: #fff;
}

.footer-inner {
    max-width: var(--content);
    margin: auto;
    padding: 28px 20px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 36px;
    font-size: var(--text-meta);
}

.footer-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 2;
    color: #ddd;
}

.copyright {
    border-top: 1px solid #444;
    text-align: center;
    padding: 12px 20px;
    font-size: var(--text-caption);
    color: #bbb;
}

.mobile-filter {
    display: none;
}

@media (max-width: 1024px) {
    .header__main {
        grid-template-columns: 150px 1fr;
    }

    .header-actions {
        grid-column: 1/-1;
        justify-content: flex-end;
        border-top: 1px solid var(--line);
        padding-top: 10px;
    }

    .products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .topbar__links {
        display: none;
    }

    .header__main {
        grid-template-columns: 130px 1fr;
        gap: 12px;
    }

    .logo {
        width: 130px;
    }

    .search {
        grid-column: 1/-1;
        grid-template-columns: minmax(0, 1fr) 68px;
    }

    .header-actions {
        grid-row: 1;
        grid-column: 2;
        border-top: 0;
        padding-top: 0;
    }

    .nav__inner {
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav__trigger {
        min-height: 44px;
        padding: 10px 8px;
        font-size: var(--text-nav);
    }

    .mega-menu {
        left: 12px;
        right: 12px;
        max-height: 66vh;
        overflow: auto;
    }

    .mega-brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mega-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .mobile-filter {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    .mobile-filter button {
        flex: 1;
        height: 42px;
        background: #fff;
        border: 1px solid #bbb;
        font-weight: 700;
    }

    .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .nav__inner {
        padding: 0 12px;
    }

    .nav__trigger {
        padding: 9px 4px;
        font-size: var(--text-nav);
        gap: 4px;
    }

    .mega-menu {
        left: 12px;
        right: 12px;
    }

    .mega-menu__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .mega-menu__body {
        padding: 12px;
    }

    .mega-brand-grid,
    .mega-category-grid {
        grid-template-columns: 1fr;
    }

    .topbar__inner {
        padding: 0 12px;
    }

    .header__main {
        padding: 12px;
    }

    .breadcrumb {
        padding: 10px 12px;
    }

    .page {
        padding: 0 12px;
    }

    .implementation {
        padding: 0 12px;
    }

    .header-actions {
        gap: 0;
    }

    /* A caption under an icon, on a phone: the one place 12px is right for a
       label, so the three of them keep to one line each. */
    .action {
        min-width: 62px;
        padding-left: 6px;
        padding-right: 6px;
        font-size: var(--text-nav-caption);
        white-space: nowrap;
    }

    .action__icon {
        font-size: 20px;
    }

    .search {
        grid-template-columns: minmax(0, 1fr) 58px;
    }

    .search input {
        padding: 0 8px;
        font-size: var(--text-input);
    }

    .search button {
        font-size: var(--text-button);
    }

    .title-row {
        display: block;
    }

    h1 {
        font-size: var(--text-page-title);
    }

    .toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .toolbar__right {
        width: 100%;
        justify-content: flex-end;
    }

    .products {
        gap: 10px;
    }

    .product__body {
        padding: 9px;
    }

    .product__actions {
        padding: 0 9px 9px;
    }

    .footer-inner {
        padding: 24px 12px;
    }
}

/* ==========================================================================
   Bagisto integration additions
   Styles below are not part of the wireframe: they cover states the static
   mockup did not have (real images, links instead of buttons, cart badge,
   sale prices, empty states).
   ========================================================================== */

.action {
    position: relative;
    text-decoration: none;
}

.action__badge {
    position: absolute;
    top: 4px;
    right: 14px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: var(--text-caption);
    font-weight: 700;
    line-height: 18px;
}

.product__link {
    display: block;
    color: inherit;
}

.product__link:hover .product__name {
    color: var(--brand);
}

.product__image {
    position: relative;
    overflow: hidden;
}

.product__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.product__price del {
    color: #8b9098;
    font-size: var(--text-meta);
    font-weight: 400;
    margin-right: 5px;
}

.detail-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/*
 * The simulator, straight off the card. Under the two buttons and across both of
 * their columns: it is the secondary of the two errands somebody has on a listing -
 * open the product, or go and decorate it - and putting it beside "View Details"
 * would have made every card two half-width buttons wide enough for neither label.
 */
.design-button {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    border: 1px solid var(--brand);
    border-radius: 2px;
    background: #fff;
    color: var(--brand);
    font-size: var(--text-button);
    font-weight: 700;
    text-decoration: none;
}

/* The brush that marks every way into the simulator - see `icon-customize.blade.php`. */
.icon-customize {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.design-button:hover {
    background: var(--brand);
    color: #fff;
}

.detail-button:hover {
    background: #111;
    border-color: #111;
}

.fav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b9098;
}

.fav-button:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: inherit;
    text-decoration: none;
}

.page-btn:hover:not(.active):not(.disabled) {
    background: var(--soft);
}

.page-btn.disabled {
    color: #b9bec5;
    pointer-events: none;
}

.empty-state {
    border: 1px dashed #c3c8cf;
    background: #fafbfc;
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: var(--text-body);
}

.side-list a span:last-child {
    color: #9ba0a7;
}

.side-list a.is-active {
    color: var(--brand);
    font-weight: 700;
}

.mega-link.is-active {
    color: var(--brand);
    border-color: var(--brand);
}

.toolbar form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-filter a {
    flex: 1;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #bbb;
    font-weight: 700;
    font-size: var(--text-meta);
    text-decoration: none;
}

.fav-button.is-active {
    color: var(--brand);
    border-color: var(--brand);
}

/* List mode: one product per row with the image on the leading edge. */
.products--list {
    grid-template-columns: 1fr;
}

.products--list .product {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 190px;
    align-items: stretch;
}

.products--list .product__link {
    display: grid;
    grid-column: 1/3;
    grid-template-columns: 150px minmax(0, 1fr);
}

.products--list .product__image {
    border-bottom: 0;
    border-right: 1px solid var(--line);
}

.products--list .product__name {
    min-height: 0;
}

.products--list .product__actions {
    grid-column: 3;
    align-content: center;
    padding: 11px;
}

@media (max-width: 820px) {

    .products--list .product,
    .products--list .product__link {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .products--list .product__actions {
        grid-column: 1/-1;
        grid-template-columns: 1fr 38px;
    }
}

/*
 * The search input lives in a wrapper div together with its help text, so the
 * full-width mobile rule has to target the wrapper - the grid item - and not the
 * form itself, otherwise the field collapses to the logo column.
 */
@media (max-width: 820px) {
    .header__search {
        grid-column: 1/-1;
    }
}

/* Keep the notice label on one line; only its message should wrap. */
.notice strong {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Breadcrumb trail, category banner and CMS rich text on the listing pages. */
.breadcrumb a {
    color: var(--muted);
}

.breadcrumb a:hover {
    color: var(--brand);
}

.breadcrumb__sep {
    margin: 0 6px;
    color: #b3b8bf;
}

.category-banner {
    max-width: var(--content);
    margin: 0 auto 18px;
    padding: 0 20px;
}

.category-banner img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}

.rich-text {
    margin-bottom: 18px;
    font-size: var(--text-body);
    line-height: 1.9;
    color: #4a4f57;
}

.rich-text :first-child {
    margin-top: 0;
}

.rich-text :last-child {
    margin-bottom: 0;
}

.suggest-link {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 520px) {
    .category-banner {
        padding: 0 12px;
    }
}

/*
 * Mobile filter drawer. The sidebar is hidden below 820px, so the two "search by"
 * buttons target its blocks by anchor and CSS reveals just the requested one - the
 * wireframe's drawer behaviour without any JavaScript.
 */
@media (max-width: 820px) {

    .sidebar:target,
    .sidebar:has(.side-block:target) {
        display: block;
        margin-bottom: 14px;
    }

    .sidebar:has(.side-block:target) .side-block:not(:target) {
        display: none;
    }

    .side-block:target .side-title::after {
        content: "表示中";
        font-size: var(--text-caption);
        font-weight: 700;
        opacity: 0.75;
    }
}

/* ==========================================================================
   Sidebar filter panel
   Bagisto's stock filter panel is a Vue drawer; this is the server-rendered
   equivalent, built out of the wireframe's own sidebar primitives.
   ========================================================================== */

.side-title__count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: var(--text-caption);
    line-height: 20px;
    text-align: center;
}

.side-check {
    gap: 8px;
    color: #3f444b;
}

.side-check:hover {
    color: var(--brand);
}

.side-check input {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin: 0;
}

.side-body details {
    margin-top: 4px;
}

.side-body summary {
    list-style: none;
    cursor: pointer;
    text-align: center;
}

.side-body summary::-webkit-details-marker {
    display: none;
}

.side-body summary:hover {
    border-color: #b8bdc5;
    background: var(--soft);
}

.side-body details[open] summary {
    margin-bottom: 4px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Color / swatch-type filter options: a grid of clickable color dots instead of a
   checkbox list. The checkbox itself stays - just made invisible and full-bleed so
   the whole dot is the click target, and `:has()` lights up the ring on check. */
.side-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 2px;
}

.color-swatch {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    cursor: pointer;
}

.color-swatch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.color-swatch__dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 2px #fff;
}

.color-swatch:hover .color-swatch__dot {
    border-color: var(--brand);
}

.color-swatch:has(input:checked) .color-swatch__dot {
    border-color: var(--brand);
    box-shadow:
        inset 0 0 0 2px #fff,
        0 0 0 2px var(--brand);
}

/* Price range: two overlapping <input type=range> with a painted fill between the
   handles. `renderPriceSlider()` in the sidebar script keeps the fill + labels in
   sync as the handles move, then the shared `change` listener applies it on release. */
.price-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 2px 14px;
    font-size: var(--text-meta);
    font-weight: 700;
}

.price-values span:nth-child(2) {
    color: var(--muted);
    font-weight: 400;
    font-size: var(--text-meta);
}

.price-slider {
    position: relative;
    height: 20px;
    padding: 0 2px;
}

.price-slider__track,
.price-slider__range {
    position: absolute;
    top: 50%;
    height: 4px;
    border-radius: 2px;
    transform: translateY(-50%);
}

.price-slider__track {
    left: 2px;
    right: 2px;
    background: var(--line);
}

.price-slider__range {
    background: var(--brand);
}

.price-slider input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.price-slider input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}

.price-slider input[type="range"]::-moz-range-track {
    background: transparent;
}

.price-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    margin-top: 0;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.price-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-meta);
    color: var(--muted);
}

.sidebar-head__clear {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

.sidebar-head__clear:hover {
    color: var(--brand-dark, var(--brand));
}

.side-actions {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-top: 1px solid var(--line);
    background: var(--soft);
}

.filter-clear {
    text-align: center;
    color: var(--muted);
    font-size: var(--text-button);
    text-decoration: underline;
}

.filter-clear:hover {
    color: var(--brand);
}

/* ==========================================================================
   Catalog restyle - filter column and product thumbnails
   Shape and sizing follow the Modista reference the shop picked on 23.09
   (modista-demo.myshopify.com/collections/easy-shirts); the colours stay the
   house ones. Declared after every earlier catalog rule on purpose, so it wins
   on order without raising specificity. Scoped to `#filters` for the sidebar,
   because the account menu borrows `.sidebar` / `.side-block` too.
   ========================================================================== */
/* Only the listings - `.page` is also the shell of the home page, sign-in and cart. */
.page:has(> #filters) {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
}

/* --- the filter column: no box, groups divided by a hairline ------------------ */
#filters {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebar-title {
    margin: 0 0 10px;
    font-size: var(--text-panel-title);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
}

#filters .sidebar-head {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: var(--text-body);
}

#filters .side-block {
    border-top: 1px solid var(--line);
}

#filters .side-block:last-of-type {
    border-bottom: 1px solid var(--line);
}

#filters .side-block+.side-block {
    border-top: 1px solid var(--line);
}

#filters .side-title,
#filters .side-title--brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 26px 10px 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--text-panel-title);
    font-weight: 700;
    line-height: 1.5;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

#filters .side-title::-webkit-details-marker {
    display: none;
}

#filters .side-title:hover {
    color: var(--brand);
}

/* The fold arrow: a chevron that points up while the group is open. */
#filters .side-title::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-15%) rotate(-135deg);
    transition: transform 0.2s ease;
}

#filters .side-block:not([open]) .side-title::after {
    transform: translateY(-65%) rotate(45deg);
}

#filters .side-title__count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: var(--text-caption);
    line-height: 22px;
}

#filters .side-body {
    padding: 2px 0 14px;
}

#filters .side-list li {
    border-bottom: 0;
}

#filters .side-list a,
#filters .side-check {
    min-height: 0;
    padding: 0 0 12px;
    font-size: var(--text-choice);
    line-height: 1.3;
    color: #111;
}

#filters .side-list a:hover,
#filters .side-check:hover {
    color: var(--brand);
}

#filters .side-list a.is-active {
    color: var(--brand);
    font-weight: 700;
}

#filters .side-check {
    gap: 10px;
}

#filters .side-check input {
    width: 18px;
    height: 18px;
}

#filters .side-more {
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: var(--text-button);
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
}

#filters .side-body summary:hover {
    background: none;
}

#filters .side-more {
    cursor: pointer;
}

/* An opened group: all its options in one box about ten rows high (a row is the label's 1.3
   line-height plus its 12px gap); the rest scroll inside it so the groups below stay in reach. */
#filters .side-options.is-open {
    max-height: calc(10 * (1.3em + 12px));
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: var(--text-choice);
}

/* Colour: 33px rings, a hairline round each and a gap between ring and dot. */
#filters .side-swatches {
    gap: 6px;
    padding: 0 0 4px;
}

#filters .color-swatch {
    width: 36px;
    height: 36px;
}

#filters .color-swatch__dot {
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 3px #fff;
}

#filters .color-swatch:hover .color-swatch__dot {
    border-color: #111;
}

#filters .color-swatch:has(input:checked) .color-swatch__dot {
    border: 2px solid var(--brand);
    box-shadow: inset 0 0 0 3px #fff;
}

#filters .price-values {
    padding: 0 0 14px;
    font-size: var(--text-body);
    font-weight: 700;
}

#filters .side-actions {
    padding: 14px 0 0;
    border-top: 0;
    background: transparent;
}

#filters .filter-clear {
    font-size: var(--text-button);
}

/* --- product thumbnails: no card frame, a soft photo plate, text beneath ------ */
.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.product {
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: box-shadow 0.4s ease;
}

/* The halo Modista lights on hover, drawn just outside the card. */
.product::before {
    content: "";
    position: absolute;
    inset: -12px;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.product:hover::before {
    opacity: 1;
}

.product__image {
    aspect-ratio: 8/9;
    border-bottom: 0;
    background: var(--soft);
}

.product__image img {
    background: transparent;
    mix-blend-mode: multiply;
    transition: transform 0.5s ease;
}

.product:hover .product__image img {
    transform: scale(1.03);
}

.product__body {
    padding: 10px 0 12px;
}

.product__maker {
    min-height: 17px;
    margin: 0 0 4px;
    font-size: var(--text-meta);
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #666;
}

.product__name {
    min-height: 0;
    margin: 0 0 8px;
    padding: 0;
    font-size: var(--text-card-title);
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0.3px;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product__code {
    margin-bottom: 8px;
}

.product__price {
    font-size: var(--text-body);
}

.product__price strong {
    font-size: var(--text-price);
    font-weight: 700;
}

.product__price del {
    font-size: var(--text-meta);
}

/* Always two lines tall: a one-line name leaves the second line blank, so every
   card's code, price and buttons line up across the row. */
.product__name {
    height: 46px;
    min-height: 46px;
}

/* --- the photograph and what sits on it --------------------------------------- */
.product__media {
    position: relative;
    overflow: hidden;
}

.product__image {
    display: flex;
    width: 100%;
}

/* The wishlist heart: a white disc in the top corner of the photograph. */
.fav-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    font-size: 20px;
}

.fav-button:hover,
.fav-button.is-active {
    border: 0;
}

/* The buttons, across the foot of the photograph. */
.product__actions {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
}

.detail-button,
.design-button {
    min-height: 46px;
    border-radius: 0;
    font-size: var(--text-button);
}

.design-button {
    background: #fff;
}

/* Where there is a pointer, they wait for it: hidden until the photograph is under
   it, then they rise into place. A key that focuses one shows them too. */
@media (hover: hover) {
    .product__actions {
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    .product__media:hover .product__actions,
    .product__actions:focus-within {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* A touch screen has no hover to wait for, so the buttons come out of the
   photograph and sit under the text, always shown. `display:contents` lets them
   join the card's own column; the heart stays on the photograph. */
@media (hover: none) {
    .product__media {
        display: contents;
    }

    .product__image {
        position: relative;
    }

    .product__actions {
        position: static;
        order: 3;
    }

    .product__link {
        order: 2;
    }
}

/* List mode: photograph, text and buttons side by side, the buttons always shown.
   One column, whatever the grid above asks for at this width. */
.products.products--list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.products--list .product {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 190px;
    align-items: center;
    gap: 0 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.products--list .product::before {
    display: none;
}

.products--list .product__media {
    display: contents;
}

.products--list .product__image {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    aspect-ratio: 5/6;
    border-right: 0;
}

.products--list .product__link {
    grid-column: 2;
    grid-row: 1;
    display: block;
}

.products--list .product__body {
    padding: 0;
}

.products--list .product__actions {
    grid-column: 3;
    grid-row: 1;
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.products--list .fav-button {
    top: 26px;
    left: 100px;
    right: auto;
}

@media (max-width: 1024px) {
    .page:has(> #filters) {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 28px;
    }

    .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 820px) {
    .page:has(> #filters) {
        grid-template-columns: 1fr;
    }

    .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
    }

    .product::before {
        display: none;
    }

    .products--list .product {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 12px 14px;
    }

    .products--list .product__actions {
        grid-column: 1/-1;
        grid-row: 2;
    }

    .products--list .fav-button {
        left: 60px;
    }

    #filters {
        padding: 14px 16px;
        border: 1px solid var(--line);
        background: #fff;
    }
}

@media (max-width: 520px) {
    .product__name {
        font-size: var(--text-card-title);
        line-height: 21px;
        height: 42px;
        min-height: 42px;
    }

    .product__maker {
        font-size: var(--text-meta);
    }

    .detail-button,
    .design-button {
        min-height: 44px;
        font-size: var(--text-button);
    }

    .product__code {
        padding: 2px 6px;
        font-size: var(--text-meta);
        line-height: 1.35;
    }

    .product__code strong {
        font-size: var(--text-body);
        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   Product detail page
   Lifted from sample/フロントサイト/商品詳細～加工シミュレーター～カート/商品明細.html,
   limited to the rules the wireframe adds on top of the shared chrome above.
   ========================================================================== */
/* ===== 商品詳細ページ固有（Bagisto標準PDPをベースに最小追加） ===== */
.product-breadcrumb {
    max-width: var(--content);
    margin: 0 auto;
    padding: 12px 20px;
    font-size: var(--text-meta);
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.product-breadcrumb a:hover {
    color: var(--brand);
}

.pdp-shell {
    max-width: var(--content);
    margin: 0 auto 64px;
    padding: 0 20px;
}

.pdp-top {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(370px, 0.96fr);
    gap: 34px;
    align-items: start;
}

.gallery {
    min-width: 0;
}

.gallery-main {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid var(--line);
    background: #f5f6f8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-main svg {
    width: 76%;
    height: 76%;
    color: #8d939c;
}

.gallery-main .view-label {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #d9dde3;
    font-size: var(--text-caption);
    font-weight: 700;
    color: #5f6670;
}

.gallery-main .zoom-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: var(--text-meta);
    color: #717780;
}

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.thumb {
    min-width: 0;
    aspect-ratio: 1/1;
    border: 1px solid var(--line);
    background: #fafafa;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a8;
}

.thumb:hover,
.thumb.active {
    border: 2px solid var(--brand);
    background: #fff;
}

.thumb svg {
    width: 72%;
    height: 72%;
}

.thumb span {
    position: absolute;
    bottom: 3px;
    right: 4px;
    font-size: var(--text-caption);
    color: #777;
    background: #fff;
    padding: 0 2px;
}

.summary {
    min-width: 0;
}

.summary__maker {
    font-size: var(--text-meta);
    color: #5d636b;
    font-weight: 700;
    margin-bottom: 6px;
}

.summary h1 {
    font-size: var(--text-section-title);
    line-height: 1.45;
    margin: 0 0 8px;
}

.summary__meta {
    font-size: var(--text-meta);
    color: #777d86;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.summary__code {
    padding: 4px 10px;
    border-left: 3px solid var(--brand);
    border-radius: 2px;
    background: var(--soft);
    font-size: var(--text-meta);
    color: #4a4f57;
}

.summary__code strong {
    font-size: var(--text-card-title);
    letter-spacing: 0.02em;
    color: var(--ink);
}

.summary__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 8px;
}

.summary__badge {
    font-size: var(--text-caption);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 2px;
}

.summary__badge--stock {
    background: #e8f5ec;
    color: #226a39;
}

.price-box {
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--line);
}

.price-label {
    font-size: var(--text-meta);
    color: #666;
}

.price-main {
    color: #c80030;
    font-size: var(--text-price-lg);
    line-height: 1.2;
    font-weight: 700;
}

.price-main small {
    font-size: var(--text-meta);
    color: #626870;
    font-weight: 500;
}

.price-sub {
    font-size: var(--text-meta);
    color: #656b74;
    margin-top: 5px;
}

/* 上代 / ワクサポ希望価格 under the selling price (sprint05/20167 D12). */
.price-retail {
    margin-top: 4px;
    font-size: var(--text-meta);
    color: #444a52;
}

.price-retail[hidden] {
    display: none;
}

.price-retail__label {
    margin-right: 6px;
    font-weight: 600;
}

.price-retail small {
    margin-left: 4px;
    color: #626870;
}

.delivery-box {
    margin: 12px 0;
    padding: 10px 12px;
    border-left: 4px solid var(--brand);
    background: #faf4f6;
    font-size: var(--text-meta);
}

.delivery-box strong {
    color: var(--brand);
}

.field-block {
    padding: 12px 0;
    border-top: 1px solid #eceef1;
}

.field-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: var(--text-label);
    font-weight: 700;
}

/* Scoped to a span: Bagisto puts `class="required"` on its own <label> elements. */
span.required {
    display: inline-block;
    padding: 2px 5px;
    background: var(--brand);
    color: #fff;
    font-size: var(--text-caption);
    border-radius: 2px;
    margin-left: 4px;
    vertical-align: 1px;
}

.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.swatch {
    border: 1px solid #d5d9de;
    background: #fff;
    border-radius: 999px;
    min-height: 36px;
    padding: 6px 16px 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: var(--text-meta);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.swatch.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
    color: #111;
    font-weight: 700;
}

.swatch-dot {
    width: 18px;
    height: 18px;
    border: 1px solid #aaa;
    border-radius: 50%;
    display: inline-block;
}

.dot-navy {
    background: #23364f;
}

.dot-gray {
    background: #8e9498;
}

.dot-sand {
    background: #b8a88c;
}

.dot-black {
    background: #202124;
}

.size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.size-btn {
    min-width: 48px;
    min-height: 36px;
    padding: 6px 16px;
    border: 1px solid #d5d9de;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: var(--text-meta);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.size-btn.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
    color: #111;
    font-weight: 700;
}

.size-btn.disabled {
    background: #f0f1f3;
    color: #a2a7ae;
    text-decoration: line-through;
    cursor: not-allowed;
}

.stock-inline {
    font-size: var(--text-meta);
    color: #545a62;
    margin-top: 8px;
}

.stock-inline strong {
    color: #19743a;
}

.qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-control {
    display: grid;
    grid-template-columns: 36px 68px 36px;
    height: 38px;
}

.qty-control button,
.qty-control input {
    border: 1px solid #cfd3d8;
    background: #fff;
    text-align: center;
}

.qty-control input {
    border-left: 0;
    border-right: 0;
    width: 68px;
}

.favorite-small {
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: var(--text-meta);
    font-weight: 700;
    color: #064776;
}

.anchor-nav {
    margin: 34px 0 18px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr;
}

.anchor-nav a {
    padding: 12px 8px;
    text-align: center;
    font-size: var(--text-choice);
    font-weight: 700;
    border-right: 1px solid var(--line);
    background: #fafafa;
}

.anchor-nav a:last-child {
    border-right: 0;
}

.anchor-nav a:hover {
    background: #fff;
    color: var(--brand);
}

.detail-section {
    margin-top: 30px;
    scroll-margin-top: 14px;
}

.section-title {
    margin: 0 0 13px;
    border-left: 5px solid var(--brand);
    padding: 7px 0 7px 11px;
    font-size: var(--text-section-title);
    line-height: 1.2;
}

.section-sub {
    font-size: var(--text-lead);
    color: #686e76;
    margin: -5px 0 12px 16px;
}

.spec-table,
.size-table,
.stock-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-meta);
}

.spec-table th,
.spec-table td,
.size-table th,
.size-table td,
.stock-table th,
.stock-table td {
    border: 1px solid #d8dce1;
    padding: 10px 11px;
    text-align: left;
    vertical-align: middle;
}

.spec-table th {
    width: 180px;
    background: #f4f5f7;
    font-weight: 700;
}

.size-table th,
.stock-table th {
    background: #f2f3f5;
    font-weight: 700;
    text-align: center;
}

.size-table td,
.stock-table td {
    text-align: center;
}

.stock-cell {
    cursor: pointer;
    transition: 0.1s;
    background: #fff;
}

.stock-cell:hover {
    background: #fff7fa;
    box-shadow: inset 0 0 0 2px var(--brand);
}

.stock-cell.is-selected {
    background: #fff0f5;
    box-shadow: inset 0 0 0 2px var(--brand);
    color: var(--brand);
    font-weight: 700;
}

.stock-ok {
    color: #18723a;
    font-weight: 700;
}

.stock-low {
    color: #b15b00;
    font-weight: 700;
}

.stock-none {
    color: #999;
}

.delivery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.delivery-card {
    border: 1px solid var(--line);
    padding: 13px;
    background: #fff;
}

.delivery-card strong {
    display: block;
    font-size: var(--text-label);
    margin-bottom: 6px;
}

.delivery-card span {
    font-size: var(--text-meta);
    color: #5e646c;
}

.delivery-card--active {
    border: 2px solid var(--brand);
    background: #fff7fa;
    padding: 12px;
}

/* ===== Toasts (window.workwayToast) ===== */
/* Top-right corner, above the header, so a cart change is acknowledged where the
   cart itself lives. Messages stack newest-last. */
.toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
    max-width: min(380px, calc(100vw - 32px));
}

.toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--muted);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: var(--text-meta);
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateX(16px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
    pointer-events: auto;
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast__icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--muted);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.toast__icon::before {
    content: "i";
}

.toast__body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.toast__close {
    border: 0;
    background: none;
    padding: 0 2px;
    color: var(--muted);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}

.toast__close:hover {
    color: var(--ink);
}

.toast--success {
    border-left-color: #19743a;
    background: #f2fbf5;
}

.toast--success .toast__icon {
    background: #19743a;
}

.toast--success .toast__icon::before {
    content: "\2713";
}

.toast--error {
    border-left-color: var(--danger);
    background: #fdf3f3;
}

.toast--error .toast__icon {
    background: var(--danger);
}

.toast--error .toast__icon::before {
    content: "\0021";
}

.toast--info {
    border-left-color: var(--brand);
    background: #fff;
}

.toast--info .toast__icon {
    background: var(--brand);
}

@media (max-width: 560px) {
    .toast-stack {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transition: none;
        transform: none;
    }
}

@media (max-width: 960px) {
    .pdp-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .gallery {
        max-width: 680px;
        margin: auto;
        width: 100%;
    }

    .summary {
        max-width: 680px;
        margin: auto;
        width: 100%;
    }

}

@media (max-width: 700px) {
    .pdp-shell {
        padding: 0 12px;
    }

    .product-breadcrumb {
        padding: 10px 12px;
    }

    .gallery-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }

    .summary h1 {
        font-size: var(--text-section-title);
    }

    .price-main {
        font-size: var(--text-price-lg);
    }

    .spec-table {
        font-size: var(--text-meta);
    }

    .spec-table th {
        width: 105px;
    }

    .size-table,
    .stock-table {
        font-size: var(--text-meta);
        min-width: 640px;
    }

    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .delivery-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 別画面の加工注文導線（今回追加） ===== */
.purchase-actions {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.standard-cart-button {
    width: 100%;
    min-height: 48px;
    border: 0;
    background: #333;
    color: #fff;
    font-size: var(--text-button-lg);
    font-weight: 700;
}

.standard-cart-button:hover {
    background: #222;
}

.processing-link-box {
    border: 2px solid var(--brand);
    background: #fff7fa;
    padding: 14px;
    border-radius: 4px;
}

.processing-link-box__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--text-panel-title);
    font-weight: 700;
    color: #222;
}

.processing-link-box__title .tag-new {
    font-size: var(--text-caption);
    background: var(--brand);
    color: #fff;
    padding: 3px 6px;
    border-radius: 2px;
}

.processing-link-box p {
    margin: 7px 0 11px;
    color: #59606a;
    font-size: var(--text-lead);
    line-height: 1.7;
}

.processing-link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    background: var(--brand);
    color: #fff;
    font-size: var(--text-button-lg);
    font-weight: 700;
    border-radius: 3px;
}

.processing-link-button:hover {
    background: var(--brand-dark);
}

.processing-link-button .icon-customize {
    width: 22px;
    height: 22px;
}

.processing-link-help {
    margin-top: 7px;
    font-size: var(--text-meta);
    color: #6a7078;
}

.processing-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.processing-info-card {
    border: 1px solid var(--line);
    background: #fff;
    padding: 14px;
}

.processing-info-card h3 {
    margin: 0 0 7px;
    font-size: var(--text-card-title);
}

.processing-info-card p {
    margin: 0;
    color: #60666e;
    font-size: var(--text-meta);
    line-height: 1.75;
}

.processing-flow-link {
    margin-top: 12px;
    padding: 13px 14px;
    background: #f7f8fa;
    border: 1px solid #d9dde3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.processing-flow-link strong {
    font-size: var(--text-meta);
}

.processing-flow-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand);
    font-weight: 700;
    font-size: var(--text-body);
}

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

/* --- Bagisto integration additions for the PDP ---------------------------- */

.gallery-main img,
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.gallery-main .placeholder,
.thumb .placeholder {
    font-size: var(--text-meta);
    font-weight: 700;
    color: #818792;
}

/* Options that no variant can satisfy stay visible but unselectable. */
.swatch:disabled,
.size-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.standard-cart-button:disabled {
    background: #b9bec5;
    border-color: #b9bec5;
    cursor: not-allowed;
}

.price-main del {
    margin-right: 8px;
    color: #8b9098;
    font-size: var(--text-meta);
    font-weight: 400;
}

.summary__badge--out {
    background: #f1f2f4;
    border-color: #d9dde3;
    color: #6d737b;
}

/* A product whose sale has not started: shown and priced, not buyable (task 3.3.5). */
.summary__badge--soon {
    background: #fff6e0;
    border-color: #f0d99a;
    color: #8a5a00;
}

.rich-text--pdp {
    margin-top: 6px;
    font-size: var(--text-meta);
    line-height: 1.9;
    color: #4a4f57;
}

.stock-cell.is-clickable {
    cursor: pointer;
}

.stock-cell.is-clickable:hover {
    background: var(--soft);
}

@media (max-width: 820px) {
    .gallery-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.processing-link-button:disabled {
    background: #e6e8eb;
    border-color: #d9dde3;
    color: #8b9098;
    cursor: not-allowed;
}

/* ==========================================================================
   Cart, and the shared page shell it introduces (page-shell / panel / layout)
   From sample/フロントサイト/商品詳細～加工シミュレーター～カート/カート.html.
   The mockup's `.summary` box is renamed `.cart-summary` here: `.summary` is
   already the product-detail column.
   ========================================================================== */
.page-shell {
    max-width: var(--content);
    margin: 0 auto 52px;
    padding: 0 20px;
}

.page-title {
    margin: 0 0 5px;
    font-size: var(--text-page-title);
    line-height: 1.25;
}

.page-sub {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: var(--text-lead);
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.main-col {
    min-width: 0;
}

.cart-summary-col {
    position: sticky;
    top: 12px;
}

.panel {
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}

.panel__head {
    min-height: 52px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: #fafafa;
}

.panel__title {
    font-size: var(--text-panel-title);
    font-weight: 700;
}

.panel__sub {
    font-size: var(--text-meta);
    color: var(--muted);
    margin-top: 2px;
}

.panel__body {
    padding: 16px;
}

/* The cart's 再注文 result past three lines (sprint05/20129_reorder): closed under its title, which opens it. */
details.cart-reorder-notice > summary {
    cursor: pointer;
    list-style: none;
}

details.cart-reorder-notice > summary::-webkit-details-marker {
    display: none;
}

details.cart-reorder-notice > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.15s;
}

details.cart-reorder-notice[open] > summary::after {
    transform: rotate(-135deg);
}

details.cart-reorder-notice:not([open]) > summary {
    border-bottom: 0;
}

.notice.info {
    border-color: #bfd8e8;
    background: #f4faff;
}

/* The line being updated is held still and dimmed until the server answers. */
.cart-item {
    transition: opacity 0.18s ease;
}

.cart-item.is-busy {
    opacity: 0.45;
    pointer-events: none;
}

.cart-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 128px;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #eceef1;
}

.cart-item:first-child {
    padding-top: 0;
}

.cart-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.product-image {
    aspect-ratio: 1/1;
    background: linear-gradient(135deg,
            #f5f6f7 25%,
            #eceef1 25%,
            #eceef1 50%,
            #f5f6f7 50%,
            #f5f6f7 75%,
            #eceef1 75%);
    background-size: 24px 24px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818792;
    font-size: var(--text-meta);
    font-weight: 700;
    position: relative;
}

.maker {
    font-size: var(--text-meta);
    color: #666;
}

.cart-item__unavailable {
    display: inline-block;
    margin: 2px 0;
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--danger);
}

/* A line out of stock, or holding more than the stock: labelled, never removed (20022). A red badge under the line's
   size and colour (sprint05/20167, requester 2026-11-05). */
.cart-item__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--danger);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.cart-item__stock::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    color: var(--danger);
    font-size: 11px;
    font-weight: 900;
}

.cart-summary__stock-short {
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid var(--danger);
    border-radius: 6px;
    background: #fef2f2;
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--danger);
}

.cart-item__stock[hidden],
.cart-summary__stock-short[hidden] {
    display: none;
}

/* Proceed to Checkout greyed out while a line is short of stock (sprint05/20167, requester 2026-11-05). */
.co-place__button.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.product-name {
    margin: 2px 0 4px;
    font-size: var(--text-card-title);
    font-weight: 700;
}

.product-code {
    font-size: var(--text-meta);
    color: #7a8088;
}

.variant {
    margin-top: 7px;
    font-size: var(--text-meta);
}

.variant span {
    display: inline-block;
    margin-right: 12px;
}

.price {
    font-weight: 700;
    color: #c80030;
}

.tax {
    font-size: var(--text-meta);
    color: #777;
}

/* The page's whitespace between the price and its tax label is not kept; the gap is set here. */
.unit-price .tax {
    margin-left: 4px;
}

.item-actions {
    margin-top: 8px;
    display: flex;
    gap: 10px;
}

.item-actions button,
.item-actions a {
    border: 0;
    background: none;
    color: #555;
    font-size: var(--text-button);
    padding: 0;
    text-decoration: underline;
}

.item-total {
    text-align: right;
}

.unit-price {
    font-size: var(--text-meta);
    color: var(--muted);
}

.line-price {
    font-size: var(--text-price);
    font-weight: 700;
    margin-top: 4px;
}

.qty {
    display: inline-grid;
    grid-template-columns: 30px 68px 30px;
    margin-top: 12px;
    border: 1px solid var(--line);
}

.qty button,
.qty input {
    height: 32px;
    border: 0;
    background: #fff;
    text-align: center;
}

.qty button {
    font-weight: 700;
}

.qty input {
    width: 68px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    outline: none;
}

.process-summary {
    grid-column: 2/-1;
    margin-top: 2px;
    padding: 11px 12px;
    border: 1px solid #e3d67a;
    background: #fffdf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: var(--text-meta);
}

.process-summary strong {
    font-size: var(--text-label);
}

.process-summary__details {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #555;
}

.process-summary__details b {
    color: #222;
}

.cart-summary__head {
    padding: 14px 16px;
    background: #333;
    color: #fff;
    font-size: var(--text-panel-title);
    font-weight: 700;
}

.cart-summary__body {
    padding: 16px;
}

.sum-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: var(--text-meta);
}

.sum-row.total {
    border-top: 1px solid #999;
    margin-top: 7px;
    padding-top: 14px;
    align-items: baseline;
}

.sum-row.total strong {
    color: #c80030;
    font-size: var(--fs-3xl);
}

/* Total (tax incl.) and Consumption tax stand out from the tax-exclusive rows above them (sprint05/20135). */
.sum-row.total > span {
    color: #c80030;
    font-size: var(--fs-xl);
    font-weight: 700;
}

.cart-summary__shipping-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--text-meta);
    text-align: left;
    white-space: nowrap;
}

.sum-row.sum-row--tax {
    font-weight: 700;
}

/* My Page order detail: Total (tax incl.) in red and larger, as in the cart (sprint05/20135). */
.ww-order-total {
    align-items: baseline;
    color: #c80030;
    font-size: var(--fs-lg);
}

.ww-order-total p:last-child {
    font-size: var(--fs-2xl);
}

/* The checkout summary (Bagisto's markup, utility classes): the same emphasis as the cart. */
.ww-summary-tax p {
    font-weight: 700;
}

.ww-summary-total p {
    color: #c80030;
    font-size: var(--fs-xl);
}

.ww-summary-total p:last-child {
    font-size: var(--fs-3xl);
}

.free {
    color: var(--ok);
    font-weight: 700;
}

.button-primary,
.button-secondary,
.button-dark {
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 3px;
    font-size: var(--text-button);
    font-weight: var(--fw-bold);
}

.button-primary {
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
}

.button-primary:hover {
    background: var(--brand-dark);
}

.button-primary:disabled {
    background: #bbb;
    border-color: #bbb;
    cursor: wait;
}

.button-secondary {
    margin-top: 9px;
    border: 1px solid #999;
    background: #fff;
    color: #333;
}

.secure {
    margin-top: 12px;
    text-align: center;
    color: #737983;
    font-size: var(--text-meta);
}

@media (max-width: 1024px) {
    .layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

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

    .cart-summary-col {
        position: static;
    }
}

@media (max-width: 560px) {

    .topbar__inner,
    .header__main,
    .breadcrumb,
    .page-shell,
    .wire-note {
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-title {
        font-size: var(--text-page-title);
    }

    .cart-item {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 10px;
    }

    .item-total {
        grid-column: 2;
        text-align: left;
    }

    .process-summary {
        grid-column: 1/-1;
        display: block;
    }

    .process-summary .link-button {
        margin-top: 8px;
    }

    .process-summary__details {
        margin-top: 7px;
    }
}

.process-summary__details {
    line-height: 1.7;
}

.process-summary__details span {
    max-width: 100%;
}

/* --- Shared form controls, reused by sign-in and any simple form page ----- */

.form-grid {
    display: grid;
    gap: 16px;
    max-width: 420px;
}

.form-grid--wide {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.form-grid__full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .form-grid--wide {
        grid-template-columns: 1fr;
    }
}

.form-row {
    display: grid;
    gap: 6px;
}

.form-row label {
    font-size: var(--text-label);
    font-weight: 700;
}

.form-row input,
.form-row textarea {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    font-size: var(--text-input);
    font-family: inherit;
}

.form-row textarea {
    resize: vertical;
}

/* A date field wrapped by <x-shop::flat-picker.date>: its inline <span> would shrink the input,
   and the calendar icon sits over the input's right edge. */
.ww-date-field {
    display: block;
}

.ww-date-field input {
    width: 100%;
    padding-right: 40px;
}

.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--brand);
}

.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"] {
    border-color: var(--danger);
}

/* Red border whenever the row carries a validation message - covers both the server-rendered
   `@error` span and the one the wizard script injects on a failed step, with no per-input markup. */
.form-row:has(.form-error) input,
.form-row:has(.form-error) textarea,
.form-row:has(.form-error) select {
    border-color: var(--danger);
}

.form-error {
    color: var(--danger);
    font-size: var(--text-meta);
}

.form-hint {
    color: var(--muted);
    font-size: var(--text-meta);
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--text-meta);
}

.form-inline a {
    color: var(--brand);
    text-decoration: underline;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.form-check input {
    accent-color: var(--brand);
}

.panel__body--pad {
    padding: 20px;
}

.panel--narrow {
    max-width: 560px;
    margin: 0 auto;
}

/* Flash messages rendered by the theme rather than the Vue flash group. */
.alert {
    padding: 11px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    background: #fafafa;
    font-size: var(--text-body);
}

.alert--error {
    border-color: #f0c2c2;
    background: #fdf3f3;
    color: #a11;
}

.alert--success {
    border-color: #bfe0c4;
    background: #f2faf3;
    color: #1a6b2c;
}

.cart-empty {
    padding: 56px 20px;
    text-align: center;
    color: var(--muted);
    font-size: var(--text-body);
}

.cart-empty .button-primary {
    display: inline-grid;
    place-items: center;
    max-width: 280px;
    margin: 18px auto 0;
}

.item-actions button,
.item-actions a {
    cursor: pointer;
}

/* ==========================================================================
   Checkout
   The one-page checkout keeps Bagisto's Vue flow (addresses -> shipping ->
   payment -> place order); only the page shell is the theme's, and the
   framework's semantic control classes are re-skinned to the brand here.
   ========================================================================== */

.page-shell--checkout {
    max-width: var(--content);
}

.checkout-login {
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    background: var(--soft);
    font-size: var(--text-meta);
}

/*
 * Doubled class so these win over the Tailwind utilities Bagisto sometimes adds
 * alongside them (e.g. `primary-button bg-navyBlue`).
 */
.primary-button.primary-button {
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 3px;
    font-size: var(--text-button);
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    font-weight: 700;
}

.primary-button.primary-button:hover {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
    opacity: 1;
}

.secondary-button.secondary-button {
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 3px;
    font-size: var(--text-button);
    border-color: #333;
    background: #fff;
    color: #333;
    font-weight: 700;
}

.secondary-button.secondary-button:hover {
    background: var(--soft);
}

/* Inputs and selects rendered by the checkout's Vue form components. */
.page-shell--checkout input[type="text"],
.page-shell--checkout input[type="email"],
.page-shell--checkout input[type="tel"],
.page-shell--checkout input[type="password"],
.page-shell--checkout select,
.page-shell--checkout textarea {
    border-radius: 3px;
}

.page-shell--checkout input:focus,
.page-shell--checkout select:focus,
.page-shell--checkout textarea:focus {
    border-color: var(--brand);
    box-shadow: none;
}

.order-number {
    margin-bottom: 10px;
    font-size: var(--text-page-title);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.order-number a {
    color: var(--brand);
    text-decoration: underline;
}

.success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.success-actions a {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 220px;
}

/* The secondary button's top margin stacks it under the primary in the cart summary; side by side it sat lower (leader 2026-10-30). */
.success-actions .button-secondary {
    margin-top: 0;
}

/* Bagisto's app.css appends a `*` to `.required`; the theme badge already reads 必須. */
span.required::after {
    content: none;
}

/* ==========================================================================
   Customer account (my page / order history)
   The page frame and the order pills. The shell, navigation and screen parts
   are the `mp-*` section at the end of this file (sprint04/20048).
   ========================================================================== */

.account-page {
    max-width: var(--content);
    margin: 0 auto 56px;
    padding: 0 20px;
}

.account-breadcrumb {
    padding: 12px 0 0;
    font-size: var(--text-meta);
    color: var(--muted);
}

.order-list {
    display: grid;
    gap: 12px;
}

.order-card {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    color: inherit;
}

.order-card:hover {
    border-color: var(--brand);
}

.order-card--shimmer {
    height: 92px;
    background: linear-gradient(90deg,
            var(--soft) 25%,
            #eceef1 37%,
            var(--soft) 63%);
    background-size: 400% 100%;
    animation: order-card-shimmer 1.4s ease infinite;
}

@keyframes order-card-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.order-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line);
}

.order-card__id {
    font-size: var(--text-meta);
    font-weight: 700;
}

.order-card__date {
    margin-top: 3px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.order-card__client {
    margin-top: 3px;
    font-size: var(--text-meta);
    overflow-wrap: anywhere;
}

.order-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    font-size: var(--text-meta);
    font-weight: 700;
}

.order-card__total-label {
    margin-right: 8px;
    font-size: var(--text-meta);
    font-weight: 400;
    color: var(--muted);
}

.order-card__link {
    color: var(--brand);
    font-size: var(--text-meta);
    font-weight: 700;
}

.empty-note {
    padding: 32px 0;
    text-align: center;
    color: var(--muted);
    font-size: var(--text-meta);
}

/* My Page order page: the heading and its Workway status pill on one line (19743 D6). */
.order-view-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* My Page order page: addresses, shipping and payment in three columns, so a two-item row (Payment Method, Payment
   status) lines up under the first two instead of being pushed to both edges by Bagisto's justify-between (19743 D7). */
@media (min-width: 768px) {
    .order-view-details {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The datagrid's フィルタ toggle: Japanese may break between any two characters, so the squeezed toolbar stacked the
   label one character per line; "Filter" is one word and never did (Hoài 2026-10-29). */
.icon-filter + span {
    white-space: nowrap;
}

/* Order status pills, shared with the datagrid's own `record.status` markup. */
.label-processing,
.label-active,
.label-canceled,
.label-closed,
.label-pending {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--text-caption);
    font-weight: 700;
    white-space: nowrap;
}

.label-processing {
    background: #fff3cd;
    color: #8a6300;
}

.label-active {
    background: #e1f5e5;
    color: #19743a;
}

.label-canceled {
    background: #fde2e2;
    color: #b3261e;
}

.label-closed {
    background: #e9eaec;
    color: #4a4f57;
}

.label-pending {
    background: #e5edff;
    color: #1d4ed8;
}

/* ==========================================================================
   Decoration simulator (Workway\Simulation storefront)

   Prefixed `.sim-` throughout. The page reuses the wireframe's vocabulary -
   panels, a progress bar, choice cards - but not its class names: the product
   page already owns `.panel` and `.choice`, and sharing them would mean one
   screen's tweak silently reshaping the other.
   ========================================================================== */
/* The theme's own `.page` is a two-column grid with a 250px filter sidebar, which is
   right for a category listing and wrong here - the simulator has no sidebar, and its
   children would be laid into that 250px column. Reset it to a plain block; `.sim-page`
   is declared after `.page` and matches on one class, so it wins on order. */
.sim-page {
    display: block;
    max-width: var(--content);
    margin: 0 auto 56px;
    padding: 0 20px 60px;
}

/* `hidden` has to win here. The attribute is only `display:none` in the browser's own
   stylesheet, so any author rule that sets a `display` beats it - `.sim-actions` is a
   flex row, and a hidden action bar kept showing itself. Both halves of step one then
   offered their own "back" button at the same time. */
.sim-page [hidden] {
    display: none !important;
}

/* Readability for older shoppers (23.09): the secondary grey is darkened inside the
   simulator and its dialog, and running text gets more room between lines. */
.sim-page,
.sim-modal {
    --muted: #4b5260;
    line-height: 1.6;
}

/* With the larger type a panel title and its badge no longer fit one phone-width
   line: the head wraps, the badges never break inside themselves. */
.sim-panel-head {
    flex-wrap: wrap;
}

.sim-badge,
.sim-required {
    white-space: nowrap;
}

.sim-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.sim-step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: var(--text-choice);
    color: var(--muted);
}

.sim-step .n {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--wire);
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--muted);
}

.sim-step.is-active {
    border-color: var(--brand);
    color: var(--ink);
    font-weight: 700;
}

.sim-step.is-active .n {
    background: var(--brand);
    color: #fff;
}

.sim-step.is-done .n {
    background: #19743a;
    color: #fff;
}

/* The design screen's first two chips are buttons - steps one and two live on one
   page, and the chips are how you move between them. Everything else about them is
   the chip above. */
button.sim-step {
    font: inherit;
    cursor: pointer;
}

button.sim-step:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sim-titlebar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* The title and its lead take the room there is; the product box keeps its own width
   beside them, and drops under them only when the two cannot share a line. */
.sim-titlebar>div:first-child {
    flex: 1 1 420px;
    min-width: 0;
}

.sim-titlebar>.sim-product-chip {
    flex: 0 1 auto;
}

.sim-titlebar h1 {
    margin: 0 0 6px;
    font-size: var(--text-page-title);
}

.sim-titlebar p {
    margin: 0;
    font-size: var(--text-lead);
    color: var(--muted);
}

.sim-product-chip {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
    padding: 10px 14px;
    font-size: var(--text-body);
    color: var(--muted);
}

.sim-product-chip strong {
    display: block;
    color: var(--ink);
    font-size: var(--text-meta);
}

.sim-product-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    cursor: default;
}

/* AC-23: the product's thumbnail and JAN code, on hover or keyboard focus of the product box. */
.sim-product-hover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: none;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    color: var(--ink);
    font-size: var(--text-meta);
    white-space: nowrap;
}

.sim-product-hover img {
    width: 96px;
    height: 96px;
    flex: none;
    object-fit: cover;
    border-radius: 4px;
    background: var(--soft);
}

.sim-product-chip:hover .sim-product-hover,
.sim-product-chip:focus-within .sim-product-hover {
    display: flex;
}

/* The item number is what a buyer reads back to the shop, so it is the loudest line of
   the chip after the name: a label and a value, the value in the house colour. */
.sim-item-no {
    align-self: flex-start;
    padding: 3px 10px;
    border-left: 3px solid var(--brand);
    border-radius: 2px;
    background: #fff;
    font-size: var(--text-meta);
    color: var(--ink);
}

.sim-item-no strong {
    display: inline;
    font-size: var(--text-card-title);
    letter-spacing: 0.02em;
    color: var(--brand);
}

.sim-errors {
    border: 1px solid var(--danger);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: #fff5f5;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.sim-errors-title {
    margin: 0 0 6px;
    font-size: var(--text-body);
    font-weight: 700;
    color: #b3261e;
}

.sim-errors ul {
    margin: 0;
    padding-left: 18px;
    font-size: var(--text-body);
    color: #b3261e;
}

.sim-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}

.sim-config {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.sim-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.sim-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-panel-title);
    font-weight: 700;
}

.sim-panel-body {
    padding: 14px;
}

.sim-required {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--brand);
    color: #fff;
    font-size: var(--text-caption);
    font-weight: 700;
}

.sim-badge {
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--wire);
    font-size: var(--text-meta);
    font-weight: 700;
    color: var(--muted);
}

.sim-empty {
    margin: 0;
    font-size: var(--text-body);
    color: var(--muted);
}

.sim-note {
    margin: 8px 0 0;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-hint {
    margin: 6px 0 0;
    font-size: var(--text-meta);
    color: var(--muted);
}

/* What is wrong with the lettering or a wearer's name, said under the box as it is typed. */
.sim-error {
    margin: 6px 0 0;
    font-size: var(--text-meta);
    color: var(--danger);
}

.sim-error[hidden] {
    display: none;
}

.sim-field input.is-invalid,
.sim-field input[aria-invalid="true"],
.sim-field select[aria-invalid="true"],
.sim-field.is-invalid .sim-upload {
    border-color: var(--danger);
}

/* The places chosen stick to the top of the window while their cards scroll under them (sprint06/20462). */
.sim-chosen-panel {
    position: sticky;
    top: 0;
    z-index: 5;
}

.sim-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sim-tab {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: var(--text-choice);
    cursor: pointer;
}

.sim-tab.is-active {
    border-color: var(--brand);
    background: #fff7fa;
    color: var(--brand);
    font-weight: 700;
}

.sim-tab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: var(--text-button);
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    text-wrap: nowrap;
}

.sim-btn:hover {
    background: var(--soft);
}

.sim-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sim-btn-primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.sim-btn-primary:hover {
    background: var(--brand-dark);
}

.sim-btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.sim-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.sim-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    text-align: left;
    cursor: pointer;
}

.sim-choice.is-active {
    border-color: var(--brand);
    background: #fff7fa;
}

.sim-choice-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--wire);
}

.sim-choice-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sim-choice-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sim-choice-copy strong {
    font-size: var(--text-choice);
}

.sim-fee {
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--brand);
}

/* The garment colour on the design screen: one pill per colour, the chosen one in
   the brand colour, the same weight as the places under it. */
.sim-colour-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sim-colour {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    font-size: var(--text-choice);
    cursor: pointer;
}

.sim-colour input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sim-colour:has(input:checked) {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand) inset;
    background: #fff7fa;
    font-weight: var(--fw-bold);
}

.sim-colour:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* The colour's photograph, floating over its pill while pointed at or focused. Only
   where there is a pointer to hover with; on a touch screen a tap chooses. */
.sim-colour-photo {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 180px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    transform: translateX(-50%);
    pointer-events: none;
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.sim-colour-photo img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: contain;
    background: var(--soft);
}

.sim-colour-photo::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 7px solid transparent;
    border-top-color: var(--panel);
    transform: translateX(-50%);
}

@media (hover: hover) {
    .sim-colour:hover .sim-colour-photo,
    .sim-colour:has(input:focus-visible) .sim-colour-photo {
        display: flex;
    }
}

.sim-colour-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--swatch);
    border: 1px solid rgba(0, 0, 0, .2);
    flex: none;
}

.sim-position-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.sim-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: var(--text-choice);
    cursor: pointer;
}

.sim-position.is-active {
    border-color: var(--brand);
    background: #fff7fa;
    font-weight: 700;
}

.sim-position.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
}

.sim-position-thumb {
    width: 56px;
    height: 66px;
    display: grid;
    place-items: center;
}

.sim-position-thumb img {
    max-width: 100%;
    max-height: 100%;
}

.sim-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.sim-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.sim-field>label {
    display: flex;
    align-items: center;
    font-size: var(--text-label);
    font-weight: 700;
    color: var(--ink);
}

.sim-field input[type="text"],
.sim-field select {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: var(--text-input);
    color: var(--ink);
}

.sim-field input[type="file"] {
    font-size: var(--text-input);
}

.sim-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-choice);
    cursor: pointer;
}

.sim-upload {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sim-hidden-file {
    display: none;
}

.sim-preview-panel {
    position: sticky;
    top: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.sim-view-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.sim-view-btn {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: var(--text-choice);
    cursor: pointer;
}

.sim-view-btn.is-active {
    border-color: var(--brand);
    background: #fff7fa;
    color: var(--brand);
    font-weight: 700;
}

.sim-stage {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
    aspect-ratio: 360/420;
    overflow: hidden;
}

.sim-garment,
.sim-overlays {
    position: absolute;
    inset: 0;
}

.sim-garment img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sim-overlay {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    color: #111;
}

/* The place being edited, framed on the garment in a light brand red. The frame has
   a size of its own, so a place with nothing on it yet still shows where it is. */
.sim-overlay.is-active {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 40px;
    padding: 6px 10px;
    border: 2px solid rgba(207, 10, 75, .55);
    border-radius: 4px;
    background: rgba(207, 10, 75, .06);
    box-shadow: 0 0 0 3px rgba(207, 10, 75, .12);
}

.sim-overlay img {
    max-width: 90px;
    max-height: 60px;
    object-fit: contain;
}

.sim-overlay-name {
    font-size: 0.75em;
    font-weight: 500;
    opacity: 0.85;
}

/* The design screen's own summary is `.sim-deco-list` below; this is only its gap
   from the preview button above it. */
.sim-summary {
    margin-top: 12px;
}

/* --- what was decorated, wherever it is read ---------------------------------
   One block for the five screens that describe a decoration - the simulator's sizes
   and review screens, the cart, the checkout summary and the customer's order - so
   that checking one against another is reading the same thing twice. The back office
   draws the same shape in Tailwind; see `admin/line-design.blade.php`.

   Every answer is a named pair rather than a run of words: "Gothic Black Medium
   WEBIKE VIETNAME" is what this replaced, and no shopper could read a font out of it.
*/
.sim-deco-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--text-body);
    color: var(--muted);
}

.sim-deco-note {
    font-weight: 700;
    color: var(--ink);
}

.sim-deco-method,
.sim-deco-name {
    display: flex;
    gap: 6px;
}

.sim-deco-method strong,
.sim-deco-name strong {
    color: var(--ink);
}

.sim-deco {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.sim-deco-list>.sim-deco:first-child {
    padding-top: 0;
    border-top: 0;
}

.sim-deco-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.sim-deco-head strong {
    color: var(--brand);
}

.sim-deco-where {
    color: var(--ink);
    font-weight: 700;
}

.sim-deco-fee {
    margin-left: auto;
    color: var(--ink);
}

.sim-deco-opts {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sim-deco-opt {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}

.sim-deco-opt dt {
    color: var(--muted);
}

.sim-deco-opt dt::after {
    content: ":";
}

.sim-deco-opt dd {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
}

.sim-design-id {
    margin-top: 10px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-design-id strong {
    color: var(--ink);
}

.sim-lines {
    margin-top: 10px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sim-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--text-body);
    color: var(--muted);
}

.sim-line-total {
    border-top: 1px dashed var(--line);
    padding-top: 8px;
    font-size: var(--text-price);
    color: var(--ink);
}

.sim-line-total strong {
    color: var(--brand);
}

.sim-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
}

.sim-actions-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* order lines and confirmation */
.sim-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sim-table-wrap>.sim-table {
    min-width: 560px;
}

.sim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body);
}

.sim-table th,
.sim-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.sim-table th {
    font-size: var(--text-meta);
    color: var(--muted);
    font-weight: 700;
}

.sim-table input,
.sim-table select {
    width: 100%;
    min-height: 42px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: var(--text-input);
}

.sim-table td.sim-narrow {
    width: 110px;
}

.sim-table td.sim-actions-cell {
    width: 80px;
    text-align: right;
}

/* --- the order lines' own furniture ------------------------------------------
   A file in and a file out, above the table; a row the shop cannot fulfil, and the
   reason under it. */
.sim-sheet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}

.sim-sheet>div:first-child {
    flex: 1 1 240px;
}

.sim-sheet strong {
    display: block;
    font-size: var(--text-label);
}

.sim-sheet p {
    margin: 3px 0 0;
    font-size: var(--text-meta);
    color: var(--muted);
    white-space: pre-line;
}

.sim-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sim-sheet-report {
    flex: 1 1 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-sheet-report.is-error {
    color: var(--brand);
}

.sim-table tr.is-invalid td {
    background: #fff7fa;
}

.sim-row-note td {
    padding-top: 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-meta);
    color: var(--brand);
}

.sim-colour-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sim-colour-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: var(--text-choice);
    cursor: pointer;
}

.sim-colour-btn.is-active {
    border-color: var(--brand);
    background: #fff7fa;
    font-weight: 700;
}

.sim-colour-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--line);
}

.sim-confirm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

/* A decorated cart line: the design code and what it carries, under the variant. The
   inside of it is `.sim-deco-list`, shared with the simulator's own screens; this rule
   is only the rail that marks it off from the variant above. */
.sim-cart-design {
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid var(--brand);
}

/* --- the design step's own furniture -------------------------------------------
   Headings that carry a number, a slot panel whose buttons run the full width of it,
   and the two panels that wait on a method being chosen. */
/* The two things a panel head can offer beside its title - look at this, change this. */
.sim-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sim-btn-small {
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--text-button);
}

.sim-step-no {
    margin-right: 6px;
    color: var(--brand);
}

.sim-btn-wide {
    width: 100%;
    margin-top: 10px;
}

.sim-btn-remove {
    border-color: var(--brand);
    background: #fdeaf1;
    color: var(--brand);
}

.sim-btn-remove:hover:not(:disabled) {
    background: #fbdbe7;
}

.sim-note-box {
    margin: 12px 0 0;
    padding: 8px 10px;
    border-radius: 4px;
    background: #fffbe6;
    font-size: var(--text-meta);
    color: #6b5900;
}

/* What this method can be asked for, above the questions it asks. */
.sim-method-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--brand);
    border-radius: 4px;
    background: #fdf2f6;
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--ink);
}

/* --- the places, and the card per place ---------------------------------------- */

.sim-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: var(--text-button);
    color: var(--brand);
    cursor: pointer;
    text-decoration: underline;
}

/* One card per place. Named by where it is, never by a number. */
.sim-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.sim-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sim-card.is-active {
    border-color: var(--brand);
}

.sim-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

/* A folded card is its head only. */
.sim-card.is-collapsed > :not(.sim-card-head) {
    display: none;
}

.sim-card.is-collapsed .sim-card-head {
    border-bottom: 0;
}

.sim-card.is-active .sim-card-head {
    background: #fff7fa;
}

.sim-card-head strong {
    font-size: var(--text-panel-title);
}

.sim-card-sub {
    display: block;
    font-size: var(--text-meta);
    font-weight: 400;
    color: var(--muted);
}

.sim-card-body {
    padding: 14px;
}

/* Thread on fabric: the lettering in the chosen 糸色 on a square of the garment
   colour, between a card's answers and its summary. The weave is a pair of fine
   diagonal gradients over the colour, enough to read as cloth and no image to load. */
.sim-fabric {
    padding: 14px;
    border-top: 1px solid var(--line);
}

.sim-fabric-title {
    margin: 0 0 6px;
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.sim-fabric-name {
    margin: 0 0 8px 1.2em;
    font-size: var(--text-body);
    color: var(--brand);
}

.sim-fabric-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.sim-fabric-swatch {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 2px;
    background: var(--fabric);
    box-shadow: inset 0 0 0 6px #bdbdbd;
    cursor: pointer;
}

.sim-fabric-swatch.is-active {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 6px #fff;
}

.sim-fabric-swatch:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* The fabric colours to pick from, above the preview. */
.sim-fabric-pickers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.sim-fabric-picker .sim-fabric-swatches {
    margin-bottom: 0;
}

/* What the section is for, once, as a speech bubble over the first card's fabrics. */
.sim-fabric-intro {
    position: relative;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
}

.sim-fabric-intro::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 100%;
    border: 8px solid transparent;
    border-top-color: var(--brand);
}

.sim-fabric-note {
    margin: 0 0 8px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-fabric-cloth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 16px;
    overflow: hidden;
    background-color: var(--fabric);
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .08));
}

.sim-fabric-text {
    display: inline-block;
    max-width: 100%;
    line-height: 1.1;
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    text-align: center;
    overflow-wrap: anywhere;
    /* Embroidery sits on the cloth: a slight lift so white thread on white still reads. */
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

/* Embroidered lettering: the extra stroke stands for the thread's weight; its width comes from the
   typeface (`meta.stroke`, set inline as --sim-stroke). A Latin-only face is drawn untracked. */
.sim-fabric-text.is-embroidery {
    -webkit-text-stroke: var(--sim-stroke, .025em) currentColor;
    paint-order: stroke fill;
}

.sim-fabric-text.is-latin {
    letter-spacing: 0;
}

/* The chosen thread's photograph as the lettering's fill (`background-clip: text`), at the scale
   of one character - what the shopper sees is the thread's sheen, not a flat colour. The fill colour
   must go transparent through -webkit-text-fill-color: the script sets the thread's hex as an inline
   `color`, which a class rule cannot override. With a photograph the texture wins over the
   typeface's extra stroke (it would draw a flat outline round the texture). */
.sim-fabric-text.has-thread-fill {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-size: 1em auto;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    -webkit-text-stroke-width: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

/* Thread picker (designs/thread-picker): a swatch beside every thread and a search box. The native
   select stays inside, invisible, as the value the form submits. */
.sim-picker {
    position: relative;
}

.sim-picker > select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.sim-picker-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 6px 40px 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
    font-size: var(--text-input);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.sim-picker-swatch {
    flex: none;
    width: 72px;
    height: 22px;
    border-radius: 3px;
    object-fit: cover;
}

.sim-picker-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.sim-picker-panel[hidden] {
    display: none;
}

.sim-picker-search {
    width: 100%;
    min-height: 40px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 10px center;
    font-size: var(--text-input);
}

.sim-picker-list {
    max-height: 280px;
    margin: 6px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.sim-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
}

.sim-picker-item[aria-selected="true"] {
    font-weight: 700;
}

.sim-picker-item.is-active {
    background: #f3f4f6;
}

.sim-picker-empty {
    margin: 8px 6px 2px;
    color: var(--muted);
}

/* The place's own summary, at the foot of its card: what was chosen above it, read
   back as the review will show it. */
.sim-card-summary {
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: var(--soft);
}

.sim-card-summary .sim-deco-opt {
    background: var(--panel);
}

/* Two even columns inside a card: "Method" and "Design content" are asked side by
   side, and the details that follow line up under them. Elsewhere the grid still
   fits as many columns as the space takes. */
.sim-card-body .sim-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sim-field-wide {
    grid-column: 1/-1;
}

/* Artwork: the whole width of the panel, because for a print it is the only answer
   the method wants and a 220px grid column was the wrong shape for it. */
.sim-upload-zone {
    margin: 0 0 14px;
    padding: 22px 16px;
    border: 1px dashed #b9bfc7;
    border-radius: 4px;
    text-align: center;
}

.sim-upload-block+.sim-upload-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed #d9dde3;
}

.sim-upload-head {
    font-size: var(--text-card-title);
    font-weight: 700;
    color: var(--ink);
}

.sim-upload-formats {
    margin: 4px 0 12px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-upload-zone .sim-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sim-upload-zone .sim-upload input[type="file"] {
    max-width: 100%;
}

.sim-upload-zone .sim-hint {
    margin: 0;
}

.sim-upload-note {
    margin: 12px 0 0;
    font-size: var(--text-meta);
    color: var(--muted);
}

/* Who the garment is for: its own box, because it is not a field like the others. */
.sim-personal {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #e8d9a0;
    border-radius: 4px;
    background: #fffdf3;
}

.sim-personal-head {
    margin-bottom: 6px;
    font-size: var(--text-label);
    font-weight: 700;
    color: var(--ink);
}

.sim-personal .sim-check {
    font-weight: 700;
}

.sim-personal-notes {
    margin-top: 8px;
    padding-left: 14px;
}

.sim-personal-notes p {
    margin: 2px 0;
    font-size: var(--text-meta);
    color: #6b5900;
}

.sim-head-note {
    margin-left: 10px;
    font-weight: 400;
    font-size: var(--text-meta);
    color: var(--muted);
}

/* Dimmed rather than hidden: a shopper who has not chosen a method should see that
   there is more below and roughly what it will ask. */
.sim-panel.is-waiting {
    opacity: 0.55;
}

.sim-panel.is-waiting .sim-panel-body {
    pointer-events: none;
}

/* The arrows over the garment, and the name of the face they turn it to. */
.sim-stage-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-2xl);
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}

.sim-stage-nav:hover {
    background: #fff;
    border-color: var(--brand);
    color: var(--brand);
}

.sim-stage-nav.is-prev {
    left: 8px;
}

.sim-stage-nav.is-next {
    right: 8px;
}

.sim-stage-face {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.9);
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--muted);
}

/* --- the preview dialog ---------------------------------------------------------
   A real `<dialog>`, so the top layer, the backdrop and Escape are the browser's job
   and not this stylesheet's. It sizes itself to the viewport and gets out of the way
   entirely in full screen, where the browser has already given it the whole screen. */
.sim-modal {
    width: min(960px, 92vw);
    max-width: none;
    max-height: 88vh;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--ink);
    overflow: hidden;
}

.sim-modal::backdrop {
    background: rgba(17, 17, 17, 0.55);
}

.sim-modal:fullscreen,
.sim-modal.is-maximised {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
}

.sim-modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
}

.sim-modal-bar h2 {
    margin: 0;
    font-size: var(--text-panel-title);
}

.sim-modal-actions {
    display: flex;
    gap: 8px;
}

/* On a phone the title and both buttons do not fit one row: the buttons go under it, Close never past the edge (20201 TL-W4). */
@media (max-width: 480px) {
    .sim-modal-bar {
        flex-wrap: wrap;
    }

    .sim-modal-actions {
        flex: 1 0 100%;
        justify-content: flex-end;
    }
}

.sim-modal-body {
    padding: 16px;
    overflow: auto;
    max-height: calc(88vh - 54px);
}

.sim-modal:fullscreen .sim-modal-body,
.sim-modal.is-maximised .sim-modal-body {
    max-height: calc(100vh - 54px);
}

.sim-modal-meta {
    margin: 0 0 14px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-modal .sim-faces {
    max-width: 520px;
    margin: 0 auto 14px;
}

/* The order popup: the pictures stand as tall as the details beside them (20201). */
.sim-popup-preview {
    display: flex;
    flex-direction: column;
}

.sim-popup-preview .sim-faces {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 340px;
}

.sim-popup-preview .sim-faces__slides {
    position: relative;
    flex: 1;
}

.sim-popup-preview .sim-faces__slide {
    position: absolute;
    inset: 0;
}

.sim-popup-preview .sim-faces__slide > img {
    height: 100%;
    aspect-ratio: auto;
}

/* The preview dialog: the faces left, what was decided right (20201). */
.sim-modal-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: start;
}

.sim-modal-split .sim-faces {
    max-width: none;
    margin: 0 0 10px;
}

.sim-modal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.sim-modal-chip {
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--soft);
    font-size: var(--text-caption);
    color: var(--muted);
}

.sim-modal-chip b {
    color: var(--ink);
}

.sim-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.sim-detail-top .sim-modal-chips {
    justify-content: flex-end;
    margin-top: 0;
}

.sim-modal-legend__head {
    display: block;
    font-size: var(--text-label);
}

.sim-popup-product .sim-modal-legend,
.sim-modal-split__info .sim-modal-legend {
    margin-top: 0;
}

.sim-modal-legend > .sim-modal-place:first-child {
    margin-top: 0;
}

.sim-modal-place + .sim-modal-place {
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

@media (max-width: 720px) {
    .sim-detail-top {
        flex-direction: column;
    }

    .sim-detail-top .sim-modal-chips {
        justify-content: flex-start;
    }

    .sim-modal-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The simulator's own fold of the chosen places (20201): closed until opened. */
.sim-fold > summary {
    cursor: pointer;
    list-style: none;
}

.sim-fold > summary::-webkit-details-marker {
    display: none;
}

.sim-fold > summary::after {
    content: "▾";
    float: right;
    color: var(--muted);
}

.sim-fold[open] > summary::after {
    content: "▴";
}

.sim-modal-canvas {
    position: relative;
    aspect-ratio: 360/420;
    background: var(--soft);
}

.sim-modal-canvas>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sim-modal-mark {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    color: #111;
}

.sim-modal-mark img {
    max-width: 90px;
    max-height: 60px;
    object-fit: contain;
}

.sim-modal-name {
    font-size: 0.75em;
    font-weight: 500;
    opacity: 0.85;
}

.sim-modal-legend {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.sim-modal-place {
    margin-top: 12px;
    font-size: var(--text-body);
    color: var(--muted);
}

.sim-modal-place strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
}

.sim-modal-note {
    margin-top: 14px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-modal-empty {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--text-body);
    color: var(--muted);
}

/* --- the simulator by screen width --------------------------------------------
   Declared after everything above on purpose: `.sim-card-body .sim-fields` asks for
   two columns, and a narrow-screen rule placed before it lost on order - which is how
   a phone came to show every input at half the width of the screen.

   Desktop (over 1024px) keeps the 380px preview column declared above.
   A tablet, from an iPad mini (768px) up, splits the screen evenly: the inputs in one
   half, the garment in the other, each card's questions stacked in one column.
   A phone stacks everything at the full width. */
@media (min-width: 768px) and (max-width: 1024px) {

    .sim-layout,
    .sim-confirm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .sim-fields,
    .sim-card-body .sim-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .sim-page {
        padding: 0 16px 40px;
    }

    .sim-layout,
    .sim-confirm-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sim-preview-panel {
        position: static;
    }

    .sim-titlebar h1 {
        font-size: var(--text-page-title);
    }

    .sim-fields,
    .sim-card-body .sim-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .sim-field-wide {
        grid-column: auto;
    }

    .sim-method-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sim-position-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .sim-actions,
    .sim-actions-right {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- the decoration, wherever an order is read back ----------------------------- */
/* One line of an order, wherever it is read back: the cart's own shape, reused by the
   checkout summary. */

.sim-checkout-items {
    margin: 16px 0 8px;
    border-bottom: 1px solid var(--line);
}

/* The checkout summary's lines scroll in a box of their own (sprint04/19825_fix_bug_list_phuc (checkout)): a long cart
   made the summary, and the page each step scrolls through, as long as the cart. */
.checkout-summary-items {
    max-height: min(360px, 45vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
}

.sim-checkout-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eceef1;
}

.sim-checkout-item:last-child {
    border-bottom: 0;
}

.sim-checkout-item>img {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    object-fit: cover;
}

.sim-checkout-item .product-name {
    font-size: var(--text-card-title);
}

.sim-checkout-item-price {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-checkout-item-price strong {
    font-size: var(--text-price);
    color: var(--ink);
}

/* --- notes and pictures -------------------------------------------------------
   The block under the places on the design screen, and its read-back on the review:
   a note to the workshop, reference pictures dropped in, and the thumbnails that
   open full size. The artwork a print takes gets the same thumbnail in its zone. */
.sim-extras {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sim-extras textarea {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font: inherit;
    font-size: var(--text-input);
    line-height: var(--lh-body);
    color: var(--ink);
    resize: vertical;
}

.sim-extras textarea:focus,
.sim-dropzone:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.sim-extras .sim-field>label {
    gap: 8px;
}

.sim-notes-hint {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.sim-notes-hint span:first-child {
    white-space: pre-line;
}

.sim-notes-hint span:last-child {
    white-space: nowrap;
}

.sim-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 16px;
    border: 2px dashed #b9bfc7;
    border-radius: var(--radius);
    background: var(--soft);
    color: var(--muted);
    font-size: var(--text-meta);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.sim-dropzone strong {
    font-size: var(--text-body);
    color: var(--ink);
}

.sim-dropzone:hover,
.sim-dropzone.is-dragover,
.sim-upload-zone.is-dragover {
    border-color: var(--brand);
    background: #fff7fa;
}

.sim-dropzone.is-full {
    opacity: .55;
    cursor: not-allowed;
}

.sim-upload-errors {
    margin: 8px 0 0;
    padding: 8px 12px 8px 28px;
    border: 1px solid #f3c2cf;
    border-radius: var(--radius);
    background: #fff5f7;
    color: #b00d42;
    font-size: var(--text-meta);
}

.sim-upload-error {
    margin: 8px 0 0;
    color: #b00d42;
    font-size: var(--text-meta);
}

.sim-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.sim-thumbs:empty {
    display: none;
}

.sim-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sim-thumb-open,
.sim-upload-thumb {
    display: block;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
    overflow: hidden;
    cursor: zoom-in;
}

.sim-thumb-open img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.sim-thumb-open:hover,
.sim-upload-thumb:hover {
    border-color: var(--brand);
}

.sim-thumb-name {
    overflow: hidden;
    font-size: var(--text-caption);
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sim-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.sim-thumb-remove:hover {
    background: var(--brand);
}

.sim-upload-thumb {
    margin: 12px auto 0;
    width: 120px;
}

.sim-upload-thumb img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: contain;
    background: #fff;
}

/* The note as the review reads it back: kept as typed, line breaks included. */
.sim-design-extras {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.sim-design-extras h4 {
    margin: 0;
    font-size: var(--text-label);
}

.sim-notes-text {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--ink);
}

/* The note and pictures on a cart line: one line of note, a row of small squares
   that open the full picture in a new tab. */
.sim-cart-extras {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    font-size: var(--text-meta);
    color: var(--muted);
}

.sim-cart-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sim-cart-images img {
    display: block;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 4px;
    object-fit: cover;
}

/* One picture over the page. */
.sim-lightbox {
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: #fff;
    overflow: visible;
}

.sim-lightbox::backdrop {
    background: rgba(0, 0, 0, .7);
}

.sim-lightbox figure {
    margin: 0;
}

.sim-lightbox img {
    display: block;
    max-width: min(92vw, 1100px);
    max-height: calc(92vh - 48px);
    object-fit: contain;
}

.sim-lightbox figcaption {
    padding: 10px 14px;
    font-size: var(--text-meta);
    color: var(--muted);
    overflow-wrap: anywhere;
}

.sim-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* --- dropdowns ----------------------------------------------------------------
   Every single-choice list on the site draws the same chevron, with room to its
   right: the browser's own arrow sat against the border, and where each browser put
   it was its own business. The text keeps clear of the chevron with the padding.
   Specific enough to win over the field rules above that set padding and background
   (`.sim-field select`, `.sim-table select`, `.toolbar select`), and declared last. */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}

select:not([multiple]):not([size]):disabled {
    cursor: not-allowed;
    opacity: .6;
}

/* --- account-approval popup ---------------------------------------------------
   Shown instead of add-to-cart / checkout for a guest or an Inactive account.
   Native <dialog> so the backdrop and Escape are the browser's. */
.ww-approval-popup {
    width: min(420px, calc(100vw - 32px));
    padding: 24px;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}

.ww-approval-popup::backdrop {
    background: rgba(0, 0, 0, .45);
}

.ww-approval-popup__body {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
}

/* ============================================================
   Auth forms — sign-up wizard + sign-in (Workway)
   ============================================================ */

/* Use the full panel width (theme caps .form-grid at 420px). */
.form-grid.auth-form {
    max-width: none;
    width: 100%;
}

/* Field spacing */
.auth-form .form-row {
    margin-bottom: 16px;
}

/* Sign-in's rows are direct children of the form grid, so they already carry its 16px gap and the
   margin above would double it. Sign-up's rows sit inside .wizard-panel, are not grid children, and
   still rely on that margin - hence the direct-child selector rather than dropping the rule. */
.form-grid.auth-form > .form-row,
.form-grid.auth-form > .form-inline {
    margin-bottom: 0;
}

.auth-form .form-row > label:not(.form-check) {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.auth-form .form-row input:not([type="radio"]):not([type="checkbox"]),
.auth-form .form-row textarea,
.auth-form .form-row select {
    width: 100%;
}

.auth-form .form-hint {
    display: block;
    margin-top: 6px;
}

/* Radios / checkboxes: control + text on one line, tight */
.auth-form .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-weight: 400;
}

.auth-form .form-row .form-check {
    margin: 0;
}

.auth-form .form-check input {
    width: auto;
    flex: none;
    min-height: 0;
    height: auto;
    padding: 0;
    margin: 0;
}

/* Wizard (sign-up) */
.auth-form .wizard-panel {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.auth-form .wizard-panel legend.panel__title {
    padding: 0;
    margin: 24px 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
}

.auth-form .wizard-steps {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0 0 24px;
    flex-wrap: wrap;
}

.auth-form .wizard-steps li {
    flex: 1 1 120px;
    padding: 10px 12px;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #fafafa;
    color: #71717a;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.auth-form .wizard-steps li.is-active {
    border-color: #111827;
    background: #fff;
    color: #111827;
}

.auth-form .form-error.js-step-error {
    display: block;
    margin-top: 4px;
    color: #dc2626;
    font-size: 0.8rem;
}

/* Action row (Back / Next / Submit) — shared by both screens */
.auth-actions {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.auth-actions .button-primary,
.auth-actions .button-secondary {
    flex: 1 1 0;
    width: auto;
    margin-top: 0;
}

/* A single button sits at half width, centred. */
.auth-actions.is-single {
    justify-content: center;
}

.auth-actions.is-single .button-primary,
.auth-actions.is-single .button-secondary {
    flex: 0 0 50%;
}


/* ------------------------------------------------------------------
   Turnstile captcha (sign-in, sign-up, forgot-password, contact-us)
   ------------------------------------------------------------------ */

/* Cloudflare replaces the element with a fixed-size iframe, so this only places it. */
.captcha-turnstile {
    margin-top: 4px;
}

/* The widget has its own border and background; the form's error styling must not reach into it. */
.form-row:has(.form-error) .captcha-turnstile iframe {
    border-color: transparent;
}

/* Below ~320px the 300px widget would overflow the form; Cloudflare supports a compact size,
   but scaling keeps one widget instead of two markup paths. */
@media (max-width: 360px) {
    .captcha-turnstile {
        transform: scale(0.9);
        transform-origin: left top;
    }
}

/* Chevron icons replace the "›" glyph between breadcrumb steps and beside sidebar categories. */
.icon-chevron {
    flex: none;
    vertical-align: -2px;
}

.breadcrumb__sep {
    margin: 0 4px;
}

#filters .side-list a .icon-chevron {
    color: #9ba0a7;
}

/* Sub-categories sit one step in from their parent and read quieter. */
#filters .side-list--nested {
    padding-left: 14px;
}

#filters .side-list--nested a {
    font-size: var(--text-meta);
    color: #3a3f45;
}

.topbar__links {
    margin-left: auto;
}

/* The global `svg { display: block }` reset would drop the chevron onto its own line. */
.icon-chevron {
    display: inline-block;
}

/* Product detail: two equal columns; the gallery stays in view while the longer summary scrolls. */
.pdp-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
}

.pdp-top .gallery {
    position: sticky;
    top: 16px;
}

.pdp-top .summary {
    display: flex;
    flex-direction: column;
}

.pdp-top .summary .field-block {
    padding: 10px 0;
}

.pdp-top .summary .summary__meta,
.pdp-top .summary .summary__badges {
    margin-bottom: 8px;
}

.pdp-top .delivery-box {
    margin: 10px 0 4px;
}

.pdp-top .purchase-actions {
    margin-top: 12px;
    gap: 12px;
}

.pdp-top .processing-link-box {
    padding: 12px 14px;
}

@media (max-width: 960px) {
    .pdp-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pdp-top .gallery {
        position: static;
    }
}

/* Address book create/edit: related fields in two columns, the street address across both. */
.address-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    max-width: 760px;
}

.address-form > * {
    min-width: 0;
}

.address-form__full {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .address-form {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Clients (Workway/Client, sprint03/19668): My Page list + form, checkout
   block under Address, client card on the order detail.
   ========================================================================== */

.client-page {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 16px;
}

.client-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.client-page__title {
    flex: 1 1 auto;
    font-size: var(--text-section-title);
    font-weight: var(--fw-medium);
}

.client-page__back {
    display: none;
}

.client-page__empty {
    padding: 48px 0;
    color: var(--muted);
    text-align: center;
}

.client-search {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin-bottom: 20px;
}

.client-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: var(--text-input);
}

.client-search__input:focus {
    border-color: var(--brand);
    outline: none;
}

.client-search__button.secondary-button {
    padding: 0 20px;
}

.client-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.client-card {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.client-card__name {
    font-size: var(--text-card-title);
    font-weight: var(--fw-medium);
    overflow-wrap: anywhere;
}

.client-card__kana,
.client-card__line {
    color: var(--muted);
    font-size: var(--text-meta);
    overflow-wrap: anywhere;
}

.client-form__submit.primary-button {
    margin-top: 8px;
    padding: 0 44px;
}

@media (max-width: 767px) {
    .client-page {
        margin: 0;
    }

    .client-page__back {
        display: grid;
    }

    .client-list {
        grid-template-columns: 1fr;
    }

    .client-form__submit.primary-button {
        width: 100%;
    }
}

.checkout-client {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.checkout-client__title {
    font-size: var(--text-section-title);
    font-weight: var(--fw-medium);
}

.checkout-client__hint,
.checkout-client__note,
.checkout-client__status {
    color: var(--muted);
    font-size: var(--text-meta);
}

.checkout-client__hint {
    margin-top: 6px;
}

.checkout-client__modes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 18px 0;
}

.checkout-client__mode {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: var(--text-choice);
    cursor: pointer;
}

.checkout-client__mode input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
}

.checkout-client__select,
.checkout-client__input {
    width: 100%;
    margin-bottom: 4px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    font-size: var(--text-input);
}

.checkout-client__select {
    max-width: 480px;
}

.checkout-client__select:focus,
.checkout-client__input:focus {
    border-color: var(--brand);
    outline: none;
}

.checkout-client__label {
    display: block;
    margin: 12px 0 6px;
    font-size: var(--text-label);
}

.checkout-client__label.required::after {
    content: " *";
    color: var(--danger);
}

.checkout-client__error {
    color: var(--danger);
    font-size: var(--text-meta);
}

.checkout-client__status {
    margin-top: 12px;
}

@media (max-width: 767px) {
    .checkout-client {
        margin-top: 16px;
        padding: 16px;
        border-radius: var(--radius);
    }
}

.client-order-card {
    margin-bottom: 24px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    background: var(--soft);
}

.client-order-card__label {
    color: var(--muted);
    font-size: var(--text-meta);
}

.client-order-card__name {
    font-size: var(--text-card-title);
    font-weight: var(--fw-medium);
}

.client-order-card__phone {
    font-size: var(--text-meta);
}

/* Checkout Address step as a select + summary (sprint03/19668, D-10). */
.checkout-address-pick {
    max-width: 640px;
}

.checkout-address-pick__title {
    font-size: var(--text-panel-title);
    font-weight: var(--fw-medium);
}

.checkout-address-pick__summary {
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--text-meta);
    overflow-wrap: anywhere;
}

.checkout-address-pick__missing {
    margin-top: 6px;
    color: var(--danger);
    font-size: var(--text-meta);
}

.checkout-address-pick__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
}

.checkout-address-pick__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: var(--text-meta);
    text-decoration: underline;
    cursor: pointer;
}

.checkout-address-pick__link:hover {
    color: var(--brand);
}

/* Sign-up: the postcode lookup found no such code (sprint03/19668). The mark is set by address-lookup.js and
   cleared when the postcode is typed again; the note stays visible after the field loses focus. */
.postcode-miss {
    display: none;
    margin-top: 4px;
    color: #8a6100;
    font-size: var(--text-meta);
}

[data-lookup-miss="1"] ~ .postcode-miss {
    display: block;
}

/* Deferred payment (sprint03/19749_handle_deferred_registration_sg_payment): checkout reason line, refusal popup, My Page apply. */
.checkout-sg-reason {
    margin-top: 12px;
    color: var(--muted);
    font-size: var(--text-meta);
}

.checkout-sg-reason a {
    text-decoration: underline;
}

.checkout-sg-popup {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
}

.checkout-sg-popup__panel {
    width: 100%;
    max-width: 480px;
    padding: 24px;
    border-radius: 12px;
    background: var(--panel);
}

.checkout-sg-popup__title {
    margin-bottom: 12px;
    font-size: var(--text-section-title);
    font-weight: var(--fw-medium);
}

.checkout-sg-popup__text {
    margin-top: 6px;
    color: var(--muted);
}

.checkout-sg-popup__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.checkout-sg-popup__actions button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/*
 * The footer sits at the foot of the window on a short page (thank-you, empty cart): #app fills the window height and
 * the content takes what is left, so no white band shows under the footer (leader 2026-10-30).
 */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#app > #main {
    flex: 1 0 auto;
}

/*
 * In a flex column margins no longer collapse: the page shell's own bottom margin (52-64px) and the footer's 40px used
 * to merge into the larger one, and would now add up. The shell's margin alone keeps the gap it had.
 */
#app > footer {
    margin-top: 0;
}


/* ==========================================================================
   My Page portal (sprint04/20048_account_ui_improve, US-mypage-portal-layout)
   One shell for every account screen: a sticky navigation column from 1024px,
   a scrolling tab bar below it. Screens are built from the `mp-*` parts here -
   Tailwind utilities do not reach Workway views (src/rules/frontend.md §1.1).
   ========================================================================== */
.mp-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-top: 24px;
}

/* Bagisto's own account pages (wishlist, GDPR) wrap the navigation in a div and their content in a second one. */
.mp-shell > * {
    min-width: 0;
}

.mp-shell > .max-md\:hidden {
    display: block;
}

.mp-main {
    display: grid;
    gap: 20px;
    min-width: 0;
}

/* --- navigation (20048 R5) ------------------------------------------------------
   ≥1024px: a sticky column - the member, two titled groups, a quiet log-out link.
   <1024px: one picker naming the open page; it unfolds the same groups (native <details>). */
.mp-nav {
    position: sticky;
    top: 16px;
    border: 1px solid var(--line);
    background: var(--panel);
}

.mp-nav__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px 16px;
}

.mp-nav__avatar {
    object-fit: cover;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.mp-nav__who {
    min-width: 0;
}

/* One line each, cut with an ellipsis; the full value is the element's title (sprint05/20207: a long name wrapped). */
.mp-nav__name {
    overflow: hidden;
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-nav__email {
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-nav__group {
    padding: 6px 0 10px;
    border-top: 1px solid var(--wire);
}

.mp-nav__group-title {
    padding: 10px 20px 6px;
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
}

.mp-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 20px;
    color: var(--ink);
    font-size: var(--text-meta);
    font-weight: var(--fw-medium);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mp-nav__link:hover {
    background: var(--soft);
    color: var(--brand);
}

.mp-nav__link.is-active {
    background: #fdecf1;
    color: var(--brand);
    font-weight: var(--fw-bold);
}

.mp-nav__link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand);
}

.mp-nav__icon {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: var(--fs-lg);
    color: #8a919c;
}

.mp-nav__link.is-active .mp-nav__icon,
.mp-nav__link:hover .mp-nav__icon {
    color: var(--brand);
}

/* Bagisto's icon font has one person for both Profile and Clients and nothing for a company: two drawn icons. */
.mp-nav__icon[data-nav="clients"],
.mp-nav__icon[data-nav="company"] {
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--mp-nav-mask) center / contain no-repeat;
    mask: var(--mp-nav-mask) center / contain no-repeat;
}

.mp-nav__icon[data-nav="clients"]::before,
.mp-nav__icon[data-nav="company"]::before {
    content: none;
}

.mp-nav__icon[data-nav="clients"] {
    --mp-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 19c.6-3.2 3-5 6-5s5.4 1.8 6 5'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16.5 14.2c2.4.2 4.1 1.8 4.5 4.3'/%3E%3C/svg%3E");
}

.mp-nav__icon[data-nav="company"] {
    --mp-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 20V5l8-2v17M12 9l8 2v9M2.5 20h19'/%3E%3Cpath d='M7 8h2M7 11.5h2M7 15h2M15 13.5h2M15 16.5h2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.mp-nav__logout,
.mp-nav__sheet-logout {
    border-top: 1px solid var(--wire);
}

.mp-nav__logout a,
.mp-nav__sheet-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 20px;
    color: var(--muted);
    font-size: var(--text-meta);
    font-weight: var(--fw-medium);
}

.mp-nav__logout a:hover,
.mp-nav__sheet-logout:hover {
    background: #fff5f5;
    color: var(--danger);
}

.mp-nav__logout-icon {
    width: 20px;
    height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4H6v16h8M10 12h11M17 8l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4H6v16h8M10 12h11M17 8l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The picker exists only below 1024px. */
.mp-nav__picker {
    display: none;
}

@media (max-width: 1023px) {
    .mp-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 12px;
    }

    .mp-nav {
        position: relative;
        z-index: 20;
        display: flex;
        align-items: center;
    }

    .mp-nav__profile {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 12px;
    }

    .mp-nav__avatar {
        width: 36px;
        height: 36px;
        font-size: var(--fs-base);
    }

    .mp-nav__desktop,
    .mp-nav__logout {
        display: none;
    }

    .mp-nav__picker {
        display: block;
        flex: 0 0 auto;
        align-self: stretch;
        border-left: 1px solid var(--line);
    }

    .mp-nav__current {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 100%;
        min-height: 56px;
        max-width: 56vw;
        padding: 0 14px;
        color: var(--brand);
        font-size: var(--text-meta);
        font-weight: var(--fw-bold);
        list-style: none;
        cursor: pointer;
        user-select: none;
    }

    .mp-nav__current::-webkit-details-marker {
        display: none;
    }

    .mp-nav__current .mp-nav__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mp-nav__current .mp-nav__icon {
        color: var(--brand);
    }

    .mp-nav__caret {
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        margin-left: 2px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.2s ease;
    }

    .mp-nav__picker[open] .mp-nav__caret {
        transform: translateY(2px) rotate(-135deg);
    }

    .mp-nav__picker[open] .mp-nav__current {
        background: #fdecf1;
    }

    /* The sheet drops under the whole bar, full width, over the page. */
    .mp-nav__sheet {
        position: absolute;
        left: -1px;
        right: -1px;
        top: 100%;
        border: 1px solid var(--line);
        background: var(--panel);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    }

    .mp-nav__sheet .mp-nav__group:first-child {
        border-top: 0;
    }

    .mp-nav__sheet .mp-nav__link {
        min-height: 48px;
    }
}

/* --- page head ---------------------------------------------------------------- */
.mp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
}

.mp-head__eyebrow {
    color: var(--brand);
    font-size: var(--text-caption);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mp-head__title {
    margin: 2px 0 0;
    font-size: var(--text-section-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.mp-head__lead {
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--text-meta);
}

.mp-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- card ----------------------------------------------------------------------- */
.mp-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: var(--shadow);
    min-width: 0;
}

.mp-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wire);
}

.mp-card__title {
    margin: 0;
    font-size: var(--text-panel-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.mp-card__sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.mp-card__body {
    padding: 20px;
}

/* A My Page box that folds: a <details> whose <summary> is the head (sprint05/20207). */
.mp-card--fold > summary {
    cursor: pointer;
    list-style: none;
}

.mp-card--fold > summary::-webkit-details-marker {
    display: none;
}

.mp-card--fold > summary > div {
    flex: 1;
}

.mp-card--fold:not([open]) > summary {
    border-bottom: 0;
}

.mp-card__fold-icon {
    flex: none;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.mp-card--fold[open] > summary .mp-card__fold-icon {
    transform: rotate(90deg);
}

.mp-card__body--flush {
    padding: 0;
}

.mp-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--wire);
    background: #fafbfc;
    border-radius: 0 0 10px 10px;
}

.mp-card__link {
    color: var(--brand);
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.mp-card__link:hover {
    text-decoration: underline;
}

.mp-card--hover {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mp-card--hover:hover {
    border-color: var(--brand);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
    .mp-card__head,
    .mp-card__body,
    .mp-card__foot {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* --- grids and rows ---------------------------------------------------------------- */
.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.mp-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .mp-grid--2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mp-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--wire);
    color: inherit;
}

.mp-row:last-child {
    border-bottom: 0;
}

a.mp-row:hover {
    background: #fafbfc;
}

.mp-row__main {
    flex: 1 1 auto;
    min-width: 0;
}

.mp-row__title {
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

.mp-row__meta {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-caption);
    overflow-wrap: anywhere;
}

.mp-row__aside {
    display: grid;
    justify-items: end;
    gap: 4px;
    flex-shrink: 0;
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
}

@media (max-width: 640px) {
    .mp-row {
        padding: 12px 16px;
    }
}

/* Label / value pairs: two columns from 768px, stacked below. */
.mp-dl {
    display: grid;
    margin: 0;
}

.mp-dl__row {
    display: grid;
    grid-template-columns: 12em minmax(0, 1fr);
    gap: 4px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--wire);
    font-size: var(--text-meta);
}

.mp-dl__row:first-child {
    padding-top: 0;
}

.mp-dl__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.mp-dl__row dt {
    color: var(--muted);
}

.mp-dl__row dd {
    margin: 0;
    font-weight: var(--fw-medium);
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .mp-dl__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- badges ------------------------------------------------------------------------ */
/* The deferred-payment state on My Page: a status pill, then its line (sprint05/20207). */
.mp-sg-state {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--wire);
    color: #4a4f57;
    font-size: var(--text-caption);
    font-weight: var(--fw-bold);
    line-height: 1.5;
    white-space: nowrap;
}

.mp-badge--default {
    background: #fdecf1;
    color: var(--brand-dark);
}

.mp-badge--draft {
    background: #e5edff;
    color: #1d4ed8;
}

.mp-badge--cart {
    background: #fff3cd;
    color: #8a6300;
}

.mp-badge--locked {
    background: #e1f5e5;
    color: #19743a;
}

/* --- buttons ------------------------------------------------------------------------ */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mp-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.mp-btn:disabled,
.mp-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.mp-btn--primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.mp-btn--primary:hover {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
    color: #fff;
}

.mp-btn--danger {
    border-color: #f3c4c4;
    color: var(--danger);
}

.mp-btn--danger:hover {
    border-color: var(--danger);
    background: #fff5f5;
    color: var(--danger);
}

.mp-btn--sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--text-caption);
}

@media (max-width: 640px) {
    .mp-head__actions .mp-btn {
        flex: 1 1 auto;
    }
}

/* --- empty state, notice, skeleton --------------------------------------------------- */
.mp-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 36px 20px;
    text-align: center;
    color: var(--muted);
    font-size: var(--text-meta);
}

.mp-empty__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--soft);
    color: #9098a3;
    font-size: 28px;
}

.mp-empty__title {
    color: var(--ink);
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
}

.mp-notice {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--soft);
    color: #4a4f57;
    font-size: var(--text-meta);
}

.mp-skeleton {
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--soft) 25%, #eceef1 37%, var(--soft) 63%);
    background-size: 400% 100%;
    animation: order-card-shimmer 1.4s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
    .mp-skeleton {
        animation: none;
    }
}

/* --- overview shortcuts --------------------------------------------------------------- */
.mp-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1199px) {
    .mp-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mp-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: inherit;
}

.mp-shortcut__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fdecf1;
    color: var(--brand);
    font-size: var(--fs-xl);
}

.mp-shortcut__label {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mp-shortcut__label strong {
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
}

.mp-shortcut__label span {
    color: var(--muted);
    font-size: var(--text-caption);
}

@media (max-width: 480px) {
    .mp-shortcut {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px;
    }
}

/* My Page — orders (20048) */
.mp-orders .order-list {
    gap: 14px;
}

.mp-orders .order-card {
    padding: 18px 20px;
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mp-orders .order-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.mp-orders .order-card--shimmer {
    height: 108px;
}

.order-card__ident {
    min-width: 0;
}

.order-card__id {
    font-size: var(--text-label);
}

.order-card__date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.order-card__status {
    flex-shrink: 0;
}

.order-card__total {
    font-size: var(--text-label);
}

@media (max-width: 480px) {
    .mp-orders .order-card {
        padding: 14px 16px;
    }

    .mp-orders .order-card__head {
        flex-direction: column-reverse;
        gap: 8px;
    }
}

/* The datagrid draws its own framed box around the body and the pager; inside `.mp-orders` the cards are the frame,
   so the box would show as a second border around them (20048 R1-5a). */
.mp-orders .table-responsive,
.mp-orders div:has(> .table-responsive) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.mp-orders .table-responsive > .order-list + div {
    padding: 16px 0 0;
}

/* Order detail: header card above Bagisto's tabs, which sit in one card body (20048 D8). */
.mp-order-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px;
}

.mp-order-head__main {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.mp-order-head__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: var(--fw-bold);
}

.mp-order-head__back:hover {
    color: var(--brand);
}

.mp-order-head .mp-head__title {
    margin: 0;
}

.mp-order-head .mp-head__lead {
    margin-top: 0;
}

.mp-order-head .order-view-shipping,
.mp-order-head .order-view-on-behalf {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--soft);
    font-size: var(--text-caption);
    overflow-wrap: anywhere;
}

/* Under the cancelled label of a receipted order staff cancelled (20269): small, on its own line. */
.mp-order-head .order-view-cancelled-note {
    flex-basis: 100%;
    font-size: var(--text-caption);
    color: var(--muted);
}

/* Always on the right, also when the row wraps under the title on a narrow screen. */
.mp-order-head__actions {
    justify-content: flex-end;
    margin-left: auto;
}

/* Empty when every action is hidden on mobile; the mobile tab carries its own buttons. */
.mp-order-head__actions:not(:has(> :not(form):not(.max-md\:hidden))) {
    display: none;
}

@media (min-width: 768px) {
    .mp-order-head__actions:not(:has(> :not(form):not(.max-md\:hidden))) {
        display: flex;
    }
}

.mp-order-body {
    padding: 8px 20px 24px;
}

.mp-order-body .overflow-x-auto {
    border-color: var(--line);
    border-radius: var(--radius);
}

.mp-order-body table thead {
    background: var(--soft);
}

.mp-order-body .order-view-details {
    border-color: var(--wire);
}

.mp-order-view > .mt-4 {
    margin-top: 0;
}

/* My Page order items: one card per product, each with its own 再注文 (sprint06/20129_reorder_per_item D8) */
.mp-order-items {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.mp-order-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mp-order-item:hover {
    border-color: #c5cad2;
    box-shadow: var(--shadow);
}

.mp-order-item__media img {
    display: block;
    width: 88px;
    height: 88px;
    border: 1px solid var(--wire);
    border-radius: var(--radius);
    background: var(--soft);
    object-fit: cover;
}

.mp-order-item__main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.mp-order-item__name {
    margin: 0;
    font-size: var(--text-card-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

.mp-order-item__lines {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--wire);
    list-style: none;
}

.mp-order-item__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--wire);
}

/* The per-line event (the design popup button) takes the line's full width. */
.mp-order-item__line > :not(.mp-order-item__spec):not(.mp-order-item__figures) {
    grid-column: 1 / -1;
}

.mp-order-item__spec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mp-order-item__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid var(--wire);
    border-radius: 999px;
    background: var(--soft);
    font-size: var(--text-meta);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.mp-order-item__chip--file {
    color: var(--brand);
    text-decoration: underline;
}

.mp-order-item__sku {
    color: var(--muted);
    font-size: var(--text-caption);
}

.mp-order-item__figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: var(--text-meta);
    text-align: right;
}

.mp-order-item__qty,
.mp-order-item__unit,
.mp-order-item__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 8px;
    margin: 0;
}

.mp-order-item__qty {
    color: var(--muted);
}

.mp-order-item__amount {
    font-weight: var(--fw-bold);
}

.mp-order-item__label,
.mp-order-item__excl {
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: var(--fw-regular);
}

.mp-order-item__excl {
    flex-basis: 100%;
}

.mp-order-item__foot {
    display: flex;
    justify-content: flex-end;
}

.mp-order-item__reorder {
    border-color: var(--brand);
    color: var(--brand);
}

.mp-order-item__reorder:hover {
    border-color: var(--brand-dark);
    background: #fff1f5;
    color: var(--brand-dark);
}

.mp-order-item__reorder-icon {
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/%3E%3Cpath d='M4 3v5h5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/%3E%3Cpath d='M20 21v-5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/%3E%3Cpath d='M4 3v5h5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/%3E%3Cpath d='M20 21v-5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 767px) {
    /* Inside the grey "items ordered" accordion. */
    .mp-order-items {
        gap: 10px;
        margin: 0;
        padding: 10px;
    }

    .mp-order-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .mp-order-item__media img {
        width: 64px;
        height: 64px;
    }

    .mp-order-item__line {
        grid-template-columns: minmax(0, 1fr);
    }

    .mp-order-item__figures {
        align-items: flex-start;
        text-align: left;
    }

    .mp-order-item__qty,
    .mp-order-item__unit,
    .mp-order-item__amount {
        justify-content: flex-start;
    }

    /* A thumb-sized, full-width button. */
    .mp-order-item__foot > form,
    .mp-order-item__reorder {
        width: 100%;
    }

    .mp-order-item__reorder {
        min-height: 42px;
    }
}

@media (max-width: 767px) {
    .mp-order-head {
        padding: 16px;
    }

    .mp-order-body {
        padding: 4px 12px 16px;
    }
}

/* My Page — company & clients (20048) */
/* The client screens and the deferred-payment form keep their `client-*` parts inside the shell's column. */
.mp-shell > .client-page {
    margin: 0;
}

.client-page.mp-main .client-page__head {
    margin-bottom: 0;
}

.client-page.mp-main .client-search {
    margin-bottom: 0;
}

.client-card.mp-card {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.client-card__ident {
    min-width: 0;
    overflow-wrap: anywhere;
}

.client-card__body {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
}

.client-card .mp-card__foot form {
    display: none;
}

.client-form.mp-card {
    padding: 24px;
}

.client-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--wire);
}

.client-form__actions .client-form__submit {
    min-width: 160px;
}

@media (max-width: 767px) {
    .client-form.mp-card {
        padding: 16px;
    }

    .client-form__actions .mp-btn {
        flex: 1 1 auto;
    }
}

.mp-notice > [class^="icon-"] {
    flex-shrink: 0;
    font-size: var(--fs-xl);
    color: #9098a3;
}

/* My Page — profile & addresses (20048) */
.mp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.mp-form-grid__full {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .mp-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mp-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--wire);
}

@media (max-width: 640px) {
    .mp-form-actions .mp-btn,
    .mp-card__foot .mp-btn {
        flex: 1 1 auto;
    }
}

.mp-check {
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.mp-check__label {
    color: var(--muted);
    font-size: var(--text-meta);
    cursor: pointer;
}

.mp-address {
    display: flex;
    flex-direction: column;
}

.mp-address.is-default {
    border-color: var(--brand);
}

.mp-address__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mp-address__body {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    font-size: var(--text-meta);
    line-height: var(--lh-body);
    overflow-wrap: anywhere;
}

.mp-address__phone {
    margin-top: 6px;
    color: var(--muted);
}

.mp-address .mp-card__foot form {
    display: none;
}

/* My Page — designs (20048, US-mypage-design-list) */
.mp-design-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.mp-design {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mp-design__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--soft);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.mp-design__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mp-design__badge {
    position: absolute;
    top: 10px;
    left: 10px;
}

.mp-design__body {
    display: grid;
    gap: 4px;
    flex: 1 1 auto;
    padding: 14px 16px 16px;
}

.mp-design__product {
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

.mp-design__meta,
.mp-design__note {
    color: var(--muted);
    font-size: var(--text-caption);
}

.mp-design__order {
    margin-top: 4px;
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
}

.mp-design__actions {
    justify-content: stretch;
}

.mp-design__actions .mp-btn {
    flex: 1 1 auto;
}

.mp-design__thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--soft);
    object-fit: contain;
}

.mp-row__main > .mp-row__title,
.mp-row__main > .mp-row__meta {
    display: block;
}

.mp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mp-pager__label {
    color: var(--muted);
    font-size: var(--text-meta);
}

/* My Page — grid / list switch on Clients and Addresses (20048 R1-1) */
.mp-view {
    display: grid;
    gap: 12px;
}

.mp-view__bar.toolbar {
    margin-bottom: 4px;
}

.mp-view__summary {
    font-weight: var(--fw-bold);
}

.mp-view__bar .view-button {
    cursor: pointer;
}

/* List: one entry per row, its details beside the name rather than under it. */
.mp-view.is-list .mp-grid,
.mp-view.is-list .client-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

@media (min-width: 768px) {
    .mp-view.is-list .mp-address {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto;
        align-items: center;
    }

    .mp-view.is-list .mp-address .mp-card__head {
        border-bottom: 0;
    }

    .mp-view.is-list .mp-address .mp-card__body {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .mp-view.is-list .mp-address .mp-card__foot {
        border-top: 0;
        background: transparent;
    }

    .mp-view.is-list .client-card {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto;
        align-items: center;
    }

    .mp-view.is-list .client-card .mp-card__head {
        border-bottom: 0;
    }

    .mp-view.is-list .client-card .mp-card__foot {
        border-top: 0;
        background: transparent;
    }
}

/* My Page order detail: a line's design behind a button, in a native popover (20048 R1-5b, R2-2) */
.sim-line-popup {
    margin-top: 8px;
}

.sim-line-popup__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px 0 6px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--panel);
    color: var(--ink);
    font-size: var(--text-caption);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    cursor: pointer;
}

.sim-line-popup__toggle:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.sim-line-popup__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fdecf1;
    color: var(--brand);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: var(--fw-bold);
}

.sim-line-popup__code {
    color: var(--muted);
    font-weight: var(--fw-medium);
}

/* One size wherever it opens - cart, checkout, order history (20048 R8, R15): 70% of the window wide on a desktop,
   96% and centred on a phone. */
.sim-line-popup__panel {
    width: 70vw;
    height: fit-content;
    max-width: none;
    max-height: 86vh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.sim-line-popup__panel:popover-open {
    display: flex;
    flex-direction: column;
}

.sim-line-popup__panel::backdrop {
    background: rgba(17, 24, 39, 0.45);
}

.sim-line-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wire);
}

.sim-line-popup__title {
    margin: 0;
    font-size: var(--text-panel-title);
    font-weight: var(--fw-bold);
}

.sim-line-popup__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.sim-line-popup__close:hover {
    background: var(--soft);
}

/* A long design scrolls inside the body; the header and its close button stay in view. */
.sim-line-popup__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 20px 20px;
    overflow-y: auto;
}

/* My Page forms: a value the customer cannot change, e.g. the country (20048 R3-1, R3-4) */
.mp-readonly-field {
    width: 100%;
    margin-bottom: 6px;
    padding: 12px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--muted);
    font-size: var(--text-input);
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .mp-readonly-field {
        padding: 8px 16px;
    }
}

/* My Page order detail: roomier totals, and the address / method / payment blocks on one balanced grid (20048 R3-5).
   Six tracks: the two addresses take half a row each, shipping method, payment method and payment status a third. */
.mp-order-totals {
    min-width: 340px;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 10px;
    background: #fafbfc;
    font-size: var(--text-meta);
}

.mp-order-totals > div {
    column-gap: 48px;
}

.mp-order-totals > div:has(+ .font-semibold),
.mp-order-totals > .font-semibold {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wire);
}

.mp-order-totals > .font-semibold {
    font-size: var(--text-label);
}

@media (min-width: 768px) {
    .mp-order-view .order-view-details {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
    }

    .mp-order-view .order-view-details > * {
        grid-column: span 2;
        max-width: none;
        align-content: start;
        gap: 8px;
        padding: 16px 18px;
        border: 1px solid var(--wire);
        border-radius: 8px;
        background: #fafbfc;
    }

    .mp-order-view .order-view-details > :nth-child(-n + 2) {
        grid-column: span 3;
    }
}

/* My Page: square corners on every bordered box - cards, navigation, buttons, fields, panels, Bagisto's own rounded
   parts inside the account pages (20048 R4-1). Pills, avatars and round icons keep their shape: they are not boxes. */
.account-page :is(
    .mp-card, .mp-card__foot, .mp-nav, .mp-nav__link, .mp-nav__logout a, .mp-btn, .mp-notice, .mp-skeleton,
    .mp-readonly-field, .mp-order-totals, .order-view-details > *, .order-card, .client-card, .toolbar, .view-button,
    .page-btn, .sim-line-popup__toggle, .sim-line-popup__panel, .mp-design, .mp-view__btn,
    input, select, textarea, button, [class*="rounded"]
):not(.mp-badge, .mp-badge *, [class*="label-"], img, .mp-empty__icon, .mp-shortcut__icon, .sim-line-popup__icon, .sim-line-popup__close, .quote-dialog__close, input[type="radio"], input[type="checkbox"]) {
    border-radius: 0;
}

/* Order detail: Bagisto's tab bar runs edge to edge of its card, with no white margin either side (20048 R4-2). */
.mp-order-body > :first-child > .bg-zinc-100:first-child {
    margin: -8px -20px 16px;
}

@media (max-width: 767px) {
    .mp-order-body > :first-child > .bg-zinc-100:first-child {
        margin: -4px -12px 12px;
    }
}

/* My Page page header: room above and below the title, and a hairline that separates it from the screen's content
   (20048 R7). The mobile shell sits tighter, so the header carries the space itself there. */
.mp-head {
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--wire);
}

@media (max-width: 1023px) {
    .mp-head {
        padding: 12px 4px 16px;
    }

    .mp-head__title {
        font-size: var(--fs-2xl);
    }
}

/* The grid / list bar keeps the count and the two buttons on one line, also where the catalogue toolbar stacks. */
.mp-view__bar.toolbar {
    flex-direction: row;
    align-items: center;
}

.mp-view__bar .toolbar__right {
    width: auto;
}

/* ==========================================================================
   Checkout in the My Page style (sprint04/20048 R9)
   Bagisto's Vue steps are kept as they are; the theme wraps each in a
   `co-step` card and re-lays its markup from here. Shipping and payment
   options become a one-column list of rows - radio left, name and note in
   the middle, price right - so a third or fourth carrier or payment type
   simply adds a row. Square corners, as on My Page.
   ========================================================================== */
.page-shell--checkout .co-head {
    margin-bottom: 20px;
}

.page-shell--checkout :is(
    .co-step, .co-summary, .co-place__button, .co-step label, .checkout-login,
    input, select, textarea, button, [class*="rounded"]
):not(img, input[type="radio"], input[type="checkbox"], [class*="label-"], .sim-line-popup__icon, .sim-line-popup__close) {
    border-radius: 0;
}

.co-step {
    margin-bottom: 16px;
    padding: 4px 24px 20px;
    border: 1px solid var(--line);
    background: var(--panel);
}

.co-step > div,
.co-step [class*="mb-7"] {
    margin-bottom: 0;
}

.co-step h2 {
    font-size: var(--text-panel-title);
    font-weight: var(--fw-bold);
}

/* --- shipping and payment: rows, not tiles ---------------------------------------- */
.co-step--shipping .flex-wrap,
.co-step--payment .flex-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.co-step--shipping .flex-wrap > div,
.co-step--payment .flex-wrap > div {
    width: 100%;
    max-width: none;
}

/* The radio Bagisto pins to the top-right corner moves to the row's left edge. */
.co-step--shipping .flex-wrap > div > label:first-of-type,
.co-step--payment .flex-wrap > div > label:first-of-type {
    top: 50%;
    right: auto;
    left: 16px;
    transform: translateY(-50%);
    color: var(--brand);
    z-index: 1;
}

.co-step--shipping .flex-wrap > div > label:last-of-type,
.co-step--payment .flex-wrap > div > label:last-of-type {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    padding: 12px 18px 12px 54px;
    border: 1px solid var(--line);
    background: var(--panel);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.co-step--shipping .flex-wrap > div > label:last-of-type:hover,
.co-step--payment .flex-wrap > div > label:last-of-type:hover {
    border-color: var(--brand);
}

.co-step--shipping input:checked ~ label:last-of-type,
.co-step--payment input:checked ~ label:last-of-type {
    border-color: var(--brand);
    background: #fdecf1;
}

.co-step--shipping .icon-flate-rate {
    flex-shrink: 0;
    font-size: 30px;
    color: var(--muted);
}

/* Title and its description stacked on the left as the payment card does, the price on the right (20201). */
.co-step--shipping label:last-of-type > div {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title price" "desc price";
    align-items: center;
    column-gap: 16px;
    min-width: 0;
}

.co-step--shipping label:last-of-type > div > p {
    margin: 0;
}

.co-step--shipping label:last-of-type > div > p:first-child {
    grid-area: price;
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
}

.co-step--shipping label:last-of-type > div > [data-testid="shop-checkout-shipping-title"] {
    grid-area: title;
    color: var(--ink);
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
}

.co-step--shipping label:last-of-type > div > [data-testid="shop-checkout-shipping-description"] {
    grid-area: desc;
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: var(--fw-medium);
}

.co-step--payment label:last-of-type img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.co-step--payment label:last-of-type > div {
    flex: 1 1 auto;
    min-width: 0;
}

.co-step--payment label:last-of-type > div p {
    margin-top: 0;
}

.co-step--payment label:last-of-type > div p:first-of-type {
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
}

/* --- summary and the order button ------------------------------------------------------ */
.co-summary {
    padding: 16px 20px 20px;
    border: 1px solid var(--line);
    background: var(--panel);
}

.co-summary > h1 {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--wire);
    font-size: var(--text-panel-title);
    font-weight: var(--fw-bold);
}

.co-place {
    display: block;
    margin-top: 16px;
}

.co-place .co-place__button.primary-button.primary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    min-height: 64px;
    padding: 0 24px;
    font-size: var(--fs-xl);
    letter-spacing: 0.08em;
    box-shadow: 0 6px 16px rgba(207, 10, 75, 0.28);
}

.co-place .co-place__button.primary-button.primary-button:hover {
    box-shadow: 0 8px 20px rgba(207, 10, 75, 0.36);
}

.co-place .co-place__button.primary-button.primary-button:disabled {
    box-shadow: none;
}

@media (max-width: 768px) {
    .co-step {
        padding: 2px 14px 14px;
    }

    .co-summary {
        padding: 12px 14px 14px;
    }

    .co-step--shipping .flex-wrap > div > label:last-of-type,
    .co-step--payment .flex-wrap > div > label:last-of-type {
        padding-left: 48px;
    }

    .co-step--shipping .icon-flate-rate {
        display: none;
    }

    .co-place .co-place__button.primary-button.primary-button {
        min-height: 56px;
        font-size: var(--fs-lg);
    }
}

/* The cart's checkout button no longer sticks to the bottom below 1024px (user 2026-11-13, design D16; supersedes
   20048 R10's fixed bar): it sits in the summary
   like any other block. The checkout's 注文する keeps its own sticky bar at the top (20048 R12). */

/* ==========================================================================
   Cart in the checkout / My Page style (sprint04/20048 R10). Scoped to the
   cart: `.panel` and `.layout` are shared with sign-up, sign-in, CMS pages.
   ========================================================================== */
.page-shell--cart :is(
    .panel, .cart-summary, .button-primary, .button-secondary, .qty, .qty button, .qty-input, input, button, [class*="rounded"]
):not(img, [class*="label-"], .sim-line-popup__icon, .sim-line-popup__close) {
    border-radius: 0;
}

.page-shell--cart .panel {
    box-shadow: none;
}

.page-shell--cart .panel__head {
    padding: 16px 20px;
    background: var(--panel);
    border-bottom-color: var(--wire);
}

.page-shell--cart .panel__body {
    padding: 4px 20px 16px;
}

.page-shell--cart .cart-summary {
    border: 1px solid var(--line);
    background: var(--panel);
}

.page-shell--cart .cart-summary__head {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--wire);
    background: var(--panel);
    color: var(--ink);
}

.page-shell--cart .cart-summary__body {
    padding: 12px 20px 20px;
}

.page-shell--cart .sum-row.total {
    border-top-color: var(--line);
}

.page-shell--cart .co-place {
    margin-top: 16px;
}

.page-shell--cart .co-place .co-place__button {
    min-height: 64px;
    font-size: var(--fs-xl);
    letter-spacing: 0.08em;
    box-shadow: 0 6px 16px rgba(207, 10, 75, 0.28);
}

.page-shell--cart .co-place .co-place__button:hover {
    box-shadow: 0 8px 20px rgba(207, 10, 75, 0.36);
}

.page-shell--cart .button-secondary {
    margin-top: 10px;
    border-color: var(--line);
}

.page-shell--cart .button-secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
}

@media (max-width: 767px) {
    .page-shell--cart .panel__head,
    .page-shell--cart .cart-summary__head {
        padding-left: 14px;
        padding-right: 14px;
    }

    .page-shell--cart .panel__body,
    .page-shell--cart .cart-summary__body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .page-shell--cart .co-place .co-place__button {
        min-height: 56px;
        font-size: var(--fs-lg);
    }
}

/* --- checkout: the sticky bar with the title and 注文する (20048 R12) ----------------------------
   Shown from the first paint; the button stays disabled until every step is chosen, and while an
   order is being placed (the component also ignores a second click before it re-renders). */
.co-bar {
    position: sticky;
    top: 0;
    /* Under the header nav (30): its Maker / Category menus open over the bar. */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 20px;
    padding: 14px 20px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.co-bar__text {
    min-width: 0;
}

.co-bar__title {
    margin: 0;
    font-size: var(--text-section-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.co-bar__lead {
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--text-meta);
}

.co-bar__action {
    display: grid;
    justify-items: end;
    gap: 4px;
    flex-shrink: 0;
}

.co-bar .co-place__button.primary-button.primary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 260px;
    min-height: 56px;
    padding: 0 28px;
    font-size: var(--fs-xl);
    letter-spacing: 0.08em;
    box-shadow: 0 6px 16px rgba(207, 10, 75, 0.28);
}

.co-bar .co-place__button.primary-button.primary-button:disabled {
    border-color: #c9ccd1;
    background: #c9ccd1;
    color: #fff;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.co-bar__hint {
    color: var(--muted);
    font-size: var(--text-caption);
}

/* 注文する greyed out while a line is short of stock: the reason, in red (sprint05/20167). */
.co-bar__hint--stock {
    color: var(--danger);
    font-weight: 700;
}

@media (max-width: 767px) {
    /* Edge to edge: cancels the page shell's side padding (20px, 12px from 560px down). */
    .co-bar {
        margin-left: -20px;
        margin-right: -20px;
        padding: 10px 20px;
        border-left: 0;
        border-right: 0;
    }

    .co-bar__title {
        font-size: var(--fs-lg);
    }

    .co-bar__lead,
    .co-bar__hint {
        display: none;
    }

    .co-bar .co-place__button.primary-button.primary-button {
        min-width: 0;
        min-height: 46px;
        padding: 0 18px;
        font-size: var(--fs-base);
    }
}

@media (max-width: 560px) {
    .co-bar {
        margin-left: -12px;
        margin-right: -12px;
        padding: 10px 12px;
    }
}

/* Design popup content: the faces left, the detail box right (20048 R13, 20201). */
.sim-popup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: stretch;
}

/* Design faces, one at a time (20201). Radios + labels, no script. Kept in step with the copy in the back office's admin/line-design.blade.php. */
.sim-faces { position: relative; }

.sim-faces__radio { position: absolute; opacity: 0; pointer-events: none; }

.sim-faces:has(.sim-faces__radio:focus-visible) { outline: 2px solid var(--brand, #d6003f); outline-offset: 2px; }

.sim-faces__slide { display: none; position: relative; margin: 0; padding: 0 52px; border: 1px solid var(--wire, #e5e7eb); background: #fff; }

.sim-faces__slide > img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }

.sim-faces__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--line, #d1d5db); border-radius: 50%; background: #fff;
    font-size: 22px; line-height: 1; color: var(--ink, #111827); cursor: pointer; user-select: none;
}

.sim-faces__nav:hover { border-color: var(--brand, #d6003f); color: var(--brand, #d6003f); }

.sim-faces__nav.is-prev { left: 6px; }

.sim-faces__nav.is-next { right: 6px; }

.sim-faces__chip {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    padding: 3px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); font-size: 12px; font-weight: 700; color: var(--ink, #111827); white-space: nowrap;
}
.sim-faces:has(> .sim-faces__radio:nth-of-type(1):checked) .sim-faces__slide:nth-child(1) { display: block; }
.sim-faces:has(> .sim-faces__radio:nth-of-type(2):checked) .sim-faces__slide:nth-child(2) { display: block; }
.sim-faces:has(> .sim-faces__radio:nth-of-type(3):checked) .sim-faces__slide:nth-child(3) { display: block; }
.sim-faces:has(> .sim-faces__radio:nth-of-type(4):checked) .sim-faces__slide:nth-child(4) { display: block; }
.sim-faces:has(> .sim-faces__radio:nth-of-type(5):checked) .sim-faces__slide:nth-child(5) { display: block; }
.sim-faces:has(> .sim-faces__radio:nth-of-type(6):checked) .sim-faces__slide:nth-child(6) { display: block; }
.sim-faces:has(> .sim-faces__radio:nth-of-type(7):checked) .sim-faces__slide:nth-child(7) { display: block; }
.sim-faces:has(> .sim-faces__radio:nth-of-type(8):checked) .sim-faces__slide:nth-child(8) { display: block; }

.sim-popup-preview__note {
    margin-top: 8px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.sim-popup-preview__empty {
    display: grid;
    place-items: center;
    min-height: 200px;
    padding: 20px;
    border: 1px dashed var(--line);
    background: var(--soft);
    color: var(--muted);
    font-size: var(--text-meta);
    text-align: center;
}

/* Amounts in the popup and on the simulator are before tax (sprint05/20135 D8); tax is added at the order total. */
.sim-tax-note {
    color: var(--muted);
    font-size: 0.85em;
    font-weight: normal;
}

@media (max-width: 767px) {
    .sim-popup-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* Design popup: the customer's notes and reference pictures. */
.sim-popup-extras {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    font-size: var(--text-meta);
}

.sim-popup-extras__notes strong {
    margin-right: 8px;
}

.sim-popup-extras__images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sim-popup-extras__images img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.sim-popup-preview__name {
    margin-top: 4px;
    color: var(--brand);
    font-size: var(--text-meta);
    font-weight: var(--fw-bold);
}

@media (max-width: 767px) {
    .sim-line-popup__panel {
        width: 96vw;
        margin: auto;
    }
}

/* Cart / checkout line: the personal name, outside the design popup (20048 R16). */
.line-personal-name {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 10px;
    border: 1px solid #f3c6d4;
    background: #fdecf1;
    font-size: var(--text-meta);
}

.line-personal-name span {
    color: var(--muted);
    font-size: var(--text-caption);
}

.line-personal-name strong {
    color: var(--brand-dark);
    font-weight: var(--fw-bold);
}

/* Quote to a client (sprint05/20167_customer_quote, Client package) */

/* The form is a popup on the cart and the order detail (leader 2026-11-06): a <dialog> on the body; the header and its
   close button stay in view while a long form scrolls. */
.quote-dialog {
    width: min(1100px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.quote-dialog[open] {
    display: flex;
    flex-direction: column;
}

.quote-dialog::backdrop {
    background: rgba(17, 24, 39, 0.45);
}

.quote-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wire);
}

.quote-dialog__title {
    margin: 0;
    font-size: var(--text-panel-title);
    font-weight: var(--fw-bold);
}

.quote-dialog__lead {
    margin: 4px 0 0;
    color: var(--muted);
}

.quote-dialog__close {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.quote-dialog__close:hover {
    background: var(--soft);
}

.quote-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 20px 20px;
    overflow-y: auto;
}

.quote-dialog .quote-form {
    padding: 0;
}

.quote-dialog .quote-errors {
    margin-bottom: 16px;
}

.quote-cart-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.quote-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.quote-form__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0;
    margin: 0;
    padding: 0;
}

.quote-form__legend {
    font-weight: 700;
    margin-bottom: 4px;
}

.quote-form__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.quote-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.quote-form__input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
}

.quote-form__price {
    max-width: 140px;
    text-align: right;
}

/* Recipient: only the chosen mode's field shows, as the checkout's お客様 block does (20167, requester 2026-11-05). */
.quote-recipient .checkout-client__modes {
    margin: 4px 0 12px;
}

.quote-recipient:has(input[value="client"]:checked) .quote-recipient__typed,
.quote-recipient:has(input[value="typed"]:checked) .quote-recipient__client {
    display: none;
}

/* No saved client and "Choose a client" picked: nothing to quote for yet, so only the recipient choice and Cancel show. */
.quote-form--no-clients:has(input[name="recipient_mode"][value="client"]:checked) .quote-form__needs-recipient {
    display: none;
}

/* Switching the recipient mode: the parts it shows fade in instead of popping. An animation reruns each time an element
   leaves display: none, which a transition cannot do; the dialog's height still changes at once (height: auto). */
.quote-recipient__client,
.quote-recipient__typed,
.quote-form__needs-recipient {
    animation: quote-reveal 0.2s ease-out;
}

@keyframes quote-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quote-recipient__client,
    .quote-recipient__typed,
    .quote-form__needs-recipient {
        animation: none;
    }
}

/* A field's error under the field, as x-shop::form.control-group.error draws it (text-red-500 text-xs italic). */
.quote-form__error {
    margin: 4px 0 0;
    color: #ef4444;
    font-size: 12px;
    font-style: italic;
    text-align: left;
}

.quote-form__error[hidden] {
    display: none;
}

/* ¥ before every amount the shop types (requester 2026-11-06). */
.quote-form__money {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quote-form__yen {
    color: #6b7280;
    font-size: 14px;
}

.quote-form__hint {
    font-size: 12px;
    color: #6b7280;
}

.quote-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.quote-errors[hidden] {
    display: none;
}

.quote-errors {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
    padding: 12px 16px;
    font-size: 14px;
}

.quote-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.quote-table th,
.quote-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.quote-table__num {
    text-align: right !important;
    white-space: nowrap;
}

.quote-table__qty {
    text-align: center !important;
    white-space: nowrap;
}

/* Text cells start where the price input's text starts (input: 1px border + 6px padding), so a row reads on one line. */
.quote-table tbody td {
    padding-top: 15px;
    line-height: 20px;
}

.quote-table tbody td.quote-table__input-cell {
    padding-top: 8px;
}

.quote-table .quote-form__price {
    padding: 6px 10px;
    line-height: 20px;
}

.quote-table__label {
    font-weight: 600;
}

.quote-table__detail,
.quote-table__hint {
    font-size: 12px;
    color: #6b7280;
}

.quote-table__hint {
    color: #b45309;
}

.quote-totals {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    column-gap: 24px;
    row-gap: 4px;
    font-size: 14px;
}

/* Two columns across all lines: every label starts on one line, every amount ends on one line. */
.quote-totals > div {
    display: contents;
}

.quote-totals dd {
    margin: 0;
    text-align: right;
}

/* The shipping line is `hidden` until a shipping amount is typed; `display: contents` above would show it empty. */
.quote-totals > div[hidden] {
    display: none;
}

.quote-totals__total {
    font-size: 16px;
    font-weight: 700;
    color: #dc2626;
}

@media (max-width: 767px) {
    .quote-form__grid {
        grid-template-columns: 1fr;
    }

    /* The column names stay on a narrow screen; tighter cells keep the four columns inside the popup. */
    .quote-table th,
    .quote-table td {
        padding-left: 4px;
        padding-right: 4px;
    }

    .quote-table th {
        font-size: 12px;
    }

    .quote-form__price {
        max-width: 90px;
    }
}

/* --- one card per decorated product: cart and checkout summary (sprint06/20129_reorder_per_item D14, D15) ----------
   The head says the product once; every size is a row under it, the cart's rows keeping their own quantity box and
   削除 (right after the box). A plain line keeps its own `.cart-item` / `.sim-checkout-item` as before. `.qty-row`
   is the product page's own class, so the cart's row of quantity box and 削除 is `.cart-qty-row`. */
.cart-group {
    padding: 16px 0;
    border-bottom: 1px solid #eceef1;
}

.cart-group:first-child {
    padding-top: 0;
}

.cart-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cart-group__head {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 12px;
}

.cart-item--row {
    grid-template-columns: minmax(0, 1fr) 190px;
    margin-left: 128px;
    padding: 12px 0;
    border-top: 1px dashed #eceef1;
    border-bottom: 0;
}

.cart-item--row:first-child,
.cart-item--row:last-child {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* 税抜 stays on the price's line, on a plain line and on a size row alike. */
.cart-item .unit-price {
    white-space: nowrap;
}

/* A plain line gets the same room for 削除 beside its quantity box (wide screens; the narrow layout stacks). */
@media (min-width: 561px) {
    .cart-item {
        grid-template-columns: 112px minmax(0, 1fr) 190px;
    }

    /* Repeated on purpose: the `.cart-item` rule just above would otherwise give a size row three columns. */
    .cart-item--row {
        grid-template-columns: minmax(0, 1fr) 190px;
    }
}

/* The grand total keeps its label and figure on one line (user 2026-11-13, design D16). */
.page-shell--cart .sum-row.total {
    gap: 8px;
}

.page-shell--cart .sum-row.total span,
.page-shell--cart .sum-row.total strong {
    white-space: nowrap;
}

.page-shell--cart .sum-row.total strong {
    font-size: var(--fs-2xl);
}

.cart-qty-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.cart-qty-row .qty,
.cart-qty-row .item-actions {
    margin-top: 0;
}

.sim-checkout-group {
    padding: 12px 0;
    border-bottom: 1px solid #eceef1;
}

.sim-checkout-group:last-child {
    border-bottom: 0;
}

.sim-checkout-group__head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
}

.sim-checkout-group__head img {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    object-fit: cover;
}

/* The summary column can be as narrow as ~220px (tablet width): the rows take its full width, a rule at their side
   shows they belong to the head above instead of an indent that would squeeze them. */
.sim-checkout-item--row {
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
    padding: 8px 0 0 10px;
    border-bottom: 0;
    border-left: 2px solid #eceef1;
    min-width: 0;
}

.sim-checkout-item--row .sim-checkout-item-price {
    flex-wrap: wrap;
    grid-column: 1;
}

@media (max-width: 720px) {
    .cart-group__head {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 10px;
    }

    .cart-item--row {
        grid-template-columns: minmax(0, 1fr);
        margin-left: 0;
    }

    .cart-item--row .item-total {
        grid-column: 1;
    }

    .cart-qty-row {
        justify-content: flex-start;
    }
}

/* --- checkout: the phone layout from iPad mini (768px) down (user 2026-11-13, design D16) ------------------------------
   Tailwind's `max-md:` stops at 767px, so a 768px tablet kept the desktop pair - the form first, the summary in a
   narrow aside. Here the summary card goes above the steps and the aside's copy is hidden, as on a phone. The
   utilities themselves cannot move: the build is committed, not rebuilt. */
@media (max-width: 768px) {
    /* Scoped to the checkout page (leader review C-2): these override Tailwind's `hidden` and an unclassed wrapper. */
    .page-shell--checkout .co-summary.hidden {
        display: block;
    }

    .page-shell--checkout .co-aside > .co-summary {
        display: none;
    }

    .page-shell--checkout #steps-container {
        display: grid;
        gap: 16px;
    }

    .page-shell--checkout div:has(> #steps-container) {
        gap: 20px;
    }
}

/* Receipt on My Page (sprint06/20269_order_receipt_pdf, Checkout package): the button or the issued / SG line beside
   「見積」, and its <dialog>, which reuses the quote dialog's frame. */
/* The receipt's button sits in the order head's action row like Reorder / Quote; the issued note goes under the buttons,
   right-aligned, as two lines (number and date, then the support contact), each kept whole on a desktop. */
.receipt-block {
    display: contents;
}

.receipt-block__note {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

.receipt-block__line {
    display: block;
}

/* On a desktop the note must not widen the action row: a row wider than the space beside the title wraps under it,
   moving the buttons. So the note counts as zero wide (contain) and its whole lines, end-aligned in a column, overflow
   to the left under the buttons. */
@media (min-width: 1024px) {
    .receipt-block__note {
        contain: inline-size;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .receipt-block__line {
        white-space: nowrap;
    }
}

.receipt-dialog {
    width: min(560px, calc(100vw - 32px));
}

.receipt-form .form-row {
    margin-bottom: 16px;
}

.receipt-form__label {
    display: block;
    margin-bottom: 6px;
    font-weight: var(--fw-bold);
}

.receipt-form__choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 20px;
}

.receipt-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Own error class: the theme's `.form-row:has(.form-error)` paints the inputs red even while the message is hidden. */
.receipt-form__error {
    margin: 6px 0 0;
    color: var(--danger);
    font-size: var(--text-meta);
}

.receipt-form__error[hidden] {
    display: none;
}

.receipt-confirm-dialog__title {
    margin: 0 0 12px;
    font-size: var(--text-panel-title);
    font-weight: var(--fw-bold);
}