/* Native Deland commerce tools. All component styles are explicitly scoped. */
.commerce-shell .merchant-image-controls{border-top:1px solid #dce5d8;margin-top:1.5rem;padding-top:1.5rem}
.commerce-shell .merchant-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin:1rem 0}
.commerce-shell .merchant-image-card{margin:0;padding:1rem;border:1px solid #dce5d8;border-radius:16px;background:#fbfcf8;min-width:0}
.commerce-shell .merchant-image-card img{width:100%;height:160px;object-fit:contain;background:white;border-radius:10px}
.commerce-shell .merchant-image-card figcaption{display:flex;flex-direction:column;gap:.25rem;margin:.75rem 0;overflow-wrap:anywhere}
.commerce-shell .merchant-image-card small{color:#5e6f63}
.commerce-shell .merchant-image-upload{max-width:720px;display:grid;gap:1rem}
.commerce-shell .merchant-image-card .commerce-button{width:100%;white-space:normal}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-0.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-1.woff') format('woff');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-2.woff') format('woff');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-3.woff') format('woff');font-style:normal;font-weight:700 900;font-display:swap}

:is(.commerce-panel,.commerce-shell) {
    --commerce-green: #206647;
    --commerce-ink: #24332c;
    --commerce-muted: #5e6f63;
    --commerce-paper: #fbfcf8;
    --commerce-line: #dce5d8;
    width: 100%;
    max-width: 1440px;
    min-width: 0;
    margin-inline: auto;
    color: var(--commerce-ink);
    font-family: 'Hanken Grotesk', Hanken, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}
:is(.commerce-panel,.commerce-shell) *, :is(.commerce-panel,.commerce-shell) *::before, :is(.commerce-panel,.commerce-shell) *::after { box-sizing: border-box; }
:is(.commerce-panel,.commerce-shell) [hidden] { display: none !important; }
:is(.commerce-panel,.commerce-shell) :is(h1,h2,h3,p,pre,form,fieldset) { min-width: 0; }
:is(.commerce-panel,.commerce-shell) h1 { margin: 0 0 10px; font-size: clamp(26px,3vw,34px); line-height: 1.15; letter-spacing: -.035em; font-weight: 700; }
:is(.commerce-panel,.commerce-shell) h2 { margin: 0 0 14px; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
:is(.commerce-panel,.commerce-shell) h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.35; font-weight: 700; }
:is(.commerce-panel,.commerce-shell) p { margin: 0 0 14px; }
:is(.commerce-panel,.commerce-shell) a:not([class*="commerce-button"]) { color: var(--commerce-green); text-underline-offset: 3px; }
.commerce-heading, .commerce-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin: 0 0 28px; }
.commerce-heading p, .commerce-header p { max-width: 720px; margin: 0; color: var(--commerce-muted, #5e6f63); }
.commerce-header .commerce-actions { margin: 0; }
.commerce-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.commerce-section-header p { max-width: 800px; margin-bottom: 0; color: #5e6f63; font-size: 13px; }
.commerce-section-header .commerce-actions { margin: 0; }
.commerce-card > h3:not(:first-child) { margin-top: 26px; }
:is(.commerce-panel,.commerce-shell) > :is(section,header) { scroll-margin-top: 20px; }
.commerce-eyebrow { display: block; margin-bottom: 9px; color: var(--commerce-green, #206647); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.commerce-card { min-width: 0; padding: clamp(18px,2.4vw,28px); background: #fff; border: 1px solid var(--commerce-line, #dce5d8); border-radius: 18px; box-shadow: 0 4px 20px #24332c04; }
.commerce-card + .commerce-card { margin-top: 22px; }
.commerce-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: start; }
.commerce-grid > .commerce-card { margin-top: 0; }
.commerce-grid-wide { grid-template-columns: repeat(3,minmax(0,1fr)); }
.commerce-stack { display: grid; gap: 22px; }
.commerce-stack > .commerce-card { margin-top: 0; }
.commerce-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin: 0 0 22px; }
.commerce-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 17px 19px; border: 1px solid #dce5d8; border-radius: 12px; background: #fff; }
.commerce-stat > :is(strong,b,.commerce-stat-value) { color: #206647; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.commerce-stat > :is(span,small,p,.commerce-stat-label):not(.commerce-stat-value) { margin: 0; color: #5e6f63; font-size: 12px; line-height: 1.45; }
.commerce-muted { color: var(--commerce-muted, #5e6f63); }
.commerce-help { display: block; margin-top: 7px; color: var(--commerce-muted, #5e6f63); font-size: 12px; line-height: 1.5; }
.commerce-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.commerce-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.commerce-toolbar .commerce-field { flex: 1 1 190px; }
.commerce-toolbar .commerce-actions { margin: 0; }
.commerce-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }
.commerce-filters .commerce-field { flex: 1 1 150px; margin: 0; }
.commerce-filters .commerce-field:first-child { flex: 2 1 240px; }
.commerce-filters > .commerce-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 3px; font-size: 13px; }
.commerce-link { color: #206647; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

.commerce-button, .commerce-button-secondary, .commerce-button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 17px;
    border: 1px solid #206647;
    border-radius: 10px;
    background: #206647;
    color: #fff;
    font: 600 14px/1.35 'Hanken Grotesk', Hanken, system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.commerce-button-secondary { background: #fff; color: #206647; border-color: #bbcdbf; }
.commerce-button-danger { background: #fff; color: #933c2d; border-color: #e5c4ba; }
.commerce-button-small { min-height: 40px; padding: 8px 12px; font-size: 13px; }
.commerce-button .material-symbols-outlined, .commerce-button-secondary .material-symbols-outlined, .commerce-button-danger .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
:is(.commerce-panel,.commerce-shell) :is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #8aad94; outline-offset: 3px; }
:is(.commerce-button,.commerce-button-secondary,.commerce-button-danger):is(:disabled,[aria-disabled="true"]) { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; }
:is(.commerce-button,.commerce-button-secondary,.commerce-button-danger):active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(0); }

.commerce-field { display: grid; gap: 7px; min-width: 0; margin-bottom: 18px; }
.commerce-field > :is(label,span), label.commerce-field { font-size: 13px; font-weight: 600; }
.commerce-field > small { color: var(--commerce-muted, #5e6f63); font-size: 12px; font-weight: 400; }
.commerce-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea), .commerce-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid #c8d5c7;
    border-radius: 10px;
    background: #fbfcf8;
    color: #24332c;
    font: 400 16px/1.45 'Hanken Grotesk', Hanken, system-ui, sans-serif;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.commerce-field textarea { min-height: 110px; resize: vertical; }
.commerce-field :is(input,select,textarea):focus, .commerce-input:focus { border-color: #206647; box-shadow: 0 0 0 3px #20664714; }
.commerce-field :is(input,textarea)::placeholder, .commerce-input::placeholder { color: #738077; opacity: 1; }
.commerce-field :is(input,select,textarea):disabled, .commerce-input:disabled { background: #f0f3ed; color: #647168; cursor: not-allowed; }
.commerce-field [aria-invalid="true"], .commerce-input[aria-invalid="true"] { border-color: #ad4937; }
.commerce-field input[type="file"] { padding: 8px; overflow: hidden; }
.commerce-field input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 10px; background: #fff; border: 1px solid #c8d5c7; border-radius: 6px; color: #206647; font: inherit; font-size: 13px; cursor: pointer; }
.commerce-field input[type="color"] { padding: 5px; max-width: 88px; }
:is(.commerce-panel,.commerce-shell) :is(input[type="checkbox"],input[type="radio"]) { width: 18px; height: 18px; margin: 0; accent-color: #206647; flex-shrink: 0; }
input.commerce-input:is([type="checkbox"],[type="radio"]) { min-height: 0; width: 18px; height: 18px; padding: 0; }
.commerce-check { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; font-size: 13px; line-height: 1.5; }
.commerce-check :is(input[type="checkbox"],input[type="radio"]) { margin-top: 2px; }
.commerce-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
.commerce-field-full { grid-column: 1/-1; }

.commerce-notice, .commerce-alert, .commerce-error { padding: 15px 18px; margin: 0 0 22px; border: 1px solid #d1e2d2; border-radius: 12px; background: #edf5ef; color: #225e42; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.commerce-error, .commerce-alert:is(.error,.is-error,.commerce-alert-error) { background: #fff4ef; border-color: #eed5ca; color: #933c2d; }
.commerce-alert:is(.warning,.is-warning,.commerce-alert-warning) { background: #fff9e9; border-color: #e9ddb8; color: #805c15; }
.commerce-notice p:last-child, .commerce-alert p:last-child, .commerce-error p:last-child { margin-bottom: 0; }
.commerce-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px; border: 1px solid #d1e2d2; background: #edf5ef; color: #206647; font-size: 11px; font-weight: 600; line-height: 1.4; }
.commerce-badge-warning { background: #fff9e9; color: #805c15; border-color: #e9ddb8; }
.commerce-badge-error { background: #fff4ef; color: #933c2d; border-color: #eed5ca; }
.commerce-badge-muted { background: #f1f4ed; color: #617065; border-color: #dce5d8; }
.commerce-badge-success { background: #edf5ef; color: #206647; border-color: #d1e2d2; }
.commerce-issue-list { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid #e2e8dd; }
.commerce-issue-list li { padding: 12px 0; border-bottom: 1px solid #e2e8dd; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.commerce-issue-list .commerce-badge { margin-right: 6px; }
.commerce-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid #dce5d8; }
.commerce-tabs :is(a,button) { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 14px; border: 1px solid #dce5d8; border-radius: 9px; background: #f1f5ed; color: #42584a; font: 600 13px/1.4 'Hanken Grotesk', Hanken, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.commerce-tabs :is(a,button):is([aria-current="page"],[aria-selected="true"],.is-active,.active) { border-color: #206647; background: #206647; color: #fff; }
.commerce-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 22px; color: #5e6f63; font-size: 13px; }
.commerce-pagination > :is(a,button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 13px; border: 1px solid #dce5d8; border-radius: 9px; background: #fff; color: #206647; text-decoration: none; }
.commerce-pagination .commerce-actions { margin: 0; }

.commerce-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid #dce5d8; border-radius: 12px; }
.commerce-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; line-height: 1.5; }
.commerce-table th { padding: 12px 15px; background: #f3f6ef; color: #536559; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.commerce-table td { padding: 14px 15px; border-top: 1px solid #e5ebe1; vertical-align: top; }
.commerce-table tbody tr:nth-child(even) { background: #fbfcf8; }
.commerce-table :is(td,th) > :last-child { margin-bottom: 0; }
.commerce-table .commerce-actions { margin: 0; gap: 6px; }
.commerce-table .commerce-button-small { white-space: nowrap; }
.commerce-table :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) { max-width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #c8d5c7; border-radius: 8px; background: #fff; color: #24332c; font: inherit; }
.commerce-table-empty, .commerce-empty { padding: 35px 20px !important; text-align: center; color: #657268; }
.commerce-number { font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.commerce-panel,.commerce-shell) :is(code,pre) { max-width: 100%; overflow-wrap: anywhere; }
:is(.commerce-panel,.commerce-shell) pre { padding: 16px; border: 1px solid #dce5d8; border-radius: 10px; background: #f5f7f1; font-size: 12px; white-space: pre-wrap; }
.commerce-import-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; list-style: decimal inside; padding: 0; margin: 18px 0; }
.commerce-import-fields li { min-width: 0; padding: 11px 13px; border: 1px solid #e2e8dd; border-radius: 9px; background: #fbfcf8; font-size: 13px; overflow-wrap: anywhere; }
.commerce-import-fields li::marker { color: #206647; font-weight: 700; }
.commerce-import-fields li :is(p,small) { display: block; margin: 5px 0 0; color: #657268; font-size: 12px; }
.commerce-preview { padding: 16px; margin-top: 16px; border: 1px solid #dce5d8; border-radius: 12px; background: #fbfcf8; overflow-wrap: anywhere; }
.commerce-details { margin: 16px 0; border: 1px solid #dce5d8; border-radius: 10px; background: #fff; }
.commerce-details > summary { padding: 13px 16px; color: #206647; font-weight: 600; cursor: pointer; }
.commerce-details > :not(summary) { margin: 0 16px 16px; }
.commerce-progress { display: block; width: 100%; height: 10px; margin-top: 12px; accent-color: #206647; }

/* Wide Merchant preview preserves field order while keeping the ID in view. */
.merchant-preview-wrap { isolation: isolate; }
.merchant-preview-table { width: 3400px; min-width: 3400px; table-layout: fixed; }
.merchant-preview-table :is(th,td) { overflow-wrap: anywhere; }
.merchant-preview-table th { white-space: normal; }
.merchant-preview-table th > span { display: block; }
.merchant-preview-table th > code { display: block; margin-top: 5px; color: #6e7c72; font-size: 11px; font-weight: 400; }
.merchant-preview-table th:first-child { width: 112px; }
.merchant-preview-table th:nth-child(2) { width: 260px; }
.merchant-preview-table th:nth-child(3) { width: 360px; }
.merchant-preview-table :is(th,td):first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid #dce5d8; background: #fff; }
.merchant-preview-table th:first-child { z-index: 2; background: #f3f6ef; }
.merchant-preview-table tbody tr:nth-child(even) td:first-child { background: #fbfcf8; }
.merchant-preview-table td:nth-child(2) { font-weight: 600; }
.merchant-preview-table td > small, .commerce-table td > small { display: block; margin-top: 6px; color: #657268; font-size: 11px; font-weight: 400; line-height: 1.5; }
.merchant-preview-table td:first-child > .commerce-badge { margin-top: 8px; }
.merchant-preview-table td.commerce-empty { text-align: left; }
.merchant-url { display: block; overflow-wrap: anywhere; font-size: 12px; font-weight: 400; line-height: 1.55; }
.merchant-thumbnail { display: block; width: 64px; height: 64px; padding: 3px; border: 1px solid #e2e8dd; border-radius: 8px; background: #fff; object-fit: contain; }
.merchant-description > summary { cursor: pointer; color: #42584a; font-size: 13px; line-height: 1.55; }
.merchant-description > summary::marker { color: #206647; }
.merchant-description > p { max-height: 320px; margin: 12px 0 0; padding: 12px; overflow-y: auto; border-left: 2px solid #b8cdbb; background: #f5f7f1; font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.merchant-category-select[multiple] { min-height: 160px; }
.merchant-category-select[multiple] > option { padding: 5px 7px; }
@media (min-width:1000px) {
    .merchant-preview-table :is(th,td):nth-child(2) { position: sticky; left: 112px; z-index: 1; border-right: 1px solid #dce5d8; background: #fff; }
    .merchant-preview-table th:nth-child(2) { z-index: 2; background: #f3f6ef; }
    .merchant-preview-table tbody tr:nth-child(even) td:nth-child(2) { background: #fbfcf8; }
}

/* Price classes only affect native product cards and the native price block. */
.shop-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 10px; max-width: 100%; line-height: 1.2; }
.shop-price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.shop-price-current { color: #206647; font-family: 'Hanken Grotesk', Hanken, system-ui, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-price-old { color: #657268; font-size: 14px; font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-price-saving { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid #d6e4d6; border-radius: 6px; background: #edf4ec; color: #34634a; font-size: 12px; font-weight: 600; line-height: 1.4; }
.shop-price-hero .shop-price-current { font-size: clamp(32px,4vw,44px); }
.shop-price-hero .shop-price-old { font-size: 17px; }
.shop-product-card { border-color: #dde5d9; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }

@media (hover:hover) and (pointer:fine) {
    .commerce-button:hover:not(:disabled):not([aria-disabled="true"]) { background: #174d35; border-color: #174d35; transform: translateY(-1px); }
    .commerce-button-secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: #eff5ed; border-color: #90b39a; transform: translateY(-1px); }
    .commerce-button-danger:hover:not(:disabled):not([aria-disabled="true"]) { background: #fff4ef; border-color: #ca8b77; transform: translateY(-1px); }
    .commerce-table tbody tr:hover { background: #f4f7f0; }
    .merchant-preview-table tbody tr:hover td:is(:first-child,:nth-child(2)) { background: #f4f7f0; }
    .shop-product-card:hover { border-color: #b8cdbb; box-shadow: 0 8px 26px #24332c0a; transform: translateY(-2px); }
}
:is(.commerce-button,.commerce-button-secondary,.commerce-button-danger):hover:active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
@media (max-width:1000px) { .commerce-grid-wide { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) {
    .commerce-grid, .commerce-grid-wide, .commerce-form-grid { grid-template-columns: minmax(0,1fr); }
    .commerce-heading, .commerce-header { align-items: flex-start; margin-bottom: 22px; }
    .commerce-heading .commerce-actions, .commerce-header .commerce-actions { margin-top: 0; }
    .commerce-table { min-width: 620px; }
    .commerce-import-fields { grid-template-columns: minmax(0,1fr); }
    .commerce-toolbar .commerce-field, .commerce-filters .commerce-field, .commerce-filters .commerce-field:first-child { flex-basis: 100%; }
    .shop-price-current { font-size: 22px; }
    .shop-price-hero .shop-price-current { font-size: 34px; }
}
@media (max-width:420px) {
    .commerce-card { padding: 16px; border-radius: 14px; }
    .commerce-actions > :is(.commerce-button,.commerce-button-secondary,.commerce-button-danger) { flex: 1 1 auto; }
    .shop-price-hero .shop-price-current { font-size: 32px; }
}
@media (prefers-reduced-motion:reduce) {
    .commerce-button, .commerce-button-secondary, .commerce-button-danger, .commerce-field :is(input,select,textarea), .commerce-input, .shop-product-card { transition: none; }
    .commerce-button:hover, .commerce-button-secondary:hover, .commerce-button-danger:hover, .shop-product-card:hover { transform: none; }
}