.storefront {
  --ink: #171714;
  --paper: #fff;
  --line: #e6e5e0;
  --accent: #d3ed7a;
  color: var(--ink);
  background: var(--paper);
}
.storefront button, .storefront input, .storefront select, .storefront textarea,
.storefront .panel, .storefront .cart-list {border-radius: 2px; border-color: var(--line)}
.storefront button:hover {background: #f2f2ee}
.storefront .primary {background: var(--ink); color: #fff}
.storefront .primary:hover {background: #3a3a33}
.storefront :focus-visible, .merchant :focus-visible {outline: 2px solid #656e33; outline-offset: 3px}
.storefront .muted {color: #676762}
.storefront .selected {background: #efefe9!important; color: var(--ink)}
.storefront .pay-total, .storefront .checkout-steps b {color: var(--ink)}
.storefront .cart-item>input, .storefront .checkbox-label input {accent-color: var(--ink)}
.storefront .order-tabs button.selected {border-color: var(--ink)}
.storefront main {max-width: 1344px; margin-top: 24px}
.shop-header {max-width: none; padding: 0; display: block; border-color: var(--line)}
.shop-header-inner {
  max-width: 1344px;
  padding: 17px 28px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.shop-wordmark {font-size: 29px; font-weight: 900; letter-spacing: -.07em; line-height: 1; white-space: nowrap}
.shop-wordmark small {font-size: 13px; letter-spacing: .05em; padding-left: 6px; vertical-align: 3px}
.desktop-links {display: flex; gap: 19px; white-space: nowrap; align-items: center}
.desktop-links a[aria-current] {text-decoration: underline; text-underline-offset: 5px}
.shop-header #search {margin: 0 0 0 auto; max-width: 325px; background: #f3f3f0; border: 1px solid transparent}
[data-cart-count] {display: inline-grid; place-items: center; background: var(--accent); min-width: 19px; border-radius: 50%; font-size: 11px; padding: 1px 4px}
.mobile-nav {display: none}
.shop-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 365px;
  color: #f8f7f2;
  background: #1f201c;
}
.hero-copy {padding: clamp(28px, 5.5vw, 82px); align-self: center; min-width: 0}
.kicker {font-size: 11px; font-weight: 750; letter-spacing: .16em; margin: 0 0 12px}
.hero-copy .kicker {color: #d3ed7a}
.hero-copy h1 {font-size: clamp(30px, 4.2vw, 64px); font-weight: 780; line-height: 1.13; overflow-wrap: anywhere; margin-bottom: 18px}
.hero-copy p {overflow-wrap: anywhere}
.hero-link {display: inline-flex; align-items: center; gap: 22px; margin-top: 13px; border-bottom: 1px solid #f8f7f2; padding: 7px 0; font-weight: 700}
.hero-photo {width: 100%; height: 100%; min-height: 270px; max-height: 515px; object-fit: cover}
.hero-graphic {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  color: #26291c;
  background: repeating-linear-gradient(132deg,#d3ed7a 0,#d3ed7a 79px,#c5dd70 80px,#d3ed7a 81px);
}
.hero-graphic span {font-size: clamp(54px, 9vw, 138px); font-weight: 950; letter-spacing: -.09em; line-height: .95; padding-right: .09em}
.hero-graphic small {font-weight: 800; font-size: 10px; letter-spacing: .22em; margin-top: 12px}
.catalog {margin-top: 36px}
.catalog-heading {display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 15px}
.catalog-heading h1, .catalog-heading h2 {font-size: clamp(23px, 3vw, 34px); margin: 0; font-weight: 750}
.catalog-heading .kicker {margin-bottom: 4px; color: #68685d}
.catalog-tabs {display: flex; gap: 7px; overflow: auto; border-bottom: 1px solid var(--line); padding: 0 0 8px}
.catalog-tabs button {flex: 0 0 auto; border-color: transparent; padding: 8px 15px; border-radius: 0}
.catalog-tabs button[aria-pressed="true"] {background: var(--ink); color: white}
.sub-tabs {padding: 8px 0}
.catalog-tools {display: flex; justify-content: end; align-items: center; gap: 8px; margin: 13px 0}
.catalog-tools select {width: auto; padding: 6px 9px}
.storefront .grid {gap: 27px 15px}
.card-photo {position: relative; overflow: hidden; background: #efefeb}
.storefront .card img {height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 0; background: transparent; transition: transform .2s}
.storefront .placeholder-photo img {object-fit: contain; padding: 20%}
.storefront .card a:hover img {transform: scale(1.035)}
.card-category {font-size: 12px; color: #63635b; margin: 10px 0 2px}
.storefront .card h3 {font-size: 15px; margin: 0 0 4px; font-weight: 650}
.storefront .card .price {font-size: 16px}
.stock-label {position: absolute; left: 8px; top: 8px; background: #fff; padding: 2px 7px; font-size: 12px}
.catalog-empty {background: #f5f5f1; color: #606058; padding: 56px 16px}
.catalog-empty h3 {color: var(--ink); margin-bottom: 4px}
.storefront .detail>img {border-radius: 0; background: #f2f2ee}
.storefront .detail .stack {align-content: start; gap: 10px}
.product-description {white-space: pre-line}
.breadcrumb {color: #676762}
.breadcrumb a {text-decoration: underline}
.storefront .auth {max-width: 480px}
.storefront .auth h1, .storefront .auth p {margin: 0}
.merchant aside>a[aria-current] {background: #232321; color: #fff}
.merchant .primary {background: #232321; color: #fff}
.merchant .primary:hover {background: #3a3a33}
.merchant-results {margin-top: 24px}
.merchant .edit-thumb {max-width: 110px; max-height: 90px; object-fit: contain}
#category-list {display: grid; grid-template-columns: repeat(auto-fit,minmax(min(285px,100%),1fr)); gap: 14px; margin-bottom: 20px}
.category-edit {margin: 0; align-self: start}
.category-edit legend {font-weight: 700}
.category-child {display: flex; gap: 6px; margin-bottom: 8px}
.category-child button {flex-shrink: 0; padding-inline: 9px}
.category-children {margin-left: 12px}
@media (max-width: 850px) {
  .desktop-links {display: none}
  .shop-header-inner {padding: 13px 16px; gap: 14px}
  .shop-header #search {max-width: 390px}
  .mobile-nav {
    display: flex; width: 100%; padding: 0 10px env(safe-area-inset-bottom);
    border: 0; border-top: 1px solid var(--line);
  }
  .mobile-nav a {padding: 12px 6px; color: #606058; min-width: 0}
  .mobile-nav a[aria-current] {box-shadow: inset 0 2px var(--ink); color: var(--ink); font-weight: 750}
}
@media (max-width: 620px) {
  .shop-wordmark {font-size: 24px}
  .shop-wordmark small {display: none}
  .storefront main {margin-top: 14px}
  .shop-hero {grid-template-columns: 1fr; min-height: auto}
  .hero-photo {height: 205px; min-height: 0}
  .hero-graphic {min-height: 115px}
  .hero-graphic small {margin-top: 4px}
  .catalog {margin-top: 23px}
  .storefront .grid {gap: 20px 10px}
  .cart-item>.row {gap: 6px}
  .cart-item>.row button {padding: 7px 10px}
}
@media (prefers-reduced-motion: reduce) {
  .storefront .card img {transition: none}
}

/* Keep page content within its columns, including long titles and admin values. */
#app, .shop-header-inner, .catalog, .catalog-heading>div, .detail>.stack,
.product-filters>label, .inventory-name, .inventory-facts, .inventory-actions,
.order-search>*, .cart-item>div {min-width: 0}
.shop-hero {grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); overflow: hidden}
.hero-photo {display: block; min-width: 0; object-position: center 18%}
.hero-copy .hero-link, .catalog-heading, .card-category, .card h3,
.detail h1, .product-description, .breadcrumb, .cart-item a, .cart-item p,
.inventory-name, .recipient, .category-edit legend {overflow-wrap: anywhere}
.catalog-heading>span {flex-shrink: 0}
.catalog-tabs {max-width: 100%; padding: 4px 3px 9px; scrollbar-width: thin}
.storefront .card img {transition: transform 240ms cubic-bezier(.2,.65,.3,1)}
.storefront button, .merchant button {transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease}
@media (hover: none) {
  .storefront .card a:hover img {transform: none}
}
@media (prefers-reduced-motion: no-preference) {
  .shop-hero {animation: hero-appear 280ms ease-out both}
  @keyframes hero-appear {
    from {opacity: 0; transform: translateY(5px)}
    to {opacity: 1; transform: translateY(0)}
  }
}
@media (prefers-reduced-motion: reduce) {
  .storefront .card img, .storefront button, .merchant button {transition: none}
  .storefront .card a:hover img {transform: none}
}

.product-filters {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8e8eb;
  border-radius: 8px;
}
.merchant-results {margin-top: 12px}
.inventory-list {display: grid; gap: 9px}
.inventory-item {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid #e8e8eb;
  border-radius: 8px;
}
.inventory-item>img {width: 54px; height: 64px; object-fit: cover; background: #f0f0ed; border-radius: 4px}
.inventory-name a {font-weight: 700; text-decoration: underline; text-underline-offset: 3px}
.inventory-name p {margin: 2px 0 0}
.inventory-facts, .inventory-actions {display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px}
.inventory-actions button {padding: 7px 9px; white-space: nowrap}
.inventory-state, .inventory-pinned {padding: 2px 6px; background: #efefeb; font-size: 12px}
.inventory-state[data-active="true"] {background: #e8efdf; color: #31441f}
.inventory-pinned {background: #e8edcf; color: #394017}
.pinned-label {position: absolute; top: 8px; right: 8px; background: var(--accent); padding: 2px 7px; font-size: 12px}
@media (max-width: 1180px) {
  .merchant .order-search {grid-template-columns: minmax(0,1fr) minmax(0,1fr)}
  .merchant .order-search>input {grid-column: 1 / -1}
}
@media (max-width: 1000px) {
  .inventory-item {grid-template-columns: 48px minmax(0,1fr) minmax(0,1fr)}
  .inventory-item>img {width: 48px; height: 58px}
  .inventory-actions {grid-column: 2 / -1}
  .merchant .editor {grid-template-columns: repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px) {
  .storefront .cart-item {grid-template-columns: 18px 58px minmax(0,1fr); gap: 10px}
  .storefront .cart-item>img {width: 58px; height: 76px}
  .storefront .cart-item>.row {grid-column: 2 / -1; justify-content: flex-end}
}
@media (max-width: 620px) {
  .shop-hero {grid-template-columns: minmax(0,1fr)}
  .hero-copy {padding: 25px}
  .catalog-heading {align-items: start}
  .product-filters {grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px}
  .product-filters>label:first-child {grid-column: 1 / -1}
  .merchant .editor {grid-template-columns: minmax(0,1fr)}
  .inventory-item {grid-template-columns: 48px minmax(0,1fr); gap: 8px 11px}
  .inventory-facts, .inventory-actions {grid-column: 2 / -1}
  .inventory-actions {gap: 5px}
  .merchant header {gap: 8px}
  .merchant #sync {font-size: 12px}
  .storefront .address-grid {grid-template-columns: minmax(0,1fr)}
}

/* Chindo brand and membership */
.storefront {--accent:#f6d9de; --line:#eee5e5}
.shop-header-inner {padding-block: 8px}
.shop-wordmark {display: flex; align-items: center; flex: 0 0 auto}
.shop-wordmark img {display: block; width: 88px; height: 68px; max-width: 100%; object-fit: contain}
.merchant aside>.brand img {width: 59px; height: 53px; object-fit: contain; flex-shrink: 0}
.shop-hero {color: #372a2d; background: #f5e9e7}
.hero-copy .kicker {color: #7d4f58}
.hero-link {border-bottom-color: #9c6a72}
.hero-graphic {color: #7c535c; background: #ead9db}
.hero-graphic span {font-size: clamp(44px,8vw,124px)}
.member-summary, .member-tiers {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px}
.member-summary {background: #f9efed; align-items: center}
.member-summary span,.member-tiers span {display: block; color: #685a60}
.member-summary strong,.member-tiers strong {display: block; margin-top: 4px; font-size: 21px; overflow-wrap: anywhere}
.member-summary p {grid-column: 1/-1; margin: 0}
.member-summary h2 {margin: 0}
.member-tiers {margin-top: 15px}
.member-tiers>div {padding: 12px; background: #f8f4f3; border: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere}
.membership-rules summary {cursor: pointer; font-weight: 700}
.membership-rules ul {padding-inline-start: 1.4em; margin-bottom: 0}
.member-entry {display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid #e8e8eb; overflow-wrap: anywhere}
.member-entry p {margin: 0}
.member-list {display: grid; gap: 8px}
.member-search input {flex: 1 1 180px}
.verified-contacts {margin: 6px 0; padding-inline-start: 1.5em; overflow-wrap: anywhere}
.auth-channels {max-width: 480px; margin: 18px auto; padding: 0 4px; overflow-wrap: anywhere}
#member-profile .auth-channels {max-width: none}
.auth-channels button:disabled {cursor: default}
dialog {max-height: calc(100dvh - 24px); overflow: auto; overflow-wrap: anywhere}
.product-media {min-width: 0}
.product-media>img {display: block; width: 100%; height: auto; max-height: 520px; aspect-ratio: 4 / 5; object-fit: contain; background: #f7f4f3}
.product-thumbs {display: flex; gap: 8px; padding: 8px 3px; overflow: auto}
.product-thumbs button {padding: 2px; flex-shrink: 0}
.product-thumbs [aria-pressed="true"] {border-color: #7d4f58}
.product-thumbs img {display: block; width: 48px; height: 54px; object-fit: cover}
.stripe {background: #635bff}
#quote-message {color: #7d4f58}
@media (max-width: 700px) {
  .shop-wordmark img {width: 70px; height: 55px}
  .member-summary,.member-tiers {grid-template-columns: repeat(2,minmax(0,1fr))}
  .member-entry {grid-template-columns: minmax(0,1fr) auto}
  .member-entry button {grid-column: 1/-1; justify-self: start}
  .product-media>img {max-height: 420px}
}