:root {
    color-scheme: light;
    --ink: #182b3b;
    --muted: #73818c;
    --line: #e5e9e6;
    --paper: #f5f6f2;
    --surface: #fff;
    --blue: #244f72;
    --blue-dark: #193d5b;
    --teal: #16847c;
    --teal-soft: #e9f5f1;
    --shadow: 0 14px 35px rgb(28 49 58 / 7%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

header {
    position: sticky;
    z-index: 5;
    top: 0;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(28px, calc((100vw - 1440px) / 2));
    border-bottom: 1px solid rgb(224 230 226 / 85%);
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(14px);
}

header > a { display: inline-flex; align-items: center; gap: 12px; }
header > a::before {
    content: 'IM';
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: white;
    background: var(--blue);
    font: 800 11px/1 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif;
    letter-spacing: .04em;
}
header strong { color: var(--ink); font: 750 15px/1.2 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif; letter-spacing: -.025em; }
header form { margin: 0; }
header button {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: white;
    color: #586872;
    font-size: 12px;
    font-weight: 700;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
header button:hover { border-color: #c8d7d1; color: var(--blue); background: #fafcfb; }

main { width: min(1440px, 100%); margin: 0 auto; padding: 42px 32px 64px; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.intro small {
    color: var(--teal);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}
.intro h1 {
    margin: 9px 0 8px;
    color: var(--ink);
    font: 800 clamp(30px, 3.2vw, 43px)/1.12 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif;
    letter-spacing: -.055em;
}
.intro p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.intro > p {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid #dce9e3;
    border-radius: 10px;
    color: #55736a;
    background: #f1f7f3;
    font-size: 11px;
    font-weight: 600;
}
.intro > p::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #42a27d; box-shadow: 0 0 0 3px #d9eee3; }

.columns { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; gap: 22px; }
aside, section { min-width: 0; }
aside {
    position: sticky;
    top: 92px;
    height: calc(100vh - 116px);
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: 0 3px 12px rgb(28 49 58 / 3%);
}
aside form { display: flex; height: 100%; min-height: 0; flex-direction: column; }
aside h2 { flex: 0 0 auto; margin: 0 20px; padding: 18px 0 15px; }
.filter-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 20px; overscroll-behavior: contain; scrollbar-color: #c8d8d1 transparent; scrollbar-width: thin; }
.filter-actions { flex: 0 0 auto; padding: 10px 20px 14px; border-top: 1px solid #eef0ed; background: var(--surface); }
h2 { margin: 0; color: var(--ink); font: 750 16px/1.3 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif; letter-spacing: -.025em; }
aside h2 { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eef0ed; }
aside h2::before { content: ''; width: 4px; height: 17px; border-radius: 4px; background: var(--teal); }
.filter-section { margin: 0; padding: 17px 0 0; border: 0; border-top: 1px solid #eef0ed; }
.filter-section--first { padding-top: 18px; border-top: 0; }
.filter-section + .filter-section { margin-top: 18px; }
.filter-section h3, .filter-section legend { margin: 0 0 10px; padding: 0; color: #43545f; font-size: 12px; font-weight: 750; }
.filter-label { display: block; margin: 14px 0 7px; color: #41535d; font-size: 12px; font-weight: 650; }
.filter-section--first .filter-label { margin-top: 0; }
.filter-hint { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
input[type=number], input[type=search], select {
    width: 100%;
    min-width: 0;
    border: 1px solid #dfe5e2;
    border-radius: 9px;
    outline: none;
    color: var(--ink);
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input[type=number], select { padding: 10px 11px; }
input[type=number] { font-size: 12px; }
input[type=number]::placeholder, input[type=search]::placeholder { color: #9aa5a7; }
select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2373818c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
aside select { margin-top: 0; }
input:focus, select:focus { border-color: #74aaa1; box-shadow: 0 0 0 3px rgb(22 132 124 / 10%); }
.checkbox-row { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0; color: #596d76; font-size: 12px; line-height: 1.35; cursor: pointer; }
.checkbox-row input { flex: 0 0 15px; width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--teal); }
.category-choices { margin: 16px 0 0; padding: 15px 0 0; border: 0; border-top: 1px solid #eef0ed; }
.range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.primary, .searchbar button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--blue);
    border-radius: 9px;
    color: white;
    background: var(--blue);
    font-size: 12px;
    font-weight: 700;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.primary:hover, .searchbar button:hover { transform: translateY(-1px); border-color: var(--blue-dark); background: var(--blue-dark); box-shadow: 0 5px 12px rgb(25 61 91 / 16%); }
.primary { width: 100%; margin-top: 0; }
.clear { display: block; margin-top: 9px; color: #74838a; text-align: center; font-size: 11px; font-weight: 600; transition: color .15s ease; }
.clear:hover { color: var(--teal); }

section { padding: 0; border: 0; background: transparent; }
.searchbar {
    display: flex;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: 0 3px 12px rgb(28 49 58 / 3%);
}
.searchbar input[type=search] { flex: 1 1 auto; min-height: 42px; padding: 0 13px; border-color: transparent; background: #f7f8f6; font-size: 12px; }
.searchbar input[type=search]:focus { border-color: #b5d0c8; background: white; }
.searchbar select { flex: 0 0 175px; min-height: 42px; font-size: 11px; font-weight: 600; }
.searchbar button { flex: 0 0 auto; min-width: 86px; padding: 0 16px; }
.section-head { display: flex; align-items: end; justify-content: space-between; padding: 25px 2px 14px; }
.section-head h2 { font-size: 17px; }
.section-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.page-size { display: flex; align-items: center; gap: 7px; color: #687780; font-size: 11px; }
.page-size label { font-weight: 650; }
.page-size select { width: auto; min-width: 70px; padding: 8px 28px 8px 10px; font-size: 11px; font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e3e8e5;
    border-radius: 13px;
    background: var(--surface);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: #cadbd4; box-shadow: var(--shadow); }
.image { position: relative; display: grid; height: 210px; place-items: center; padding: 10px; overflow: hidden; background: linear-gradient(145deg, #f7f8f5, #eff3f0); color: #91a09d; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.image::after { position: absolute; inset: auto 0 0; height: 1px; background: rgb(226 232 228 / 80%); content: ''; }
.image-link { display: grid; width: 100%; height: 100%; place-items: center; }
.image img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery-arrow { position: absolute; z-index: 1; top: 50%; display: grid; width: 31px; height: 31px; place-items: center; padding: 0; border: 1px solid #dde5e1; border-radius: 50%; color: var(--ink); background: rgb(255 255 255 / 94%); box-shadow: 0 2px 8px rgb(20 45 55 / 12%); font: 700 23px/1 sans-serif; transform: translateY(-50%); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
.gallery-arrow:hover { background: #fff; border-color: var(--teal); color: var(--teal); }
.image:hover .gallery-arrow, .image:focus-within .gallery-arrow { opacity: 1; pointer-events: auto; }
.sold-count { color: #657780; font-size: 10px; }
.sold-count strong { color: #263f4a; font-size: 13px; font-weight: 750; letter-spacing: -.015em; }
.gallery-count { position: absolute; right: 9px; bottom: 9px; padding: 3px 7px; border-radius: 20px; color: #344c57; background: rgb(255 255 255 / 92%); font-size: 10px; font-weight: 700; letter-spacing: 0; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 14px 15px 13px; }
.card-body > small { overflow: hidden; color: #64817a; font-size: 9px; font-weight: 750; letter-spacing: .055em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.card h3 { display: -webkit-box; min-height: 40px; overflow: hidden; margin: 8px 0 13px; color: #283b49; font: 700 13px/1.5 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif; letter-spacing: -.015em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid #edf0ed; }
.stats > div + div { padding-left: 10px; border-left: 1px solid #edf0ed; }
.stats small, .detail-grid small { display: block; color: #879397; font-size: 9px; font-weight: 600; }
.stats strong { display: block; overflow: hidden; margin-top: 5px; color: #344954; font: 750 13px/1.2 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.card footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid #edf0ed; color: #718087; font-size: 10px; }
.card footer b { flex: 0 0 auto; padding: 5px 8px; border-radius: 6px; font-size: 10px; font-weight: 750; }
.positive { color: #14725f; background: var(--teal-soft); }
.negative { color: #a85c4d; background: #fbefeb; }
.empty { padding: 64px 18px; border: 1px dashed #d6dfd9; border-radius: 12px; color: var(--muted); background: rgb(255 255 255 / 60%); text-align: center; font-size: 13px; }
.catalog-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 15px 2px; border-top: 1px solid var(--line); }
.pagination-summary { margin: 0; color: var(--muted); font-size: 11px; }
.pagination-summary strong { color: #43545f; font-weight: 750; }
.pagination-links { display: flex; align-items: center; gap: 5px; }
.page-link { display: inline-flex; min-width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; color: #52636d; background: transparent; font-size: 12px; font-weight: 650; }
a.page-link { border-color: #e5e9e6; background: white; transition: border-color .15s ease, color .15s ease, background .15s ease; }
a.page-link:hover { border-color: #cbdcd5; color: var(--blue); background: #f7faf8; }
.page-link[aria-current="page"] { border-color: var(--blue); color: white; background: var(--blue); }
.page-link--direction { gap: 7px; padding: 0 11px; }
.page-gap { padding: 0 3px; color: #879397; font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 28px 0; }
.detail-grid > div { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 3px 12px rgb(28 49 58 / 3%); }
.detail-grid strong { display: block; margin-top: 9px; color: var(--ink); font: 750 21px/1.2 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif; letter-spacing: -.03em; }
body > main > a:first-child { display: inline-flex; align-items: center; gap: 7px; color: #56746e; font-size: 12px; font-weight: 700; }
body > main > a:first-child:hover { color: var(--teal); }
body > main > p { color: var(--muted); font-size: 12px; }
body > main > h1 { margin: 10px 0; font: 800 clamp(28px, 4vw, 40px)/1.15 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif; letter-spacing: -.05em; }
body > main > .primary { width: auto; padding: 0 18px; }

:focus-visible { outline: 3px solid rgb(22 132 124 / 32%); outline-offset: 2px; }
@media (max-width: 1120px) { .columns { grid-template-columns: 250px minmax(0, 1fr); gap: 16px; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 790px) { header { height: 64px; padding: 0 22px; } main { padding: 30px 22px 48px; } .columns { display: block; } aside { position: static; height: auto; overflow: visible; margin-bottom: 16px; } aside form { height: auto; } aside h2 { margin: 0 20px; } .filter-body { overflow: visible; } .filter-actions { position: static; } .intro { align-items: start; flex-direction: column; gap: 15px; } .intro > p { margin: 0; } }
@media (max-width: 600px) { .section-head { align-items: flex-start; gap: 12px; } .page-size { flex-wrap: wrap; justify-content: flex-end; gap: 5px; } .page-size span { display: none; } .page-size select { min-width: 65px; } }
@media (max-width: 540px) { header { padding: 0 16px; } main { padding: 25px 15px 38px; } .intro h1 { font-size: 31px; } .grid, .detail-grid { grid-template-columns: 1fr; } .image { height: 205px; } .searchbar { flex-wrap: wrap; padding: 8px; } .searchbar input[type=search] { flex-basis: 100%; } .searchbar select { flex: 1 1 0; min-width: 0; } .searchbar button { min-width: 80px; } .detail-grid { gap: 9px; } .detail-grid > div { padding: 16px; } }

/* Product detail and on-demand price simulation */
.product-detail { max-width: 1120px; }
.back-link { display: inline-block; margin-bottom: 15px; color: var(--blue); font-size: 12px; font-weight: 650; text-decoration: none; }
.product-heading { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.product-heading h1 { max-width: 100%; margin: 5px 0 6px; color: var(--ink); font-size: clamp(25px, 3vw, 33px); line-height: 1.18; letter-spacing: -.035em; }
.eyebrow { margin: 0; color: #648078; font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.product-subtitle { margin: 0; color: var(--muted); font-size: 13px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.action-link { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 750; transition: transform .15s ease, box-shadow .15s ease; }
.action-link:hover { transform: translateY(-2px); box-shadow: 0 5px 13px rgb(20 45 55 / 12%); }
.action-link--market { color: white; background: var(--blue); border-color: var(--blue); }
.action-link--source { color: #405b3f; background: #f4f8e9; border-color: #cfdaba; }
.product-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
.product-overview--no-image { grid-template-columns: minmax(0, 1fr); }
.detail-gallery { display: flex; min-width: 0; height: 385px; align-items: stretch; gap: 12px; }
.gallery-thumbnails { display: flex; flex: 0 0 66px; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.gallery-thumbnail { display: grid; flex: 0 0 62px; width: 62px; height: 62px; place-items: center; padding: 4px; border: 1px solid #dce4df; border-radius: 8px; background: white; cursor: pointer; }
.gallery-thumbnail.is-active { border: 2px solid var(--blue); }
.gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-stage { position: relative; display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; background: white; }
.gallery-stage > img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-stage .gallery-count { bottom: 6px; right: 6px; }
.download-images { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #dfe6e2; border-radius: 8px; color: #536a63; background: rgb(255 255 255 / 94%); font-size: 10px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 6px rgb(20 45 55 / 8%); }
.download-images:hover { color: var(--blue); border-color: #c4d7cf; background: white; }
.overview-summary { display: flex; flex-direction: column; gap: 13px; }
.price-preview { padding: 16px 18px; border: 1px solid #cadee8; border-radius: 12px; background: #f0f6f8; }
.price-preview-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price-preview h2, .market-summary h2 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 760; }
.wholesale-condition { margin: 12px 0 0; color: #536d76; font-size: 12px; line-height: 1.5; }
.wholesale-condition strong { color: #1e556b; font-weight: 700; }
.wholesale-condition--missing { color: #79694b; }
.wholesale-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-top: 14px; }
.wholesale-summary-grid > div { min-width: 0; padding: 10px 0; border-top: 1px solid #dae7ec; }
.wholesale-summary-grid span { display: block; color: #61727d; font-size: 10px; line-height: 1.4; }
.wholesale-summary-grid strong { display: block; margin-top: 4px; color: #1e556b; font-size: 18px; font-weight: 650; line-height: 1.2; }
.wholesale-summary-grid .wholesale-summary-total { grid-column: 1 / -1; padding-top: 12px; }
.wholesale-summary-grid .wholesale-summary-total strong { color: #145640; font-size: 26px; font-weight: 700; }
.wholesale-summary-note { margin: 6px 0 0; color: #6b7f85; font-size: 10px; line-height: 1.5; }
.market-summary { padding: 14px 18px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.market-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 10px; }
.market-summary-grid > div { min-width: 0; padding: 9px 8px 9px 0; border-top: 1px solid #edf0ed; }
.market-summary-grid > div:nth-child(3n+2), .market-summary-grid > div:nth-child(3n+3) { padding-left: 9px; border-left: 1px solid #edf0ed; }
.market-summary-grid small { display: block; color: #7d8a8e; font-size: 10px; line-height: 1.3; }
.market-summary-grid strong { display: block; margin-top: 5px; color: var(--ink); font-size: 15px; line-height: 1.2; }
.detail-section { margin-top: 24px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: 17px; letter-spacing: -.02em; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.calculation-disclosure { margin-top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.calculation-disclosure > summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 650; list-style: none; }
.calculation-disclosure > summary::-webkit-details-marker { display: none; }
.calculation-disclosure > summary::after { flex: 0 0 auto; color: #597d72; content: '+'; font-size: 20px; font-weight: 400; line-height: 1; }
.calculation-disclosure[open] > summary { border-bottom: 1px solid var(--line); background: #f8faf9; }
.calculation-disclosure[open] > summary::after { content: '−'; }
.calculation-disclosure-hint { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; }
.calculation-section { padding: 16px 17px 18px; background: transparent; }
.calculation-section .section-heading { margin-bottom: 12px; }
.calculation-section .section-heading h2 { font-size: 15px; font-weight: 650; }
.calculation-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.calculation-table { width: 100%; min-width: 710px; border-collapse: collapse; color: #40525a; font-size: 11px; line-height: 1.45; }
.calculation-table caption { padding: 10px 13px; color: #73838a; background: #fff; font-size: 10px; text-align: left; }
.calculation-table th, .calculation-table td { padding: 9px 12px; border-bottom: 1px solid #e8edeb; text-align: left; vertical-align: top; }
.calculation-table thead th { color: #50666d; background: #f2f6f4; font-size: 10px; font-weight: 650; white-space: nowrap; }
.calculation-table tbody tr:nth-child(even):not(.calculation-table-group) { background: #f7f9f8; }
.calculation-table tbody th[scope="row"] { width: 25%; color: #344b54; font-weight: 550; }
.calculation-table tbody td:nth-child(2) { width: 19%; color: #263f49; font-variant-numeric: tabular-nums; font-weight: 550; white-space: nowrap; }
.calculation-table tbody td:nth-child(3) { color: #728188; }
.calculation-table tbody tr:last-child > * { border-bottom: 0; }
.calculation-table .calculation-table-group th { padding: 9px 12px; border-top: 1px solid #d7e5df; border-bottom: 1px solid #d7e5df; color: #27604d; background: #edf5f1; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.live-badge { padding: 7px 10px; border-radius: 999px; color: #326451; background: #eaf4ef; font-size: 11px; font-weight: 750; white-space: nowrap; }
.calculation-notice { margin: 16px 0 0; padding: 14px 16px; border: 1px solid #e8e3d7; border-radius: 10px; color: #695c40; background: #fbf8ef; font-size: 14px; }
.sub-value { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.info-tip { position: relative; display: inline-flex; vertical-align: 1px; margin-left: 3px; outline: none; }
.info-tip > span:first-child { display: inline-grid; width: 15px; height: 15px; place-items: center; border: 1px solid #8da39c; border-radius: 50%; color: #607a72; font: 700 10px/1 sans-serif; cursor: help; }
.tip-content { position: absolute; z-index: 5; bottom: calc(100% + 9px); left: 50%; width: 230px; padding: 10px 12px; border-radius: 8px; color: #fff; background: #243844; box-shadow: 0 7px 22px rgb(0 0 0 / 18%); font-size: 12px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; }
.tip-content::after { position: absolute; top: 100%; left: 50%; width: 8px; height: 8px; background: #243844; content: ''; transform: translateX(-50%) rotate(45deg); }
.info-tip:hover .tip-content, .info-tip:focus .tip-content, .info-tip:focus-within .tip-content { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 850px) { .product-overview { grid-template-columns: 1fr; gap: 16px; } .detail-gallery { height: 340px; } .overview-summary { gap: 10px; } }
@media (max-width: 480px) { .product-actions { flex-direction: column; } .detail-gallery { height: 280px; gap: 7px; } .gallery-thumbnails { flex-basis: 53px; gap: 6px; } .gallery-thumbnail { flex-basis: 50px; width: 50px; height: 50px; } .price-preview { padding: 14px; } .wholesale-summary-grid { grid-template-columns: 1fr; } .wholesale-summary-grid .wholesale-summary-total { grid-column: auto; } .wholesale-summary-grid .wholesale-summary-total strong { font-size: 23px; } .market-summary { padding: 12px; } .market-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .market-summary-grid > div:nth-child(n) { padding: 8px; border-left: 0; } .market-summary-grid > div:nth-child(even) { border-left: 1px solid #edf0ed; } .calculation-section { padding: 12px; } .calculation-disclosure-hint { display: none; } .section-heading { align-items: flex-start; } .live-badge { font-size: 10px; } }
@media (hover: none) { .image .gallery-arrow { opacity: 1; pointer-events: auto; } }
@media (max-width: 480px) { .download-images { top: 7px; right: 7px; padding: 6px 8px; font-size: 9px; } }
@media (max-width: 600px) { .catalog-pagination { align-items: flex-start; flex-direction: column; gap: 10px; } .pagination-links { width: 100%; justify-content: space-between; gap: 3px; } .page-link { min-width: 32px; height: 32px; padding: 0 7px; } .page-link--direction { gap: 4px; padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
/* Admin listing correction is local and intentionally separate from the synced catalog. */
.listing-tools{margin:1.25rem 0;padding:1.1rem 1.25rem;border:1px solid var(--line,#dce5e2);border-radius:14px;background:#fff}
.listing-tools h2{margin:0 0 .75rem;font-size:1.05rem}.listing-correction,.listing-review{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}
.listing-correction label,.listing-review label{display:grid;gap:.3rem;min-width:170px;flex:1;font-size:.82rem;color:#60747d}
.listing-correction input,.listing-review input{min-height:40px;padding:.55rem .7rem;border:1px solid #d5dfdc;border-radius:8px;font:inherit;color:#203648}
.listing-tools button{min-height:40px;padding:.6rem 1rem;border:0;border-radius:8px;background:#245473;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.listing-review button{background:#e9f0ee;color:#245473}.review-marker{padding:.7rem 1rem;border-radius:8px;background:#fff4df;color:#72531d}
.study-selection{margin:1rem 0;padding:1rem 1.15rem;border:1px solid #dce5e2;border-radius:14px;background:#fff}
.study-selection-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.study-selection-actions strong{margin-left:auto;color:#476271}
.study-selection button,.card-quick-actions button,.card-quick-actions a{border:1px solid #d6e1df;border-radius:8px;background:#f8faf9;color:#23435b;padding:.45rem .7rem;font:inherit;font-size:.8rem;text-decoration:none;cursor:pointer}
.study-selection p{margin:.45rem 0;color:#71838c;font-size:.9rem}.study-selection ul{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:.65rem 0}
.study-selection li{display:flex;gap:.5rem;align-items:center;padding:.35rem .5rem;border-radius:8px;background:#f1f5f4;font-size:.8rem}.study-selection li button{padding:.25rem .45rem}
.study-selection [data-add-study]{margin-top:.2rem;background:#245473;color:#fff}.study-card-toggle{display:flex;gap:.45rem;align-items:center;padding:.5rem .8rem;font-size:.8rem;color:#31546b}
.card-quick-actions{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 .8rem .8rem}.card-quick-actions button:hover,.card-quick-actions a:hover{border-color:#6a988e}
.study-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.7rem}.study-actions button{padding:.55rem .8rem;border:1px solid #d6e1df;border-radius:8px;background:#f8faf9;color:#23435b;font:inherit;cursor:pointer}
.study-actions button.primary{background:#245473;color:#fff}.batch-results{margin-top:.6rem;color:#476271;font-size:.88rem}.batch-results p{margin:.35rem 0}
.promotion-simulation{display:grid;gap:.45rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid #e4eae8}.promotion-simulation label{font-size:.82rem;color:#60747d}
.promotion-simulation div{display:flex;gap:.5rem}.promotion-simulation input{width:110px;min-height:38px;padding:.45rem;border:1px solid #d5dfdc;border-radius:8px;font:inherit}.promotion-simulation button{padding:.5rem .75rem;border:0;border-radius:8px;background:#245473;color:white;font:inherit;cursor:pointer}.promotion-simulation p{margin:.1rem 0;color:#71838c;font-size:.85rem}
.wholesale-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}.wholesale-summary-grid>div{padding:9px 10px;background:#f7f9f8}.wholesale-summary-grid>div:nth-child(even){background:#edf3f1}.wholesale-summary-grid span{font-size:10px;font-weight:500}.wholesale-summary-grid strong{font-size:15px;font-weight:600;color:#294655}.wholesale-summary-grid .wholesale-summary-total{grid-column:auto}.wholesale-summary-grid .wholesale-summary-total strong{font-size:17px;font-weight:650;color:#145640}.wholesale-summary-note{font-size:11px}
.calculation-table{font-size:12px}.calculation-table tbody th[scope="row"]{font-weight:500}.calculation-table tbody td:nth-child(2){font-weight:550}.calculation-table tbody tr:nth-child(even):not(.calculation-table-group){background:#f1f5f3}.calculation-table tbody tr:nth-child(odd):not(.calculation-table-group){background:#fff}
@media(max-width:480px){.wholesale-summary-grid{grid-template-columns:1fr}.wholesale-summary-grid .wholesale-summary-total{grid-column:auto}}