spb/fabri-ka Public
Agrégateur de produits québécois — www.fabri-ka.com
HTML 57.9%
Python 18.6%
TypeScript 15.6%
CSS 7.8%
1/* ==========================================================================2 Fabri-Ka — chaleur artisanale, précision éditoriale3 Mobile-first · palette crème/encre/terracotta/pin4 ========================================================================== */56:root {7 --bg: #FAF6F0;8 --ink: #1E1B16;9 --accent: #C4532E;10 --accent-dark: #A94525;11 --pine: #234438;12 --sand: #F1E9DD;13 --border: #E4D9C8;14 --white: #FFFFFF;15 --muted: #6E6455;1617 --origin-a: #234438;18 --origin-b: #C4532E;19 --origin-c: #8A6D3B;20 --origin-d: #5B5B8A;21 --origin-e: #999999;2223 --font-display: 'Fraunces', Georgia, serif;24 --font-body: 'Outfit', system-ui, -apple-system, sans-serif;2526 --radius: 8px;27 --radius-lg: 12px;28 --shadow-hover: 0 6px 18px rgba(30, 27, 22, 0.08);29 --shadow-sheet: 0 -12px 40px rgba(30, 27, 22, 0.18);30 --maxw: 1280px;3132 --header-h: 56px;33 --tabbar-h: 58px;34 --safe-b: env(safe-area-inset-bottom, 0px);3536 --focus-ring: 0 0 0 3px rgba(196, 83, 46, 0.28);37}3839* {40 box-sizing: border-box;41}4243html {44 scroll-behavior: smooth;45 -webkit-text-size-adjust: 100%;46}4748body {49 margin: 0;50 background: var(--bg);51 color: var(--ink);52 font-family: var(--font-body);53 font-size: 15px;54 line-height: 1.55;55 -webkit-font-smoothing: antialiased;56 overscroll-behavior-y: none;57}5859img {60 max-width: 100%;61 display: block;62}6364a {65 color: var(--accent);66 text-decoration: none;67}6869h1, h2, h3 {70 font-family: var(--font-display);71 font-weight: 900;72 font-optical-sizing: auto;73 line-height: 1.12;74 letter-spacing: -0.015em;75 margin: 0 0 0.5em;76 color: var(--ink);77}7879button {80 font-family: var(--font-body);81 color: var(--ink);82 -webkit-tap-highlight-color: transparent;83}8485button, input, select {86 font-family: var(--font-body);87 font-size: 0.95rem;88}8990input[type='search'],91input[type='number'],92input[type='text'],93select {94 background: var(--white);95 border: 1px solid var(--border);96 border-radius: var(--radius);97 padding: 0.6rem 0.8rem;98 min-height: 44px;99 color: var(--ink);100 outline: none;101 transition: border-color 0.15s ease, box-shadow 0.15s ease;102 width: 100%;103 appearance: none;104 -webkit-appearance: none;105}106107select {108 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6455' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");109 background-repeat: no-repeat;110 background-position: right 0.7rem center;111 padding-right: 2.1rem;112}113114input:focus-visible,115select:focus-visible {116 border-color: var(--accent);117 box-shadow: var(--focus-ring);118}119120/* Consistent a11y focus rings */121a:focus-visible,122button:focus-visible,123[tabindex]:focus-visible {124 outline: 2px solid var(--accent);125 outline-offset: 2px;126 border-radius: 4px;127}128129::selection {130 background: rgba(196, 83, 46, 0.22);131}132133.app {134 min-height: 100vh;135 min-height: 100dvh;136 display: flex;137 flex-direction: column;138}139140.site-main {141 flex: 1;142 width: 100%;143}144145.page {146 width: 100%;147 max-width: var(--maxw);148 margin: 0 auto;149 padding: 1.25rem 1rem 3.5rem;150}151152.page-header {153 display: flex;154 align-items: baseline;155 gap: 1rem;156 flex-wrap: wrap;157 margin-bottom: 1.1rem;158}159160.page-header h1,161.page-header h2 {162 margin-bottom: 0;163}164165/* Hover only where hover exists — touch gets :active feedback */166@media (hover: hover) {167 a:hover {168 text-decoration: underline;169 }170}171172/* --------------------------------------------------------------------------173 Header — slim top bar174 -------------------------------------------------------------------------- */175176.site-header {177 position: sticky;178 top: 0;179 z-index: 60;180 background: rgba(250, 246, 240, 0.94);181 backdrop-filter: blur(12px);182 -webkit-backdrop-filter: blur(12px);183 border-bottom: 1px solid var(--border);184}185186.site-header-inner {187 max-width: var(--maxw);188 margin: 0 auto;189 padding: 0 1rem;190 height: var(--header-h);191 display: flex;192 align-items: center;193 justify-content: center;194 gap: 1.5rem;195}196197.logo {198 font-family: var(--font-display);199 font-weight: 900;200 font-size: 1.45rem;201 color: var(--ink);202 letter-spacing: -0.02em;203 line-height: 1;204}205206.logo:hover {207 text-decoration: none;208}209210.logo-dot {211 color: var(--accent);212}213214/* Desktop nav — hidden on mobile (bottom tab bar takes over) */215.site-nav {216 display: none;217 gap: 0.35rem;218}219220.site-nav a {221 color: var(--ink);222 font-weight: 500;223 font-size: 0.95rem;224 padding: 0.4rem 0.7rem;225 border-radius: 999px;226 transition: color 0.15s ease, background 0.15s ease;227}228229@media (hover: hover) {230 .site-nav a:hover {231 text-decoration: none;232 color: var(--accent);233 background: var(--sand);234 }235}236237.site-nav a.active {238 color: var(--accent);239 background: var(--sand);240 font-weight: 600;241}242243.site-header-search {244 display: none;245 margin-left: auto;246 width: min(320px, 32vw);247}248249@media (min-width: 768px) {250 .site-header-inner {251 justify-content: flex-start;252 }253254 .site-nav {255 display: flex;256 }257258 .site-header-search {259 display: block;260 }261}262263/* --------------------------------------------------------------------------264 Search bar265 -------------------------------------------------------------------------- */266267.searchbar {268 display: flex;269 gap: 0.5rem;270}271272.searchbar-field {273 position: relative;274 flex: 1;275 display: flex;276 align-items: center;277}278279.searchbar-icon {280 position: absolute;281 left: 0.75rem;282 display: inline-flex;283 color: var(--muted);284 pointer-events: none;285}286287.searchbar-field input {288 padding-left: 2.4rem;289}290291.searchbar-kbd {292 position: absolute;293 right: 0.6rem;294 font-family: var(--font-body);295 font-size: 0.72rem;296 font-weight: 600;297 color: var(--muted);298 background: var(--sand);299 border: 1px solid var(--border);300 border-radius: 5px;301 padding: 0.05rem 0.42rem;302 pointer-events: none;303}304305.searchbar button[type='submit'] {306 background: var(--accent);307 color: var(--white);308 border: none;309 border-radius: var(--radius);310 padding: 0.6rem 1.3rem;311 min-height: 44px;312 font-weight: 600;313 cursor: pointer;314 transition: background 0.15s ease;315 white-space: nowrap;316}317318@media (hover: hover) {319 .searchbar button[type='submit']:hover {320 background: var(--accent-dark);321 }322}323324.searchbar button[type='submit']:active {325 background: var(--accent-dark);326 transform: scale(0.98);327}328329.searchbar-compact input {330 min-height: 38px;331 padding-top: 0.42rem;332 padding-bottom: 0.42rem;333 font-size: 0.9rem;334}335336/* --------------------------------------------------------------------------337 Bottom navigation (mobile)338 -------------------------------------------------------------------------- */339340.bottom-nav {341 position: fixed;342 left: 0;343 right: 0;344 bottom: 0;345 z-index: 70;346 display: grid;347 grid-template-columns: repeat(4, 1fr);348 background: rgba(250, 246, 240, 0.96);349 backdrop-filter: blur(14px);350 -webkit-backdrop-filter: blur(14px);351 border-top: 1px solid var(--border);352 padding-bottom: var(--safe-b);353 height: calc(var(--tabbar-h) + var(--safe-b));354}355356.bottom-nav-item {357 appearance: none;358 background: none;359 border: none;360 display: flex;361 flex-direction: column;362 align-items: center;363 justify-content: center;364 gap: 2px;365 min-height: 44px;366 padding: 6px 0 4px;367 color: var(--muted);368 font-size: 0.66rem;369 font-weight: 600;370 letter-spacing: 0.03em;371 text-transform: uppercase;372 cursor: pointer;373 transition: color 0.15s ease;374}375376.bottom-nav-item svg {377 transition: transform 0.15s ease;378}379380.bottom-nav-item:active svg {381 transform: scale(0.9);382}383384.bottom-nav-item.active {385 color: var(--accent);386}387388@media (hover: hover) {389 .bottom-nav-item:hover {390 text-decoration: none;391 color: var(--accent);392 }393}394395@media (min-width: 768px) {396 .bottom-nav {397 display: none;398 }399}400401/* Mobile search overlay (Recherche tab) */402.search-overlay {403 position: fixed;404 inset: 0;405 z-index: 80;406 background: var(--bg);407 padding: max(0.9rem, env(safe-area-inset-top)) 1rem 1rem;408 animation: overlay-in 0.18s ease;409}410411@keyframes overlay-in {412 from {413 opacity: 0;414 transform: translateY(8px);415 }416 to {417 opacity: 1;418 transform: translateY(0);419 }420}421422.search-overlay-bar {423 display: flex;424 align-items: center;425 gap: 0.5rem;426}427428.search-overlay-form {429 position: relative;430 flex: 1;431 display: flex;432 align-items: center;433}434435.search-overlay-icon {436 position: absolute;437 left: 0.8rem;438 display: inline-flex;439 color: var(--muted);440 pointer-events: none;441}442443.search-overlay-form input {444 padding-left: 2.5rem;445 min-height: 48px;446 font-size: 1rem;447 border-radius: var(--radius-lg);448}449450.search-overlay-close {451 flex: 0 0 auto;452 width: 44px;453 height: 44px;454 display: inline-flex;455 align-items: center;456 justify-content: center;457 background: var(--white);458 border: 1px solid var(--border);459 border-radius: 50%;460 cursor: pointer;461 color: var(--ink);462}463464.search-overlay-close:active {465 background: var(--sand);466}467468.search-overlay-hint {469 margin: 1.1rem 0.25rem 0;470 color: var(--muted);471 font-size: 0.9rem;472}473474/* --------------------------------------------------------------------------475 Footer476 -------------------------------------------------------------------------- */477478.site-footer {479 background: var(--sand);480 border-top: 1px solid var(--border);481 padding: 2.25rem 1rem 1.25rem;482 margin-top: 2.5rem;483 /* clear the mobile tab bar */484 padding-bottom: calc(1.25rem + var(--tabbar-h) + var(--safe-b));485}486487.site-footer-inner {488 max-width: var(--maxw);489 margin: 0 auto;490 display: grid;491 grid-template-columns: 1fr;492 gap: 1.75rem;493}494495.logo-footer {496 font-size: 1.3rem;497}498499.footer-brand p {500 margin: 0.4rem 0 0;501 color: var(--muted);502 font-size: 0.92rem;503}504505.footer-col {506 display: flex;507 flex-direction: column;508 gap: 0.45rem;509 align-items: flex-start;510}511512.footer-col-title {513 font-size: 0.72rem;514 font-weight: 700;515 text-transform: uppercase;516 letter-spacing: 0.16em;517 color: var(--muted);518 margin-bottom: 0.2rem;519}520521.footer-col a {522 color: var(--ink);523 font-weight: 500;524 font-size: 0.95rem;525 padding: 0.15rem 0;526}527528@media (hover: hover) {529 .footer-col a:hover {530 color: var(--accent);531 text-decoration: none;532 }533}534535.footer-legal {536 max-width: var(--maxw);537 margin: 1.75rem auto 0;538 padding-top: 1.1rem;539 border-top: 1px solid var(--border);540 color: var(--muted);541 font-size: 0.8rem;542 line-height: 1.5;543}544545@media (min-width: 768px) {546 .site-footer {547 padding: 2.75rem 1.25rem 1.5rem;548 }549550 .site-footer-inner {551 grid-template-columns: 2fr 1fr 1fr;552 gap: 2rem;553 }554}555556/* --------------------------------------------------------------------------557 Hero (Home) — editorial558 -------------------------------------------------------------------------- */559560.hero {561 padding: 2rem 0 1.75rem;562 text-align: left;563}564565.hero-eyebrow {566 margin: 0 0 0.7rem;567 font-size: 0.72rem;568 font-weight: 700;569 text-transform: uppercase;570 letter-spacing: 0.22em;571 color: var(--accent);572 display: flex;573 align-items: center;574 gap: 0.6rem;575}576577.hero-eyebrow::before {578 content: '';579 width: 26px;580 height: 2px;581 background: var(--accent);582 flex: 0 0 auto;583}584585.hero-title {586 font-size: clamp(2.35rem, 8.5vw, 4.75rem);587 font-weight: 900;588 letter-spacing: -0.03em;589 line-height: 1.04;590 margin-bottom: 0.55em;591 max-width: 18ch;592}593594.hero-title em {595 font-style: italic;596 color: var(--accent);597}598599.hero-sub {600 color: var(--muted);601 font-size: clamp(1rem, 2.4vw, 1.15rem);602 max-width: 520px;603 margin: 0 0 1.6rem;604}605606.hero-search {607 max-width: 620px;608 margin: 0 0 2rem;609}610611.hero-search input {612 min-height: 50px;613 font-size: 1rem;614 border-radius: var(--radius-lg);615}616617.hero-search button {618 border-radius: var(--radius-lg);619 font-size: 0.98rem;620 padding: 0.85rem 1.5rem;621}622623.hero-stats {624 display: flex;625 gap: 2.25rem;626 flex-wrap: wrap;627 padding-top: 1.4rem;628 border-top: 1px solid var(--border);629}630631.stat {632 display: flex;633 flex-direction: column;634 align-items: flex-start;635}636637.stat-number {638 font-family: var(--font-display);639 font-weight: 900;640 font-optical-sizing: auto;641 font-size: clamp(1.9rem, 5vw, 2.5rem);642 color: var(--pine);643 line-height: 1.08;644 font-variant-numeric: tabular-nums;645}646647.stat-label {648 font-size: 0.72rem;649 text-transform: uppercase;650 letter-spacing: 0.16em;651 color: var(--muted);652 font-weight: 600;653 margin-top: 0.15rem;654}655656@media (min-width: 900px) {657 .hero {658 padding: 3.5rem 0 2.5rem;659 }660}661662/* --------------------------------------------------------------------------663 Section headers — terracotta rule accent664 -------------------------------------------------------------------------- */665666.section-header {667 display: flex;668 align-items: baseline;669 justify-content: space-between;670 gap: 1rem;671 margin-bottom: 1rem;672}673674.section-header h2 {675 margin: 0;676 font-size: clamp(1.3rem, 3.5vw, 1.6rem);677 position: relative;678 padding-left: 0.85rem;679}680681.section-header h2::before {682 content: '';683 position: absolute;684 left: 0;685 top: 0.18em;686 bottom: 0.14em;687 width: 4px;688 border-radius: 2px;689 background: var(--accent);690}691692.section-see-all {693 display: inline-flex;694 align-items: center;695 gap: 0.35rem;696 font-weight: 600;697 font-size: 0.9rem;698 white-space: nowrap;699 min-height: 44px;700}701702@media (hover: hover) {703 .section-see-all:hover {704 text-decoration: none;705 color: var(--accent-dark);706 }707}708709/* --------------------------------------------------------------------------710 Category chips — snap rail with icons711 -------------------------------------------------------------------------- */712713.home-categories {714 margin: 1.5rem 0 0.5rem;715}716717.category-chips {718 display: flex;719 gap: 0.55rem;720 overflow-x: auto;721 padding: 0.25rem 0 1rem;722 scroll-snap-type: x proximity;723 -webkit-overflow-scrolling: touch;724 scrollbar-width: none;725 /* bleed to screen edges on mobile */726 margin: 0 -1rem;727 padding-left: 1rem;728 padding-right: 1rem;729}730731.category-chips::-webkit-scrollbar {732 display: none;733}734735.chip {736 display: inline-flex;737 align-items: center;738 gap: 0.45rem;739 background: var(--white);740 border: 1px solid var(--border);741 border-radius: 999px;742 padding: 0 1rem;743 min-height: 44px;744 color: var(--ink);745 font-weight: 500;746 font-size: 0.92rem;747 white-space: nowrap;748 scroll-snap-align: start;749 flex: 0 0 auto;750 transition: border-color 0.15s ease, background 0.15s ease;751}752753.chip-icon {754 display: inline-flex;755 color: var(--accent);756}757758.chip:active {759 background: var(--sand);760 border-color: var(--accent);761}762763@media (hover: hover) {764 .chip:hover {765 text-decoration: none;766 border-color: var(--accent);767 background: var(--sand);768 }769}770771.chip-count {772 font-size: 0.72rem;773 font-weight: 600;774 color: var(--muted);775 background: var(--sand);776 border-radius: 999px;777 padding: 0.1rem 0.5rem;778}779780@media (min-width: 768px) {781 .category-chips {782 margin: 0;783 padding-left: 0;784 padding-right: 0;785 }786}787788/* --------------------------------------------------------------------------789 Rails — horizontal snap tracks790 -------------------------------------------------------------------------- */791792.rail {793 margin: 1.75rem 0;794}795796.rail-track {797 display: flex;798 gap: 0.75rem;799 overflow-x: auto;800 padding-bottom: 0.75rem;801 scroll-snap-type: x proximity;802 -webkit-overflow-scrolling: touch;803 scrollbar-width: none;804 margin: 0 -1rem;805 padding-left: 1rem;806 padding-right: 1rem;807}808809.rail-track::-webkit-scrollbar {810 display: none;811}812813.rail-item {814 flex: 0 0 158px;815 scroll-snap-align: start;816}817818@media (min-width: 768px) {819 .rail {820 margin: 2.5rem 0;821 }822823 .rail-track {824 margin: 0;825 padding-left: 0;826 padding-right: 0;827 gap: 1rem;828 scrollbar-width: thin;829 }830831 .rail-item {832 flex-basis: 205px;833 }834}835836/* --------------------------------------------------------------------------837 Cards & product grid — crisp 1px borders, 8px radius838 -------------------------------------------------------------------------- */839840.card {841 background: var(--white);842 border: 1px solid var(--border);843 border-radius: var(--radius);844 transition: border-color 0.18s ease, box-shadow 0.18s ease;845}846847a.card:active {848 border-color: var(--accent);849}850851@media (hover: hover) {852 a.card:hover {853 text-decoration: none;854 border-color: #D3C4AC;855 box-shadow: var(--shadow-hover);856 }857}858859.product-grid {860 display: grid;861 grid-template-columns: repeat(2, 1fr);862 gap: 0.65rem;863}864865@media (min-width: 640px) {866 .product-grid {867 grid-template-columns: repeat(3, 1fr);868 gap: 1rem;869 }870}871872@media (min-width: 1000px) {873 .product-grid {874 grid-template-columns: repeat(4, 1fr);875 }876}877878@media (min-width: 1240px) {879 .product-grid {880 grid-template-columns: repeat(5, 1fr);881 }882}883884.product-card {885 display: flex;886 flex-direction: column;887 overflow: hidden;888 color: var(--ink);889 height: 100%;890}891892.product-card-media {893 position: relative;894 aspect-ratio: 1 / 1;895 background: var(--sand);896 overflow: hidden;897}898899.product-card-media img {900 width: 100%;901 height: 100%;902 object-fit: cover;903 transition: transform 0.3s ease;904}905906/* hover: image scales, card stays put */907@media (hover: hover) {908 a.card:hover .product-card-media img {909 transform: scale(1.045);910 }911}912913.image-placeholder {914 width: 100%;915 height: 100%;916 display: flex;917 align-items: center;918 justify-content: center;919 background: var(--sand);920 color: var(--border);921}922923.product-card-badge {924 position: absolute;925 top: 0.5rem;926 left: 0.5rem;927}928929.product-card-body {930 padding: 0.6rem 0.7rem 0.75rem;931 display: flex;932 flex-direction: column;933 gap: 0.3rem;934 flex: 1;935}936937.product-card-title {938 font-family: var(--font-body);939 font-weight: 500;940 font-size: 0.86rem;941 line-height: 1.32;942 letter-spacing: 0;943 margin: 0;944 display: -webkit-box;945 -webkit-line-clamp: 2;946 -webkit-box-orient: vertical;947 overflow: hidden;948}949950.product-card-price {951 display: flex;952 align-items: baseline;953 gap: 0.45rem;954 flex-wrap: wrap;955}956957.price-chip {958 font-family: var(--font-display);959 font-weight: 700;960 font-optical-sizing: auto;961 color: var(--accent);962 font-size: 1.05rem;963 font-variant-numeric: tabular-nums;964}965966.price-chip-lg {967 font-size: 1.75rem;968}969970.price-chip-muted {971 color: var(--muted);972 font-size: 0.85rem;973 font-family: var(--font-body);974 font-weight: 500;975}976977.price-compare {978 color: var(--muted);979 font-size: 0.82rem;980}981982.product-card-store {983 margin: auto 0 0;984 font-size: 0.7rem;985 color: var(--muted);986 text-transform: uppercase;987 letter-spacing: 0.09em;988 font-weight: 500;989 overflow: hidden;990 text-overflow: ellipsis;991 white-space: nowrap;992}993994@media (min-width: 640px) {995 .product-card-body {996 padding: 0.75rem 0.85rem 0.9rem;997 }998999 .product-card-title {1000 font-size: 0.92rem;1001 }1002}10031004/* --------------------------------------------------------------------------1005 Origin badges — circled letter1006 -------------------------------------------------------------------------- */10071008.origin-badge {1009 display: inline-flex;1010 align-items: center;1011 gap: 0.45rem;1012 border-radius: 999px;1013 font-weight: 700;1014 color: var(--white);1015 font-size: 0.78rem;1016 line-height: 1;1017 box-shadow: 0 1px 4px rgba(30, 27, 22, 0.18);1018}10191020.origin-badge-letter {1021 display: inline-flex;1022 align-items: center;1023 justify-content: center;1024 width: 1.55rem;1025 height: 1.55rem;1026 border-radius: 50%;1027 background: inherit;1028 font-size: 0.74rem;1029}10301031.origin-badge-label {1032 padding-right: 0.75rem;1033 font-size: 0.76rem;1034 letter-spacing: 0.03em;1035}10361037.origin-A { background: var(--origin-a); }1038.origin-B { background: var(--origin-b); }1039.origin-C { background: var(--origin-c); }1040.origin-D { background: var(--origin-d); }1041.origin-E { background: var(--origin-e); }10421043.unavailable-badge {1044 background: var(--sand);1045 border: 1px solid var(--border);1046 color: var(--muted);1047 border-radius: 999px;1048 padding: 0.28rem 0.75rem;1049 font-size: 0.76rem;1050 font-weight: 500;1051}10521053.platform-badge {1054 display: inline-block;1055 background: var(--sand);1056 border: 1px solid var(--border);1057 border-radius: 5px;1058 padding: 0.14rem 0.5rem;1059 font-size: 0.68rem;1060 text-transform: uppercase;1061 letter-spacing: 0.1em;1062 color: var(--muted);1063 font-weight: 600;1064}10651066/* --------------------------------------------------------------------------1067 Buttons1068 -------------------------------------------------------------------------- */10691070.btn {1071 display: inline-flex;1072 align-items: center;1073 justify-content: center;1074 gap: 0.5rem;1075 border-radius: var(--radius);1076 padding: 0.7rem 1.35rem;1077 min-height: 44px;1078 font-weight: 600;1079 font-size: 0.95rem;1080 cursor: pointer;1081 border: 1px solid transparent;1082 transition: background 0.15s ease, border-color 0.15s ease,1083 transform 0.1s ease;1084 text-align: center;1085}10861087.btn:hover {1088 text-decoration: none;1089}10901091.btn:active {1092 transform: scale(0.98);1093}10941095.btn-primary {1096 background: var(--accent);1097 color: var(--white);1098}10991100@media (hover: hover) {1101 .btn-primary:hover {1102 background: var(--accent-dark);1103 }1104}11051106.btn-primary:active {1107 background: var(--accent-dark);1108}11091110.btn-secondary {1111 background: var(--white);1112 border-color: var(--border);1113 color: var(--ink);1114}11151116@media (hover: hover) {1117 .btn-secondary:hover {1118 border-color: var(--accent);1119 color: var(--accent);1120 }1121}11221123.btn-secondary:active {1124 border-color: var(--accent);1125 color: var(--accent);1126}11271128.btn-cta {1129 font-size: 1rem;1130 padding: 0.9rem 1.7rem;1131 margin: 1.25rem 0;1132 align-self: flex-start;1133}11341135/* --------------------------------------------------------------------------1136 Catalog — sticky mobile search + layout1137 -------------------------------------------------------------------------- */11381139.catalog-searchbar {1140 position: sticky;1141 top: var(--header-h);1142 z-index: 40;1143 margin: -0.5rem -1rem 0.9rem;1144 padding: 0.65rem 1rem;1145 background: rgba(250, 246, 240, 0.94);1146 backdrop-filter: blur(12px);1147 -webkit-backdrop-filter: blur(12px);1148 transition: padding 0.2s ease, box-shadow 0.2s ease;1149}11501151.catalog-searchbar-shrunk {1152 padding: 0.35rem 1rem;1153 box-shadow: 0 1px 0 var(--border);1154}11551156.catalog-searchbar-field {1157 position: relative;1158 display: flex;1159 align-items: center;1160}11611162.catalog-searchbar-field .searchbar-icon {1163 left: 0.8rem;1164}11651166.catalog-searchbar-field input {1167 padding-left: 2.5rem;1168 border-radius: 999px;1169 transition: min-height 0.2s ease, border-color 0.15s ease,1170 box-shadow 0.15s ease;1171}11721173.catalog-searchbar-shrunk .catalog-searchbar-field input {1174 min-height: 40px;1175 padding-top: 0.4rem;1176 padding-bottom: 0.4rem;1177}11781179@media (min-width: 900px) {1180 .catalog-searchbar {1181 display: none;1182 }1183}11841185.catalog-layout {1186 display: grid;1187 grid-template-columns: 1fr;1188 gap: 1rem;1189 align-items: start;1190}11911192@media (min-width: 900px) {1193 .catalog-layout {1194 grid-template-columns: 260px 1fr;1195 gap: 2rem;1196 }1197}11981199.catalog-header {1200 display: flex;1201 align-items: baseline;1202 gap: 0.9rem;1203 flex-wrap: wrap;1204 margin-bottom: 1rem;1205}12061207.catalog-header h1 {1208 margin: 0;1209 font-size: clamp(1.6rem, 5vw, 2.1rem);1210}12111212.catalog-count {1213 color: var(--muted);1214 margin: 0;1215 font-size: 0.92rem;1216 font-variant-numeric: tabular-nums;1217}12181219/* --------------------------------------------------------------------------1220 Filters — desktop sidebar1221 -------------------------------------------------------------------------- */12221223.filters {1224 display: none;1225}12261227@media (min-width: 900px) {1228 .filters {1229 display: block;1230 position: sticky;1231 top: calc(var(--header-h) + 16px);1232 max-height: calc(100vh - var(--header-h) - 32px);1233 overflow-y: auto;1234 padding-right: 0.25rem;1235 scrollbar-width: thin;1236 }1237}12381239.filters-title-row {1240 display: flex;1241 align-items: baseline;1242 justify-content: space-between;1243 gap: 0.5rem;1244 margin-bottom: 1rem;1245}12461247.filters-title {1248 font-family: var(--font-display);1249 font-weight: 900;1250 font-size: 1.15rem;1251}12521253.filters-reset-link {1254 background: none;1255 border: none;1256 padding: 0.2rem 0;1257 color: var(--accent);1258 font-weight: 600;1259 font-size: 0.82rem;1260 cursor: pointer;1261}12621263@media (hover: hover) {1264 .filters-reset-link:hover {1265 text-decoration: underline;1266 }1267}12681269.filters-body {1270 display: flex;1271 flex-direction: column;1272 gap: 1.4rem;1273}12741275.filter-group {1276 display: flex;1277 flex-direction: column;1278 gap: 0.5rem;1279}12801281.filter-label {1282 font-size: 0.72rem;1283 font-weight: 700;1284 text-transform: uppercase;1285 letter-spacing: 0.16em;1286 color: var(--muted);1287}12881289.filter-category-list {1290 list-style: none;1291 margin: 0;1292 padding: 0;1293 display: flex;1294 flex-direction: column;1295 gap: 0.1rem;1296 max-height: 300px;1297 overflow-y: auto;1298 scrollbar-width: thin;1299}13001301.filter-category-list button {1302 width: 100%;1303 display: flex;1304 justify-content: space-between;1305 align-items: center;1306 gap: 0.5rem;1307 background: transparent;1308 border: none;1309 border-radius: 6px;1310 padding: 0.55rem 0.6rem;1311 min-height: 40px;1312 cursor: pointer;1313 text-align: left;1314 font-size: 0.92rem;1315 color: var(--ink);1316 transition: background 0.12s ease;1317}13181319.filter-category-list button:active {1320 background: var(--sand);1321}13221323@media (hover: hover) {1324 .filter-category-list button:hover {1325 background: var(--sand);1326 }1327}13281329.filter-category-list button.active {1330 background: var(--pine);1331 color: var(--white);1332 font-weight: 600;1333}13341335.filter-category-list button.active .filter-count {1336 color: rgba(255, 255, 255, 0.75);1337}13381339.filter-count {1340 font-size: 0.76rem;1341 color: var(--muted);1342 font-variant-numeric: tabular-nums;1343}13441345.filter-checkbox {1346 display: flex;1347 align-items: center;1348 gap: 0.55rem;1349 font-size: 0.9rem;1350 cursor: pointer;1351 min-height: 34px;1352}13531354.filter-checkbox input {1355 accent-color: var(--accent);1356 width: 1.1rem;1357 height: 1.1rem;1358 flex: 0 0 auto;1359}13601361.filter-price-row {1362 display: flex;1363 align-items: center;1364 gap: 0.5rem;1365}13661367.filter-price-row input {1368 width: 100%;1369}13701371/* --------------------------------------------------------------------------1372 Mobile filter pill + bottom sheet1373 -------------------------------------------------------------------------- */13741375.filter-fab {1376 position: fixed;1377 z-index: 55;1378 bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);1379 left: 50%;1380 transform: translateX(-50%);1381 display: inline-flex;1382 align-items: center;1383 gap: 0.5rem;1384 background: var(--ink);1385 color: var(--bg);1386 border: none;1387 border-radius: 999px;1388 padding: 0 1.3rem;1389 min-height: 46px;1390 font-weight: 600;1391 font-size: 0.95rem;1392 cursor: pointer;1393 box-shadow: 0 8px 22px rgba(30, 27, 22, 0.3);1394 transition: transform 0.12s ease;1395}13961397.filter-fab:active {1398 transform: translateX(-50%) scale(0.96);1399}14001401.filter-fab-badge {1402 display: inline-flex;1403 align-items: center;1404 justify-content: center;1405 min-width: 1.35rem;1406 height: 1.35rem;1407 padding: 0 0.3rem;1408 border-radius: 999px;1409 background: var(--accent);1410 color: var(--white);1411 font-size: 0.74rem;1412 font-weight: 700;1413 font-variant-numeric: tabular-nums;1414}14151416/* tablet: tab bar is hidden, anchor the pill to the screen edge */1417@media (min-width: 768px) and (max-width: 899px) {1418 .filter-fab {1419 bottom: calc(var(--safe-b) + 16px);1420 }1421}14221423@media (min-width: 900px) {1424 .filter-fab {1425 display: none;1426 }1427}14281429.sheet-root {1430 position: fixed;1431 inset: 0;1432 z-index: 90;1433}14341435.sheet-backdrop {1436 position: absolute;1437 inset: 0;1438 background: rgba(30, 27, 22, 0.45);1439 animation: backdrop-in 0.2s ease;1440}14411442@keyframes backdrop-in {1443 from { opacity: 0; }1444 to { opacity: 1; }1445}14461447.sheet {1448 position: absolute;1449 left: 0;1450 right: 0;1451 bottom: 0;1452 display: flex;1453 flex-direction: column;1454 max-height: 86dvh;1455 background: var(--bg);1456 border-radius: 16px 16px 0 0;1457 box-shadow: var(--shadow-sheet);1458 animation: sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);1459 padding-bottom: var(--safe-b);1460}14611462@keyframes sheet-up {1463 from { transform: translateY(60%); opacity: 0.6; }1464 to { transform: translateY(0); opacity: 1; }1465}14661467.sheet-handle {1468 width: 42px;1469 height: 4px;1470 border-radius: 999px;1471 background: var(--border);1472 margin: 0.6rem auto 0;1473 flex: 0 0 auto;1474}14751476.sheet-header {1477 display: flex;1478 align-items: center;1479 justify-content: space-between;1480 padding: 0.5rem 1.1rem 0.65rem;1481 border-bottom: 1px solid var(--border);1482 flex: 0 0 auto;1483}14841485.sheet-header h2 {1486 margin: 0;1487 font-size: 1.2rem;1488}14891490.sheet-close {1491 width: 40px;1492 height: 40px;1493 display: inline-flex;1494 align-items: center;1495 justify-content: center;1496 background: var(--sand);1497 border: none;1498 border-radius: 50%;1499 cursor: pointer;1500 color: var(--ink);1501}15021503.sheet-close:active {1504 background: var(--border);1505}15061507.sheet-content {1508 flex: 1 1 auto;1509 overflow-y: auto;1510 -webkit-overflow-scrolling: touch;1511 padding: 1.1rem 1.1rem 1.4rem;1512 overscroll-behavior: contain;1513}15141515.sheet-footer {1516 flex: 0 0 auto;1517 display: grid;1518 grid-template-columns: auto 1fr;1519 gap: 0.6rem;1520 padding: 0.75rem 1.1rem;1521 border-top: 1px solid var(--border);1522 background: var(--bg);1523}15241525@media (min-width: 900px) {1526 .sheet-root {1527 display: none;1528 }1529}15301531/* --------------------------------------------------------------------------1532 Pagination1533 -------------------------------------------------------------------------- */15341535.pagination {1536 display: flex;1537 align-items: center;1538 justify-content: center;1539 gap: 0.9rem;1540 margin: 2rem 0 0.5rem;1541 flex-wrap: wrap;1542}15431544.pagination button {1545 background: var(--white);1546 border: 1px solid var(--border);1547 border-radius: var(--radius);1548 padding: 0.6rem 1.1rem;1549 min-height: 44px;1550 font-weight: 500;1551 cursor: pointer;1552 color: var(--ink);1553 transition: border-color 0.15s ease, color 0.15s ease;1554}15551556@media (hover: hover) {1557 .pagination button:hover:not(:disabled) {1558 border-color: var(--accent);1559 color: var(--accent);1560 }1561}15621563.pagination button:active:not(:disabled) {1564 border-color: var(--accent);1565 color: var(--accent);1566}15671568.pagination button:disabled {1569 opacity: 0.4;1570 cursor: not-allowed;1571}15721573.pagination-info {1574 color: var(--muted);1575 font-size: 0.88rem;1576 font-variant-numeric: tabular-nums;1577}15781579/* --------------------------------------------------------------------------1580 Product detail — swipeable gallery + sticky mobile CTA1581 -------------------------------------------------------------------------- */15821583.breadcrumb {1584 display: flex;1585 align-items: center;1586 gap: 0.5rem;1587 font-size: 0.85rem;1588 color: var(--muted);1589 margin-bottom: 1rem;1590 flex-wrap: wrap;1591}15921593.breadcrumb a {1594 padding: 0.25rem 0;1595}15961597.product-detail {1598 display: grid;1599 grid-template-columns: 1fr;1600 gap: 1.4rem;1601 align-items: start;1602}16031604@media (min-width: 900px) {1605 .product-detail {1606 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);1607 gap: 2.5rem;1608 }1609}16101611/* room for the sticky CTA bar on mobile */1612.page-product-detail {1613 padding-bottom: calc(3.5rem + 74px);1614}16151616@media (min-width: 900px) {1617 .page-product-detail {1618 padding-bottom: 3.5rem;1619 }1620}16211622.product-detail-gallery {1623 min-width: 0;1624}16251626/* full-bleed swipe gallery on mobile */1627.pd-track {1628 display: flex;1629 overflow-x: auto;1630 scroll-snap-type: x mandatory;1631 -webkit-overflow-scrolling: touch;1632 scrollbar-width: none;1633 margin: 0 -1rem;1634 background: var(--sand);1635}16361637.pd-track::-webkit-scrollbar {1638 display: none;1639}16401641.pd-slide {1642 flex: 0 0 100%;1643 width: 100%;1644 scroll-snap-align: center;1645 scroll-snap-stop: always;1646 aspect-ratio: 1 / 1;1647 background: var(--sand);1648}16491650.pd-slide img {1651 width: 100%;1652 height: 100%;1653 object-fit: cover;1654}16551656.pd-dots {1657 display: flex;1658 justify-content: center;1659 gap: 0.4rem;1660 padding: 0.7rem 0 0.1rem;1661}16621663.pd-dot {1664 width: 7px;1665 height: 7px;1666 border-radius: 50%;1667 background: var(--border);1668 transition: background 0.15s ease, transform 0.15s ease;1669}16701671.pd-dot-active {1672 background: var(--accent);1673 transform: scale(1.25);1674}16751676.product-detail-thumbs {1677 display: none;1678 gap: 0.6rem;1679 margin-top: 0.75rem;1680 overflow-x: auto;1681 padding-bottom: 0.25rem;1682 scrollbar-width: thin;1683}16841685@media (min-width: 900px) {1686 .pd-track {1687 margin: 0;1688 border: 1px solid var(--border);1689 border-radius: var(--radius);1690 overflow-x: auto;1691 }16921693 .pd-slide {1694 border-radius: 0;1695 }16961697 .pd-dots {1698 display: none;1699 }17001701 .product-detail-thumbs {1702 display: flex;1703 }1704}17051706.thumb {1707 flex: 0 0 64px;1708 width: 64px;1709 height: 64px;1710 padding: 0;1711 border: 2px solid var(--border);1712 border-radius: var(--radius);1713 overflow: hidden;1714 cursor: pointer;1715 background: var(--sand);1716 transition: border-color 0.15s ease;1717}17181719.thumb img {1720 width: 100%;1721 height: 100%;1722 object-fit: cover;1723}17241725.thumb-active {1726 border-color: var(--accent);1727}17281729.product-detail-info {1730 min-width: 0;1731}17321733.product-detail-badges {1734 display: flex;1735 gap: 0.6rem;1736 align-items: center;1737 flex-wrap: wrap;1738 margin-bottom: 0.75rem;1739}17401741.product-detail-title {1742 font-size: clamp(1.5rem, 5.5vw, 2.35rem);1743 letter-spacing: -0.02em;1744}17451746.product-detail-price {1747 display: flex;1748 align-items: baseline;1749 gap: 0.75rem;1750 margin-bottom: 1rem;1751}17521753.product-detail-description-wrap {1754 margin: 0 0 1.25rem;1755}17561757.product-detail-description {1758 color: var(--ink);1759 white-space: pre-line;1760 margin: 0;1761 font-size: 0.95rem;1762 line-height: 1.65;1763}17641765.product-detail-description-clamped {1766 display: -webkit-box;1767 -webkit-line-clamp: 5;1768 -webkit-box-orient: vertical;1769 overflow: hidden;1770}17711772.desc-toggle {1773 margin-top: 0.4rem;1774 background: none;1775 border: none;1776 padding: 0.4rem 0;1777 min-height: 44px;1778 color: var(--accent);1779 font-weight: 600;1780 font-size: 0.9rem;1781 cursor: pointer;1782}17831784@media (hover: hover) {1785 .desc-toggle:hover {1786 text-decoration: underline;1787 }1788}17891790.product-detail-meta {1791 display: grid;1792 grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));1793 gap: 0.9rem;1794 margin: 0 0 1.25rem;1795 padding: 1rem;1796 background: var(--sand);1797 border-radius: var(--radius);1798}17991800.product-detail-meta dt {1801 font-size: 0.68rem;1802 text-transform: uppercase;1803 letter-spacing: 0.14em;1804 color: var(--muted);1805 font-weight: 700;1806}18071808.product-detail-meta dd {1809 margin: 0.15rem 0 0;1810 font-weight: 500;1811 font-size: 0.92rem;1812 overflow-wrap: break-word;1813}18141815.tag-list {1816 display: flex;1817 gap: 0.45rem;1818 flex-wrap: wrap;1819 margin-bottom: 0.5rem;1820}18211822.tag {1823 background: var(--white);1824 border: 1px solid var(--border);1825 border-radius: 999px;1826 padding: 0.25rem 0.7rem;1827 font-size: 0.76rem;1828 color: var(--muted);1829}18301831.store-info-card {1832 padding: 1rem 1.1rem;1833 display: flex;1834 flex-direction: column;1835 gap: 0.25rem;1836}18371838.store-info-name {1839 font-family: var(--font-display);1840 font-weight: 700;1841 font-size: 1.1rem;1842}18431844.store-info-location {1845 margin: 0;1846 color: var(--muted);1847 font-size: 0.88rem;1848}18491850/* Sticky mobile CTA — sits above the tab bar, safe-area aware */1851.pd-cta-bar {1852 position: fixed;1853 left: 0;1854 right: 0;1855 bottom: calc(var(--tabbar-h) + var(--safe-b));1856 z-index: 50;1857 display: flex;1858 align-items: center;1859 gap: 0.75rem;1860 padding: 0.6rem 1rem;1861 background: rgba(250, 246, 240, 0.97);1862 backdrop-filter: blur(12px);1863 -webkit-backdrop-filter: blur(12px);1864 border-top: 1px solid var(--border);1865}18661867.pd-cta-price {1868 flex: 0 0 auto;1869 display: flex;1870 flex-direction: column;1871}18721873.pd-cta-price .price-chip {1874 font-size: 1.2rem;1875}18761877.pd-cta-btn {1878 flex: 1;1879 min-height: 48px;1880 font-size: 0.92rem;1881 overflow: hidden;1882 text-overflow: ellipsis;1883 white-space: nowrap;1884}18851886/* tablet: tab bar is hidden, CTA hugs the bottom edge */1887@media (min-width: 768px) and (max-width: 899px) {1888 .pd-cta-bar {1889 bottom: 0;1890 padding-bottom: calc(0.6rem + var(--safe-b));1891 }1892}18931894@media (min-width: 900px) {1895 .pd-cta-bar {1896 display: none;1897 }1898}18991900/* --------------------------------------------------------------------------1901 Stores1902 -------------------------------------------------------------------------- */19031904.stores-toolbar {1905 display: flex;1906 gap: 0.6rem;1907 align-items: center;1908 flex-wrap: wrap;1909 margin-bottom: 1.25rem;1910}19111912.stores-toolbar input[type='search'] {1913 flex: 1 1 100%;1914}19151916.stores-toolbar select {1917 flex: 1 1 auto;1918 width: auto;1919}19201921@media (min-width: 640px) {1922 .stores-toolbar input[type='search'] {1923 flex: 1 1 240px;1924 }19251926 .stores-toolbar select {1927 flex: 0 1 260px;1928 }1929}19301931.toggle {1932 display: flex;1933 align-items: center;1934 gap: 0.5rem;1935 font-weight: 500;1936 cursor: pointer;1937 white-space: nowrap;1938 min-height: 44px;1939}19401941.toggle input {1942 accent-color: var(--accent);1943 width: 1.1rem;1944 height: 1.1rem;1945}19461947.store-grid {1948 display: grid;1949 grid-template-columns: 1fr;1950 gap: 0.75rem;1951}19521953@media (min-width: 560px) {1954 .store-grid {1955 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));1956 gap: 1rem;1957 }1958}19591960.store-card {1961 padding: 1rem 1.1rem 1.05rem;1962 display: flex;1963 flex-direction: column;1964 gap: 0.3rem;1965 color: var(--ink);1966}19671968.store-card-top {1969 display: flex;1970 justify-content: space-between;1971 align-items: center;1972 gap: 0.75rem;1973}19741975.store-card-heading {1976 flex: 1;1977 min-width: 0;1978}19791980.store-card-name {1981 margin: 0;1982 font-size: 1.1rem;1983 font-weight: 700;1984 overflow: hidden;1985 text-overflow: ellipsis;1986 white-space: nowrap;1987}19881989.store-card-domain {1990 margin: 0;1991 color: var(--accent);1992 font-size: 0.85rem;1993 overflow: hidden;1994 text-overflow: ellipsis;1995 white-space: nowrap;1996}19971998.store-card-location {1999 margin: 0;2000 display: inline-flex;2001 align-items: center;2002 gap: 0.35rem;2003 align-self: flex-start;2004 background: var(--sand);2005 border-radius: 999px;2006 padding: 0.22rem 0.7rem 0.22rem 0.5rem;2007 color: var(--muted);2008 font-size: 0.8rem;2009 font-weight: 500;2010 margin-top: 0.25rem;2011}20122013.store-card-meta {2014 display: flex;2015 align-items: center;2016 gap: 0.75rem;2017 margin-top: 0.55rem;2018}20192020.store-card-count {2021 font-size: 0.84rem;2022 color: var(--muted);2023 font-weight: 600;2024 font-variant-numeric: tabular-nums;2025}20262027/* --------------------------------------------------------------------------2028 Store logo — circular avatar with initial-letter fallback2029 -------------------------------------------------------------------------- */20302031.store-logo {2032 flex: 0 0 auto;2033 display: inline-flex;2034 align-items: center;2035 justify-content: center;2036 border-radius: 50%;2037 overflow: hidden;2038 background: var(--white);2039 border: 1px solid var(--border);2040}20412042.store-logo img {2043 width: 100%;2044 height: 100%;2045 object-fit: cover;2046}20472048.store-logo-sm {2049 width: 28px;2050 height: 28px;2051}20522053.store-logo-md {2054 width: 44px;2055 height: 44px;2056}20572058.store-logo-lg {2059 width: 72px;2060 height: 72px;2061}20622063.store-logo-fallback {2064 border: none;2065 color: var(--white);2066 font-family: var(--font-display);2067 font-weight: 900;2068 font-optical-sizing: auto;2069 line-height: 1;2070 user-select: none;2071}20722073.store-logo-sm.store-logo-fallback {2074 font-size: 0.82rem;2075}20762077.store-logo-md.store-logo-fallback {2078 font-size: 1.25rem;2079}20802081.store-logo-lg.store-logo-fallback {2082 font-size: 2.1rem;2083}20842085.store-logo-ring {2086 box-shadow: 0 0 0 3px var(--white), 0 4px 14px rgba(30, 27, 22, 0.18);2087}20882089/* --------------------------------------------------------------------------2090 Store landing page — hero, stats, catalogue, similar rail2091 -------------------------------------------------------------------------- */20922093/* room for the sticky CTA bar on mobile */2094.page-store-detail {2095 padding-bottom: calc(3.5rem + 74px);2096}20972098@media (min-width: 900px) {2099 .page-store-detail {2100 padding-bottom: 3.5rem;2101 }2102}21032104.store-hero {2105 position: relative;2106 background: var(--white);2107 border: 1px solid var(--border);2108 border-radius: var(--radius-lg);2109 overflow: hidden;2110 margin-bottom: 1.4rem;2111}21122113.store-hero-cover {2114 position: relative;2115 height: 118px;2116 overflow: hidden;2117 background: linear-gradient(120deg, var(--sand), #E8DBC4 55%, var(--sand));2118}21192120.store-hero-cover-img {2121 position: absolute;2122 inset: -28px;2123 background-size: cover;2124 background-position: center;2125 filter: blur(16px) saturate(1.05);2126 transform: scale(1.1);2127}21282129.store-hero-scrim {2130 position: absolute;2131 inset: 0;2132}21332134.store-hero-covered .store-hero-scrim {2135 background: linear-gradient(2136 rgba(30, 27, 22, 0.24),2137 rgba(30, 27, 22, 0.48)2138 );2139}21402141.store-hero-body {2142 position: relative;2143 display: flex;2144 flex-direction: column;2145 align-items: flex-start;2146 gap: 0.6rem;2147 padding: 0 1.1rem 1.15rem;2148 /* pull the logo up so it overlaps the cover band */2149 margin-top: -36px;2150}21512152.store-hero-name {2153 margin: 0;2154 font-size: clamp(1.6rem, 6vw, 2.4rem);2155 letter-spacing: -0.02em;2156 overflow-wrap: break-word;2157 max-width: 100%;2158}21592160.store-hero-chips {2161 display: flex;2162 align-items: center;2163 gap: 0.6rem;2164 flex-wrap: wrap;2165}21662167.store-hero-chip {2168 display: inline-flex;2169 align-items: center;2170 gap: 0.35rem;2171 background: var(--sand);2172 border-radius: 999px;2173 padding: 0.24rem 0.75rem 0.24rem 0.55rem;2174 color: var(--muted);2175 font-size: 0.82rem;2176 font-weight: 500;2177}21782179.store-hero-actions {2180 display: flex;2181 align-items: center;2182 gap: 0.6rem;2183 flex-wrap: wrap;2184 width: 100%;2185 margin-top: 0.35rem;2186}21872188.store-hero-cta {2189 padding: 0.75rem 1.4rem;2190}21912192.store-social-link {2193 width: 44px;2194 height: 44px;2195 display: inline-flex;2196 align-items: center;2197 justify-content: center;2198 background: var(--white);2199 border: 1px solid var(--border);2200 border-radius: 50%;2201 color: var(--ink);2202 transition: border-color 0.15s ease, color 0.15s ease;2203}22042205.store-social-link:active {2206 border-color: var(--accent);2207 color: var(--accent);2208}22092210@media (hover: hover) {2211 .store-social-link:hover {2212 text-decoration: none;2213 border-color: var(--accent);2214 color: var(--accent);2215 }2216}22172218.store-hero-domain {2219 margin-left: auto;2220 color: var(--muted);2221 font-size: 0.85rem;2222 overflow: hidden;2223 text-overflow: ellipsis;2224 white-space: nowrap;2225 max-width: 45%;2226}22272228@media (min-width: 768px) {2229 .store-hero {2230 margin-bottom: 1.75rem;2231 }22322233 .store-hero-cover {2234 height: 190px;2235 }22362237 .store-hero-body {2238 display: grid;2239 grid-template-columns: auto minmax(0, 1fr);2240 column-gap: 1.4rem;2241 row-gap: 0.55rem;2242 padding: 0 1.75rem 1.4rem;2243 margin-top: -44px;2244 align-items: start;2245 }22462247 .store-hero-logo {2248 grid-row: 1 / span 3;2249 }22502251 .store-hero-name {2252 margin-top: 0.9rem;2253 }2254}22552256/* About */2257.store-about {2258 max-width: 760px;2259 margin: 0 0 1.5rem;2260}22612262.store-about-text {2263 margin: 0;2264 font-size: 0.98rem;2265 line-height: 1.65;2266}22672268.store-about-text + .store-evidence {2269 margin-top: 0.85rem;2270}22712272.store-evidence {2273 margin: 0;2274 padding: 0.75rem 1.1rem;2275 border-left: 3px solid var(--accent);2276 background: var(--sand);2277 border-radius: 0 var(--radius) var(--radius) 0;2278 font-style: italic;2279 color: var(--ink);2280 font-size: 0.92rem;2281}22822283/* Stats band */2284.store-stats {2285 display: grid;2286 grid-template-columns: repeat(2, 1fr);2287 gap: 0.6rem;2288 margin: 0 0 1.5rem;2289}22902291@media (min-width: 768px) {2292 .store-stats {2293 grid-template-columns: repeat(4, 1fr);2294 gap: 0.9rem;2295 }2296}22972298.store-stat-tile {2299 display: flex;2300 flex-direction: column;2301 gap: 0.2rem;2302 min-width: 0;2303 background: var(--white);2304 border: 1px solid var(--border);2305 border-radius: var(--radius);2306 padding: 0.85rem 0.95rem;2307}23082309.store-stat-value {2310 font-family: var(--font-display);2311 font-weight: 900;2312 font-optical-sizing: auto;2313 font-size: 1.55rem;2314 color: var(--pine);2315 line-height: 1.15;2316 font-variant-numeric: tabular-nums;2317 overflow-wrap: break-word;2318}23192320.store-stat-value-sm {2321 font-size: 1.05rem;2322 padding-top: 0.2rem;2323}23242325.store-stat-label {2326 font-size: 0.66rem;2327 text-transform: uppercase;2328 letter-spacing: 0.14em;2329 color: var(--muted);2330 font-weight: 600;2331}23322333/* Category chips */2334.store-categories {2335 margin: 0 0 1.25rem;2336}23372338/* Catalogue */2339.store-detail-products {2340 scroll-margin-top: calc(var(--header-h) + 12px);2341}23422343.store-catalogue-toolbar {2344 display: flex;2345 gap: 0.6rem;2346 flex-wrap: wrap;2347 margin-bottom: 1rem;2348}23492350.store-catalogue-search {2351 position: relative;2352 flex: 1 1 220px;2353 display: flex;2354 align-items: center;2355}23562357.store-catalogue-search input {2358 padding-left: 2.4rem;2359}23602361.store-catalogue-toolbar select {2362 flex: 0 1 220px;2363 width: auto;2364}23652366/* Similar stores rail */2367.store-mini-card {2368 flex: 0 0 250px;2369 scroll-snap-align: start;2370 display: flex;2371 align-items: center;2372 gap: 0.65rem;2373 padding: 0.8rem 0.9rem;2374 color: var(--ink);2375}23762377.store-mini-body {2378 min-width: 0;2379 display: flex;2380 flex-direction: column;2381 gap: 0.1rem;2382}23832384.store-mini-name {2385 font-weight: 600;2386 font-size: 0.92rem;2387 overflow: hidden;2388 text-overflow: ellipsis;2389 white-space: nowrap;2390}23912392.store-mini-meta {2393 color: var(--muted);2394 font-size: 0.78rem;2395 overflow: hidden;2396 text-overflow: ellipsis;2397 white-space: nowrap;2398}23992400/* Sticky mobile CTA — same pattern as the product detail bar */2401.store-cta-bar {2402 position: fixed;2403 left: 0;2404 right: 0;2405 bottom: calc(var(--tabbar-h) + var(--safe-b));2406 z-index: 50;2407 display: flex;2408 align-items: center;2409 gap: 0.75rem;2410 padding: 0.6rem 1rem;2411 background: rgba(250, 246, 240, 0.97);2412 backdrop-filter: blur(12px);2413 -webkit-backdrop-filter: blur(12px);2414 border-top: 1px solid var(--border);2415}24162417.store-cta-id {2418 flex: 1;2419 min-width: 0;2420 display: flex;2421 align-items: center;2422 gap: 0.5rem;2423}24242425.store-cta-name {2426 font-weight: 600;2427 font-size: 0.9rem;2428 overflow: hidden;2429 text-overflow: ellipsis;2430 white-space: nowrap;2431}24322433.store-cta-btn {2434 flex: 0 0 auto;2435 min-height: 48px;2436 font-size: 0.92rem;2437}24382439/* tablet: tab bar is hidden, CTA hugs the bottom edge */2440@media (min-width: 768px) and (max-width: 899px) {2441 .store-cta-bar {2442 bottom: 0;2443 padding-bottom: calc(0.6rem + var(--safe-b));2444 }2445}24462447@media (min-width: 900px) {2448 .store-cta-bar {2449 display: none;2450 }2451}24522453/* Store info card on product detail */2454.store-info-row {2455 display: flex;2456 align-items: center;2457 gap: 0.65rem;2458 margin-top: 0.25rem;2459}24602461.store-info-text {2462 min-width: 0;2463 display: flex;2464 flex-direction: column;2465 gap: 0.1rem;2466}24672468/* --------------------------------------------------------------------------2469 About2470 -------------------------------------------------------------------------- */24712472.about .about-content {2473 max-width: 720px;2474}24752476.about h1 {2477 font-size: clamp(1.8rem, 6vw, 2.6rem);2478}24792480.about h2 {2481 margin-top: 2rem;2482 font-size: 1.35rem;2483}24842485.about-origins {2486 list-style: none;2487 margin: 1rem 0;2488 padding: 0;2489 display: flex;2490 flex-direction: column;2491 gap: 0.75rem;2492}24932494.about-origins li {2495 display: flex;2496 gap: 0.9rem;2497 align-items: flex-start;2498 background: var(--white);2499 border: 1px solid var(--border);2500 border-radius: var(--radius);2501 padding: 0.9rem 1rem;2502}25032504.about-origins p {2505 margin: 0.15rem 0 0;2506 color: var(--muted);2507 font-size: 0.9rem;2508}25092510/* --------------------------------------------------------------------------2511 Skeletons & empty states2512 -------------------------------------------------------------------------- */25132514.skeleton {2515 position: relative;2516 overflow: hidden;2517 background: var(--sand);2518}25192520.skeleton::after {2521 content: '';2522 position: absolute;2523 inset: 0;2524 transform: translateX(-100%);2525 background: linear-gradient(2526 90deg,2527 transparent,2528 rgba(255, 255, 255, 0.65),2529 transparent2530 );2531 animation: shimmer 1.4s infinite;2532}25332534@keyframes shimmer {2535 100% {2536 transform: translateX(100%);2537 }2538}25392540.skeleton-square {2541 aspect-ratio: 1 / 1;2542 width: 100%;2543}25442545.product-card-skeleton {2546 pointer-events: none;2547}25482549.empty-state {2550 text-align: center;2551 padding: 3.5rem 1rem;2552 display: flex;2553 flex-direction: column;2554 align-items: center;2555 gap: 0.6rem;2556 color: var(--muted);2557}25582559.empty-state-icon {2560 display: inline-flex;2561 align-items: center;2562 justify-content: center;2563 width: 64px;2564 height: 64px;2565 border-radius: 50%;2566 background: var(--sand);2567 border: 1px solid var(--border);2568 color: var(--pine);2569 margin-bottom: 0.35rem;2570}25712572.empty-state-error .empty-state-icon {2573 color: var(--accent);2574}25752576.empty-state-title {2577 margin: 0;2578 font-size: 1.3rem;2579 color: var(--ink);2580}25812582.empty-state p {2583 margin: 0;2584 font-size: 1rem;2585 max-width: 40ch;2586}25872588.empty-state-action {2589 margin-top: 0.6rem;2590}25912592.notfound {2593 text-align: center;2594 padding-top: 2rem;2595}25962597.notfound h1 {2598 font-size: clamp(4rem, 18vw, 6.5rem);2599 margin: 0;2600 color: var(--pine);2601 line-height: 1;2602}26032604.notfound .empty-state {2605 padding-top: 0.5rem;2606}26072608/* --------------------------------------------------------------------------2609 Desktop spacing2610 -------------------------------------------------------------------------- */26112612@media (min-width: 768px) {2613 .page {2614 padding: 2rem 1.25rem 4rem;2615 }26162617 .site-footer {2618 padding-bottom: 1.5rem;2619 }2620}26212622/* --------------------------------------------------------------------------2623 Stats page — hand-rolled CSS/SVG charts in the house palette2624 -------------------------------------------------------------------------- */26252626.hero-stats-link {2627 display: inline-flex;2628 align-items: center;2629 gap: 0.35rem;2630 margin-top: 0.9rem;2631 font-weight: 600;2632 font-size: 0.9rem;2633 min-height: 44px;2634}26352636.stats-hero {2637 padding: 1.5rem 0 1.25rem;2638}26392640.stats-hero-title {2641 font-size: clamp(1.9rem, 6.5vw, 3.4rem);2642 letter-spacing: -0.03em;2643 line-height: 1.06;2644 max-width: 22ch;2645 margin-bottom: 0.4em;2646}26472648.stats-hero-title em {2649 font-style: italic;2650 color: var(--accent);2651}26522653.stats-hero-sub {2654 color: var(--muted);2655 font-size: clamp(0.95rem, 2.2vw, 1.05rem);2656 max-width: 560px;2657 margin: 0;2658}26592660@media (min-width: 900px) {2661 .stats-hero {2662 padding: 2.5rem 0 1.75rem;2663 }2664}26652666/* KPI tiles */2667.stats-kpis {2668 display: grid;2669 grid-template-columns: repeat(2, 1fr);2670 gap: 0.6rem;2671 margin: 1.25rem 0 0.5rem;2672}26732674@media (min-width: 640px) {2675 .stats-kpis {2676 grid-template-columns: repeat(3, 1fr);2677 gap: 0.9rem;2678 }2679}26802681@media (min-width: 1000px) {2682 .stats-kpis {2683 grid-template-columns: repeat(6, 1fr);2684 }2685}26862687.stats-kpi {2688 display: flex;2689 flex-direction: column;2690 gap: 0.2rem;2691 min-width: 0;2692 background: var(--white);2693 border: 1px solid var(--border);2694 border-radius: var(--radius);2695 padding: 0.9rem 0.95rem;2696}26972698.stats-kpi-value {2699 font-family: var(--font-display);2700 font-weight: 900;2701 font-optical-sizing: auto;2702 font-size: clamp(1.35rem, 4vw, 1.7rem);2703 color: var(--pine);2704 line-height: 1.12;2705 font-variant-numeric: tabular-nums;2706 overflow-wrap: break-word;2707}27082709.stats-kpi-label {2710 font-size: 0.64rem;2711 text-transform: uppercase;2712 letter-spacing: 0.13em;2713 color: var(--muted);2714 font-weight: 600;2715}27162717.stats-section {2718 margin: 2.25rem 0;2719}27202721.stats-section-note {2722 margin: -0.4rem 0 0.9rem;2723 color: var(--muted);2724 font-size: 0.88rem;2725}27262727.stats-loading {2728 display: flex;2729 flex-direction: column;2730 gap: 1.25rem;2731 margin-top: 2rem;2732}27332734/* Shared horizontal bars — thin marks, rounded data-end, sand track */2735.stats-bars {2736 display: flex;2737 flex-direction: column;2738 gap: 0.55rem;2739}27402741.stats-bar-row {2742 display: grid;2743 grid-template-columns: minmax(92px, 130px) 1fr auto;2744 align-items: center;2745 gap: 0.7rem;2746}27472748.stats-bar-row-flat {2749 grid-template-columns: 1fr auto;2750}27512752.stats-bar-name {2753 font-size: 0.84rem;2754 font-weight: 500;2755 color: var(--ink);2756 white-space: nowrap;2757 overflow: hidden;2758 text-overflow: ellipsis;2759}27602761.stats-bar-track {2762 display: block;2763 height: 14px;2764 background: var(--sand);2765 border-radius: 4px;2766 overflow: hidden;2767}27682769.stats-bar-fill {2770 display: block;2771 height: 100%;2772 min-width: 3px;2773 border-radius: 0 4px 4px 0;2774 transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);2775}27762777.stats-bar-fill-terracotta {2778 background: var(--accent);2779}27802781.stats-bar-fill-pine {2782 background: var(--pine);2783}27842785.stats-bar-value {2786 display: inline-flex;2787 align-items: baseline;2788 gap: 0.45rem;2789 font-size: 0.85rem;2790 font-weight: 600;2791 font-variant-numeric: tabular-nums;2792 white-space: nowrap;2793}27942795.stats-bar-value em {2796 font-style: normal;2797 font-weight: 500;2798 color: var(--muted);2799 font-size: 0.76rem;2800 min-width: 3.4em;2801}28022803/* Categories — table on desktop */2804.stats-cat-table-wrap {2805 display: none;2806}28072808.stats-cat-table {2809 width: 100%;2810 border-collapse: collapse;2811 background: var(--white);2812 border: 1px solid var(--border);2813 border-radius: var(--radius);2814 overflow: hidden;2815 font-size: 0.9rem;2816}28172818.stats-cat-table th,2819.stats-cat-table td {2820 padding: 0.6rem 0.85rem;2821 text-align: left;2822 border-bottom: 1px solid var(--border);2823}28242825.stats-cat-table th {2826 font-size: 0.68rem;2827 text-transform: uppercase;2828 letter-spacing: 0.12em;2829 color: var(--muted);2830 font-weight: 700;2831 background: var(--sand);2832 white-space: nowrap;2833}28342835.stats-cat-table tbody tr:last-child td {2836 border-bottom: none;2837}28382839@media (hover: hover) {2840 .stats-cat-table tbody tr:hover {2841 background: var(--bg);2842 }2843}28442845.stats-cat-table .num {2846 text-align: right;2847 font-variant-numeric: tabular-nums;2848 white-space: nowrap;2849}28502851.stats-cat-link {2852 font-weight: 600;2853 color: var(--ink);2854}28552856@media (hover: hover) {2857 .stats-cat-link:hover {2858 color: var(--accent);2859 }2860}28612862.stats-cat-range {2863 color: var(--muted);2864}28652866/* Categories — stacked cards on mobile */2867.stats-cat-cards {2868 display: flex;2869 flex-direction: column;2870 gap: 0.6rem;2871}28722873.stats-cat-card {2874 display: block;2875 padding: 0.85rem 1rem;2876 color: var(--ink);2877}28782879.stats-cat-card-head {2880 display: flex;2881 justify-content: space-between;2882 align-items: baseline;2883 gap: 0.75rem;2884}28852886.stats-cat-card-head strong {2887 font-size: 0.98rem;2888}28892890.stats-cat-card-count {2891 color: var(--accent);2892 font-weight: 700;2893 font-size: 0.85rem;2894 font-variant-numeric: tabular-nums;2895 white-space: nowrap;2896}28972898.stats-cat-card-grid {2899 display: grid;2900 grid-template-columns: repeat(2, 1fr);2901 gap: 0.5rem 0.9rem;2902 margin: 0.6rem 0 0;2903}29042905.stats-cat-card-grid dt {2906 font-size: 0.62rem;2907 text-transform: uppercase;2908 letter-spacing: 0.12em;2909 color: var(--muted);2910 font-weight: 700;2911}29122913.stats-cat-card-grid dd {2914 margin: 0.1rem 0 0;2915 font-weight: 500;2916 font-size: 0.88rem;2917 font-variant-numeric: tabular-nums;2918}29192920@media (min-width: 768px) {2921 .stats-cat-table-wrap {2922 display: block;2923 overflow-x: auto;2924 }29252926 .stats-cat-cards {2927 display: none;2928 }2929}29302931/* Regions */2932.stats-regions {2933 display: flex;2934 flex-direction: column;2935 gap: 0.85rem;2936}29372938.stats-region-head {2939 display: flex;2940 align-items: baseline;2941 justify-content: space-between;2942 gap: 0.75rem;2943 margin-bottom: 0.25rem;2944}29452946.stats-region-name {2947 font-weight: 600;2948 font-size: 0.92rem;2949 color: var(--ink);2950}29512952@media (hover: hover) {2953 .stats-region-name:hover {2954 color: var(--accent);2955 }2956}29572958.stats-region-meta {2959 color: var(--muted);2960 font-size: 0.78rem;2961 font-variant-numeric: tabular-nums;2962 white-space: nowrap;2963}29642965/* Growth SVG chart */2966.stats-growth-figure {2967 margin: 0;2968 background: var(--white);2969 border: 1px solid var(--border);2970 border-radius: var(--radius-lg);2971 padding: 0.9rem 0.9rem 0.5rem;2972}29732974.stats-growth-svg {2975 display: block;2976 width: 100%;2977 height: auto;2978}29792980.stats-growth-baseline {2981 stroke: var(--border);2982 stroke-width: 1;2983}29842985.stats-growth-area {2986 fill: var(--sand);2987}29882989.stats-growth-line {2990 fill: none;2991 stroke: var(--accent);2992 stroke-width: 2;2993 stroke-linejoin: round;2994 stroke-linecap: round;2995}29962997.stats-growth-dot {2998 fill: var(--accent);2999 stroke: var(--white);3000 stroke-width: 1.5;3001}30023003.stats-growth-dot-min {3004 fill: var(--pine);3005}30063007.stats-growth-label {3008 font-size: 12px;3009 font-weight: 700;3010 fill: var(--ink);3011 font-variant-numeric: tabular-nums;3012}30133014.stats-growth-axis {3015 font-size: 11px;3016 fill: var(--muted);3017}30183019/* Origin — proportional segmented bar + legend */3020.stats-origin-bar {3021 display: flex;3022 gap: 2px;3023 height: 30px;3024 border-radius: 6px;3025 overflow: hidden;3026 margin-bottom: 0.9rem;3027}30283029.stats-origin-seg {3030 display: inline-flex;3031 align-items: center;3032 justify-content: center;3033 min-width: 4px;3034 border-radius: 3px;3035}30363037.stats-origin-seg-letter {3038 color: var(--white);3039 font-weight: 700;3040 font-size: 0.76rem;3041 line-height: 1;3042}30433044.stats-origin-legend {3045 list-style: none;3046 margin: 0;3047 padding: 0;3048 display: flex;3049 flex-direction: column;3050 gap: 0.55rem;3051}30523053.stats-origin-legend li {3054 display: flex;3055 align-items: center;3056 gap: 0.7rem;3057 flex-wrap: wrap;3058}30593060.stats-origin-legend-counts {3061 color: var(--muted);3062 font-size: 0.85rem;3063 font-variant-numeric: tabular-nums;3064}30653066@media (min-width: 768px) {3067 .stats-origin-legend {3068 flex-direction: row;3069 flex-wrap: wrap;3070 gap: 0.6rem 1.75rem;3071 }3072}30733074/* Platforms */3075.stats-platforms {3076 display: flex;3077 gap: 0.55rem;3078 flex-wrap: wrap;3079}30803081.stats-platform-chip {3082 display: inline-flex;3083 align-items: center;3084 gap: 0.3rem;3085 background: var(--white);3086 border: 1px solid var(--border);3087 border-radius: 999px;3088 padding: 0.45rem 1rem;3089 font-size: 0.88rem;3090 color: var(--muted);3091 font-variant-numeric: tabular-nums;3092}30933094.stats-platform-chip strong {3095 color: var(--ink);3096 font-weight: 600;3097}30983099/* Top stores & most expensive — two columns on desktop */3100@media (min-width: 900px) {3101 .stats-columns {3102 display: grid;3103 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);3104 gap: 0 2.5rem;3105 align-items: start;3106 }3107}31083109.stats-top-stores,3110.stats-expensive {3111 list-style: none;3112 margin: 0;3113 padding: 0;3114 display: flex;3115 flex-direction: column;3116 background: var(--white);3117 border: 1px solid var(--border);3118 border-radius: var(--radius);3119 overflow: hidden;3120}31213122.stats-top-stores li,3123.stats-expensive li {3124 display: flex;3125 align-items: center;3126 gap: 0.7rem;3127 padding: 0.6rem 0.9rem;3128 border-bottom: 1px solid var(--border);3129 min-height: 52px;3130}31313132.stats-top-stores li:last-child,3133.stats-expensive li:last-child {3134 border-bottom: none;3135}31363137.stats-rank {3138 flex: 0 0 1.6rem;3139 font-family: var(--font-display);3140 font-weight: 900;3141 font-optical-sizing: auto;3142 color: var(--accent);3143 font-size: 0.95rem;3144 font-variant-numeric: tabular-nums;3145 text-align: right;3146}31473148.stats-top-store-id {3149 flex: 1;3150 min-width: 0;3151 display: flex;3152 flex-direction: column;3153}31543155.stats-top-store-id a {3156 color: var(--ink);3157 font-weight: 600;3158 font-size: 0.92rem;3159 overflow: hidden;3160 text-overflow: ellipsis;3161 white-space: nowrap;3162}31633164@media (hover: hover) {3165 .stats-top-store-id a:hover {3166 color: var(--accent);3167 }3168}31693170.stats-top-store-region {3171 color: var(--muted);3172 font-size: 0.76rem;3173 overflow: hidden;3174 text-overflow: ellipsis;3175 white-space: nowrap;3176}31773178.stats-top-store-count {3179 font-weight: 600;3180 font-size: 0.88rem;3181 font-variant-numeric: tabular-nums;3182 color: var(--pine);3183 white-space: nowrap;3184}31853186.stats-expensive-link {3187 flex: 1;3188 min-width: 0;3189 display: flex;3190 flex-direction: column;3191 color: var(--ink);3192}31933194.stats-expensive-title {3195 font-weight: 600;3196 font-size: 0.92rem;3197 overflow: hidden;3198 text-overflow: ellipsis;3199 white-space: nowrap;3200}32013202@media (hover: hover) {3203 .stats-expensive-link:hover .stats-expensive-title {3204 color: var(--accent);3205 }3206}32073208.stats-expensive-store {3209 color: var(--muted);3210 font-size: 0.76rem;3211 overflow: hidden;3212 text-overflow: ellipsis;3213 white-space: nowrap;3214}32153216.stats-expensive-price {3217 font-family: var(--font-display);3218 font-weight: 700;3219 font-optical-sizing: auto;3220 color: var(--accent);3221 font-size: 1rem;3222 font-variant-numeric: tabular-nums;3223 white-space: nowrap;3224}32253226/* --------------------------------------------------------------------------3227 Stats — report download button3228 -------------------------------------------------------------------------- */32293230.stats-hero-actions {3231 margin-top: 1.25rem;3232 display: flex;3233 flex-direction: column;3234 gap: 0.55rem;3235 align-items: flex-start;3236}32373238.stats-report-btn {3239 width: 100%;3240}32413242.stats-report-hint {3243 font-size: 0.8rem;3244 color: var(--muted);3245}32463247@media (min-width: 640px) {3248 .stats-report-btn {3249 width: auto;3250 }3251}32523253.stats-report-footer {3254 margin: 3rem 0 1rem;3255 padding-top: 1.9rem;3256 border-top: 1px solid var(--border);3257 display: flex;3258 flex-direction: column;3259 gap: 0.55rem;3260 align-items: center;3261 text-align: center;3262}32633264@media (min-width: 640px) {3265 .stats-report-footer .stats-report-btn {3266 width: auto;3267 }3268}32693270/* KPI sub-labels */3271.stats-kpi-sub {3272 font-size: 0.72rem;3273 color: var(--muted);3274 font-variant-numeric: tabular-nums;3275 line-height: 1.3;3276}32773278/* Price histogram caption */3279.stats-hist-caption {3280 margin: 1rem 0 0;3281 font-size: 0.9rem;3282 color: var(--muted);3283}32843285.stats-hist-caption strong {3286 color: var(--pine);3287 font-variant-numeric: tabular-nums;3288}32893290/* Category table — inline mini bar in the Produits cell */3291.stats-cat-prod-inner {3292 display: inline-flex;3293 align-items: center;3294 justify-content: flex-end;3295 gap: 0.5rem;3296}32973298.stats-cat-prod-bar {3299 width: 46px;3300 height: 6px;3301 border-radius: 3px;3302 background: var(--sand);3303 overflow: hidden;3304 flex: 0 0 auto;3305}33063307.stats-cat-prod-fill {3308 display: block;3309 height: 100%;3310 border-radius: 3px;3311 background: var(--accent);3312}33133314.stats-cat-prod-n {3315 min-width: 3ch;3316 text-align: right;3317 font-variant-numeric: tabular-nums;3318}33193320/* Nouveautés — horizontal snap rail */3321.stats-newest-rail {3322 display: flex;3323 gap: 0.75rem;3324 overflow-x: auto;3325 scroll-snap-type: x proximity;3326 -webkit-overflow-scrolling: touch;3327 scrollbar-width: none;3328 margin: 0 -1rem;3329 padding: 0.25rem 1rem 0.75rem;3330}33313332.stats-newest-rail::-webkit-scrollbar {3333 display: none;3334}33353336.stats-newest-card {3337 flex: 0 0 190px;3338 scroll-snap-align: start;3339 display: flex;3340 flex-direction: column;3341 gap: 0.5rem;3342 padding: 0.85rem 0.9rem;3343 min-height: 138px;3344}33453346.stats-newest-chip {3347 align-self: flex-start;3348 max-width: 100%;3349 font-size: 0.66rem;3350 font-weight: 600;3351 text-transform: uppercase;3352 letter-spacing: 0.06em;3353 color: var(--accent);3354 background: var(--sand);3355 border-radius: 999px;3356 padding: 0.2rem 0.55rem;3357 white-space: nowrap;3358 overflow: hidden;3359 text-overflow: ellipsis;3360}33613362.stats-newest-title {3363 font-weight: 600;3364 font-size: 0.92rem;3365 line-height: 1.3;3366 color: var(--ink);3367 display: -webkit-box;3368 -webkit-line-clamp: 2;3369 line-clamp: 2;3370 -webkit-box-orient: vertical;3371 overflow: hidden;3372}33733374.stats-newest-foot {3375 margin-top: auto;3376 display: flex;3377 flex-direction: column;3378 gap: 0.1rem;3379 min-width: 0;3380}33813382.stats-newest-price {3383 font-family: var(--font-display);3384 font-weight: 800;3385 color: var(--pine);3386 font-variant-numeric: tabular-nums;3387}33883389.stats-newest-store {3390 font-size: 0.78rem;3391 color: var(--muted);3392 white-space: nowrap;3393 overflow: hidden;3394 text-overflow: ellipsis;3395}33963397@media (hover: hover) {3398 .stats-newest-card:hover {3399 border-color: var(--accent);3400 box-shadow: var(--shadow-hover);3401 text-decoration: none;3402 }3403}34043405@media (min-width: 768px) {3406 .stats-newest-rail {3407 margin: 0;3408 padding-left: 0;3409 padding-right: 0;3410 scrollbar-width: thin;3411 }3412}34133414/* Disponibilité — segmented bar */3415.stats-avail-bar {3416 display: flex;3417 height: 14px;3418 border-radius: 999px;3419 overflow: hidden;3420 background: var(--sand);3421 max-width: 520px;3422}34233424.stats-avail-seg {3425 display: block;3426 height: 100%;3427}34283429.stats-avail-stock {3430 background: var(--pine);3431}34323433.stats-avail-rupture {3434 background: var(--muted);3435}34363437.stats-avail-inconnu {3438 background: var(--border);3439}34403441.stats-avail-legend {3442 list-style: none;3443 margin: 0.8rem 0 0;3444 padding: 0;3445 display: flex;3446 flex-wrap: wrap;3447 gap: 0.4rem 1.4rem;3448}34493450.stats-avail-legend li {3451 display: inline-flex;3452 align-items: center;3453 gap: 0.45rem;3454 font-size: 0.86rem;3455 color: var(--muted);3456}34573458.stats-avail-dot {3459 width: 10px;3460 height: 10px;3461 border-radius: 3px;3462 flex: 0 0 auto;3463}34643465.stats-avail-legend strong {3466 color: var(--ink);3467 font-variant-numeric: tabular-nums;3468}34693470.stats-avail-legend em {3471 font-style: normal;3472 color: var(--muted);3473}34743475/* Complétude — mini progress meters */3476.stats-coverage {3477 display: grid;3478 grid-template-columns: 1fr;3479 gap: 1rem 1.6rem;3480}34813482@media (min-width: 640px) {3483 .stats-coverage {3484 grid-template-columns: repeat(2, 1fr);3485 }3486}34873488.stats-meter {3489 display: flex;3490 flex-direction: column;3491 gap: 0.35rem;3492 min-width: 0;3493}34943495.stats-meter-head {3496 display: flex;3497 justify-content: space-between;3498 align-items: baseline;3499 gap: 0.5rem;3500}35013502.stats-meter-label {3503 font-size: 0.88rem;3504 font-weight: 500;3505 color: var(--ink);3506}35073508.stats-meter-pct {3509 font-family: var(--font-display);3510 font-weight: 800;3511 color: var(--pine);3512 font-variant-numeric: tabular-nums;3513}35143515.stats-meter-track {3516 display: block;3517 height: 8px;3518 border-radius: 999px;3519 background: var(--sand);3520 overflow: hidden;3521}35223523.stats-meter-fill {3524 display: block;3525 height: 100%;3526 border-radius: 999px;3527 background: var(--accent);3528 transition: width 0.6s ease;3529}35303531.stats-meter-sub {3532 font-size: 0.76rem;3533 color: var(--muted);3534 font-variant-numeric: tabular-nums;3535}35363537/* --------------------------------------------------------------------------3538 Reduced motion3539 -------------------------------------------------------------------------- */35403541@media (prefers-reduced-motion: reduce) {3542 html {3543 scroll-behavior: auto;3544 }35453546 *,3547 *::before,3548 *::after {3549 animation-duration: 0.01ms !important;3550 animation-iteration-count: 1 !important;3551 transition-duration: 0.01ms !important;3552 }3553}3554