/* Public shop directory. Inherit the research notebook palette, type and 4/8px rhythm. */
.support-page .site-header { flex-wrap: wrap; gap: 12px 24px; padding-block: 16px; }
.support-page .brand-caption { display: none; }
.support-page .main-nav { flex-wrap: wrap; gap: 12px 24px; }
.support-page .main-nav [aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: 6px; }
.support-account { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; color: var(--muted); }
.support-account a { display: inline-flex; align-items: center; min-height: 44px; }
.support-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; align-items: center; padding-block: 56px 64px; }
.support-intro > * { min-width: 0; }
.support-intro h1 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.4; }
.support-lead { margin-top: 24px; font-size: 14px; color: var(--muted); line-height: 1.9; }
.support-note { padding: 24px 28px; border-left: 2px solid var(--terracotta); background: var(--pale-green); border-radius: 0 var(--radius-panel) var(--radius-panel) 0; }
.support-note h2 { font-size: 24px; margin-top: 16px; }
.support-note p { margin-top: 12px; font-size: 12px; color: var(--muted); }
.support-note .text-link { margin-top: 16px; }
.shop-section { padding-bottom: 48px; }
.catalog-refresh { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; gap: 12px; padding: 10px 16px; background: transparent; border: 1px solid var(--green); color: var(--green); border-radius: var(--radius-control); font-size: 12px; transition: background-color var(--feedback); }
.catalog-refresh:disabled { opacity: .6; cursor: wait; }
.catalog-topline { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; font-size: 12px; color: var(--muted); }
#catalog-status { flex: 1 1 280px; }
#catalog-status[data-state="error"] { color: var(--terracotta); }
#catalog-updated { font-size: 11px; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
.shop-panel { min-width: 0; padding: 28px; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: var(--radius-panel); background: var(--surface); }
.shop-index { color: var(--terracotta); font: 10px/1.6 var(--font-mono); letter-spacing: 1px; }
.shop-panel h3 { font: 500 25px/1.5 var(--font-display); margin-top: 12px; overflow-wrap: anywhere; }
.shop-description { color: var(--muted); font-size: 12px; margin-top: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.shop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; }
.shop-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; background: var(--green); color: var(--on-green); border: 1px solid var(--green); border-radius: var(--radius-control); font-size: 13px; transition: background-color var(--feedback); }
.shop-link:active { background: var(--green-hover); }
.shop-actions .shop-link-note { color: var(--muted); font-size: 11px; }
.shop-state { margin-top: 24px; padding: 24px 16px; border: 1px dashed var(--line); border-radius: var(--radius-control); color: var(--muted); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.shop-state[data-state="error"] { border-color: #c6a28b; color: var(--terracotta); }
.shop-products { list-style: none; padding: 0; margin: 24px 0 0; }
.product-card { min-width: 0; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 12px 16px; padding-block: 20px; border-top: 1px solid var(--line); animation: product-arrive 380ms cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--order, 0) * 30ms); }
.product-card > * { min-width: 0; }
.product-image { display: grid; place-items: center; width: 80px; height: 80px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper); }
.product-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-image span { font-size: 10px; color: var(--muted); text-align: center; }
.product-card h4 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.product-description { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.product-price strong { font: 13px/1.7 var(--font-body); color: var(--green); overflow-wrap: anywhere; }
.product-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; color: var(--muted); }
.product-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--green); background: var(--pale-green); font-size: 12px; transition: background-color var(--feedback); }
.product-footer a:active { background: #d4e0cd; }
.product-footer [data-state="unavailable"] { color: var(--terracotta); }
.shop-more { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.catalog-note { margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--terracotta); color: var(--muted); font-size: 12px; line-height: 1.8; }
.catalog-skeleton { margin-top: 24px; min-height: 188px; padding: 20px; background: var(--pale-green); border-radius: var(--radius-control); }
.catalog-skeleton span { display: block; height: 12px; width: 65%; margin-bottom: 20px; background: #d4ddce; border-radius: 2px; }
.catalog-skeleton span:nth-child(2) { width: 90%; height: 8px; }
.catalog-skeleton span:nth-child(3) { width: 48%; height: 8px; }
.support-closing { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 24px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
@keyframes product-arrive { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) { .catalog-refresh:not(:disabled):hover, .product-footer a:hover { background: #dbe5d5; } .shop-link:hover { background: var(--green-hover); } .support-account a:hover { color: var(--terracotta); } }
@media (max-width: 1000px) { .support-intro { gap: 40px; } .support-account { flex-basis: 100%; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 4px; } .shop-panel { padding: 24px; } }
@media (max-width: 760px) { .support-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 36px 48px; } .support-note { max-width: 520px; } .shop-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .support-page .site-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .support-page .main-nav { grid-column: 1; grid-row: 2; justify-content: space-between; gap: 8px 16px; } .support-account { grid-column: 1; grid-row: 3; justify-content: flex-start; } }
@media (max-width: 380px) { .support-intro h1 { font-size: 32px; } .support-note, .shop-panel { padding: 20px 16px; } .support-lead { font-size: 13px; } .product-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; } .product-image { width: 64px; height: 64px; } .shop-panel h3 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { .product-card { animation: none; } .catalog-refresh, .shop-link, .product-footer a { transition: none; } }
@media (forced-colors: active) { .shop-link, .catalog-refresh, .product-footer a { border-color: ButtonText; } }