/* Homepage only. Keep checkout, catalog data and route state independent. */
body.store-home {
  --ui-accent: #2463eb; --ui-accent-hover: #174ec4; --ui-accent-soft: #edf3ff;
  --ui-focus: #2463eb26; --ui-ink: #202733; --ui-muted: #626d7c;
  --ui-page: #f5f6f8; --ui-line: #e1e5ec;
  background: #f5f6f8; color: #202733; font-size: 15px;
}
.store-home .site-shell { width: calc(100% - 112px); max-width: 2208px; padding-inline: 0; margin-inline: auto; }
/* A real SVG viewport scales all 24 units, including circles and path endings. */
.store-icon { display: inline-block; width: 20px; height: 20px; min-width: 0; flex: 0 0 auto; vertical-align: middle; fill: none; }
.store-home > header { background: #fff; border-bottom: 1px solid #e6e9ef; backdrop-filter: none; }
.store-home > header > .site-shell { padding-block: 23px; }
.store-home .storefront-header-grid { grid-template-columns: minmax(220px, 1fr) minmax(280px, 600px) minmax(410px, 1fr); gap: 36px; }
.store-home #site-logo { width: 220px; height: 55px; max-width: 100%; }
.store-home .storefront-header-actions { gap: 24px; }
.store-search { display: flex; align-items: center; gap: 12px; padding-inline: 17px; width: 100%; height: 48px; border: 1px solid #dfe4ee; border-radius: 6px; background: #f7f8fa; color: #778291; }
.store-search:focus-within { border-color: #2463eb; background: #fff; box-shadow: 0 0 0 3px #2463eb14; }
.store-search #search-input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: #202733; font-size: 15px; outline: 0; box-shadow: none; }
.store-search #search-input::placeholder { color: #727d8d; }
.store-header-link { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: #424d5d; white-space: nowrap; }
.store-header-link:hover { color: #2463eb; }
.store-account { color: #2463eb; }
.store-logout { height: 36px; padding-inline: 10px; color: #737d8a; font-size: 13px; border-left: 1px solid #e2e6ed; }
.store-logout:hover { color: #b34433; }
.store-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 5px; background: #e15747; color: #fff; font-size: 11px; border-radius: 10px; }
.store-count.hidden { display: none; }
.store-home #home-shortcuts-shell { padding-top: 0; }
.store-home #top-shortcuts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding-block: 22px 0; }
.store-shortcut { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px; border: 1px solid #c5d4ee; border-radius: 6px; background: #fff; font-size: 15px; font-weight: 600; line-height: 1.5; text-align: center; color: #244f92; }
.store-shortcut:hover { color: #164eae; background: #eaf1ff; border-color: #709be8; text-decoration: none; }
.store-shortcut span { overflow-wrap: anywhere; }
.store-home #home-announcement-shell { padding-top: 22px; }
.store-home .announcement-card { border: 1px solid #dce4f0; border-left: 4px solid #2463eb; border-radius: 0; background: #fff; box-shadow: none; transition: opacity .2s; transform: none; }
.store-home .announcement-card::before { display: none; }
.store-home .announcement-card-inner { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: stretch; gap: 28px; height: 184px; padding: 24px 28px; }
.announcement-rail { display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #e2e8f1; padding-right: 24px; }
.announcement-marker { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 700; color: #2459b7; background: transparent; }
.announcement-marker .store-icon { width: 27px; height: 27px; }
.announcement-marker.announcement-type-info { color: #2459b7; background: transparent; }
.announcement-marker.announcement-type-warning { color: #9a6513; background: transparent; }
.announcement-marker.announcement-type-danger { color: #b53d39; background: transparent; }
.announcement-marker.announcement-type-success { color: #167354; background: transparent; }
.announcement-autoplay { align-self: flex-start; min-height: 30px; font-size: 12px; color: #576780; text-decoration: underline; text-underline-offset: 4px; }
.announcement-autoplay[aria-pressed=true] { color: #1e57b5; }
.announcement-copy { min-width: 0; display: grid; grid-template-rows: 28px 48px 38px; gap: 10px; }
.announcement-copy h2 { height: 28px; font-size: 20px; font-weight: 700; color: #26334a; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fixed text tracks reserve the same space for short, long and empty announcements. */
.announcement-preview { margin: 0; color: #52617a; font-size: 14px; line-height: 24px; height: 48px; max-height: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line; }
.announcement-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.announcement-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.announcement-link { display: block; min-width: 0; max-width: 240px; height: 36px; padding: 0 14px; border: 1px solid #2463eb; border-radius: 5px; background: #2463eb; color: #fff; font-size: 13px; font-weight: 600; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announcement-link:hover { color: #fff; background: #1d4ed8; border-color: #1d4ed8; text-decoration: none; }
.announcement-link:focus-visible { outline: 3px solid #2463eb; outline-offset: 3px; }
.announcement-read { flex-shrink: 0; height: 36px; padding: 0 14px; color: #245bc4; background: #edf3ff; border: 1px solid #c9d9f7; border-radius: 5px; font-size: 13px; font-weight: 600; }
.announcement-read:hover { background: #dfeaff; border-color: #9ab7ec; }
.announcement-pagination { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 10px; color: #61718a; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.store-home .announcement-nav-btn { width: auto; min-width: 60px; height: 36px; padding: 0 10px; border: 1px solid #d8e1ef; border-radius: 5px; background: #fff; color: #405677; box-shadow: none; font-size: 13px; font-weight: 500; }
.store-home .announcement-nav-btn:hover { background: #f0f5ff; color: #1e58bd; border-color: #a6bfe9; transform: none; }
.store-announcement-full { text-align: left; color: #45556c; font-size: 15px; line-height: 1.9; max-height: 60vh; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.store-announcement-full :is(p, ul, ol, blockquote) { margin: 0 0 12px; }
.store-announcement-full ul { list-style: disc; padding-left: 24px; }
.store-announcement-full ol { list-style: decimal; padding-left: 24px; }
.store-announcement-full li { margin-block: 4px; }
.store-announcement-full :is(h2, h3, h4) { margin: 16px 0 8px; font-size: 16px; font-weight: 700; color: #26334a; }
.store-announcement-full blockquote { border-left: 3px solid #c9d9f7; padding-left: 12px; }
.store-announcement-full a[href] { color: #245bc4; text-decoration: underline; text-underline-offset: 3px; }
.store-announcement-full > :first-child { margin-top: 0; }
.store-announcement-full > :last-child { margin-bottom: 0; }
.store-announcement-full img { max-width: 100%; height: auto; }
.store-home #storefront-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; padding-top: 30px; padding-bottom: 52px; }
.store-category-inner { position: sticky; top: 130px; max-height: calc(100dvh - 154px); overflow-y: auto; scrollbar-width: thin; }
.store-category-heading { padding: 4px 12px 18px; }
.store-category-heading h3 { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; }
.store-category-heading .store-icon { color: #2463eb; }
.store-stock-filter { display: flex; align-items: center; gap: 8px; margin-top: 17px; font-size: 13px; color: #606d7e; cursor: pointer; }
.store-stock-filter input { width: 16px; height: 16px; accent-color: #2463eb; }
.store-home #cat-list { display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0; list-style: none; }
.store-category-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 11px 13px; border-radius: 6px; color: #566276; font-size: 14px; line-height: 1.55; }
.store-category-link > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.store-category-link:hover { background: #eaf0fa; color: #2463eb; }
.store-category-link[aria-current] { background: #2463eb; color: #fff; font-weight: 600; }
.store-category-count { flex-shrink: 0; font-size: 12px; color: #6c798a; font-variant-numeric: tabular-nums; }
.store-category-link[aria-current] .store-category-count { color: #fff; }
.store-home .catalog-toolbar { min-height: 42px; gap: 14px; margin-bottom: 20px; }
.store-home .catalog-heading { gap: 13px; }
.store-home .catalog-heading h2 { font-size: 25px; font-weight: 700; line-height: 1.4; color: #202733; }
.store-home #catalog-count { font-size: 13px; color: #647184; }
.store-home #catalog-sort { min-height: 38px; border: 1px solid #dfe4ed; border-radius: 5px; background: #fff; color: #4d5a6c; font-size: 13px; }
.store-home #catalog-clear { color: #2463eb; }
.store-home .product-grid-responsive { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 20px; }
.store-home .product-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e3e7ee; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 5px #182e4904; transition: border-color .18s, box-shadow .18s; cursor: pointer; }
.store-home .product-card:hover { border-color: #b4c9f6; box-shadow: 0 7px 20px #233d6710; }
.store-product-labels { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 14px 18px 0; }
.store-product-category { min-width: 0; color: #657186; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-stock-badge { flex-shrink: 0; padding: 2px 7px; border-radius: 4px; background: #eaf8f1; color: #177955; font-size: 11px; line-height: 1.6; }
.store-stock-badge.is-low { color: #966211; background: #fff5df; }
.store-stock-badge.is-empty { color: #967078; background: #f8edef; }
.store-home .product-media { height: 148px; width: 100%; padding: 12px 24px 14px; background: #fff; overflow: hidden; flex-shrink: 0; }
.store-home .product-media-image, .store-home .product-media-image.is-low-resolution { display: block; width: 100%; height: 100%; padding: 0; object-fit: contain; transform: none; }
.store-home .product-card-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 16px 18px 18px; border-top: 1px solid #edf0f5; }
.store-product-name { min-height: 50px; }
.store-product-name h3 { font-size: 16px; font-weight: 700; line-height: 1.55; color: #252e3c; height: 50px; overflow-wrap: anywhere; }
.store-product-rule { margin-top: 4px; color: #916111; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.store-home .product-desc-wrap { margin-top: 8px; }
.store-home .product-desc { color: #687489; font-size: 13px; line-height: 1.65; min-height: 43px; }
.store-home .product-desc-fade { display: none; }
.store-description-actions { height: 24px; padding-top: 3px; }
.store-home .product-desc-toggle { color: #2463eb; font-size: 12px; font-weight: 500; }
.store-product-meta { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; padding-top: 10px; }
.store-price { min-width: 0; max-width: 100%; }
.store-price-label { display: block; color: #687488; font-size: 11px; line-height: 1.4; }
.store-home .product-price-value { display: block; color: #d14f3c; font-size: 28px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; overflow: visible; }
.product-price-value small { font-size: 16px; padding-right: 3px; font-weight: 600; }
.store-stock { color: #6b7789; font-size: 12px; padding-bottom: 3px; }
.store-home .product-stock-value { display: inline; color: #455167; font-size: 12px; font-weight: 500; }
.store-product-actions { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.store-buy, .store-cart-button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: 42px; border-radius: 5px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.store-buy { color: #fff; background: #2463eb; border: 1px solid #2463eb; }
.store-buy:hover { background: #174ec4; border-color: #174ec4; }
.store-buy-restricted, .store-buy-unavailable { background: #f3f6fa; border-color: #e0e6ef; color: #596982; }
.store-buy-restricted:hover, .store-buy-unavailable:hover { background: #eaf0fa; border-color: #c6d4eb; color: #245bc4; }
.store-cart-button { color: #4269a8; border: 1px solid #dbe4f3; background: #f8faff; }
.store-cart-button:hover { color: #2463eb; border-color: #96b5f7; background: #edf3ff; }
.store-cart-button:disabled { opacity: .45; cursor: not-allowed; }
.store-home #cart-float, .store-home #support-float { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 16px #22395d14; }
.store-home #cart-float { background: #2463eb; border-color: #2463eb; }
.store-home #support-float { background: #fff; border-color: #dfe5ef; color: #43536a; }
.store-home :is(#cart-float, #support-float) { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; cursor: grab; }
.store-home :is(#cart-float, #support-float).is-dragging { cursor: grabbing; transform: none !important; transition: none; }
.store-home .store-service-footer { padding: 36px 0 86px; border-top: 1px solid #e0e5ed; background: #eef1f5; }
.store-home .store-service-footer h2 { color: #303d51; font-size: 19px; font-weight: 700; }
.store-home .store-service-footer h3 { color: #46546a; }
.store-home .store-service-footer p { color: #647187; }
.store-home .store-service-links a, .store-home .store-service-links button { color: #2463eb; }
.store-skeleton { min-height: 434px; overflow: hidden; border: 1px solid #e3e7ee; border-radius: 8px; background: #fff; }
.store-skeleton-media { height: 186px; }
.store-home .product-grid-empty { grid-column: 1 / -1; border-radius: 6px; box-shadow: none; }
.store-empty-icon { display: grid; place-items: center; color: #7b8ba2; }
.store-empty-icon .store-icon { width: 32px; height: 32px; }
.store-home :is(.store-header-link, .store-shortcut, .store-category-link, .store-buy, .store-cart-button, .announcement-read, .announcement-nav-btn, .product-card):focus-visible { outline: 2px solid #2463eb; outline-offset: 3px; }
.store-home :is(#storefront-shell, #top-shortcuts, #announcement).hidden { display: none; }
@media (min-width: 2100px) {
  .store-home .product-grid-responsive { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1699px) {
  .store-home .site-shell { width: calc(100% - 80px); }
  .store-home .storefront-header-grid { grid-template-columns: 200px minmax(200px, 1fr) auto; gap: 30px; }
  .store-home #site-logo { width: 200px; height: 50px; }
  .store-home #storefront-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .store-home .product-grid-responsive { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .store-home .storefront-header-actions { gap: 18px; }
  .store-home #top-shortcuts { gap: 10px; }
  .store-shortcut { font-size: 14px; padding-inline: 10px; }
}
@media (max-width: 1299px) {
  .store-home .site-shell { width: calc(100% - 56px); }
  .store-home .product-grid-responsive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-home #storefront-shell { grid-template-columns: 186px minmax(0, 1fr); gap: 22px; }
  .store-home #top-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-home .storefront-header-actions { gap: 14px; }
  .store-header-link { font-size: 13px; }
  .store-home .storefront-header-grid { gap: 22px; }
}
@media (max-width: 1023px) {
  .store-home .site-shell { width: calc(100% - 40px); }
  .store-home .storefront-header-grid.storefront-header-grid { grid-template-columns: minmax(0, 1fr) auto !important; gap: 15px 24px; }
  .store-home .storefront-header-brand { grid-column: 1; grid-row: 1; }
  .store-home .storefront-header-actions { grid-column: 2; grid-row: 1; }
  .store-home .storefront-header-search { grid-column: 1 / -1; grid-row: 2; }
  .store-home #storefront-shell { display: flex; flex-direction: column; gap: 22px; padding-top: 24px; }
  .store-category-inner { position: static; max-height: none; overflow: visible; }
  .store-category-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px; }
  .store-stock-filter { margin: 0; }
  .store-home #cat-list { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .store-home #cat-list li { flex: 0 0 auto; }
  .store-category-link { min-height: 40px; padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .store-home .catalog-heading h2 { font-size: 23px; }
  .store-home #storefront-shell.hidden { display: none; }
}
@media (max-width: 767px) {
  .store-home > header { position: relative; }
  .store-home .site-shell { width: calc(100% - 28px); }
  .store-home > header > .site-shell { padding-block: 16px; }
  .store-home #site-logo { width: 156px; height: 39px; }
  .store-home .storefront-header-grid { column-gap: 12px; }
  .store-home .storefront-header-actions { gap: 12px; }
  .store-home .storefront-header-actions > .store-header-link span:not(.store-count) { display: none; }
  .store-home .storefront-header-actions > .store-header-link { min-width: 28px; }
  .store-home .storefront-header-actions #auth-area .store-header-link span { display: none; }
  .store-home .store-logout { display: none; }
  .store-search { height: 44px; }
  .store-home #top-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 16px; }
  .store-shortcut { min-height: 48px; padding: 10px 8px; font-size: 13px; }
  .store-home #home-announcement-shell { padding-top: 16px; }
  .store-home .announcement-card-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: 26px 192px; height: 268px; gap: 14px; padding: 18px; }
  .announcement-rail { flex-direction: row; align-items: center; border: 0; padding: 0; }
  .announcement-marker { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
  .announcement-marker .store-icon { width: 20px; height: 20px; }
  .announcement-autoplay { align-self: center; min-height: 26px; }
  .announcement-pagination { gap: 6px; }
  .store-home .announcement-nav-btn { min-width: 48px; height: 34px; font-size: 12px; padding-inline: 6px; }
  .announcement-pagination > span { font-size: 12px; }
  .announcement-copy { grid-template-rows: 26px 66px 80px; gap: 10px; }
  .announcement-footer { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 36px 36px; gap: 8px; }
  .announcement-actions { width: 100%; }
  .announcement-link { height: 34px; line-height: 32px; font-size: 12px; padding-inline: 10px; }
  .announcement-copy h2 { height: 26px; line-height: 26px; font-size: 17px; }
  .announcement-preview { font-size: 13px; line-height: 22px; height: 66px; -webkit-line-clamp: 3; }
  .announcement-read { font-size: 12px; height: 34px; padding-inline: 10px; }
  .store-home .catalog-toolbar { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .store-home .catalog-heading { flex-wrap: wrap; gap: 8px; }
  .store-home .catalog-heading h2 { font-size: 21px; }
  .store-home #catalog-count { font-size: 12px; }
  .store-home .catalog-controls { gap: 6px; flex-wrap: wrap; }
  .store-home .catalog-controls > label { display: none; }
  .store-home #catalog-sort { max-width: 138px; padding: 7px; font-size: 12px; }
  .store-home .product-grid-responsive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .store-product-labels { padding: 10px 12px 0; gap: 4px; min-height: 30px; }
  .store-product-category { font-size: 10px; }
  .store-stock-badge { font-size: 10px; padding: 2px 4px; }
  .store-home .product-media { height: 110px; padding: 10px 14px; }
  .store-home .product-card-body { padding: 12px; }
  .store-product-name { min-height: 44px; }
  .store-product-name h3 { font-size: 14px; height: 44px; }
  .store-product-rule { font-size: 11px; }
  .store-home .product-desc { font-size: 12px; min-height: 40px; }
  .store-home .product-price-value { font-size: 23px; }
  .product-price-value small { font-size: 13px; }
  .store-price-label, .store-stock, .store-home .product-stock-value { font-size: 11px; }
  .store-product-actions { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; margin-top: 12px; }
  .store-buy, .store-cart-button { height: 40px; font-size: 12px; }
  .store-home #cart-float, .store-home #support-float { right: 8px; padding: 9px 10px; min-height: 42px; }
  .store-home #cart-float > span:not(.store-count) { display: none; }
  .store-home .store-service-footer { padding-bottom: 110px; }
  .store-skeleton { min-height: 380px; }
}
@media (max-width: 359px) {
  .store-home .site-shell { width: calc(100% - 20px); }
  .store-home #site-logo { width: 138px; }
  .store-home .storefront-header-actions { gap: 6px; }
  .store-home .product-grid-responsive { gap: 8px; }
  .store-home .product-card-body { padding: 10px; }
  .store-product-labels { padding-inline: 10px; }
  .store-product-actions { grid-template-columns: 32px minmax(0, 1fr); gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .store-home .product-card, .store-home .announcement-card { transition: none; }
}