:root {
  --ink: #10212f;
  --muted: #667782;
  --line: #dfe8e6;
  --paper: #ffffff;
  --canvas: #f4f8f7;
  --primary: #0f766e;
  --primary-dark: #0b514d;
  --primary-soft: #e4f4f1;
  --accent: #f26a3d;
  --accent-dark: #d84d22;
  --gold: #f3b33d;
  --navy: #10293a;
  --navy-2: #163a4c;
  --danger: #b42318;
  --success: #16704b;
  --shadow-sm: 0 8px 24px rgba(16, 41, 58, .07);
  --shadow-lg: 0 24px 70px rgba(16, 41, 58, .14);
  --radius: 16px;
  --radius-sm: 10px;
  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.65 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.shell { width: min(calc(100% - 36px), var(--shell)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 999; padding: 8px 12px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: relative; z-index: 20; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.topbar { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 15px 5px 15px 5px; color: white; background: linear-gradient(145deg, var(--primary), #16a896); box-shadow: 0 9px 24px rgba(15, 118, 110, .24); font-weight: 900; letter-spacing: -.05em; }
.brand strong { display: block; font-size: 21px; letter-spacing: .01em; }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.account-actions { display: flex; align-items: center; gap: 10px; }
.welcome { color: var(--muted); font-size: 13px; }
.menu-toggle { display: none; border: 1px solid var(--line); background: white; border-radius: 8px; padding: 9px 12px; color: var(--ink); font-weight: 700; cursor: pointer; }
.nav-wrap { background: linear-gradient(105deg, var(--navy) 0%, var(--navy-2) 60%, var(--primary) 100%); color: white; }
.nav-row { min-height: 58px; display: flex; align-items: stretch; justify-content: space-between; gap: 22px; }
.primary-nav { display: flex; align-items: stretch; }
.primary-nav a { min-width: 112px; display: grid; place-items: center; padding: 0 18px; border-right: 1px solid rgba(255,255,255,.1); font-weight: 700; color: rgba(255,255,255,.88); }
.primary-nav a:first-child { border-left: 1px solid rgba(255,255,255,.1); }
.primary-nav a:hover, .primary-nav a.active { color: white; background: rgba(255,255,255,.12); }
.header-search { width: min(390px, 38vw); align-self: center; display: grid; grid-template-columns: 1fr auto; background: white; border-radius: 9px; overflow: hidden; }
.header-search input { min-width: 0; border: 0; padding: 10px 14px; outline: 0; color: var(--ink); }
.header-search:focus-within { box-shadow: 0 0 0 3px rgba(101,225,207,.4); }
.header-search button { border: 0; background: var(--gold); color: #392500; padding: 0 18px; font-weight: 800; cursor: pointer; }

.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; border: 1px solid transparent; padding: 10px 20px; font-weight: 800; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 8px 20px rgba(15,118,110,.18); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: white; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-secondary { border-color: var(--line); background: white; color: var(--ink); }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { border-color: #cad8d5; background: transparent; color: var(--primary-dark); }
.btn-small { min-height: 38px; padding: 7px 15px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-disabled { background: #dfe6e5; color: #7b8989; cursor: not-allowed; }
.btn-disabled:hover { transform: none; }
.text-link { color: var(--primary); font-weight: 800; }

.eyebrow { display: inline-block; color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.account-hero .eyebrow { color: #65e1cf; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-heading h2 { margin: 5px 0 0; font-size: clamp(25px, 3vw, 35px); line-height: 1.25; }
.section-heading > a { color: var(--primary); font-weight: 800; }
.catalog-description { max-width: 760px; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.catalog-description[hidden] { display: none; }
.assurance { margin-top: 32px; position: relative; z-index: 3; padding: 0 30px; background: white; border-radius: 15px 15px 0 0; box-shadow: var(--shadow-sm); }
.assurance-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-inline: -30px; }
.assurance-grid article { padding: 23px 25px; border-right: 1px solid var(--line); }
.assurance-grid article:last-child { border-right: 0; }
.assurance-grid strong, .assurance-grid small { display: block; }
.assurance-grid small { color: var(--muted); margin-top: 7px; }

.notice-section { padding: 28px 0; background: #fff9ec; border-block: 1px solid #f1dfb4; }
.notice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.notice-grid article { background: rgba(255,255,255,.92); border: 1px solid #efdfbd; border-radius: var(--radius); padding: 24px; }
.notice-grid h3 { min-width: 0; margin: 0; font-size: 17px; }
.notice-grid p { margin: 10px 0 0; color: var(--muted); }
.homepage-content-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.homepage-card-icon { --card-icon-bg: #eef6ff; --card-icon-ring: #d7e8ff; width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border: 1px solid var(--card-icon-ring); border-radius: 12px; background: var(--card-icon-bg); box-shadow: 0 5px 14px rgba(16,41,58,.08); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 20px; line-height: 1; }
.homepage-content-item[data-homepage-item="stock"] { --card-icon-bg: #eafaf1; --card-icon-ring: #bcebd0; }
.homepage-content-item[data-homepage-item="delivery"] { --card-icon-bg: #e9f7ff; --card-icon-ring: #bee4f8; }
.homepage-content-item[data-homepage-item="order"] { --card-icon-bg: #f3edff; --card-icon-ring: #d9c9ff; }
.homepage-content-item[data-homepage-item="account"] { --card-icon-bg: #fff4df; --card-icon-ring: #f5d7a0; }
.homepage-content-item[data-homepage-item="content"] { --card-icon-bg: #e9fbf3; --card-icon-ring: #bcebd4; }
.homepage-content-item[data-homepage-item="payment"] { --card-icon-bg: #fff4df; --card-icon-ring: #f6d59a; }
.homepage-content-item[data-homepage-item="service"] { --card-icon-bg: #eaf3ff; --card-icon-ring: #c5daf8; }
.rich-text .rt-weight-bold { font-weight: 800; }
.rich-text .rt-weight-regular { font-weight: 400; }

.catalog-section { padding-block: 54px 66px; }
.catalog-layout { display: grid; grid-template-columns: 235px 1fr; gap: 22px; align-items: start; }
.catalog-main { min-width: 0; scroll-margin-top: 24px; }
.catalog-page .catalog-layout { margin-top: 22px; }
.catalog-search-bar { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 12px; align-items: end; padding: 18px 20px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.catalog-search-bar label > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.catalog-search-bar input { width: 100%; min-height: 44px; border: 1px solid #cbd8d6; border-radius: 8px; padding: 9px 12px; color: var(--ink); background: white; outline: none; }
.catalog-search-bar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,118,110,.11); }
.category-panel { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel-title { padding: 18px 20px; color: white; background: linear-gradient(135deg, var(--navy), var(--primary)); }
.panel-title span { display: block; font-size: 20px; font-weight: 900; }
.panel-title small { opacity: .7; letter-spacing: .14em; }
.category-link { display: flex; justify-content: space-between; gap: 10px; padding: 13px 18px; border-bottom: 1px solid #eef2f1; }
.category-link:hover, .category-link.active { color: var(--primary); background: #f2faf8; }
.category-link b { color: var(--muted); font-size: 12px; }
.category-sidebar { min-width: 0; }
.category-mobile { overflow: hidden; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); text-align: center; }
.category-mobile h2 { margin: 0; padding: 15px 18px; color: white; background: linear-gradient(135deg, #623ee8, #4325c8); font-size: 19px; line-height: 1.3; }
.category-mobile-qr { padding: 18px 18px 7px; }
.category-mobile p { margin: 0; padding: 0 12px 18px; color: var(--muted); font-size: 13px; }
.current-page-qr { width: min(172px, 100%); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; margin: 0 auto; padding: 7px; border: 4px solid #22b8cf; border-radius: 9px; background: white; box-shadow: 0 5px 18px rgba(16,41,58,.12); }
.current-page-qr canvas, .current-page-qr img { display: block; width: 100% !important; height: auto !important; image-rendering: pixelated; }
.current-page-qr.is-unavailable { aspect-ratio: auto; min-height: 92px; border-style: dashed; }
.current-page-qr.is-unavailable a { color: var(--primary); font-size: 13px; font-weight: 800; }
.catalog-heading { padding: 4px 2px 0; }
.catalog-stats { display: flex; gap: 20px; color: var(--muted); font-size: 12px; text-align: center; }
.catalog-stats b { display: block; color: var(--primary); font-size: 19px; }
.catalog-results { transition: opacity .18s ease; }
[data-catalog].is-loading .catalog-results { opacity: .48; pointer-events: none; }
.catalog-with-inline-query { padding-bottom: 0; }
.inline-order-query { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); align-items: center; column-gap: 40px; row-gap: 20px; margin-top: 26px; margin-bottom: 54px; padding: 30px 40px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); color: white; background: linear-gradient(115deg, var(--navy), var(--primary)); box-shadow: var(--shadow-sm); scroll-margin-top: 24px; }
.inline-order-query-copy { min-width: 0; }
.inline-order-query-copy > span { display: block; color: #70dacb; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.inline-order-query-copy h2 { margin: 4px 0 3px; font-size: clamp(27px, 2.4vw, 32px); line-height: 1.25; }
.inline-order-query-copy p { max-width: 420px; margin: 0; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.65; }
.inline-order-query-form { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: stretch; gap: 10px; }
.inline-order-query-form label { min-width: 0; min-height: 60px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 7px 12px; background: white; }
.inline-order-query-form label > span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1.3; }
.inline-order-query-form input { width: 100%; min-width: 0; height: auto; border: 0; padding: 2px 0 0; color: var(--ink); background: transparent; font-size: 15px; line-height: 1.45; outline: none; }
.inline-order-query-form label:focus-within { box-shadow: 0 0 0 3px rgba(101,225,207,.4); }
.inline-order-query-form .btn { min-width: 140px; min-height: 60px; border: 0; border-radius: 9px; padding: 0 20px; background: var(--gold); color: #392500; font-weight: 800; white-space: nowrap; }
.inline-order-query-form .btn:hover { background: var(--gold); filter: brightness(.96); }
.inline-order-query-form .btn:disabled { opacity: .68; cursor: wait; transform: none; filter: none; }
.inline-order-query-result { grid-column: 1 / -1; min-width: 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); color: var(--ink); outline: none; }
.inline-order-query-result[hidden] { display: none; }
.inline-order-query-result .order-result { margin-top: 0; color: var(--ink); box-shadow: 0 6px 18px rgba(16,41,58,.08); }
.inline-order-query-result > .flash:first-child { margin-top: 0; }
.inline-order-query-result .order-query-result-action { margin: 16px 0 0; }
.inline-query-loading { margin: 0; padding: 13px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: white; background: rgba(255,255,255,.1); }
.catalog-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 6px 18px rgba(16,41,58,.04); }
.catalog-list-head, .product-row { display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px 112px; align-items: center; gap: 16px; }
.catalog-list-head { min-height: 46px; padding: 0 18px; color: var(--muted); background: #f7faf9; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.product-group + .product-group { border-top: 1px solid var(--line); }
.product-group-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; padding: 12px 18px; color: var(--primary-dark); background: #eef8f6; border-bottom: 1px solid #d8ebe7; font-size: 15px; }
.product-group-title small { color: var(--muted); font-size: 12px; font-weight: 700; }
.product-row { min-width: 0; padding: 17px 18px; border-bottom: 1px solid #edf1f0; transition: background .18s ease; }
.product-row:last-child { border-bottom: 0; }
.product-row:hover { background: #fbfdfc; }
.product-row-main { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: start; }
.product-row-main .delivery-tag { margin-top: 2px; white-space: nowrap; }
.product-row h4 { margin: 0 0 3px; font-size: 15px; line-height: 1.42; }
.product-row h4 a:hover { color: var(--primary); }
.product-row p { margin: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-row-price { color: var(--accent-dark); font-size: 18px; }
.product-row-stock { color: var(--muted); font-size: 12px; }
.product-row-stock.in-stock::before { content: "●"; margin-right: 5px; color: var(--success); font-size: 9px; }
.product-row-stock.out-of-stock::before { content: "●"; margin-right: 5px; color: #9a7a75; font-size: 9px; }
.product-row-action { width: 100%; padding-inline: 12px; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { min-width: 0; display: grid; grid-template-columns: 108px 1fr; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(16,41,58,.04); transition: .2s ease; }
.product-grid-wide .product-card { grid-template-columns: 1fr; }
.product-card:hover { transform: translateY(-2px); border-color: #afd8d2; box-shadow: var(--shadow-sm); }
.product-visual { min-height: 188px; display: grid; align-content: center; justify-items: center; gap: 8px; color: white; background: linear-gradient(145deg, var(--navy), var(--primary)); }
.product-visual > span { font-size: 36px; }
.product-visual small { max-width: 90px; opacity: .72; text-align: center; letter-spacing: .05em; }
.product-grid-wide .product-visual { min-height: 130px; }
.product-body { min-width: 0; display: flex; flex-direction: column; padding: 18px; }
.delivery-tag { align-self: flex-start; border-radius: 999px; padding: 3px 8px; background: var(--primary-soft); color: var(--primary-dark); font-size: 11px; font-weight: 800; }
.product-body h2, .product-body h3 { margin: 9px 0 6px; font-size: 16px; line-height: 1.45; }
.product-body h2 a:hover, .product-body h3 a:hover { color: var(--primary); }
.product-body p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.product-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.product-meta strong { color: var(--accent-dark); font-size: 20px; }
.product-meta span { color: var(--muted); font-size: 12px; }
.card-link { display: flex; justify-content: space-between; align-items: center; margin: 13px -18px -18px; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--primary); font-size: 13px; font-weight: 800; }
.section-action { margin-top: 24px; text-align: center; }
.empty-state { padding: 55px 28px; border: 1px dashed #bfcfcd; border-radius: var(--radius); background: white; text-align: center; }
.empty-state strong { display: block; font-size: 21px; }
.empty-state p { color: var(--muted); margin: 6px 0 20px; }
.empty-state.small { padding: 35px 20px; }
.article-strip { padding: 58px 0; background: white; border-top: 1px solid var(--line); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.article-grid article { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.article-grid time, .article-list time { color: var(--primary); font-size: 12px; font-weight: 800; }
.article-grid h3 { margin: 9px 0 8px; line-height: 1.4; }
.article-grid p { color: var(--muted); }
.article-grid article > a { color: var(--primary); font-weight: 800; }

.page-hero { padding: 48px 0; color: white; background: linear-gradient(115deg, var(--navy), var(--primary)); }
.page-hero h1 { margin: 6px 0; font-size: 39px; }
.page-hero p { margin: 0; color: rgba(255,255,255,.72); }
.page-hero .eyebrow { color: #70dacb; }
.page-section { padding-block: 48px 65px; }
.narrow-section { max-width: 820px; }
.filter-bar { display: grid; grid-template-columns: 1.3fr 1fr auto auto; gap: 12px; align-items: end; padding: 20px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.filter-bar label > span, .stack-form label > span { display: block; margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 800; }
.filter-bar input, .filter-bar select, .stack-form input, .stack-form select, .stack-form textarea, .query-card input { width: 100%; min-height: 44px; border: 1px solid #cbd8d6; border-radius: 8px; padding: 9px 12px; color: var(--ink); background: white; outline: none; }
.filter-bar input:focus, .filter-bar select:focus, .stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus, .query-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,118,110,.11); }
.stack-form input:disabled { background: #f1f4f3; color: #788582; }
.results-line { margin: 22px 0 14px; color: var(--muted); }
.catalog-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; }
.catalog-pagination a, .catalog-pagination span { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; background: white; font-weight: 800; }
.catalog-pagination a:hover { border-color: var(--primary); color: var(--primary); }
.catalog-pagination .current { border-color: var(--primary); color: white; background: var(--primary); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; color: var(--muted); font-size: 13px; }
.breadcrumbs a:hover { color: var(--primary); }
.product-checkout-page { padding: 20px 0 66px; }
.product-checkout-breadcrumbs { margin: 0 0 14px; }
.product-checkout-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 12px; align-items: start; }
.product-checkout-aside { display: grid; gap: 12px; }
.product-media-card, .product-link-card, .product-checkout-main { background: white; border: 1px solid var(--line); border-radius: 12px; }
.product-media-card { padding: 10px; text-align: center; }
.product-image-frame { min-height: 214px; display: grid; place-items: center; overflow: hidden; border: 1px solid #d8e4e2; border-radius: 8px; background: #f7fbfa; }
.product-image-frame img { width: 100%; height: 214px; display: block; object-fit: contain; background: white; }
.product-image-frame:focus-visible { outline: 3px solid rgba(15,118,110,.25); outline-offset: 2px; }
.product-image-placeholder { align-content: center; gap: 8px; padding: 22px; color: white; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,.16), transparent 28%), linear-gradient(145deg,var(--navy),var(--primary)); }
.product-image-placeholder > span { font-size: 46px; }
.product-image-placeholder strong { font-size: 17px; }
.product-image-placeholder small { opacity: .72; letter-spacing: .12em; }
.product-image-caption { display: block; padding: 8px 4px 0; color: var(--muted); font-size: 12px; }
.product-link-card { padding: 18px 16px; text-align: center; }
.product-link-qr { margin-bottom: 12px; }
.product-link-card h2 { margin: 0; font-size: 17px; }
.product-link-card p { margin: 6px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.product-link-card a { display: inline-block; margin-top: 9px; color: var(--primary); font-size: 13px; font-weight: 800; }
.product-checkout-main { min-width: 0; overflow: hidden; }
.checkout-product-head { padding: 16px 20px 0; }
.checkout-product-head h1 { margin: 8px 0 12px; font-size: clamp(22px, 2.3vw, 29px); line-height: 1.32; }
.checkout-price-bar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 16px; background: #eef8f6; }
.checkout-price-bar > div { display: flex; align-items: baseline; gap: 7px; }
.checkout-price-bar span, .checkout-price-bar small { color: var(--muted); }
.checkout-price-bar strong { color: var(--accent-dark); font-size: 29px; line-height: 1; }
.checkout-price-bar b { font-size: 13px; white-space: nowrap; }
.checkout-price-bar .in-stock { color: var(--success); }
.checkout-price-bar .out-of-stock { color: var(--danger); }
.checkout-form { padding: 11px 20px 16px; }
.checkout-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.checkout-section-heading h2 { margin: 0; font-size: 18px; }
.checkout-section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.checkout-section-heading > a { flex: 0 0 auto; color: var(--primary); font-size: 12px; font-weight: 800; }
.checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.checkout-fields label > span, .checkout-field > label { display: block; margin-bottom: 5px; font-weight: 800; }
.checkout-fields input { width: 100%; min-height: 42px; border: 1px solid #cbd8d6; border-radius: 7px; padding: 8px 11px; color: var(--ink); background: white; outline: none; }
.checkout-fields input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,118,110,.11); }
.checkout-fields input:disabled { color: #71807d; background: #edf1f0; }
.checkout-fields small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.quantity-selector { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
.quantity-selector input { position: relative; z-index: 1; border-radius: 0; text-align: center; appearance: textfield; }
.quantity-selector input::-webkit-outer-spin-button, .quantity-selector input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.quantity-selector button { min-height: 44px; border: 1px solid #cbd8d6; color: var(--primary-dark); background: #f5faf9; font-size: 21px; font-weight: 800; cursor: pointer; }
.quantity-selector button:first-child { border-radius: 7px 0 0 7px; }
.quantity-selector button:last-child { border-radius: 0 7px 7px 0; }
.quantity-selector button:hover:not(:disabled) { border-color: var(--primary); color: white; background: var(--primary); }
.quantity-selector button:disabled { color: #9aa6a4; background: #edf1f0; cursor: not-allowed; }
.quantity-selector:focus-within { border-radius: 7px; box-shadow: 0 0 0 3px rgba(15,118,110,.11); }
.quantity-selector:focus-within input { box-shadow: none; }
.payment-methods { min-width: 0; margin: 10px 0 0; padding: 0; border: 0; }
.payment-methods legend { margin-bottom: 5px; padding: 0; font-weight: 800; }
.payment-method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.payment-method { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #d4e1df; border-radius: 8px; background: white; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.payment-method:hover { border-color: #8cc7be; }
.payment-method.is-selected { border-color: var(--primary); background: #f0faf8; box-shadow: inset 0 0 0 1px var(--primary); }
.payment-method:focus-within { outline: 3px solid rgba(15,118,110,.16); outline-offset: 1px; }
.payment-method-icon { position: relative; width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 11px; color: white; background: #46b6a3; font-size: 17px; font-weight: 900; }
.payment-method-icon.is-balance { background: #5767d8; }
.payment-method-icon.is-trx { background: #e74a4a; }
.payment-method-icon small { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; display: grid; place-items: center; border: 1px solid white; border-radius: 50%; color: white; background: var(--navy); font-size: 7px; line-height: 1; }
.payment-method-name { min-width: 0; display: block; overflow: hidden; font-size: 11px; font-weight: 900; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.payment-method-name small { color: var(--muted); font-size: 9px; font-weight: 700; }
.balance-note, .payment-empty { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.payment-empty { padding: 14px; border: 1px dashed #cad8d5; border-radius: 8px; background: #f7faf9; text-align: center; }
.checkout-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.checkout-submit, .checkout-back { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; padding: 8px 15px; font-weight: 900; }
.checkout-submit { border: 1px solid var(--primary); color: white; background: var(--primary); cursor: pointer; }
.checkout-submit:hover { background: var(--primary-dark); }
.checkout-submit:disabled { border-color: #cbd6d4; color: #71807d; background: #e4e9e8; cursor: not-allowed; }
.checkout-back { border: 1px solid var(--primary); color: var(--primary); background: white; }
.checkout-back:hover { background: var(--primary-soft); }
.checkout-details { border-top: 1px solid var(--line); }
.checkout-details > header { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 13px 20px; background: #edf8f6; }
.checkout-details > header span { display: block; color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.checkout-details > header h2 { margin: 3px 0 0; font-size: 19px; line-height: 1.4; }
.checkout-details > header p { max-width: 360px; margin: 0; color: var(--muted); font-size: 11px; text-align: right; }
.checkout-details-body { display: grid; gap: 10px; padding: 18px 20px 24px; }
.checkout-details-body section { padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 7px; }
.checkout-details-body h3 { margin: 0 0 5px; font-size: 15px; }
.checkout-details-body p { margin: 0; color: #4f626b; white-space: normal; }
.product-article { --article-native-color: #314651; min-width: 0; color: #314651; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.checkout-details-body .product-article p { margin: 0 0 1em; color: inherit; }
.product-article > :first-child { margin-top: 0; }
.product-article > :last-child { margin-bottom: 0; }
.product-article h2, .product-article h3, .product-article h4 { --article-native-color: var(--navy); margin: 1.35em 0 .55em; color: var(--navy); line-height: 1.4; }
.product-article h2 { font-size: 21px; }
.product-article h3 { font-size: 18px; }
.product-article h4 { font-size: 16px; }
.product-article ul, .product-article ol { margin: .7em 0 1em; padding-left: 2em; }
.product-article li + li { margin-top: .3em; }
.product-article blockquote { --article-native-color: #475e68; margin: 1em 0; padding: 11px 14px; border-left: 4px solid var(--primary); color: #475e68; background: var(--primary-soft); }
.product-article pre { --article-native-color: #e5eef2; max-width: 100%; margin: 1em 0; padding: 14px; overflow: auto; border-radius: 8px; color: #e5eef2; background: #0d202c; white-space: pre-wrap; }
.product-article code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.product-article a { --article-native-color: var(--primary); color: var(--primary); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.product-article hr { height: 1px; margin: 1.3em 0; border: 0; background: var(--line); }
.product-article figure { max-width: 100%; margin: 18px 0; }
.product-article img { display: block; max-width: 100%; height: auto; border-radius: 9px; }
.product-article figcaption { --article-native-color: var(--muted); margin-top: 7px; color: var(--muted); font-size: 12px; }
.product-article .rt-color-reset { color: var(--article-native-color) !important; }
.product-article .article-align-left { text-align: left; }
.product-article .article-align-center { text-align: center; }
.product-article .article-align-right { text-align: right; }
.product-article figure.article-align-center img { margin-inline: auto; }
.product-article figure.article-align-right img { margin-left: auto; }
.article-list { display: grid; gap: 13px; }
.article-list article { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 20px; padding: 24px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.article-list h2 { margin: 0 0 6px; font-size: 20px; }
.article-list p { margin: 0; color: var(--muted); }
.round-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 900; }
.prose-page { max-width: 860px; padding-block: 52px 70px; }
.prose-page h1 { font-size: 40px; margin: 9px 0 6px; line-height: 1.3; }
.prose-page > time { color: var(--muted); }
.prose { margin: 30px 0; padding: 34px; background: white; border: 1px solid var(--line); border-radius: var(--radius); font-size: 16px; }
.prose p { margin: 0 0 1em; }
.auth-prompt, .query-card { padding: 38px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.auth-prompt { text-align: center; }
.auth-prompt-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 27px; }
.auth-prompt h2 { margin: 14px 0 4px; }
.auth-prompt p { margin: 0 0 20px; color: var(--muted); }
.auth-prompt .text-link { display: block; margin-top: 16px; }
.query-card > label { display: block; font-weight: 900; margin-bottom: 7px; }
.query-card > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.query-card p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.query-card p a { color: var(--primary); font-weight: 800; }
.order-result { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 20px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.order-result div { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.order-result span, .order-result strong { display: block; overflow-wrap: anywhere; }
.order-result div > span { color: var(--muted); font-size: 12px; }
.order-result .delivery-content { grid-column: 1 / -1; }
.order-result .delivery-content strong { margin-top: 6px; white-space: pre-wrap; word-break: break-word; }

.auth-section { padding: 66px 0 80px; background: radial-gradient(circle at 14% 30%, rgba(15,118,110,.09), transparent 26%), var(--canvas); }
.auth-grid { display: grid; grid-template-columns: .85fr 1fr; gap: 70px; align-items: center; max-width: 1020px; }
.auth-aside h1 { margin: 9px 0 11px; font-size: 42px; line-height: 1.2; }
.auth-aside > p { color: var(--muted); font-size: 16px; }
.auth-aside ul { list-style: none; padding: 0; margin: 25px 0 0; }
.auth-aside li { padding: 10px 0 10px 28px; position: relative; }
.auth-aside li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 900; }
.auth-card { padding: 32px; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); }
.auth-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.auth-card-head h1, .auth-card-head h2 { margin: 0; font-size: 24px; }
.auth-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.stack-form { display: grid; gap: 16px; }
.stack-form label small { color: var(--muted); font-weight: 400; }
.stack-form label > small { display: block; margin-top: 5px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 58px; }
.password-toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--primary); font-size: 12px; font-weight: 800; cursor: pointer; }
.auth-links { display: flex; justify-content: center; gap: 10px; margin-top: 20px; color: var(--muted); font-size: 13px; }
.auth-links a { color: var(--primary); font-weight: 800; }
.single-auth .auth-card { max-width: 510px; margin-inline: auto; }
.form-errors { margin-bottom: 18px; padding: 12px 15px; border-radius: 9px; background: #fff1ef; border: 1px solid #f1c6c0; color: var(--danger); }
.form-errors p { margin: 0; }
.flash { margin-top: 16px; padding: 12px 16px; border-radius: 9px; border: 1px solid; }
.flash-success { background: #edfaf4; border-color: #b9e3d0; color: var(--success); }
.flash-info { background: #eef8f7; border-color: #bde0dc; color: var(--primary-dark); }

.account-hero { padding: 38px 0 58px; color: white; background: linear-gradient(115deg,var(--navy),var(--primary)); }
.account-hero h1 { margin: 5px 0; font-size: 36px; }
.account-hero p { margin: 0; color: rgba(255,255,255,.7); }
.account-layout { position: relative; display: grid; grid-template-columns: 235px 1fr; gap: 22px; align-items: start; margin-top: -25px; padding-bottom: 70px; }
.account-sidebar { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.account-user { display: flex; align-items: center; gap: 12px; padding: 20px; background: #f0f8f6; border-bottom: 1px solid var(--line); }
.account-user > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 50%; color: white; background: var(--primary); font-weight: 900; }
.account-user strong, .account-user small { display: block; max-width: 135px; overflow: hidden; text-overflow: ellipsis; }
.account-user small { color: var(--muted); }
.account-sidebar nav { padding: 9px; }
.account-sidebar nav a { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 8px; color: #40525c; font-weight: 700; }
.account-sidebar nav a:hover, .account-sidebar nav a.active { color: var(--primary-dark); background: var(--primary-soft); }
.account-sidebar nav a span { width: 20px; color: var(--primary); text-align: center; }
.sidebar-logout { width: calc(100% - 18px); margin: 0 9px 12px; border: 1px solid #ead0cc; border-radius: 8px; padding: 9px; color: var(--danger); background: white; font-weight: 800; cursor: pointer; }
.account-content { min-width: 0; padding-top: 25px; }
.content-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.content-heading h2 { margin: 0; font-size: 27px; }
.content-heading p { margin: 2px 0 0; color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; }
.metric-grid article { padding: 22px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.metric-grid span, .metric-grid strong, .metric-grid small { display: block; }
.metric-grid span, .metric-grid small { color: var(--muted); }
.metric-grid strong { margin: 7px 0 3px; color: var(--primary-dark); font-size: 27px; }
.account-panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(16,41,58,.04); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-heading h3 { margin: 0; }
.panel-heading a { color: var(--primary); font-weight: 800; font-size: 13px; }
.table-wrap { overflow-x: auto; }
.table-wrap:focus { outline: 3px solid rgba(15,118,110,.2); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #edf1f0; white-space: nowrap; }
th { color: var(--muted); background: #f8faf9; font-size: 12px; }
td a { color: var(--primary); font-weight: 800; }
.status { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; }
.status-pending { color: #845600; background: #fff4d7; }
.status-paid { color: #145f8a; background: #e7f4fb; }
.status-delivered { color: var(--success); background: #e8f7ef; }
.status-cancelled, .status-refunded { color: #7d4e4a; background: #f5eceb; }
.form-panel { padding: 25px; }
.form-panel .stack-form { max-width: 570px; }
.ticket-form-panel { margin-bottom: 18px; }
.ticket-form-panel .panel-heading { margin: -25px -25px 20px; }
.ticket-list { display: grid; gap: 0; }
.ticket-list article { padding: 20px; border-bottom: 1px solid var(--line); }
.ticket-list article:last-child { border-bottom: 0; }
.ticket-head { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.ticket-head div > strong, .ticket-head div > span { display: block; }
.ticket-head div > span, .ticket-list article > small { color: var(--muted); font-size: 12px; }
.ticket-list article > p { margin: 13px 0; white-space: pre-wrap; word-break: break-word; }
.ticket-reply { margin-top: 15px; padding: 13px 15px; border-radius: 9px; background: var(--primary-soft); }
.ticket-reply p { margin: 5px 0 0; }
.status-open { color: #845600; background: #fff4d7; }
.status-answered { color: var(--success); background: #e8f7ef; }
.status-closed { color: #667782; background: #eef2f1; }

.site-footer { color: rgba(255,255,255,.76); background: #0d202c; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; padding-block: 46px 36px; }
.brand-light strong { color: white; }
.brand-light small { color: rgba(255,255,255,.5); }
.footer-grid > div > p { max-width: 470px; }
.footer-grid h2 { margin: 0 0 12px; color: white; font-size: 15px; }
.footer-grid > div > a:not(.brand) { display: block; padding: 3px 0; }
.footer-grid > div > a:not(.brand):hover { color: #65e1cf; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; }

@media (max-width: 1000px) {
  .assurance-grid { grid-template-columns: repeat(2,1fr); }
  .assurance-grid article:nth-child(2) { border-right: 0; }
  .assurance-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .product-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .catalog-list-head, .product-row { grid-template-columns: minmax(0, 1fr) 100px 105px 102px; gap: 12px; }
  .inline-order-query { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .topbar { min-height: 78px; }
  .brand strong { font-size: 18px; }
  .brand small { display: none; }
  .menu-toggle { display: block; }
  .account-actions { margin-left: auto; }
  .nav-row { display: block; padding-block: 10px; }
  .primary-nav { display: none; flex-direction: column; margin-bottom: 10px; }
  .primary-nav.open { display: flex; }
  .primary-nav a { min-height: 43px; justify-content: start; border: 0; }
  .primary-nav a:first-child { border: 0; }
  .header-search { width: 100%; }
  .catalog-layout { grid-template-columns: 1fr; }
  .category-panel { display: grid; grid-template-columns: repeat(2,1fr); }
  .panel-title { grid-column: 1 / -1; }
  .category-mobile { display: none; }
  .category-link:nth-child(even) { border-right: 1px solid #eef2f1; }
  .article-grid { grid-template-columns: 1fr; }
  .product-checkout-layout { grid-template-columns: 1fr; }
  .product-checkout-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-image-frame, .product-image-frame img { min-height: 190px; height: 190px; }
  .product-link-card { display: grid; align-content: center; }
  .payment-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-grid { grid-template-columns: 1fr; gap: 28px; }
  .auth-aside { text-align: center; }
  .auth-aside ul { max-width: 430px; margin-inline: auto; text-align: left; }
  .auth-card { max-width: 590px; width: 100%; margin-inline: auto; }
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar nav { display: grid; grid-template-columns: repeat(5,1fr); }
  .account-sidebar nav a { justify-content: center; text-align: center; }
  .account-user, .sidebar-logout { display: none; }
  .account-content { padding-top: 0; }
}

@media (max-width: 660px) {
  .shell { width: min(calc(100% - 24px), var(--shell)); }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .welcome { display: none; }
  .topbar { gap: 9px; }
  .assurance { padding-inline: 18px; }
  .assurance-grid { margin-inline: -18px; grid-template-columns: 1fr; }
  .assurance-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .notice-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .catalog-stats { width: 100%; justify-content: space-between; }
  .product-grid, .product-grid-wide { grid-template-columns: 1fr; }
  .product-card, .product-grid-wide .product-card { grid-template-columns: 102px 1fr; }
  .product-grid-wide .product-visual { min-height: 188px; }
  .filter-bar { grid-template-columns: 1fr; }
  .catalog-search-bar { grid-template-columns: 1fr; }
  .inline-order-query { gap: 18px; margin-bottom: 38px; padding: 24px 18px; }
  .inline-order-query-copy h2 { font-size: 26px; }
  .inline-order-query-copy p { font-size: 14px; }
  .inline-order-query-form { grid-template-columns: 1fr; }
  .inline-order-query-form input { font-size: 16px; }
  .inline-order-query-form .btn { min-width: 0; min-height: 48px; width: 100%; }
  .inline-order-query-result { padding-top: 18px; }
  .catalog-list-head { display: none; }
  .product-row { grid-template-columns: 1fr auto; gap: 10px 14px; padding: 16px; }
  .product-row-main { grid-column: 1 / -1; }
  .product-row-price { align-self: center; }
  .product-row-stock { justify-self: end; }
  .product-row-action { grid-column: 1 / -1; width: auto; justify-self: stretch; }
  .product-checkout-page { padding-top: 14px; }
  .product-checkout-aside { grid-template-columns: 1fr; }
  .product-media-card { max-width: 390px; width: 100%; margin-inline: auto; }
  .product-image-frame, .product-image-frame img { min-height: 280px; height: 280px; }
  .product-link-card { display: none; }
  .checkout-product-head, .checkout-form { padding-inline: 15px; }
  .checkout-fields, .checkout-actions { grid-template-columns: 1fr; }
  .checkout-details > header { align-items: start; flex-direction: column; padding-inline: 15px; }
  .checkout-details > header p { max-width: none; text-align: left; }
  .checkout-details-body { padding-inline: 15px; }
  .prose { padding: 23px; }
  .article-list article { grid-template-columns: 1fr auto; }
  .article-list time { grid-column: 1 / -1; }
  .query-card > div { grid-template-columns: 1fr; }
  .order-result { grid-template-columns: 1fr; }
  .auth-section { padding-block: 38px 55px; }
  .auth-aside h1 { font-size: 33px; }
  .auth-card { padding: 23px; }
  .account-sidebar nav { grid-template-columns: repeat(2,1fr); }
  .metric-grid { grid-template-columns: 1fr; }
  .content-heading { align-items: start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 440px) {
  .brand strong { font-size: 16px; }
  .account-actions .btn-small { padding-inline: 10px; }
  .topbar > .brand > span:last-child { display: none; }
  .menu-toggle { font-size: 0; width: 44px; height: 44px; position: relative; }
  .menu-toggle::after { content: "☰"; font-size: 19px; position: absolute; inset: 0; display: grid; place-items: center; }
  .category-panel { grid-template-columns: 1fr; }
  .category-link:nth-child(even) { border-right: 0; }
  .product-card, .product-grid-wide .product-card { grid-template-columns: 1fr; }
  .product-visual, .product-grid-wide .product-visual { min-height: 115px; }
  .product-body h2, .product-body h3 { font-size: 17px; }
  .product-image-frame, .product-image-frame img { min-height: 230px; height: 230px; }
  .payment-method-grid { grid-template-columns: 1fr; }
  .checkout-price-bar { align-items: start; flex-direction: column; gap: 4px; }
  .product-row-main { grid-template-columns: 1fr; gap: 7px; }
  .product-row-main .delivery-tag { justify-self: start; }
  .product-row p { white-space: normal; }
  .page-hero h1 { font-size: 32px; }
  .prose-page h1 { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Email verification */
.account-email-state{display:block;margin-top:5px;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}
.account-email-state.is-verified,.email-state-verified{color:#0c8a73}
.account-email-state.is-pending,.email-state-pending{color:#d47619}
.email-verification-panel{display:grid;gap:20px}
.email-verification-summary{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid #dbe7e5;border-radius:16px;background:#f7fbfa}
.email-verification-summary strong{display:block;font-size:18px;color:#0f2a3d}
.email-verification-summary p{margin:3px 0 0;font-weight:800}
.email-verification-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#dff3ef;color:#087d70;font-size:23px;font-weight:900}
.email-verification-copy,.email-verification-hint{color:#607582}
.email-verification-hint{display:block;margin-top:10px;font-size:13px;line-height:1.65}
.verification-public-wrap{max-width:760px;padding-top:44px;padding-bottom:64px}
.verification-public-card{display:grid;gap:22px}
.verification-result{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid #dbe7e5;border-radius:16px;background:#f7fbfa}
.verification-result>span{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:14px;background:#dff3ef;color:#087d70;font-size:22px;font-weight:900}
.verification-result h2{margin:0 0 6px}
.verification-result p{margin:0;color:#607582}
.verification-result.is-error>span{background:#fff0eb;color:#d55132}
.verification-result.is-success>span{background:#dff3ef;color:#087d70}
@media(max-width:720px){.verification-public-wrap{padding-top:24px;padding-bottom:42px}.verification-result{padding:16px}.email-verification-summary{padding:15px}}



/* Mobile browsing refinement: compact two-column navigation and footer. */
@media (max-width: 860px) {
  .primary-nav.open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.1);
  }
  .primary-nav.open a {
    min-width: 0;
    min-height: 48px;
    padding: 10px 14px;
    justify-items: start;
  }
  .category-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-link { min-width: 0; min-height: 50px; align-items: center; }
  .category-link > span { min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
  .category-link > b { flex: 0 0 auto; }
}

@media (max-width: 660px) {
  .catalog-section { padding-block: 30px 38px; }
  .catalog-layout { gap: 16px; }
  .catalog-heading { gap: 10px; margin-bottom: 18px; padding-top: 0; }
  .section-heading h2 { font-size: clamp(23px, 7vw, 29px); }
  .catalog-stats { width: auto; justify-content: flex-start; }
  .catalog-stats span { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; background: var(--primary-soft); }
  .catalog-stats b { font-size: 13px; line-height: 1.3; }
  .results-line { margin: 16px 0 12px; }

  .assurance { margin-top: 18px; padding-inline: 12px; }
  .assurance-grid { margin-inline: -12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assurance-grid article { min-width: 0; padding: 16px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .assurance-grid article:nth-child(2n) { border-right: 0; }
  .assurance-grid article:nth-last-child(-n+2) { border-bottom: 0; }
  .assurance .homepage-content-title { align-items: flex-start; gap: 8px; }
  .assurance .homepage-card-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; font-size: 18px; }
  .assurance-grid small { margin-top: 7px; font-size: 12px; line-height: 1.55; }

  .notice-section { padding-block: 20px; }
  .notice-grid { gap: 12px; }
  .notice-grid article { padding: 18px; }

  .product-group-title { padding: 11px 14px; }
  .product-row { padding: 14px; }
  .product-row p { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .product-row-action { min-height: 44px; }

  .inline-order-query { margin-bottom: 32px; padding: 22px 14px; }
  .inline-order-query-result, .order-result { min-width: 0; overflow-wrap: anywhere; }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    padding-block: 30px 24px;
  }
  .footer-grid > div { min-width: 0; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:first-child > p { margin: 10px 0 0; }
  .footer-grid h2 { margin-bottom: 6px; }
  .footer-grid > div > a:not(.brand) { min-height: 44px; display: flex; align-items: center; padding: 8px 0; }
  .footer-bottom { align-items: center; gap: 6px; padding-block: 14px; text-align: center; }
  .footer-bottom span { max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-width: 440px) {
  .account-actions { gap: 6px; }
  .account-actions .btn-small { min-height: 44px; padding-inline: 10px; }
  .category-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-link { min-height: 50px; gap: 6px; padding: 10px; font-size: 12.5px; }
  .category-link > b { font-size: 11px; }
  .category-link:nth-child(even) { border-right: 1px solid #eef2f1; }
}


/* Product detail row cards. Kept local to checkout content. */
.checkout-details-body .product-article > p,
.checkout-details-body .product-article > div:not([class]) > p,
.checkout-details-body .product-article > .article-xc-rich > :is(p, div),
.checkout-details-body .product-article > :is(div.detail-lead, div.detail-spec, div.detail-notice) {
  margin: 0 0 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #314651;
  background: #fff;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.checkout-details-body .product-article > .article-xc-rich {
  display: grid;
  gap: 10px;
}

.checkout-details-body .product-article > .article-xc-rich > :is(p, div) {
  margin: 0;
}

.checkout-details-body .product-article > p:last-child,
.checkout-details-body .product-article > div:not([class]) > p:last-child,
.checkout-details-body .product-article > :is(div.detail-lead, div.detail-spec, div.detail-notice):last-child {
  margin-bottom: 0;
}

.checkout-details-body .product-article :is(p, div).detail-lead {
  border-color: #ddd6fe;
  border-left: 3px solid #5b4bdb;
  background: #f4f1ff;
  font-weight: 800;
}

.checkout-details-body .product-article :is(p, div).detail-notice {
  border-color: #f2cfaa;
  border-left: 3px solid var(--accent);
  color: #6f3a22;
  background: #fff7ed;
}

.checkout-details-body .product-article :is(p, div).detail-spec {
  border-color: #bde1d8;
  border-left: 3px solid var(--primary);
  color: var(--primary-dark);
  background: #eff9f6;
}

@media (max-width: 660px) {
  .checkout-details-body .product-article > p,
  .checkout-details-body .product-article > div:not([class]) > p,
  .checkout-details-body .product-article > .article-xc-rich > :is(p, div),
  .checkout-details-body .product-article > :is(div.detail-lead, div.detail-spec, div.detail-notice) {
    padding: 10px 11px;
    border-radius: 7px;
  }
}