:root{--ink:#173e31;--muted:#73796f;--green:#24583d;--lime:#e3efb4;--line:#e6e8df;--cream:#f5f5ee;--white:#fff;--orange:#b65b2b;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:#f0f1e9;color:var(--ink);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid #9baf65;outline-offset:3px}svg{height:22px;width:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}a{color:inherit}.layout{max-width:1230px;margin:0 auto;padding:54px 48px 70px;display:grid;grid-template-columns:1fr 434px;gap:84px;align-items:start}.presentation{position:sticky;top:42px;padding-top:2px}.project-name{font-size:12px;letter-spacing:1.3px;font-weight:750;display:flex;align-items:center;gap:10px;text-decoration:none}.project-name span{color:#8a8e82;font-weight:500}.project-name svg{width:23px;height:23px}.eyebrow{font-size:10px;letter-spacing:1.65px;font-weight:700}.presentation>.eyebrow{margin-top:72px;color:#7a806f}h1{font-size:45px;letter-spacing:-1.7px;line-height:1.13;font-weight:650;margin:20px 0 22px}h1 em{font-style:normal;color:#6c8448}.lead{font-size:17px;line-height:1.65;color:#646e61;max-width:430px;margin:0}.walkthrough{list-style:none;padding:0;margin:35px 0 34px;display:grid;gap:22px}.walkthrough li{display:flex;gap:17px}.walkthrough li>span{padding-top:3px;font-size:11px;letter-spacing:1px;color:#859073}.walkthrough b{font-size:15px;font-weight:650}.walkthrough p{font-size:13px;line-height:1.6;margin:5px 0 0;color:#737a6a;max-width:335px}.preview-tools{border-top:1px solid #dce0d1;padding-top:23px;max-width:420px}.preview-tools>.eyebrow{color:#7a806f}.preview-tools p{font-size:12px;line-height:1.55;color:#7b8171;max-width:380px}.segmented{display:flex;border:1px solid #d9dfcc;border-radius:12px;padding:4px;background:#e8ebdf;margin-top:12px;gap:4px}.segmented button{flex:1;border-radius:8px;font-size:12px;min-height:34px;padding:6px 9px}.segmented button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #293d2910}.app{background:var(--white);border:1px solid #e0e4d8;border-radius:30px;overflow:clip;box-shadow:0 24px 70px #33492a10;min-height:800px;position:relative}.demo-notice{text-align:center;background:#e9eddf;font-size:10px;font-weight:550;letter-spacing:.25px;color:#687654;padding:9px}.brand{display:flex;align-items:center;gap:9px;padding:18px 20px 14px}.brand img{width:51px;height:51px;object-fit:contain}.brand strong{display:block;font-size:19px;letter-spacing:-.5px}.brand span:not(.city){display:block;font-size:10px;color:#73816a;margin-top:4px}.brand .city{font-size:10px;color:#6d7d5a;align-self:flex-start;margin:8px 0 0 auto}.sticky-search{background:#fff;padding:0 20px 15px;position:sticky;top:0;z-index:2;box-shadow:0 6px 12px #fff9}.store-picker{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:13px;background:#f2f5eb;text-align:left;margin:0 0 12px}.store-picker>svg:first-child{color:#557341;width:20px}.store-picker span{flex:1}.store-picker small{display:block;font-size:10px;color:#7c8770;margin-bottom:3px}.store-picker b{font-size:13px;font-weight:600}.store-picker .chevron{height:17px;color:#82916e}.searchbox{display:flex;align-items:center;gap:9px;min-height:52px;border:1.5px solid #cad7b5;border-radius:15px;padding-left:14px;box-shadow:0 2px 7px #33492a05}.searchbox>svg{height:19px;width:19px;color:#6d8261}.searchbox input{border:0;outline:0;min-width:0;width:100%;padding:14px 0;background:transparent;font-size:14px;color:var(--ink)}.searchbox input::placeholder{color:#929986}.searchbox:focus-within{outline:3px solid #e9f0db;border-color:#7f985d}.searchbox button{border-left:1px solid #dfe5d5;padding:4px 13px;min-height:35px;display:flex;align-items:center;justify-content:center}.searchbox button svg{width:22px;height:22px}.content{padding:0 20px 14px}.welcome{position:relative;overflow:hidden;background:#e7eecf;border-radius:19px;padding:23px 19px;margin:2px 0 23px}.welcome .eyebrow{font-size:8px;letter-spacing:1.45px;color:#688143}.welcome h2{font-size:21px;line-height:1.25;letter-spacing:-.6px;font-weight:650;margin:11px 0 9px}.welcome p{font-size:11px;line-height:1.65;color:#6c7c51;margin:0}.hero-paw{position:absolute;width:115px;height:115px;right:-17px;bottom:8px;stroke:#afc37b;stroke-width:.65;transform:rotate(22deg);opacity:.55}.categories{display:flex;justify-content:space-between;gap:5px;margin:0 -4px 18px}.category{font-size:11px;color:#76816c;padding:2px 4px;min-width:55px;text-align:center}.category>span{display:flex;justify-content:center;align-items:center;border:1px solid #e7eadf;background:#f8f9f4;border-radius:18px;width:52px;height:51px;margin:0 auto 8px}.category svg{width:26px;height:26px;stroke-width:1.3}.category.active{color:var(--ink);font-weight:650}.category.active>span{border-color:var(--green);background:var(--green);color:#e4efbc}.filter-row{display:flex;align-items:center;gap:8px;margin-bottom:22px}.chip{font-size:11px;border:1px solid #e0e5d8;border-radius:30px;padding:9px 12px;display:flex;align-items:center;gap:6px;min-height:36px;white-space:nowrap}.chip svg{width:13px;height:13px}.dot{width:6px;height:6px;background:#6b9e4d;border-radius:50%;display:inline-block;flex-shrink:0}.chip[aria-pressed=true]{background:#edf3df;border-color:#acbf8b;font-weight:600}.clear{font-size:11px;padding:6px 1px;margin-left:auto;color:#85906e}.results-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;gap:12px}.results-heading h2{font-size:17px;letter-spacing:-.4px;font-weight:650;margin:0}.results-heading>span{font-size:11px;color:#87907f;flex-shrink:0}.product{width:100%;display:grid;grid-template-columns:56px 1fr 13px;gap:12px;padding:19px 0;text-align:left;border-bottom:1px solid var(--line);align-items:start}.product:hover .p-name{text-decoration:underline;text-decoration-color:#abc294;text-underline-offset:3px}.thumb{width:56px;height:66px;border-radius:13px;background:#f0f3e5;display:flex;align-items:center;justify-content:center;color:#839761}.thumb svg{width:29px;height:29px;stroke-width:1.2}.thumb.dog{background:#f7eee2;color:#af9263}.thumb.bird{background:#f9f1d8;color:#af9849}.thumb.fish{background:#eaf1f0;color:#69918e}.product>.chevron{width:13px;height:16px;margin-top:29px;color:#95a089}.p-brand{font-size:9px;letter-spacing:1px;color:#7b8a6c;font-weight:650;margin-bottom:5px}.p-name{font-size:13px;line-height:1.4;font-weight:600;display:block}.p-meta{font-size:10px;color:#8a917f;margin-top:5px;display:block}.price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:9px 0 7px}.price b{font-size:16px;letter-spacing:-.35px}.price small{font-size:11px;font-weight:400;color:#6e7962}.price del{font-size:11px;color:#9ba18e}.badge{font-size:9px;font-weight:700;padding:3px 5px;border-radius:5px;background:#f7e7d7;color:#af6138}.availability{font-size:10px;color:#62814c;display:flex;align-items:center;gap:5px}.availability.out{color:#8b9285}.availability .dot{width:5px;height:5px}.catalog-footnote{font-size:10px;line-height:1.6;color:#8e9686;margin:18px 0 8px}.bottom-nav{position:sticky;bottom:0;display:flex;justify-content:space-around;border-top:1px solid #e6eadf;background:#fffffff5;backdrop-filter:blur(14px);padding:10px 12px max(11px,env(safe-area-inset-bottom));z-index:3}.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:#929b87;padding:3px 20px;border-radius:10px}.bottom-nav button svg{width:20px;height:20px}.bottom-nav .active{color:var(--green);font-weight:650}.empty{text-align:center;padding:36px 10px}.empty>svg{width:36px;height:36px;color:#8b9a76;margin-bottom:8px}.empty h3{font-size:17px;margin:10px 0}.empty p{font-size:13px;line-height:1.65;color:#78856c}.primary{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:13px;background:var(--green);color:#fff;padding:14px 18px;width:100%;font-size:14px;font-weight:550;text-decoration:none;min-height:48px}.primary svg{width:18px;height:18px}.secondary{display:block;width:100%;text-align:center;padding:13px;border:1px solid #d9e0cf;border-radius:13px;font-size:13px;margin-top:10px;background:#fff}.error-box{border:1px solid #ecddc8;background:#fcf6ed;border-radius:15px;padding:17px;margin-top:13px;color:#8b6238}.error-box h3{font-size:14px;margin:0 0 7px}.error-box p{font-size:12px;line-height:1.6;margin:0 0 13px}.error-box button{font-size:12px;padding:9px 12px;background:#f1e4d0;border-radius:8px}.error-box svg{width:22px;height:22px;margin-bottom:8px}dialog{padding:0;border:0;border-radius:25px;width:calc(100% - 28px);max-width:434px;max-height:89dvh;color:var(--ink);background:#fff;box-shadow:0 24px 80px #15391f30}dialog::backdrop{background:#1c362969;backdrop-filter:blur(3px)}.sheet-inner{padding:22px}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:21px}.sheet-head h2{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:0}.icon-button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f1f4eb;flex-shrink:0}.sheet-sub{font-size:13px;line-height:1.65;color:#7b846f;margin:-8px 0 20px}.shop-choice{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:17px 12px;border:1px solid #e4e8dc;border-radius:13px;margin-bottom:9px}.shop-choice.selected{border-color:#8ea768;background:#f3f7e9}.shop-choice span{flex:1}.shop-choice b{font-size:14px;display:block;font-weight:600}.shop-choice small{font-size:11px;color:#7e8a6d;display:block;margin-top:5px}.choice-dot{width:17px;height:17px;border:1px solid #aab69a;border-radius:50%}.selected .choice-dot{border:5px solid #52763a}.detail-tag{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:#73865d;background:#eff4e3;border-radius:7px;padding:6px 9px;margin-bottom:14px}.detail-title{font-size:24px;letter-spacing:-.65px;line-height:1.22;margin:0 0 10px}.detail-meta{font-size:13px;color:#889178;margin:0 0 22px}.detail-price{background:#f3f6ec;border-radius:15px;padding:17px;margin-bottom:24px}.detail-price .price{margin:0}.detail-price .price b{font-size:26px}.detail-price p{font-size:11px;color:#82906e;margin:10px 0 0;line-height:1.55}.stock-heading{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.stock-heading h3{font-size:15px;margin:0}.stock-heading small{font-size:10px;color:#899378}.stock-row{padding:16px 0;border-bottom:1px solid #e9ecdf;display:flex;justify-content:space-between;align-items:center;gap:10px}.stock-row b{font-size:13px;font-weight:550}.stock-row small{display:block;font-size:11px;color:#879475;margin-top:5px}.stock-row strong{font-size:14px;font-weight:650;white-space:nowrap}.stock-row.zero strong{color:#929987;font-size:12px;font-weight:400}.detail-note{font-size:11px;line-height:1.65;color:#889076;margin:15px 0 20px}.scanner{height:215px;background:#203c30;border-radius:18px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:20px;overflow:hidden}.scanner:before,.scanner:after{content:"";position:absolute;border:2px solid #dae9ad;border-radius:11px;width:78%;height:55%}.scanner:after{height:1px;border:0;background:#d6ef95;box-shadow:0 0 18px #d9ec9f;top:50%}.barcode-art{width:210px;height:90px;background:repeating-linear-gradient(90deg,#e4e8dd 0px,#e4e8dd 2px,transparent 2px,transparent 5px,#e4e8dd 5px,#e4e8dd 9px,transparent 9px,transparent 13px);opacity:.4;transform:rotate(-6deg)}.scanner-label{position:absolute;bottom:16px;color:#bccbb5;font-size:11px}.scan-note{font-size:11px;line-height:1.65;color:#89937a;margin:13px 0 0}.map-card{padding:17px;background:#f3f6eb;border-radius:15px;margin:12px 0}.map-card h3{font-size:15px;margin:0 0 8px}.map-card p{font-size:12px;color:#7f8b6e;line-height:1.6;margin:0 0 15px}.map-card a{font-size:12px;text-underline-offset:4px}.map-card .primary{font-size:12px;margin-top:13px}.mobile-failure{display:none}[hidden]{display:none!important} @media(min-width:1500px){.layout{gap:115px;max-width:1280px}.presentation{padding-top:25px}h1{font-size:50px}} @media(max-width:960px) and (min-width:701px){.layout{padding:28px;gap:32px;grid-template-columns:1fr 390px}h1{font-size:33px}.presentation>.eyebrow{margin-top:45px}.lead{font-size:15px}.brand .city{display:none}} @media(max-width:700px){body{background:#fff}.layout{display:block;padding:0;max-width:480px}.presentation{display:none}.app{border:0;border-radius:0;box-shadow:none;min-height:100dvh}.brand{padding-top:16px}.sticky-search{top:0}.demo-notice{padding-top:max(9px,env(safe-area-inset-top))}.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:480px}.content{padding-bottom:86px}.welcome{padding:21px 18px}.welcome h2{font-size:22px}.product{padding:19px 0;grid-template-columns:57px 1fr 13px}.p-name{font-size:14px}.p-meta,.availability{font-size:11px}.category{font-size:12px}.brand span:not(.city){font-size:10px}dialog{margin:0 auto;top:auto;bottom:0;width:100%;max-width:480px;border-radius:25px 25px 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)}.sheet-inner{padding:23px 22px}.preview-tools{display:none}} @media(prefers-reduced-motion:no-preference){button,a{transition:background .14s,color .14s,border-color .14s}dialog[open]{animation:appear .18s ease-out}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}} /* Keep the first product within reach on small screens. */ .welcome{padding-top:19px;padding-bottom:18px;margin-bottom:19px}.welcome p{display:none}.welcome h2{margin-bottom:0}.hero-paw{height:98px;width:98px;bottom:4px}.brand{padding-top:15px;padding-bottom:12px} /* Second pass: clearer search, store-specific offers and comfortable tap targets. */ html { scrollbar-gutter: stable; } body.modal-open { overflow: hidden; } button:disabled { cursor: not-allowed; opacity: .45; } button:active:not(:disabled) { filter: brightness(.98); } .brand { padding-bottom: 15px; } .brand strong { font-size: 20px; } .brand span:not(.city) { color: #697961; } .store-picker { min-height: 60px; border: 1px solid #e9eddf; } .store-picker b { font-size: 14px; } .store-picker small { color: #69795c; } .searchbox { min-height: 54px; background: #fff; box-shadow: 0 3px 12px #36531d06; } .searchbox input { font-size: 15px; } .searchbox input::-webkit-search-cancel-button { display: none; } .searchbox button { min-width: 46px; min-height: 44px; } .searchbox #query-clear { min-width: 28px; padding: 0; border: 0; color: #75856b; } .searchbox #query-clear svg { width: 17px; height: 17px; } .search-help { display: flex; gap: 7px; align-items: center; padding: 1px 0 21px; flex-wrap: wrap; } .search-help>span { font-size: 11px; color: #6f7e62; } .search-help button { font-size: 11px; border: 1px solid #e1e8d5; background: #f7f9f1; border-radius: 9px; padding: 10px; min-height: 38px; } .welcome { background: linear-gradient(120deg, #e8efce, #edf2df); border: 1px solid #e5ebd5; } .welcome h2 { font-size: 21px; } .hero-paw { right: -13px; } .category { min-height: 80px; } .category>span { border-radius: 17px; } .category:not(.active):hover>span { background: #edf3df; border-color: #cedbb7; } .category { color: #65745b; } .filter-row { margin-bottom: 19px; flex-wrap: wrap; } .chip { min-height: 42px; font-size: 12px; padding: 10px 13px; } .clear { min-height: 40px; font-size: 12px; color: #657750; } .results-context { font-size: 11px; color: #738165; margin: 0 0 7px; } .results-heading { align-items: flex-start; gap: 9px; } .results-heading h2 { font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; } .results-heading>span { padding-top: 4px; color: #708163; font-variant-numeric: tabular-nums; } .product { grid-template-columns: 62px 1fr 13px; gap: 12px; padding: 22px 0; } .product-info { min-width: 0; } .product .thumb { width: 62px; height: 82px; flex-direction: column; gap: 8px; border-radius: 14px; } .thumb svg { height: 30px; width: 30px; } .thumb small { font-size: 10px; font-weight: 600; } .thumb.small, .detail-art.small { background: #f4ede7; color: #a58a6f; } .thumb.reptile, .detail-art.reptile { background: #edf1e2; color: #849965; } .p-brand { display: block; color: #657b50; font-size: 10px; margin-bottom: 6px; } .p-name { font-size: 14px; font-weight: 650; line-height: 1.4; letter-spacing: -.1px; } .p-meta { color: #707e62; font-size: 12px; line-height: 1.45; margin-top: 6px; } .price { margin: 11px 0 8px; gap: 7px; } .price b { font-size: 18px; font-weight: 700; } .price small { font-size: 12px; color: #65745b; } .price del { color: #757e6b; font-size: 12px; } .badge { background: #f7e7d4; color: #925128; font-size: 10px; padding: 4px 6px; } .availability { font-size: 11px; color: #426d35; line-height: 1.4; } .availability.out { color: #737b6b; } .offer-address { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #925a31; margin: 0 0 9px; } .offer-address svg { width: 12px; height: 12px; } .elsewhere { display: block; font-size: 11px; color: #37623d; margin-top: 6px; line-height: 1.5; } .unavailable-price { color: #788470; font-size: 12px; margin: 12px 0 7px; } .catalog-footnote { color: #737f68; font-size: 11px; } .bottom-nav button { min-height: 45px; min-width: 90px; padding: 5px 20px; color: #6d7c61; } .bottom-nav button.active { background: #edf3df; } .bottom-nav { padding-top: 9px; padding-bottom: max(9px,env(safe-area-inset-bottom)); } .sale-intro { display: flex; align-items: center; gap: 15px; border: 1px solid #eee0ca; background: #faf2e5; padding: 20px 16px; border-radius: 18px; margin: 2px 0 23px; } .sale-intro .eyebrow { font-size: 8px; color: #986839; } .sale-intro h2 { font-size: 21px; letter-spacing: -.5px; margin: 7px 0; } .sale-intro p { font-size: 11px; line-height: 1.5; margin: 0; color: #927550; } .sale-mark { display: flex; align-items: center; justify-content: center; height: 51px; width: 51px; flex-shrink: 0; background: #f0d9b8; color: #995b2e; border-radius: 50%; transform: rotate(-12deg); } .sale-mark svg { width: 25px; height: 25px; } .sheet-handle { display: none; width: 34px; height: 4px; background: #dce3d2; border-radius: 8px; margin: -8px auto 21px; } .sheet-sub { color: #647558; } .shop-choice { padding: 17px 13px; min-height: 82px; border-radius: 15px; } .shop-choice b { font-size: 15px; } .shop-choice small { color: #67785a; line-height: 1.5; } .shop-icon { display: flex; align-items: center; justify-content: center; width: 37px; height: 40px; flex-shrink: 0; color: #627d46; } .shop-choice .shop-icon { flex: 0 0 37px; } .choice-dot { height: 22px; width: 22px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; } .selected .choice-dot { border: 0; background: #426638; color: white; } .choice-dot svg { width: 15px; height: 15px; stroke-width: 2; } .sheet-note { font-size: 11px; line-height: 1.65; color: #69795e; margin: 17px 2px 2px; } .category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .category-tile { border: 1px solid #e0e7d7; border-radius: 15px; text-align: left; min-height: 126px; padding: 16px; background: #fafbf7; } .category-tile svg { display: block; height: 27px; width: 27px; margin-bottom: 14px; color: #6f8857; } .category-tile b { display: block; font-size: 14px; } .category-tile small { display: block; font-size: 11px; line-height: 1.5; margin-top: 6px; color: #6e7f5f; } .category-tile.selected { background: #f0f5e4; border-color: #91a970; } .detail-overview { display: flex; gap: 17px; align-items: center; margin-bottom: 17px; } .detail-art { width: 76px; height: 85px; border-radius: 18px; background: #f0f4e4; color: #7b9660; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; } .detail-art svg { width: 39px; height: 39px; stroke-width: 1.2; flex-shrink: 0; } .detail-art small { font-size: 11px; font-weight: 600; line-height: 1; } .detail-art.dog { background: #f7eee2; color: #af9263; } .detail-art.bird { background: #f9f1d8; color: #af9849; } .detail-art.fish { background: #eaf1f0; color: #69918e; } .detail-overview .p-brand { font-size: 11px; margin-bottom: 7px; } .detail-title { font-size: 23px; margin: 0; line-height: 1.2; } .detail-meta { margin: 0 0 13px; color: #607453; font-size: 13px; } .specs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; } .specs span { font-size: 11px; padding: 7px 10px; border: 1px solid #e3e9d9; border-radius: 7px; color: #647956; } .detail-price { border: 1px solid #e6ecd9; padding: 18px; margin-bottom: 26px; } .detail-price p { color: #667d54; font-size: 12px; } .stock-heading { margin-bottom: 13px; } .stock-heading h3 { font-size: 17px; } .stock-heading small { color: #758366; } .stock-card { border: 1px solid #e4e9dc; border-radius: 14px; padding: 16px; margin-bottom: 11px; } .stock-card.selected { border-color: #abc18d; background: #f8faf2; } .stock-row-title { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 13px; } .stock-row-title>b { font-size: 14px; font-weight: 650; } .your-shop { font-size: 9px; background: #e6efda; color: #4c7135; border-radius: 5px; padding: 4px 6px; } .stock-row-data { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; } .stock-row-data>strong { font-size: 16px; font-weight: 650; } .stock-row-data>strong small { font-size: 11px; font-weight: 400; color: #67795a; } .stock-card.zero .stock-row-data>strong { color: #73826a; } .local-offer { font-size: 10px; color: #8f5b32; line-height: 1.65; display: flex; align-items: baseline; gap: 6px; margin: 11px 0 0; } .local-offer .badge { flex-shrink: 0; } .map-link { display: flex; align-items: center; gap: 5px; color: #466d35; text-decoration: none; font-size: 11px; min-height: 36px; margin-top: 9px; } .map-link svg { width: 13px; height: 13px; } .map-link svg:last-child { margin-left: auto; } .map-link:hover { text-decoration: underline; text-underline-offset: 3px; } .detail-note { color: #6c7c60; font-size: 11px; } .full-name { border-top: 1px solid #e4e9dc; padding-top: 17px; font-size: 12px; color: #627554; line-height: 1.65; } .full-name summary { cursor: pointer; min-height: 36px; } .full-name p { margin: 6px 0 0; } .scan-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 5px 0 25px; color: #61784f; font-size: 11px; } .scan-steps span { display: flex; align-items: center; gap: 5px; } .scan-steps b { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef3e2; font-size: 10px; } .scan-steps svg { width: 16px; height: 16px; } .scan-note { color: #6d7d61; } .map-card { padding: 18px; border: 1px solid #e2e9d5; } .map-card-head { display: flex; gap: 10px; align-items: center; } .map-card h3 { font-size: 16px; margin-bottom: 6px; } .map-card-head p { margin: 0; color: #687d55; } .map-card .primary { font-size: 13px; } .map-card .map-link { font-size: 12px; margin-top: 6px; } .error-box { display: flex; gap: 12px; margin-bottom: 16px; } .error-box>svg { flex-shrink: 0; } .error-box p { color: #816344; } .empty { padding: 32px 8px; } .empty-icon { background: #f0f4e6; border-radius: 18px; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .empty-icon svg { width: 29px; height: 29px; color: #78915b; } .empty p { color: #67795a; } .toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 20; max-width: calc(100vw - 36px); width: max-content; padding: 13px 18px; background: #234735; color: white; border-radius: 12px; font-size: 12px; line-height: 1.5; box-shadow: 0 7px 22px #223c2930; pointer-events: none; } @media(max-width:700px) { html { scrollbar-gutter: auto; } .sheet-handle { display: block; } .sheet-inner { padding-top: 23px; } .product { grid-template-columns: 58px 1fr 12px; gap: 12px; } .product .thumb { width: 58px; } .content { padding-bottom: 96px; } .welcome h2 { font-size: 21px; } .category { min-width: 0; flex: 1; } .detail-title { font-size: 22px; } dialog { overscroll-behavior: contain; } } @media(max-width:375px) { .brand .city { display: none; } .brand strong { font-size: 19px; } .brand span:not(.city) { font-size: 9px; } .brand, .sticky-search { padding-left: 16px; padding-right: 16px; } .content { padding-left: 16px; padding-right: 16px; } .category>span { width: 47px; height: 47px; } .filter-row { gap: 6px; } .chip { font-size: 11px; padding: 10px 11px; } .product { grid-template-columns: 48px 1fr 11px; gap: 10px; } .product .thumb { width: 48px; height: 73px; } .p-name { font-size: 13px; } .price b { font-size: 17px; } .bottom-nav button { min-width: 80px; padding-left: 16px; padding-right: 16px; } .detail-title { font-size: 20px; } .detail-art { width: 62px; height: 76px; } .stock-card { padding: 13px; } .sale-intro { padding: 17px 13px; gap: 10px; } .sale-intro h2 { font-size: 19px; } } /* Delivery uses the same quiet storefront palette; payment is explicit and readable. */ .shopping-mode { display:flex; padding:4px; gap:4px; margin:0 0 12px; border-radius:13px; background:#edf0e6; } .shopping-mode button { display:flex; align-items:center; justify-content:center; flex:1; gap:7px; min-height:42px; font-size:13px; border-radius:10px; color:#65745b; } .shopping-mode button svg { width:18px; height:18px; } .shopping-mode button[aria-pressed=true] { color:var(--green); background:#fff; font-weight:650; box-shadow:0 2px 6px #30462e0c; } .delivery-info { width:100%; display:flex; align-items:center; gap:11px; background:#eef4df; border:1px solid #e1e9cf; border-radius:14px; padding:13px; text-align:left; margin-bottom:12px; } .delivery-info>span { flex:1; } .delivery-info b { display:block; font-size:14px; } .delivery-info small { display:block; margin-top:5px; font-size:11px; color:#60764b; } .delivery-info>svg:first-child { width:25px; height:25px; color:#6a844c; } .delivery-info>svg:last-child { width:15px; height:15px; } #basket-count { background:var(--green); color:white; font-size:9px; padding:2px 5px; border-radius:5px; } #basket-count:empty { display:none; } .delivery-hero { background:linear-gradient(125deg,#ecf2db,#e1ebc8); border:1px solid #e0e8cf; border-radius:18px; padding:25px 22px; position:relative; margin-bottom:17px; } .delivery-hero>svg { position:absolute; top:24px; right:19px; width:45px; height:45px; color:#789554; stroke-width:1.2; } .delivery-hero .eyebrow { color:#66814b; font-size:9px; } .delivery-hero h3 { font-size:25px; line-height:1.2; margin:14px 0; letter-spacing:-.6px; } .delivery-hero p { font-size:13px; line-height:1.6; margin:0; color:#536d41; max-width:215px; } .delivery-slot { display:flex; gap:12px; align-items:center; padding:17px; border:1px solid #dfe8d2; background:#f4f7ed; border-radius:14px; margin:15px 0 23px; } .delivery-slot>svg { color:#789154; width:25px; height:25px; } .delivery-slot small { display:block; font-size:10px; line-height:1.5; color:#718263; margin-bottom:5px; } .delivery-slot b { display:block; font-size:15px; } .conditions-list { list-style:none; padding:0; margin:0 0 25px; } .conditions-list li { position:relative; padding:0 0 20px 21px; } .conditions-list li:before { content:''; width:6px; height:6px; position:absolute; left:0; top:5px; border-radius:50%; background:#9aaf75; } .conditions-list b { display:block; font-size:14px; margin-bottom:6px; } .conditions-list span { display:block; font-size:12px; line-height:1.7; color:#647459; } .delivery-stock { display:flex; align-items:center; gap:8px; font-size:13px; margin:22px 0; color:#476c37; } .delivery-stock svg { width:18px; height:18px; } .quantity-field { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:14px; margin:20px 0; } .quantity-field input { width:110px; min-width:0; padding:13px; border-radius:11px; border:1px solid #cbd9b6; color:var(--ink); background:#fff; text-align:center; } input:focus-visible,textarea:focus-visible { outline:3px solid #e1ebcf; border-color:#8fa36e; } .soft-note { font-size:12px; line-height:1.65; padding:15px; border-radius:12px; background:#fbf2e3; color:#8f683e; margin:18px 0; } .basket-item { padding:19px 0; border-bottom:1px solid #e3e8d9; } .basket-item:first-child { padding-top:6px; } .basket-item-heading { display:flex; gap:10px; justify-content:space-between; align-items:flex-start; } .basket-item-heading b { font-size:14px; line-height:1.45; } .basket-item-heading small { display:block; font-size:11px; line-height:1.5; color:#6c7b5f; margin-top:6px; } .basket-item-heading .icon-button { width:33px; height:33px; } .basket-item-heading .icon-button svg { width:16px; height:16px; } .basket-item-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; } .basket-item-bottom>strong { font-size:16px; } .quantity-stepper { display:flex; align-items:center; border:1px solid #dce5cf; border-radius:11px; background:#f7f9f1; } .quantity-stepper button { width:40px; height:42px; font-size:21px; } .quantity-stepper span { min-width:55px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums; } .order-summary { display:grid; gap:14px; margin:24px 0 20px; } .order-summary>span { display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:#657459; font-size:12px; } .order-summary strong { font-size:16px; color:var(--ink); white-space:nowrap; } .order-summary>span:first-child strong { font-size:22px; letter-spacing:-.4px; } .threshold-note { display:flex; align-items:flex-start; gap:10px; border-radius:12px; background:#fbf2e3; padding:14px; color:#8f6638; margin:20px 0; } .threshold-note p { font-size:12px; line-height:1.7; margin:0; } .threshold-note svg { margin-top:2px; width:18px; height:18px; } .threshold-note.met { background:#eff5e2; color:#526f3a; } .form-section { margin-bottom:26px; } .form-section h3, .payment-options legend { font-size:17px; font-weight:650; padding:0; margin:0 0 16px; } .payment-options { border:0; margin:0; padding:0; display:grid; gap:9px; } .payment-option { display:flex; align-items:center; gap:13px; border:1px solid #e1e7d8; padding:16px; border-radius:13px; cursor:pointer; } .payment-option:has(input:checked) { background:#f2f7e8; border-color:#91ab6d; } .payment-option input,.cash-options input { accent-color:var(--green); width:18px; height:18px; margin:0; flex-shrink:0; } .payment-option b { font-size:14px; display:block; } .payment-option small { display:block; font-size:11px; color:#687c57; margin-top:5px; } .cash-options { display:flex; gap:20px; padding:19px 4px 6px; } .cash-options label { display:flex; align-items:center; gap:8px; font-size:12px; min-height:30px; cursor:pointer; } .payment-note { color:#6a7c5c; font-size:11px; line-height:1.7; margin:13px 2px 0; } .form-field { display:flex; flex-direction:column; gap:9px; font-size:12px; margin-top:15px; color:#556c45; line-height:1.5; } .form-field input,.form-field textarea { width:100%; border:1px solid #d7e1ca; padding:14px 12px; border-radius:11px; font:inherit; font-size:16px; color:var(--ink); background:#fff; min-height:47px; } .form-field input::placeholder,.form-field textarea::placeholder { font-size:13px; color:#859378; } .form-field textarea { resize:vertical; } .field-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .city-label { display:flex; align-items:center; gap:6px; font-size:13px; } .city-label svg { width:16px; height:16px; } .form-error { color:#a84d36; background:#fff1e9; border-radius:10px; padding:13px; font-size:12px; line-height:1.6; margin:15px 0; } .preview-badge { display:inline-flex; border:1px solid #decfae; background:#faf4e6; color:#8b7147; font-size:10px; padding:6px 9px; border-radius:6px; margin-bottom:2px; } .request-details { display:grid; gap:18px; margin:20px 0; } .request-details>span { display:block; font-size:11px; color:#738663; } .request-details b { display:block; font-size:14px; font-weight:550; line-height:1.6; color:var(--ink); margin-top:5px; overflow-wrap:anywhere; } .courier-alert { display:flex; align-items:flex-start; gap:10px; padding:17px; background:#eaf2d9; border:1px solid #d6e3bc; border-radius:13px; margin:23px 0; } .courier-alert>b,.courier-alert b { font-size:14px; } .courier-alert p { font-size:11px; color:#617b48; line-height:1.6; margin:7px 0 0; } .courier-alert>svg { width:19px; height:19px; } .review-products { border-top:1px solid #e2e7d9; border-bottom:1px solid #e2e7d9; margin-top:24px; padding:8px 0; } .review-products p { display:flex; justify-content:space-between; gap:15px; font-size:12px; line-height:1.65; } .review-products p>b { white-space:nowrap; font-size:13px; } .review-products small { display:block; color:#697e58; margin-top:4px; } .operator-preview { margin-top:22px; font-size:11px; color:#788869; line-height:1.7; } .operator-preview summary { cursor:pointer; padding:8px 0; } @media(max-width:375px) { .shopping-mode button { font-size:12px; }.delivery-info b { font-size:13px; }.field-pair { grid-template-columns:1fr; gap:0; }.sheet-inner { padding-left:18px; padding-right:18px; }.delivery-hero h3 { font-size:24px; }.order-summary>span:first-child strong { font-size:21px; } } /* Prices include the larger discount; the order shows one consistent calculation. */ .badge.store-discount { background:#eaf2da; color:#4e7136; } .pricing-info { width:100%; display:flex; align-items:center; gap:10px; padding:13px 14px; border:1px solid #e1e9d5; border-radius:12px; background:#f6f9ef; margin:0 0 22px; text-align:left; color:#526c3e; } .pricing-info>span { flex:1; font-size:12px; line-height:1.5; font-weight:600; } .pricing-info small { display:block; color:#71825f; font-size:10px; font-weight:400; margin-top:3px; } .pricing-info>svg { width:17px; height:17px; } .pricing-info>svg:last-child { width:13px; height:13px; } .discount-notice { display:flex; align-items:flex-start; gap:13px; background:#f3f7e9; border:1px solid #e0e8d1; border-radius:14px; padding:17px 15px; margin:22px 0; } .discount-notice.enhanced { background:#eaf2d7; border-color:#c9dca8; } .discount-number { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex-shrink:0; font-size:22px; font-weight:700; color:#527638; background:#e0ecc9; border-radius:12px; letter-spacing:-1px; } .enhanced .discount-number { background:#315d3b; color:#e6f2c1; } .discount-notice b { display:block; font-size:13px; line-height:1.5; } .discount-notice p { font-size:11px; line-height:1.7; color:#657951; margin:6px 0 4px; } .discount-notice button { display:flex; align-items:center; gap:7px; font-size:11px; padding:9px 0 0; color:#4e7138; } .discount-notice button svg { height:13px; width:13px; } .order-summary.pricing-summary { padding-top:4px; } .pricing-summary>span:first-child strong { font-size:15px; font-weight:500; color:#718365; letter-spacing:0; } .pricing-summary .savings-row { color:#477436; } .pricing-summary .savings-row strong { color:#477436; } .pricing-summary .final-total { border-top:1px solid #e0e7d5; padding-top:16px; margin-top:2px; } .pricing-summary .final-total strong { font-size:25px; font-weight:700; letter-spacing:-.5px; } .basket-item-heading .manual-pending { color:#98683c; font-size:10px; } .discount-rules { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; } .discount-rules>div { border:1px solid #dee8ce; background:#f3f7e9; border-radius:16px; padding:20px 16px; } .discount-rules>div:last-child { background:#e8f0d3; } .discount-rules b { display:block; font-size:38px; letter-spacing:-2px; font-weight:650; margin-bottom:12px; color:#527638; } .discount-rules span { display:block; font-size:12px; line-height:1.6; color:#5f764c; } @media(max-width:375px) { .discount-notice { padding:14px 12px; gap:10px; }.discount-number { width:40px; height:42px; font-size:20px; }.pricing-summary .final-total strong { font-size:22px; }.discount-rules>div { padding:17px 13px; } } /* v4: calmer catalog, clear product actions and a reachable order footer. */ :root { --soft:#f7f8f2; --brand-light:#e9f0d8; } .app { background:var(--soft); } .brand { background:#fff; padding-top:18px; padding-bottom:19px; } .brand .city { background:#f1f5e8; padding:5px 8px; border-radius:7px; margin-top:5px; font-size:9px; } .demo-notice { background:#eef1e6; } .fulfillment { background:#fff; padding:0 20px 0; } .shopping-mode { margin-bottom:10px; background:#f0f3e9; } .shopping-mode button { min-height:40px; } .store-picker,.delivery-info { margin-bottom:0; background:#f7f9f1; border-color:#e6eddc; } .delivery-info { padding:12px 13px; } .delivery-info b { font-weight:650; } .sticky-search { padding-top:12px; padding-bottom:14px; border-bottom:1px solid #e9ede2; box-shadow:0 6px 12px #1d442606; } .searchbox { border-color:#d4dfc4; border-width:1px; box-shadow:none; min-height:52px; } .searchbox input { font-size:16px; } .content { padding-top:20px; } .welcome { margin:0 0 20px; padding:18px; border:1px solid #dfe7cf; background:#eaf0d9; } .welcome .eyebrow { color:#667f46; } .welcome h2 { font-size:20px; margin-top:9px; line-height:1.3; } .hero-paw { width:82px; height:82px; right:15px; bottom:8px; opacity:.35; } .categories { margin-bottom:13px; } .category { min-height:76px; font-size:11px; } .category>span { border:1px solid #e1e7d6; background:#fff; width:47px; height:47px; border-radius:16px; margin-bottom:7px; } .category.active>span { box-shadow:0 4px 9px #31583714; } .category svg { width:25px; height:25px; } .filter-row { margin-bottom:12px; gap:7px; } .chip { background:#fff; min-height:38px; padding:8px 13px; } .clear { min-height:38px; } .pricing-info { background:transparent; border:0; border-bottom:1px solid #e0e6d6; border-radius:0; padding:8px 0 16px; margin:0 0 19px; gap:9px; } .pricing-info>span { font-size:11px; } .pricing-info>span>small { font-size:10px; } .pricing-info .pricing-link { display:flex; flex:0 0 auto; align-items:center; gap:3px; font-size:10px; color:#6e805d; font-weight:400; } .pricing-link svg { width:12px; height:12px; } .results-context { font-size:10px; margin-bottom:7px; } .results-heading { margin-bottom:14px; align-items:center; } .results-heading h2 { font-size:20px; letter-spacing:-.5px; } .results-heading>span { background:#eaf0de; padding:5px 8px; border-radius:7px; font-size:10px; } .product-card { background:#fff; border:1px solid #e3e8da; border-radius:18px; margin-bottom:12px; overflow:hidden; box-shadow:0 2px 3px #173e3102; } .product { padding:18px 14px; border:0; grid-template-columns:63px minmax(0,1fr) 10px; gap:12px; } .product .thumb { width:63px; height:86px; border-radius:14px; margin-top:1px; } .product .thumb svg { width:32px; height:32px; } .product .thumb small { font-size:9px; } .p-brand { font-size:9px; letter-spacing:.8px; color:#698050; margin-bottom:6px; } .p-name { font-size:14px; font-weight:600; } .p-meta { font-size:11px; margin-top:5px; } .price { margin:10px 0 9px; gap:6px; } .price b { font-size:20px; letter-spacing:-.6px; } .price small { font-size:11px; letter-spacing:0; } .price del { font-size:11px; } .price .badge { font-size:9px; padding:3px 5px; } .offer-address { font-size:10px; margin-bottom:8px; line-height:1.4; } .availability { font-size:10px; } .product-action { display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid #edf0e7; margin:0 14px; padding:10px 0; } .product-action>span { font-size:10px; line-height:1.5; color:#82906f; } .product-action .in-list-label { display:flex; align-items:center; gap:4px; color:#54743b; } .in-list-label svg { width:13px; height:13px; } .quick-add,.in-list { display:flex; align-items:center; justify-content:center; gap:9px; min-height:36px; min-width:102px; border-radius:9px; padding:8px 11px; background:#edf3df; color:#365c32; font-size:11px; font-weight:600; } .quick-add svg { width:15px; height:15px; } .in-list { background:#315c3b; color:#f0f6df; } .in-list svg { width:12px; height:12px; } .quick-add:hover { background:#e2edca; } .app-navigation { position:sticky; bottom:0; z-index:3; } .bottom-nav { position:static; transform:none; width:auto; padding-top:8px; background:#fff; backdrop-filter:none; } .bottom-nav button { min-height:43px; padding-top:5px; padding-bottom:5px; } .bottom-nav button.active { background:#edf3df; } .basket-dock { display:flex; width:calc(100% - 32px); align-items:center; gap:11px; margin:0 16px 9px; padding:13px 15px; border-radius:15px; background:#254e36; color:#fff; text-align:left; box-shadow:0 6px 20px #264d3626; } .basket-dock>span { flex:1; min-width:0; } .basket-dock b { font-size:13px; font-weight:550; display:flex; align-items:center; gap:7px; } .basket-dock b i { font-style:normal; font-size:9px; background:#ffffff1e; border-radius:5px; padding:2px 5px; } .basket-dock small { display:block; font-size:9px; color:#c4d6b3; margin-top:4px; } .basket-dock>strong { font-size:17px; letter-spacing:-.4px; white-space:nowrap; } .basket-dock>svg:first-child { width:21px; height:21px; color:#d5e8b0; } .basket-dock>svg:last-child { width:17px; height:17px; } .catalog-footnote { font-size:10px; margin-bottom:14px; } .sale-intro { box-shadow:none; border-radius:17px; padding:18px 15px; margin-bottom:21px; } .sale-intro h2 { font-size:20px; } .sale-mark { width:45px; height:45px; } /* The dialog owns a scrolling body and a separate, non-scrolling action row. */ dialog { overflow:hidden; max-height:89dvh; } #sheet-body { display:flex; flex-direction:column; max-height:inherit; min-height:0; } .sheet-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; } .sheet-inner { padding-bottom:24px; } .sheet-head { margin-bottom:23px; } .sheet-head h2 { font-size:23px; letter-spacing:-.65px; } .sheet-footer { flex-shrink:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:16px 22px max(17px,env(safe-area-inset-bottom)); border-top:1px solid #e1e8d7; background:#fff; box-shadow:0 -6px 16px #24452c05; } .footer-total small { display:block; font-size:10px; color:#718162; margin-bottom:5px; } .footer-total b { font-size:23px; letter-spacing:-.7px; white-space:nowrap; } .sheet-footer .primary { width:auto; font-size:12px; min-height:48px; padding:13px 16px; gap:10px; } .sheet-footer .primary svg { width:15px; height:15px; } .order-steps { list-style:none; padding:0 0 20px; margin:0 0 21px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e6ecdd; gap:10px; } .order-steps li { display:flex; align-items:center; gap:6px; font-size:10px; color:#8d9981; } .order-steps li>span { display:flex; align-items:center; justify-content:center; height:21px; width:21px; border-radius:50%; background:#f0f3e9; font-size:9px; } .order-steps [aria-current=step] { color:#315932; font-weight:650; } .order-steps [aria-current=step]>span { background:#365f3a; color:#f0f6df; } .order-steps .complete { color:#718d50; } .order-steps svg { width:12px; height:12px; } .basket-sheet .sheet-sub { font-size:11px; margin:-7px 0 7px; } .basket-item { padding:19px 0; } .basket-item:first-child { padding-top:12px; } .basket-art { display:flex; align-items:center; justify-content:center; width:43px; height:53px; border-radius:11px; background:#f0f4e5; color:#7c925d; flex:0 0 auto; } .basket-art.dog { background:#f7ede2; color:#ae8e64; } .basket-art.bird { background:#f7f0dc; color:#a8985f; } .basket-art svg { width:24px; height:24px; stroke-width:1.3; } .basket-description { min-width:0; flex:1; } .basket-description b { font-size:13px; line-height:1.45; } .basket-item-heading small { font-size:10px; line-height:1.6; } .basket-item-heading .icon-button { width:30px; height:30px; background:#f7f8f3; } .basket-item-bottom { margin-top:15px; } .quantity-stepper { background:#f5f8ee; border-color:#e2e9d7; } .quantity-stepper button { min-width:42px; height:41px; font-size:20px; } .quantity-stepper span { font-size:12px; } .basket-item-bottom>strong { font-size:18px; letter-spacing:-.4px; } .discount-notice { width:100%; text-align:left; display:flex; align-items:center; gap:12px; margin:21px 0; padding:14px; border-radius:13px; } .discount-notice>span:nth-child(2) { flex:1; } .discount-notice b { font-size:12px; line-height:1.5; } .discount-notice small { font-size:10px; display:block; line-height:1.6; color:#6a7e55; margin-top:4px; } .discount-notice>svg { width:13px; height:13px; color:#81966a; } .discount-number { width:39px; height:42px; font-size:20px; border-radius:10px; } .order-summary.pricing-summary { gap:12px; margin:21px 0; padding:18px; background:#f7f9f2; border:1px solid #e7eddc; border-radius:14px; } .pricing-summary .final-total { padding-top:13px; } .pricing-summary .final-total strong { font-size:23px; } .pricing-summary>span { font-size:11px; } .pricing-summary>span>strong { font-size:14px; } .delivery-progress { padding:16px; background:#fbf4e9; border:1px solid #ede1cc; border-radius:13px; margin:18px 0; } .delivery-progress>div { display:flex; align-items:flex-start; gap:9px; color:#916c3f; font-size:12px; line-height:1.6; } .delivery-progress svg { width:20px; height:20px; } .delivery-progress progress { appearance:none; display:block; height:5px; border:0; border-radius:10px; width:100%; margin:13px 0 9px; overflow:hidden; background:#eadfc9; } .delivery-progress progress::-webkit-progress-bar { background:#eadfc9; border-radius:10px; } .delivery-progress progress::-webkit-progress-value { background:#c0a46c; border-radius:10px; } .delivery-progress progress::-moz-progress-bar { background:#c0a46c; border-radius:10px; } .delivery-progress p { margin:0; font-size:10px; color:#9d825a; } .continue-shopping { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:8px; border-color:#dfe8d1; color:#547a3f; } .continue-shopping svg { width:15px; height:15px; } .form-section h3,.payment-options legend { font-size:16px; } .checkout-sheet .delivery-slot { margin-top:0; } .review-sheet .preview-badge { margin-bottom:8px; } @media(max-width:700px) { .app-navigation { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; } .bottom-nav { position:static; transform:none; width:100%; max-width:none; } .has-basket .content { padding-bottom:177px; } .content { padding-bottom:97px; } .fulfillment { padding-left:20px; padding-right:20px; } .toast { bottom:157px; } dialog { max-height:92dvh; padding-bottom:0; } .sheet-footer { padding-bottom:max(18px,env(safe-area-inset-bottom)); } .sheet-inner { padding-bottom:25px; } .product { grid-template-columns:60px minmax(0,1fr) 10px; } .product .thumb { width:60px; } } @media(max-width:375px) { .fulfillment { padding-left:16px; padding-right:16px; } .product { padding:15px 12px; grid-template-columns:43px minmax(0,1fr) 9px; gap:9px; } .product .thumb { width:43px; height:73px; } .product .thumb svg { width:26px; height:26px; } .product .thumb small { font-size:8px; } .price b { font-size:18px; } .p-name { font-size:13px; } .product-action { margin:0 12px; } .quick-add,.in-list { min-width:96px; font-size:10px; } .product-action>span { font-size:9px; } .footer-total b { font-size:20px; } .sheet-footer { padding-left:18px; padding-right:18px; gap:10px; } .sheet-footer .primary { font-size:11px; padding:12px; gap:6px; } .order-steps { gap:5px; } .order-steps li { gap:4px; font-size:9px; } .basket-art { width:35px; height:46px; } .basket-item-heading { gap:8px; } .basket-description b { font-size:12px; } .pricing-summary .final-total strong { font-size:20px; } .order-summary.pricing-summary { padding:14px; } } /* Keep the title and close control visible while a long sheet scrolls. */ .sheet-top { flex-shrink:0; background:#fff; padding:22px 22px 0; border-bottom:1px solid #edf0e6; } .sheet-top .sheet-head { margin-bottom:19px; } .sheet-inner { padding-top:20px; } .sheet-top .sheet-handle { margin-bottom:18px; } @media(max-width:700px) { .sheet-top { padding-top:23px; }.sheet-inner { padding-top:19px; } } @media(max-width:375px) { .sheet-top { padding-left:18px; padding-right:18px; } } /* Live catalogue: same visual language, no simulated cart or stock controls. */ .categories{grid-template-columns:repeat(6,minmax(58px,1fr));overflow-x:auto;gap:4px}.category{font-size:11px}.subcategory-chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 18px}.subcategory-chips:empty{display:none}.subcategory-chips .chip{font-size:12px;padding:9px 12px}.chip.selected{background:var(--green,#36563c);color:white;border-color:transparent}.official-photo{background:#fff!important;display:flex;align-items:center;justify-content:center}.official-photo img{width:100%;height:100%;object-fit:contain}.product .thumb{width:82px;min-height:108px;flex:0 0 82px}.checked-at{display:block;font-size:11px;color:#818875;margin-top:9px}.product-info .p-name{overflow-wrap:anywhere;font-size:14px;line-height:1.45}.catalog-loading{padding:35px 20px;text-align:center;color:#687262}.catalog-loading b{display:block;margin-top:16px}.catalog-loading p{font-size:13px;line-height:1.6}.loading-dot{display:inline-block;width:22px;height:22px;border:2px solid #dae2d1;border-top-color:#36563c;border-radius:50%;animation:catalog-spin 1s linear infinite}@keyframes catalog-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.loading-dot{animation:none}}.search-suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:18px}.search-suggestions button{border:1px solid #dbe1d4;border-radius:16px;background:white;padding:10px 14px;color:#35583d}.load-more{width:100%;margin:14px 0}.live-product-hero{display:flex;gap:18px;align-items:center;margin:10px 0 24px}.live-product-hero .detail-art{width:104px;min-width:104px;height:140px;padding:4px}.live-product-hero h3{font-size:19px;line-height:1.4}.live-stores{display:grid;gap:9px;margin-top:15px}.live-stores>div{display:grid;grid-template-columns:1fr auto;gap:6px;padding:14px;border:1px solid #e4e8df;border-radius:15px}.live-stores small{color:#768070;grid-column:1/-1}.bottom-nav{grid-template-columns:repeat(2,1fr)}.bottom-nav button[hidden]{display:none}.store-options{display:grid;gap:10px}.store-option{display:flex;align-items:center;gap:13px;background:#f6f7f0;border:1px solid #e3e7db;border-radius:17px;padding:17px;text-align:left;width:100%;color:#36533b}.store-option span{flex:1}.store-option svg{width:22px;height:22px}.sheet-scroll .price{margin:15px 0}.live-product-hero .detail-art svg{width:65px;height:65px}.demo-notice{background:#e8efdf;color:#466242}.content .empty{margin-top:4px;padding-top:22px}.app{padding-bottom:70px} .official-photo{overflow:hidden}.official-photo img{transform:none}.original-name{font-size:12px;line-height:1.6;padding:14px 0;color:#687262}.original-name summary{cursor:pointer}.original-name p{margin:9px 0}.product-info .p-meta{font-size:11px;line-height:1.5;margin-top:5px;display:block} /* Product media and text share the same explicit grid dimensions. */ .product{grid-template-columns:82px minmax(0,1fr) 10px;gap:12px} .product .thumb{width:82px;height:108px;min-height:108px} @media(max-width:375px){ .product{grid-template-columns:64px minmax(0,1fr) 9px;gap:10px} .product .thumb{width:64px;height:92px;min-height:92px} } /* Shared catalogue details retained from the design review. */ .filter-row:has(.clear[hidden]){display:none} .product>svg{width:10px;height:16px;margin-top:3px;color:#86957a} .bottom-nav button{padding-left:12px;padding-right:12px;min-width:0} /* Selected cozy design: shorter first screen, readable stock and touch controls. */ .welcome { padding:17px 18px; margin-bottom:16px; } .welcome h2 { font-size:21px; letter-spacing:-.5px; margin:8px 0 5px; } .welcome p { display:block; font-size:12px; line-height:1.5; margin:0; color:#526644; } .welcome .hero-paw { width:69px; height:69px; right:-12px; bottom:13px; opacity:.22; } .categories { grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; overflow:visible; } .category { min-width:0; font-size:11px; } .category>span { width:44px; height:46px; } .subcategory-chips { gap:6px; } .subcategory-chips .chip { white-space:normal; text-align:left; } .searchbox:focus-within { border-color:#64894f; box-shadow:0 0 0 3px #e8efdb; } .searchbox input { min-width:0; width:100%; } .searchbox input:focus-visible { outline:none; } .searchbox #query-clear { min-width:40px; min-height:44px; } .searchbox #scan-open { min-width:40px; padding:0 7px; } .store-picker b { line-height:1.35; } .results-context { font-size:11px; line-height:1.5; } .results-heading { gap:12px; margin-bottom:13px; } .results-heading h2 { font-size:19px; } .results-heading>span { font-size:10px; text-align:center; max-width:94px; } .quick-searches { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .quick-searches button { display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0; min-height:74px; text-align:left; padding:13px; border:1px solid #e1e8d8; border-radius:15px; background:#fff; } .quick-searches button:last-child { grid-column:1/-1; min-height:65px; } .quick-searches b { display:block; font-size:13px; line-height:1.4; } .quick-searches small { display:block; font-size:11px; line-height:1.5; color:#66775a; margin-top:4px; } .quick-searches svg { width:16px; height:16px; color:#78905f; } .product { padding:17px 13px; gap:11px; } .product-card:focus-within { outline:2px solid #64894f; outline-offset:2px; } .product:focus-visible { outline:none; } .product .thumb { align-self:center; } .product-info .p-name { font-weight:650; line-height:1.42; } .product-info .p-meta { color:#5d6f53; font-size:11px; line-height:1.5; } .price { column-gap:4px; row-gap:2px; } .price b { font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:-.65px; } .price>small { white-space:nowrap; font-size:11px; color:#617254; } .availability { font-size:11px; line-height:1.5; gap:5px; } .card-location { display:flex; align-items:flex-start; gap:4px; margin-top:8px; font-size:10px; line-height:1.4; color:#6b7b5e; } .card-location svg { width:12px; height:13px; flex-shrink:0; } .unit-tag { display:inline-block; font-size:9px; font-weight:650; color:#5f783f; background:#eef3e3; border-radius:5px; padding:3px 6px; margin:0 0 7px; } .empty .secondary { margin:17px auto 0; min-height:48px; } .bottom-nav { gap:10px; } .bottom-nav button { flex:1; min-height:48px; border-radius:13px; } .bottom-nav button.active { background:#eaf1dc; } .store-option { min-height:78px; padding:16px 13px; background:#fff; border-color:#e1e8d8; gap:12px; } .store-option.selected { border-color:#7d9c62; background:#f1f6e7; } .store-option b { display:block; font-size:14px; line-height:1.4; } .store-option small { display:block; font-size:11px; color:#657b52; line-height:1.5; margin-top:4px; } .store-option .store-option-icon { flex:0 0 34px; display:flex; justify-content:center; align-items:center; width:34px; height:38px; border-radius:11px; background:#edf3e2; } .store-option .store-selected { flex:0 0 21px; display:flex; justify-content:center; } .store-selected svg { width:19px; height:19px; } .live-product-hero { align-items:center; gap:15px; margin:0 0 22px; } .live-product-hero>div { min-width:0; } .live-product-hero .detail-art { width:91px; min-width:91px; height:122px; } .live-product-hero .detail-art svg { width:42px; height:42px; } .live-product-hero .eyebrow { display:block; font-size:8px; letter-spacing:1px; color:#698353; margin-bottom:8px; } .live-product-hero .detail-title { font-size:18px; line-height:1.4; letter-spacing:-.3px; overflow-wrap:anywhere; } .live-product-hero .detail-meta { font-size:12px; line-height:1.5; margin:8px 0 0; color:#657757; } .product-photo { flex:0 0 auto; border:1px solid #e4e8df; border-radius:18px; padding:6px; background:#fff; color:#36563c; cursor:pointer; } .product-photo .photo-size-label { display:block; font-size:10px; line-height:1.4; padding:5px 0 2px; } .product-photo:focus-visible { outline:2px solid #36563c; outline-offset:3px; } .live-product-hero.photo-expanded { flex-wrap:wrap; } .live-product-hero.photo-expanded .product-photo { width:100%; } .live-product-hero.photo-expanded .detail-art { width:100%; min-width:0; height:min(48dvh,360px); } .live-product-hero.photo-expanded>div { width:100%; } .detail-quote { padding:17px 18px; background:#f0f5e7; border:1px solid #e3ead8; border-radius:17px; } .detail-quote .price { margin:0 0 8px; } .detail-quote .price b { font-size:29px; } .detail-quote .price>small { font-size:13px; } .detail-quote .availability { font-size:12px; } .detail-quote .availability svg { width:16px; height:16px; } .stock-section { margin-top:23px; } .stock-section h3 { font-size:16px; line-height:1.4; margin:0 0 12px; } .live-stores { margin:0; gap:10px; } .live-stores .live-store { display:block; padding:14px; border-radius:14px; } .stock-address { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; line-height:1.5; } .stock-address svg { width:16px; height:16px; color:#789060; } .stock-values { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; } .stock-values strong { font-size:18px; font-variant-numeric:tabular-nums; } .live-stores .stock-values small { display:inline; font-size:12px; font-weight:400; } .stock-values>span { font-size:12px; color:#657754; } .freshness-note { display:flex; align-items:center; gap:6px; margin:15px 0; font-size:11px; line-height:1.5; color:#667758; } .freshness-note svg { width:14px; height:14px; } .original-name { border-top:1px solid #e6ebdf; padding:5px 0; } .original-name summary { min-height:44px; padding-top:12px; } .original-name p { overflow-wrap:anywhere; } .sheet-actions { flex-shrink:0; padding:13px 22px max(16px,env(safe-area-inset-bottom)); border-top:1px solid #e6ebdf; background:#fff; } .sheet-head h2 { font-size:21px; } .sheet-head .icon-button { width:44px; height:44px; } .basket-editor { margin-top:22px; padding:17px; border:1px solid #dfe8d1; border-radius:15px; background:#f6f9ef; } .basket-editor label { display:flex; gap:14px; justify-content:space-between; align-items:center; font-size:14px; font-weight:600; } .basket-editor input { width:106px; min-width:0; padding:12px; border-radius:11px; border:1px solid #bdcfa8; background:white; font-size:17px; color:var(--ink); text-align:center; } .basket-editor p { font-size:11px; line-height:1.6; color:#60764d; margin:12px 0 0; } .basket-editor .form-error { color:#97452f; } .basket-items .basket-item { padding:18px 0; } .basket-items .basket-description { flex:1; min-width:0; } .basket-items .basket-description b { font-size:14px; overflow-wrap:anywhere; } .basket-items .basket-description small { display:block; margin-top:7px; font-size:11px; color:#647954; } .basket-items .icon-button { width:44px; height:44px; } .basket-items .quantity-stepper button { min-height:44px; width:39px; } .basket-items .quantity-stepper .basket-edit-quantity { width:auto; min-width:79px; max-width:140px; padding:8px; font-size:13px; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:4px; } .basket-item-bottom { flex-wrap:wrap; } .basket-line-error { color:#914a2e; font-size:12px; line-height:1.6; background:#fbf0e4; border-radius:10px; padding:11px; } .basket-status { font-size:12px; line-height:1.6; color:#677b55; padding:15px 0 4px; } .basket-estimate { background:#f0f5e5; padding:18px; border:1px solid #dfe8d1; border-radius:17px; margin-top:22px; } .basket-estimate>span { display:block; font-size:12px; color:#61764c; } .basket-estimate>strong { display:block; font-size:28px; letter-spacing:-.8px; margin:9px 0; } .basket-estimate>p { font-size:12px; line-height:1.6; color:#667950; margin:0; } .delivery-progress { display:flex; align-items:center; gap:9px; padding-top:14px; margin-top:15px; border-top:1px solid #dce6cc; font-size:12px; line-height:1.5; color:#865d2d; } .delivery-progress svg { width:23px; height:23px; } .delivery-progress.eligible { color:#42682f; } .sheet-actions .basket-refresh { margin:0 0 9px; min-height:44px; } .bottom-nav { max-width:100%; } .has-basket .content { padding-bottom:145px; } .quick-add { min-height:44px; } .manual-offers { display:grid; gap:10px; background:#fff4e4; border:1px solid #f0dfc6; padding:12px; border-radius:13px; margin:12px 0; } .manual-offer { display:flex; align-items:flex-start; gap:8px; } .manual-rate { background:#f3ddbb; color:#7e4f1e; padding:5px 7px; border-radius:7px; font-size:12px; font-weight:750; white-space:nowrap; } .manual-offer b { display:block; font-size:17px; line-height:1.4; } .manual-offer small { display:block; font-size:10px; color:#886944; line-height:1.4; margin-top:4px; } .manual-offer b small { display:inline; font-weight:400; } .manual-explanation { font-size:10px; line-height:1.5; color:#86613b; } .regular-price-label { display:block; font-size:11px; color:#61764c; margin-bottom:7px; } .basket-promo-note { background:#fff4e4; color:#815b30; font-size:11px; line-height:1.6; border-radius:9px; padding:11px; } .purchase-choices { padding:0; margin:22px 0 0; border:0; display:grid; gap:10px; min-width:0; } .purchase-choices legend { padding:0 0 12px; font-size:15px; font-weight:650; } .purchase-choice { display:flex; align-items:flex-start; gap:10px; padding:15px; border:1px solid #dce5d4; border-radius:14px; background:#fbfcf8; cursor:pointer; } .purchase-choice:has(input:checked) { border-color:#588349; box-shadow:inset 0 0 0 1px #588349; background:#f0f6e8; } .purchase-choice-sale:has(input:checked) { border-color:#bb8345; box-shadow:inset 0 0 0 1px #bb8345; background:#fff5e6; } .purchase-choice input { width:19px; height:19px; margin:2px 0 0; flex-shrink:0; accent-color:#3f703f; } .purchase-choice>span { display:grid; gap:7px; min-width:0; } .purchase-choice b { font-size:13px; } .purchase-choice strong { font-size:18px; font-variant-numeric:tabular-nums; } .purchase-choice small { font-size:11px; line-height:1.55; color:#687656; } .basket-items { display:grid; gap:12px; } .basket-items .basket-item { border:1px solid #e3e9db; border-radius:17px; padding:16px; background:#fff; } .basket-items .basket-item.with-offer { border-color:#e6d0ae; } .basket-items .basket-description b { line-height:1.5; } .basket-items .icon-button { width:36px; height:36px; flex-shrink:0; } .basket-offer { margin-top:16px; padding:13px; background:#fbf5e9; border:1px solid #f0e3cc; border-radius:12px; } .basket-offer.requested { background:#fff3df; border-color:#ecd6b2; } .basket-offer-heading { display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.45; color:#76532b; } .basket-offer-heading svg { width:18px; height:18px; } .basket-offer>strong { display:block; margin-top:9px; font-size:19px; color:#654522; font-variant-numeric:tabular-nums; } .basket-offer p { font-size:11px; line-height:1.6; margin:8px 0; color:#806744; } .offer-switch { display:block; padding:10px 12px; margin-top:10px; width:100%; min-height:44px; background:#fffaf1; border:1px solid #dfcba9; border-radius:10px; color:#71502c; font-size:12px; font-weight:600; } .pending-amount { font-size:11px; color:#846940; } .pending-estimate { background:#f8f6ee; border-color:#e7e1d2; } .pending-estimate>.basket-offer-heading { display:flex; margin-bottom:10px; font-size:14px; } .pending-estimate>.basket-offer-heading svg { width:20px; height:20px; } .basket-items .sheet-note { margin:12px 0 0; } @media(max-width:375px) { .basket-items .basket-item { padding:13px; } .basket-item-bottom { gap:10px; } } .product .manual-offers { padding:10px 8px; margin:10px 0; gap:8px; } .product .manual-offer { flex-wrap:wrap; } .product .manual-offer b { font-size:16px; } .product>.manual-offers { grid-column:1/-1; margin:0; padding:12px; } .product>.manual-offers .manual-offer { flex-wrap:nowrap; align-items:center; } .product>.manual-offers .manual-offer>span:last-child { flex:1; } .bottom-nav button { padding-left:5px; padding-right:5px; } @media(max-width:375px) { .basket-estimate { padding:15px; } .basket-items .basket-description b { font-size:13px; } .basket-items .quantity-stepper button { width:35px; } .basket-items .quantity-stepper .basket-edit-quantity { min-width:71px; } } @media(hover:none) { .product:hover .p-name { text-decoration:none; } } @media(max-width:375px) { .fulfillment { padding-left:16px; padding-right:16px; } .welcome { padding:16px 14px; } .welcome h2 { font-size:19px; } .welcome .eyebrow { font-size:8px; } .category { font-size:9px; } .category>span { width:40px; height:44px; border-radius:14px; } .category svg { width:24px; height:24px; } .product { padding:15px 10px; gap:9px; } .product-info .p-name { font-size:13px; } .product-info .p-meta { font-size:10px; } .price b { font-size:20px; } .quick-searches { gap:8px; } .quick-searches button { padding:11px; } .quick-searches small { font-size:10px; } .live-product-hero { gap:12px; } .live-product-hero .detail-art { width:72px; min-width:72px; height:104px; } .live-product-hero .detail-title { font-size:16px; } .sheet-actions { padding-left:18px; padding-right:18px; } } /* Barcode search: camera view and a permanent manual alternative. */ .scanner-preview{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:#eef3e4;border:1px solid #dce6cf;margin:18px 0 12px} .scanner-preview video{display:block;width:100%;height:100%;object-fit:cover;background:#162519} .scanner-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:18px;color:#547443} .scanner-placeholder svg{width:48px;height:48px;stroke-width:1.3;margin-bottom:5px}.scanner-placeholder b{font-size:15px}.scanner-placeholder span{font-size:12px;line-height:1.5} .scanner-guide{position:absolute;inset:32% 8%;border:2px solid #ecf7cc;border-radius:12px;box-shadow:0 0 0 100vmax #10241565;pointer-events:none} .scanner-preview [hidden],.scanner-actions [hidden]{display:none!important} .scanner-status{min-height:40px;font-size:12px;line-height:1.6;color:#657b53;margin:10px 0 14px} .scanner-actions{display:grid;gap:9px}.scanner-actions button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;margin:0}.scanner-actions svg{width:19px;height:19px} .barcode-manual{margin-top:24px;padding-top:20px;border-top:1px solid #e2e9d8}.barcode-manual .quantity-field{display:grid;gap:10px;font-size:12px;color:#5a744b;margin:0 0 12px}.barcode-manual input,.barcode-manual .quantity-field input{width:100%;max-width:none;min-width:0;min-height:48px;padding:12px;border:1px solid #cddbbd;border-radius:11px;font:inherit;font-size:16px;color:#25442f;background:white;text-align:left}.barcode-manual input:focus-visible{outline:2px solid #96af6c;outline-offset:2px}.barcode-manual button{width:100%;min-height:44px} /* Delivery request rehearsal, matching the selected storefront. */ .checkout-test{font-size:11px;line-height:1.6;color:#826137;background:#fbf2df;border:1px solid #edddbd;padding:12px;border-radius:12px;margin:0 0 16px} .checkout-slot{display:flex;gap:11px;background:#f1f6e7;padding:15px;border-radius:14px;margin-bottom:22px} .checkout-slot svg{width:25px;height:25px;color:#648a45}.checkout-slot div{display:grid;gap:7px}.checkout-slot b{font-size:13px}.checkout-slot span{font-size:12px;line-height:1.55}.checkout-slot small{font-size:11px;color:#71845a} #checkout-form h3{font-size:16px;margin:24px 0 14px}#checkout-form h3:first-child{margin-top:0}.checkout-grid{display:grid;gap:12px}.checkout-field{display:grid;gap:8px;margin:12px 0;font-size:12px;font-weight:550;color:#557348}.checkout-field input,.checkout-field textarea,.checkout-field select{width:100%;min-width:0;min-height:48px;padding:12px;border:1px solid #cddbbd;border-radius:11px;background:#fff;font:inherit;font-size:16px;color:#25442f}.checkout-field textarea{resize:vertical}.checkout-field input:focus-visible,.checkout-field textarea:focus-visible,.checkout-field select:focus-visible{outline:2px solid #96af6c;outline-offset:2px}.sheet-actions{display:grid;gap:8px}.sheet-actions .basket-refresh{margin:0}.sheet-actions .secondary{min-height:44px;margin:0}.request-success{text-align:center;padding:3px 4px 17px}.request-success>svg{display:block;margin:0 auto 13px;width:43px;height:43px;padding:9px;border-radius:14px;background:#ecf3df;color:#547d3c}.request-success>span{font-size:11px;color:#7b8e62}.request-success h3{font-size:20px;line-height:1.4;margin:12px 0}.request-success p{font-size:12px;line-height:1.6;color:#71845b}.request-details{border:1px solid #e1e9d6;border-radius:15px;padding:5px 16px}.request-details p{display:grid;gap:7px;padding:12px 0;margin:0;border-bottom:1px solid #e8eddf}.request-details p:last-child{border:0}.request-details b{font-size:11px;color:#80916b}.request-details span{font-size:13px;line-height:1.5;overflow-wrap:anywhere}.request-details strong{font-size:25px} .request-composition{margin:22px 0 0}.request-composition h3{font-size:16px}.request-composition p{display:grid;gap:7px;font-size:12px;line-height:1.55;padding:12px 0;border-bottom:1px solid #e5ebdc;margin:0}.request-composition span{color:#657b53}.request-composition b{font-weight:600} .network-price{display:flex;align-items:center;gap:9px;margin:10px 0 4px}.network-price s{color:var(--muted);font-size:12px;font-weight:400}.network-rate{background:#e3efb4;color:#24583d;padding:4px 7px;border-radius:7px;font-size:11px;font-weight:750}.detail-quote .network-price{margin-top:0;flex-basis:100%}.detail-quote .network-price s{font-size:14px} /* Search and category navigation: a visible grid, compact section chooser. */ .categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 6px; overflow:visible; margin:16px 0; } .category { min-width:0; padding:0; font-size:12px; } .category > span { width:48px; height:46px; border-radius:15px; margin-bottom:6px; } .section-picker { display:flex; align-items:center; gap:10px; width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:14px; background:#f8f9f3; text-align:left; margin-bottom:12px; } .section-picker span { flex:1; min-width:0; } .section-picker small { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; } .section-picker b { font-size:14px; font-weight:600; } .section-picker > svg:last-child { width:15px; } .section-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .section-option { display:flex; align-items:center; justify-content:space-between; gap:5px; text-align:left; min-height:56px; padding:12px; border:1px solid var(--line); border-radius:12px; font-size:13px; line-height:1.4; } .section-option svg { width:15px; height:15px; } .section-option.selected { background:var(--green); color:#fff; border-color:var(--green); } .pack-options:empty,.active-filters:empty { display:none; } .facet-label { display:block; font-size:11px; color:var(--muted); margin:10px 0 7px; } .pack-chips { display:flex; gap:6px; overflow-x:auto; padding:2px 1px 8px; } .pack-chips .chip { flex-shrink:0; min-height:40px; font-size:12px; } .active-filters { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 12px; } .active-filter { display:flex; align-items:center; gap:6px; max-width:100%; padding:7px 10px; background:#eff3e7; border-radius:9px; font-size:11px; min-height:34px; } .active-filter svg { width:13px; height:13px; } .recent-searches { margin:18px 0 22px; } .recent-searches > div:first-child { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13px; } .recent-searches > div:first-child button { padding:8px 0 8px 12px; font-size:11px; color:var(--muted); } .recent-chips { display:flex; flex-wrap:wrap; gap:7px; } .recent-chips .chip { white-space:normal; text-align:left; max-width:100%; } .search-suggestions span { width:100%; font-size:12px; } .searchbox #query-submit { padding:0 8px 0 0; min-width:28px; border:0; color:#617d4e; } .searchbox #query-submit svg { width:20px; height:20px; } .searchbox { padding-left:10px; gap:4px; } .thumb.reptile { background:#f0eedc; color:#87914d; } .results-heading h2 { overflow-wrap:anywhere; min-width:0; } .basket-tools { display:flex; gap:8px; margin:0 0 16px; } .basket-tools .secondary { flex:1; min-width:0; min-height:44px; padding:8px; font-size:11px; border-radius:12px; } /* Clear category hierarchy and full-selection facets. */ .catalog-group { margin:17px 0 22px; } .catalog-group h3 { margin:0 0 10px; font-size:12px; font-weight:600; color:var(--muted); } .catalog-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .catalog-tile { display:flex; justify-content:space-between; align-items:center; gap:9px; min-height:58px; padding:13px 12px; background:#f7f8f1; border:1px solid var(--line); border-radius:13px; text-align:left; font-size:13px; line-height:1.35; } .catalog-tile span { flex:1; overflow-wrap:break-word; } .catalog-tile svg { width:14px; height:14px; flex-shrink:0; color:#93a184; } .catalog-tile.selected { color:var(--green); background:#edf3e5; border-color:#b7cba4; } .catalog-guide { display:flex; gap:12px; color:var(--muted); background:#f7f8f2; padding:16px; border-radius:14px; margin:12px 0; } .catalog-guide svg { width:21px; height:21px; flex-shrink:0; margin-top:3px; } .catalog-guide p { margin:0; font-size:12px; line-height:1.65; } .catalog-facets { display:flex; align-items:center; gap:8px; margin:11px 0; min-width:0; } .catalog-facets .pack-chips { flex:1; min-width:0; padding-bottom:2px; } .facet-open { display:flex; align-items:center; gap:6px; flex-shrink:0; min-height:42px; padding:10px 11px; border:1px solid #c9d6bf; background:#f1f5e9; border-radius:12px; font-size:12px; font-weight:600; } .facet-open svg { width:16px; height:16px; } .facet-count { display:flex; justify-content:center; align-items:center; width:18px; height:18px; background:var(--green); color:#fff; border-radius:50%; font-size:10px; } .catalog-filter-fields { display:grid; gap:19px; margin:20px 0 25px; } .catalog-filter-fields label { display:grid; gap:8px; font-size:13px; font-weight:600; } .catalog-filter-fields select { width:100%; min-height:49px; padding:12px 13px; border:1px solid #d7dfce; border-radius:12px; background:#fafbf6; color:var(--ink); font:inherit; font-weight:400; } @media(max-width:375px) { .catalog-tile { font-size:12px; min-height:60px; padding:12px 10px; } .facet-open { padding:10px 8px; } } /* Keep the reviewed basket visible while entering delivery details. */ .checkout-review{border:1px solid #dce6d0;border-radius:16px;padding:16px;margin:0 0 16px;background:#fafcf6} .checkout-review-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .checkout-review-head h3{margin:0;font-size:17px;color:#294c35} .checkout-review-head button{min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:#edf3e3;color:#456532;font:inherit;font-size:12px} .checkout-review details{margin:10px 0 12px}.checkout-review summary{cursor:pointer;padding:8px 0;font-size:12px;color:#60764e} .checkout-review ul{list-style:none;margin:0;padding:0}.checkout-review li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 0;border-top:1px solid #e4ebdb;font-size:12px;line-height:1.55} .checkout-review li span{overflow-wrap:anywhere}.checkout-review li b{text-align:right;white-space:nowrap;font-weight:600}.checkout-review small{display:block;font-size:11px;font-weight:400;color:#71805f;margin-top:4px} .checkout-review-total{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #dce6d0;padding-top:14px}.checkout-review-total span{font-size:12px;color:#61744f}.checkout-review-total strong{font-size:22px;color:#294c35;white-space:nowrap} .checkout-review>p{margin:8px 0 0;font-size:11px;line-height:1.6;color:#71805f} /* Address suggestions use the local Ussuriysk registry. */ .checkout-address-help,.address-status{font-size:12px;line-height:1.55;color:#5d7353;margin:9px 0 13px} .address-results{display:grid;gap:6px;margin-top:-5px} .address-results:empty{display:none} .address-results button{display:grid;gap:5px;text-align:left;min-height:48px;padding:12px 14px;border:1px solid #d8e3cd;border-radius:11px;background:#f7f9f1;color:#284b32;font:inherit;font-size:14px;line-height:1.4} .address-results small{font-size:11px;color:#637854} .address-results button:focus-visible{outline:2px solid #63864d;outline-offset:2px} .checkout-consent{margin:18px 0 8px;padding:13px 14px;border:1px solid #d5e2c6;border-radius:13px;background:#f7faf2} .checkout-consent-label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:start;cursor:pointer;font-size:12px;line-height:1.55;color:#2c4d35} #privacy-consent{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green);cursor:pointer} .checkout-consent-details{margin-top:8px;padding-left:33px} .checkout-consent-details summary{cursor:pointer;font-size:11px;font-weight:600;color:#527143;padding:2px 0} .checkout-consent-details p{margin:6px 0 2px;font-size:11px;line-height:1.55;color:#5e7251} /* Buyer-facing labels remain readable on small phones. */ .category-caption { margin:18px 0 0; font-size:13px; font-weight:600; } .category { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; line-height:1.3; } .category > span { flex-shrink:0; } .price small { white-space:nowrap; } .catalog-facets .facet-open { max-width:100%; line-height:1.3; } #subcategories, #pack-options, #results-context { scroll-margin-top:80px; } /* Compact browsing, readable cards, and reachable filter actions. */ .brand { padding-top:12px; padding-bottom:13px; } .brand img { width:44px; height:44px; } .brand .city { align-self:center; margin-top:0; } .shopping-mode button { min-height:44px; } .content { padding-top:14px; } .categories.is-compact { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:7px; margin:0 0 16px; } .categories.is-compact .category { flex:0 0 auto; width:auto; white-space:nowrap; min-height:44px; padding:10px 12px; border:1px solid #dae3d0; border-radius:12px; background:#fff; font-size:12px; line-height:1.35; } .categories.is-compact .category > span { display:none; } .categories.is-compact .category.active { background:var(--green); border-color:var(--green); color:#fff; } .app:not(.delivery-mode) .basket-dock { display:none; } .app.has-basket:not(.delivery-mode) .content { padding-bottom:24px; } .product-info .p-name { font-size:15px; line-height:1.45; } .product-info .p-meta { font-size:12px; line-height:1.55; } .product .availability,.product .card-location { font-size:12px; line-height:1.5; } .product .price > small { font-size:12px; } .active-filter { min-height:44px; font-size:12px; } .facet-open,.pack-chips .chip { min-height:44px; } .results-context { font-size:12px; line-height:1.45; } .results-heading > span { font-size:11px; line-height:1.5; white-space:normal; max-width:48%; } .filter-scope { margin:-4px 0 0; color:#617455; font-size:12px; line-height:1.5; } .brand-picker-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:49px; padding:12px 13px; border:1px solid #d7dfce; border-radius:12px; background:#fafbf6; font-size:14px; font-weight:400; text-align:left; } .brand-picker-button svg { width:19px; height:19px; color:#71805f; } .brand-search-label { display:block; margin-bottom:8px; font-size:12px; font-weight:600; } #brand-search { width:100%; min-height:48px; padding:12px; border:1px solid #c8d6bc; border-radius:11px; font:inherit; font-size:16px; color:var(--ink); background:#fff; } .brand-search-options { display:grid; gap:4px; max-height:190px; overflow:auto; overscroll-behavior:contain; margin-top:8px; border:1px solid #e1e8d9; border-radius:12px; padding:4px; } .brand-search-options button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:11px 12px; text-align:left; border-radius:8px; font-size:14px; } .brand-search-options button[aria-pressed=true] { background:#eaf1de; color:#24583d; font-weight:600; } .brand-search-options button svg { width:18px; height:18px; } .catalog-filter-fields select { font-size:16px; } .catalog-filter-fields select:focus-visible { outline:3px solid #9baf65; outline-offset:2px; } #sheet:has(#filter-status) .sheet-inner { padding-bottom:10px; } #sheet:has(#filter-status) .sheet-actions .primary { margin:0; min-height:48px; font-size:14px; } #sheet:has(#filter-status) .sheet-actions .secondary { font-size:12px; } #sheet:has(#filter-status) .sheet-note { font-size:12px; } @media(max-width:375px) { .categories.is-compact .category { padding-left:10px; padding-right:10px; } .product-info .p-name { font-size:14px; } .brand strong { font-size:18px; } .brand span:not(.city) { font-size:9px; } } .active-filters .clear { margin-left:0; min-height:44px; padding:8px 10px; font-size:12px; } .product-about { margin-top:18px; } .product-about>p { font-size:14px; line-height:1.6; margin:0 0 13px; color:#52634c; } .product-composition { border:1px solid #e4e9dd; border-radius:13px; background:#fafbf7; } .product-composition summary { cursor:pointer; min-height:48px; padding:13px 14px; font-size:14px; font-weight:600; } .product-composition summary>span { display:block; font-size:11px; font-weight:400; color:#748068; margin:4px 0 0 17px; } .product-composition>p { margin:0; padding:0 14px 15px; font-size:13px; line-height:1.65; color:#52634c; overflow-wrap:anywhere; } .product-composition+.product-composition { margin-top:8px; } .product-composition>ul { margin:0; padding:0 14px 15px 32px; font-size:13px; line-height:1.65; color:#52634c; overflow-wrap:anywhere; } .product-composition[open] summary { padding-bottom:11px; } .product-composition summary:focus-visible { outline:3px solid #9baf65; outline-offset:2px; border-radius:12px; } /* The catalogue picker shares the storefront palette and touch controls. */ #sheet[data-view=filters] .sheet-inner { padding-top:16px; } .filter-context { display:grid; gap:7px; padding:15px 16px; border:1px solid #dfe8d5; border-radius:16px; background:#f2f6e9; } .filter-context .eyebrow { margin:0; font-size:9px; letter-spacing:.12em; color:#748567; } .filter-context p { margin:0; font-size:17px; line-height:1.35; font-weight:600; overflow-wrap:anywhere; } .filter-context>span:last-child { display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.5; color:#617455; } .filter-context>span:last-child svg { width:15px; height:15px; flex-shrink:0; } #sheet[data-view=filters] .catalog-filter-fields { gap:14px; margin:20px 0 17px; } .filter-field { display:grid; gap:8px; } .filter-label { font-size:12px; font-weight:600; } .facet-picker-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:49px; padding:12px 14px; border:1px solid #d7dfce; border-radius:13px; background:#fafbf6; color:var(--ink); font-size:14px; font-weight:400; text-align:left; } .facet-picker-button>span { overflow-wrap:anywhere; } .facet-picker-button>svg { width:18px; height:18px; flex-shrink:0; color:#71805f; transition:transform .15s; } .facet-picker-button[aria-expanded=true] { background:#f1f5e9; border-color:#93ad7b; } .facet-picker-button[aria-expanded=true]>svg { transform:rotate(90deg); } .facet-picker-button:focus-visible,.facet-options button:focus-visible,.filter-reset:focus-visible { outline:3px solid #9baf65; outline-offset:2px; } .facet-search-panel { margin-top:-5px; padding:12px; border:1px solid #dde6d2; border-radius:14px; background:#fafcf7; } .facet-search-label { display:block; margin-bottom:8px; font-size:12px; font-weight:600; } .facet-search-panel input { width:100%; min-height:46px; padding:11px 12px; border:1px solid #c8d6bc; border-radius:11px; font:inherit; font-size:16px; color:var(--ink); background:#fff; } .facet-search-panel input:focus-visible { outline:2px solid #9baf65; outline-offset:2px; } .facet-options { display:grid; gap:3px; max-height:210px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; border:1px solid #e1e8d9; border-radius:12px; padding:4px; background:#fff; } .facet-search-panel .facet-options { margin-top:8px; } .facet-options button { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:11px 12px; text-align:left; border-radius:9px; font-size:13px; line-height:1.45; } .facet-options button>span:first-child { overflow-wrap:anywhere; } .facet-options button[aria-pressed=true] { background:#eaf1de; color:#24583d; font-weight:600; } .facet-check { display:flex; align-items:center; justify-content:center; width:18px; flex-shrink:0; } .facet-check svg { width:18px; height:18px; } .facet-option-end { display:flex; align-items:center; gap:7px; flex-shrink:0; } .facet-option-end small { color:#748567; font-size:11px; font-weight:400; } .facet-option-group { display:grid; gap:3px; } .facet-option-group h3 { margin:9px 12px 4px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#748567; font-weight:600; } .filter-reset { min-height:44px; padding:10px 12px; border-radius:12px; font-size:12px; color:#657458; } #sheet[data-view=filters] #filter-status { margin:0; line-height:1.5; } #sheet[data-view=filters] .sheet-actions { gap:3px; } #sheet[data-view=filters] .sheet-actions .primary { border-radius:13px; } @media(max-height:680px) { .facet-options { max-height:150px; } } /* Short food choices stay visible while larger brand and pack lists are searchable. */ .food-facet-options { display:flex; flex-wrap:wrap; gap:7px; } .food-facet-chip { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 12px; border:1px solid #d7dfce; border-radius:12px; background:#fafbf6; font-size:12px; line-height:1.4; text-align:left; } .food-facet-chip>span:first-child { overflow-wrap:anywhere; } .food-facet-chip[aria-pressed=true] { background:#eaf1de; border-color:#93ad7b; color:#24583d; font-weight:600; } .food-facet-chip:focus-visible { outline:3px solid #9baf65; outline-offset:2px; } .food-facet-chip:disabled { opacity:.55; cursor:wait; } .facet-options button[data-retained=true],.food-facet-chip[data-retained=true] { opacity:1; cursor:default; color:#657458; background:#f2f4ee; border-color:#dfe5d7; } .facet-message { margin:8px 0 12px; padding:11px 13px; border-radius:12px; background:#f2f6e9; color:#617455; font-size:12px; line-height:1.5; } /* Select once: category, section and scoped facets stay beside the products. */ .categories.is-compact { flex-wrap:nowrap; overflow-x:auto; padding:2px 1px 8px; margin-bottom:8px; scrollbar-width:thin; } .section-rail { display:flex; gap:7px; overflow-x:auto; padding:2px 1px 9px; scrollbar-width:thin; } .section-chip { display:flex; align-items:center; gap:5px; flex-shrink:0; min-height:44px; padding:10px 12px; border:1px solid #dae3d0; border-radius:12px; font-size:12px; line-height:1.35; white-space:nowrap; background:#f8f9f3; } .section-chip.selected { background:#edf3e5; border-color:#93ad7b; color:#24583d; font-weight:600; } .section-chip svg { width:14px; height:14px; } .extra-sections { display:flex; flex-wrap:wrap; gap:7px; padding:6px 0 12px; } .extra-sections .section-chip { flex-shrink:1; white-space:normal; text-align:left; } .direct-filters { display:flex; flex-wrap:nowrap; align-items:center; gap:7px; overflow-x:auto; padding:4px 1px 8px; scrollbar-width:thin; } .direct-filter { display:flex; align-items:center; gap:5px; flex-shrink:0; min-width:0; max-width:100%; min-height:42px; padding:9px 11px; border:1px solid #d7dfce; border-radius:12px; background:#fff; font-size:12px; line-height:1.35; } .direct-filter>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:215px; } .direct-filter svg { width:14px; height:14px; flex-shrink:0; color:#71805f; } .direct-filter.selected { background:#edf3e5; border-color:#b7cba4; color:#24583d; font-weight:600; } .direct-filter[aria-expanded=true] { border-color:#6d8b51; background:#eaf1de; } .direct-filter[aria-expanded=true] svg { transform:rotate(90deg); } .direct-filter:disabled { opacity:.5; } .direct-filter-choice { display:flex; flex-shrink:0; min-width:0; max-width:100%; } .direct-filter-choice.selected { border:1px solid #b7cba4; border-radius:12px; background:#edf3e5; } .direct-filter-choice.selected .direct-filter { flex:1; border:0; border-radius:11px 0 0 11px; } .direct-filter-clear { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; min-height:42px; border-left:1px solid #d0dec2; border-radius:0 11px 11px 0; color:#526e43; } .direct-filter-clear svg { width:16px; height:16px; } .direct-filter-clear:focus-visible { outline:3px solid #9baf65; outline-offset:2px; } .direct-filters .clear { flex-shrink:0; margin-left:2px; min-height:42px; padding:8px 11px; border:1px dashed #cbd6bf; border-radius:12px; background:#fafbf7; font-size:12px; color:#556b45; white-space:nowrap; } .direct-filter-panel { margin:4px 0 12px; padding:12px; border:1px solid #dce6d2; border-radius:15px; background:#f8faf4; } .direct-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-5px -5px 7px 0; } .direct-panel-head>b { font-size:13px; font-weight:600; } .direct-panel-head .icon-button { width:44px; height:44px; color:#617455; } .direct-facet-options { display:flex; flex-wrap:wrap; gap:7px; } .direct-facet-options.scroll-options { max-height:180px; overflow-y:auto; overscroll-behavior:contain; padding:3px; scrollbar-width:thin; } .direct-facet-options .food-facet-chip { background:#fff; max-width:100%; } .direct-facet-options .food-facet-chip small { color:#748567; font-size:11px; } .direct-facet-options .food-facet-chip svg { width:16px; height:16px; flex-shrink:0; } .direct-facet-options .food-facet-chip[aria-pressed=true] { background:#eaf1de; } .direct-filter-panel input { width:100%; min-height:46px; padding:11px 12px; margin-bottom:9px; border:1px solid #c8d6bc; border-radius:11px; font:inherit; font-size:16px; background:#fff; color:var(--ink); } .direct-filter-status { margin:8px 0 0; color:#617455; font-size:12px; line-height:1.5; } .direct-filter-status:empty { display:none; } .direct-filter:focus-visible,.section-chip:focus-visible,.direct-filter-panel input:focus-visible { outline:3px solid #9baf65; outline-offset:2px; } .live-product-hero.photo-expanded .detail-art { height:min(34dvh,255px); } .sheet-actions:has(> .primary + .secondary) { grid-template-columns:1.35fr 1fr; align-items:stretch; } .sheet-actions:has(> .primary + .secondary) .primary, .sheet-actions:has(> .primary + .secondary) .secondary { min-height:46px; padding:11px 12px; font-size:13px; display:flex; align-items:center; justify-content:center; margin:0; } @media(max-width:375px) { .direct-filter>span { max-width:190px; } .sheet-actions:has(> .primary + .secondary) { grid-template-columns:1.25fr 1fr; } } /* Quick delivery stepper on catalog cards, persistent basket dock, and modal stepper. */ .app.has-basket:not(.delivery-mode) .basket-dock { display:flex; } .app.has-basket:not(.delivery-mode) .content { padding-bottom:145px; } .product-action { min-height:67px; padding:10px 0 12px; } .product-action.is-in-basket>span { color:#365c32; font-weight:600; } .quick-add, .card-stepper { flex-shrink:0; } .card-stepper { display:inline-flex; align-items:center; border:1px solid #bcd0a6; border-radius:11px; background:#f2f7e8; overflow:hidden; } .card-step { display:flex; align-items:center; justify-content:center; width:38px; min-height:38px; font-size:19px; font-weight:600; color:#24583d; background:#edf3df; } .card-step:hover:not(:disabled) { background:#dfecc8; } .card-stepper .in-list { min-height:38px; min-width:86px; border-radius:0; padding:6px 10px; font-variant-numeric:tabular-nums; } .basket-editor-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .basket-editor-row label { font-size:14px; font-weight:600; } .editor-stepper { display:inline-flex; align-items:center; border:1px solid #bdcfa8; border-radius:12px; background:#fff; overflow:hidden; } .editor-step { width:44px; min-height:46px; font-size:21px; font-weight:600; color:#24583d; background:#edf3df; display:flex; align-items:center; justify-content:center; } .editor-step:hover:not(:disabled) { background:#e0ecc8; } .editor-stepper input { width:78px; border:0; border-left:1px solid #d7e2c8; border-right:1px solid #d7e2c8; border-radius:0; padding:10px 6px; font-size:17px; font-weight:650; text-align:center; } /* Responsive desktop and tablet layout: multi-column catalog grid and wide modal sheet. */ @media(min-width:701px) { .layout { display:block; max-width:1240px; padding:24px 28px 48px; } .presentation { display:none; } .app { max-width:1180px; margin:0 auto; padding-bottom:0; border-radius:26px; min-height:calc(100dvh - 72px); display:flex; flex-direction:column; } .brand { padding:18px 28px 14px; } .brand img { width:50px; height:50px; } .brand strong { font-size:22px; } .brand span:not(.city) { font-size:12px; } .brand .city { display:block; font-size:11px; padding:6px 10px; } .fulfillment { display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; align-items:stretch; padding:0 28px 12px; } .shopping-mode { margin-bottom:0; height:100%; align-items:stretch; } .shopping-mode button { min-height:48px; font-size:14px; } .store-picker, .delivery-info { margin-bottom:0; min-height:54px; padding:10px 16px; } .sticky-search { padding:12px 28px 16px; } .searchbox { min-height:54px; padding-left:14px; } .content, .has-basket .content, .app.has-basket:not(.delivery-mode) .content { flex:1; padding:20px 28px 36px; } .categories { grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; margin:14px 0 18px; } .category { font-size:12px; min-height:78px; } .category>span { width:52px; height:50px; } .categories.is-compact { flex-wrap:wrap; overflow-x:visible; gap:8px; } .section-rail, .direct-filters { flex-wrap:wrap; overflow-x:visible; } .catalog-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; } #results > :not(.product-card) { grid-column:1/-1; } #results > .recent-searches, #results > .catalog-group { margin:4px 0 6px; } #results > .load-more, #results > .browse-all { max-width:360px; justify-self:center; margin:6px auto; } #results > .empty { max-width:480px; justify-self:center; width:100%; } .product-card { margin-bottom:0; display:flex; flex-direction:column; justify-content:space-between; transition:border-color .15s,box-shadow .15s; } .product-card:hover { border-color:#bfd0aa; box-shadow:0 8px 22px #1c3d280d; } .product { flex:1; grid-template-rows:1fr auto; align-content:stretch; padding:18px 16px; } .product .thumb { align-self:start; margin-top:2px; } .product > svg { align-self:start; margin-top:22px; } .product-action { margin:0 16px; } .app-navigation { margin-top:auto; background:#fffffffa; backdrop-filter:blur(12px); border-top:1px solid #e4eadc; padding-top:8px; } .basket-dock { max-width:680px; margin:4px auto 10px; cursor:pointer; } .bottom-nav { max-width:680px; margin:0 auto; border-top:0; background:transparent; } dialog { max-width:680px; width:calc(100% - 48px); border-radius:26px; } .sheet-top { padding:24px 28px 0; } .sheet-inner { padding:22px 28px 26px; } .sheet-actions, .sheet-footer { padding-left:28px; padding-right:28px; } .scanner-preview { max-height:240px; } .live-product-hero { display:grid; grid-template-columns:132px minmax(0,1fr); gap:18px; align-items:start; } .live-product-hero .detail-art { width:132px; height:132px; max-height:none; } .live-product-hero.photo-expanded { grid-template-columns:minmax(0,1fr); gap:16px; } .live-product-hero.photo-expanded .detail-art { width:100%; height:min(42dvh,340px); max-height:none; } .live-stores, .store-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .field-pair { grid-template-columns:1fr 1fr; } } @media(min-width:1120px) { .layout { max-width:1360px; padding:28px 36px 56px; } .app { max-width:1280px; } .brand, .fulfillment, .sticky-search { padding-left:34px; padding-right:34px; } .content, .has-basket .content, .app.has-basket:not(.delivery-mode) .content { padding:24px 34px 44px; } .catalog-tiles { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } #results { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } dialog { max-width:740px; } .live-product-hero.photo-expanded { grid-template-columns:minmax(0,1fr); gap:18px; } .live-product-hero.photo-expanded .detail-art { width:100%; height:min(45dvh,360px); } } /* v252: Favorites, pack variants, sort bar, delivery meter & top-ups, repeat order, and 2GIS store links. */ .bottom-nav { gap:6px; } .bottom-nav button { padding:5px 6px; font-size:10px; } .product-card { position:relative; } .product-info .p-brand, .product-info .unit-tag { padding-right:34px; } .product-info > .p-name:first-child { padding-right:34px; } .product > svg { margin-top:34px; } .fav-toggle { position:absolute; top:10px; right:10px; z-index:1; width:34px; height:34px; border-radius:50%; background:#ffffffeb; border:1px solid #e2e8da; color:#778868; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px #173e310d; } .fav-toggle svg { width:17px; height:17px; } .fav-toggle:hover { border-color:#c6d4b5; color:#36563c; } .fav-toggle[aria-pressed=true] { background:#fff3f1; border-color:#efc2bc; color:#c44237; } .fav-toggle[aria-pressed=true] svg { fill:currentColor; } .detail-tools { display:flex; gap:8px; margin:12px 0 16px; flex-wrap:wrap; } .fav-detail-btn, .share-detail-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1; min-height:42px; padding:9px 12px; border:1px solid #dbe4cf; border-radius:12px; background:#fafcf7; color:#315438; font-size:12px; font-weight:600; } .fav-detail-btn svg, .share-detail-btn svg { width:16px; height:16px; } .fav-detail-btn:hover, .share-detail-btn:hover { background:#f0f5e8; } .fav-detail-btn[aria-pressed=true] { background:#fff3f1; border-color:#ebbdb7; color:#be3d31; } .fav-detail-btn[aria-pressed=true] svg { fill:currentColor; } .pack-variants { margin:16px 0 6px; padding:13px 14px; border:1px solid #dfe8d3; border-radius:15px; background:#f8faf4; } .pack-variants h3, .pack-variants > small { display:block; font-size:12px; font-weight:650; color:#4f6641; margin:0 0 9px; } .pack-variant-list { display:flex; flex-wrap:wrap; gap:7px; } .pack-variant-chip { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:46px; padding:8px 12px; border:1px solid #d4e0c6; border-radius:11px; background:#fff; text-align:left; } .pack-variant-chip b { font-size:12px; font-weight:650; color:var(--ink); } .pack-variant-chip span, .pack-variant-chip small { font-size:11px; color:#5b714a; font-variant-numeric:tabular-nums; } .pack-variant-chip.active, .pack-variant-chip.is-current { background:#eaf2dc; border-color:#698b4b; box-shadow:inset 0 0 0 1px #698b4b; opacity:1; cursor:default; } .pack-variant-chip.active b, .pack-variant-chip.is-current b { color:#24583d; } .sort-bar { display:flex; align-items:center; gap:8px; margin:-4px 0 14px; overflow-x:auto; padding:2px 1px 4px; scrollbar-width:thin; } .sort-bar[hidden], .sort-bar:empty { display:none!important; } .sort-label { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#68795b; white-space:nowrap; flex-shrink:0; } .sort-label svg { width:14px; height:14px; color:#748863; } .sort-chips { display:flex; align-items:center; gap:6px; } .sort-chip { min-height:34px; padding:6px 11px; border:1px solid #dce4d2; border-radius:999px; background:#fff; color:#4d6241; font-size:11px; white-space:nowrap; flex-shrink:0; } .sort-chip.active, .sort-chip.selected { background:#eaf1de; border-color:#8fa972; color:#24583d; font-weight:650; } .delivery-progress { display:grid; gap:9px; } .delivery-progress-head { display:flex; align-items:center; gap:9px; } .delivery-meter { appearance:none; display:block; width:100%; height:7px; border:0; border-radius:999px; overflow:hidden; background:#e5decb; margin:0; } .delivery-meter::-webkit-progress-bar { background:#e5decb; border-radius:999px; } .delivery-meter::-webkit-progress-value { background:#c58b3c; border-radius:999px; transition:width .2s ease; } .delivery-meter::-moz-progress-bar { background:#c58b3c; border-radius:999px; } .delivery-progress.eligible .delivery-meter, .delivery-progress.eligible .delivery-meter::-webkit-progress-bar { background:#d6e5c3; } .delivery-progress.eligible .delivery-meter::-webkit-progress-value { background:#48783b; } .delivery-progress.eligible .delivery-meter::-moz-progress-bar { background:#48783b; } .dock-delivery-meter { appearance:none; display:block; width:100%; height:4px; border:0; border-radius:999px; overflow:hidden; background:#ffffff29; margin:6px 0 0; } .dock-delivery-meter::-webkit-progress-bar { background:#ffffff29; border-radius:999px; } .dock-delivery-meter::-webkit-progress-value { background:#d5eb9e; border-radius:999px; } .dock-delivery-meter::-moz-progress-bar { background:#d5eb9e; border-radius:999px; } .basket-topups { margin-top:18px; padding:14px; border:1px solid #dfe8d1; border-radius:16px; background:#f8faf3; } .basket-topups h3 { margin:0 0 10px; font-size:13px; font-weight:650; color:#284b33; } .basket-topup-list { display:grid; gap:8px; } .basket-topup-card { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid #e2ead7; border-radius:12px; background:#fff; } .basket-topup-info { display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-align:left; padding:0; } .basket-topup-info img { width:38px; height:46px; object-fit:contain; border-radius:8px; background:#fff; flex-shrink:0; } .basket-topup-info .topup-icon { width:38px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#eff4e4; color:#6f8953; flex-shrink:0; } .basket-topup-info > span { min-width:0; flex:1; } .basket-topup-info b { display:block; font-size:12px; font-weight:600; line-height:1.35; color:var(--ink); overflow-wrap:anywhere; } .basket-topup-info strong { display:block; margin-top:4px; font-size:13px; color:#24583d; } .basket-topup-info small { font-size:11px; font-weight:400; color:#687958; } .basket-topup-add { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; min-height:36px; padding:7px 11px; border-radius:9px; background:#eaf2dc; color:#24583d; font-size:12px; font-weight:650; white-space:nowrap; } .basket-topup-add svg { width:14px; height:14px; } .basket-topup-add:hover { background:#dce9c5; } .store-option-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:stretch; } .store-option-row .store-option { margin:0; } .store-option-row .store-map-link { display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border:1px solid #dce5d1; border-radius:14px; background:#f6f9f0; color:#365c32; font-size:11px; font-weight:650; text-decoration:none; white-space:nowrap; } .live-store-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .live-store-head .store-map-link { font-size:11px; font-weight:650; color:#3d6835; background:#eef4e3; padding:4px 8px; border-radius:7px; text-decoration:none; white-space:nowrap; } .store-map-link:hover { background:#e2edd0; text-decoration:underline; } .store-hours { display:block; margin-top:4px; font-size:11px; color:#6c7c5e; } .request-composition-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .request-composition-head h3 { margin:0; } .repeat-order-btn { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:7px 12px; border:1px solid #cfe0bc; border-radius:10px; background:#eef5e3; color:#24583d; font-size:12px; font-weight:650; } .repeat-order-btn svg { width:15px; height:15px; } .repeat-order-btn:hover { background:#e1eed0; } @media(min-width:701px) { .store-options .store-option-row { grid-template-columns:minmax(0,1fr) auto; } .basket-topup-list { grid-template-columns:repeat(2,minmax(0,1fr)); } } .product-specs { display:grid; gap:8px; margin:10px 0 4px; padding:12px 14px; border:1px solid #e1e8d6; border-radius:14px; background:#fafcf7; } .product-specs h4 { margin:0; font-size:12px; font-weight:650; color:#4f6641; } .product-specs dl { display:grid; gap:7px; margin:0; } .product-specs dl > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12px; line-height:1.4; padding-bottom:6px; border-bottom:1px dashed #e5ecdc; } .product-specs dl > div:last-child { padding-bottom:0; border-bottom:0; } .product-specs dt { color:#667859; font-weight:500; flex-shrink:0; } .product-specs dd { margin:0; color:var(--ink); font-weight:600; text-align:right; } dialog > .toast { position:fixed; z-index:40; } .request-history { margin-top:16px; padding:14px; border:1px solid #dfe8d3; border-radius:16px; background:#f8faf4; } .request-history h3 { margin:0 0 10px; font-size:13px; font-weight:650; color:#2b4d34; } .request-history-list { display:grid; gap:8px; } .request-history-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 10px; border:1px solid #dce6cf; border-radius:12px; background:#fff; } .request-history-card.active { border-color:#729252; background:#eef5e4; } .request-history-select { display:grid; gap:3px; text-align:left; padding:2px 4px; background:transparent; border:0; color:var(--ink); } .request-history-select > div { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .request-history-select b { font-size:13px; color:#244b32; } .request-history-select small { font-size:11px; color:#647756; } .request-history-status { font-size:10px; font-weight:600; padding:2px 7px; border-radius:999px; background:#fff0d4; color:#865a17; } .request-history-status.confirmed { background:#e4eedb; color:#42642d; } .request-history-status.cancelled { background:#f2e8e2; color:#815b4b; } .request-history-repeat { min-height:34px; padding:6px 10px; border:1px solid #cfe0bc; border-radius:9px; background:#f2f7e9; color:#24583d; font-size:11px; font-weight:650; white-space:nowrap; } .request-history-repeat:hover { background:#e2eed1; } /* v307: Responsive sort toolbar, view switcher (cards / compact list), and dense list layout. */ #results[aria-busy="true"] { opacity:.72; transition:opacity .15s ease; } .sort-bar { display:grid; gap:8px; margin:-2px 0 14px; padding:10px 12px; border:1px solid #dfe7d4; border-radius:15px; background:#f8faf4; overflow:visible; } .sort-bar-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .sort-label { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#68795b; white-space:normal; min-width:0; flex-shrink:1; } .sort-label .sort-current { color:var(--ink); font-weight:650; } .view-switch { display:inline-flex; align-items:center; gap:3px; padding:3px; border:1px solid #d5e0c8; border-radius:11px; background:#eef3e5; max-width:100%; } .view-chip { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:5px 10px; border-radius:8px; font-size:11px; font-weight:600; color:#526746; white-space:nowrap; } .view-chip svg { width:14px; height:14px; } .view-chip.selected, .view-chip[aria-pressed=true] { background:#fff; color:var(--green); box-shadow:0 1px 4px #1d3d2814; } .sort-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%; } @media(min-width:701px) { .sort-chips { display:flex; flex-wrap:wrap; gap:6px; } } .sort-chip { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:36px; padding:7px 10px; border:1px solid #d8e2ce; border-radius:10px; background:#fff; color:#4b613f; font-size:11px; line-height:1.25; text-align:center; white-space:normal; min-width:0; flex-shrink:1; } .sort-chip.selected, .sort-chip[aria-pressed=true] { background:var(--green); border-color:var(--green); color:#fff; font-weight:650; } /* Sorting is a choice on request, not a permanent second filter screen. */ .sort-bar { position:relative; padding:4px; background:transparent; border:0; } .sort-bar-top { flex-wrap:nowrap; } .sort-menu { position:relative; flex:1; min-width:0; } .sort-menu summary { display:flex; align-items:center; gap:7px; min-height:44px; padding:9px 11px; border:1px solid #d8e2ce; border-radius:11px; background:#fff; list-style:none; cursor:pointer; font-size:12px; } .sort-menu summary::-webkit-details-marker { display:none; } .sort-menu summary .sort-current { flex:1; min-width:0; } .sort-menu summary>svg:last-child { width:13px; height:13px; } .sort-menu[open] summary>svg:last-child { transform:rotate(90deg); } .sort-menu:not([open])>.sort-chips { display:none; } .sort-menu[open]>.sort-chips { position:absolute; left:0; top:calc(100% + 6px); z-index:5; display:grid; grid-template-columns:1fr; width:max(100%,210px); max-width:calc(100vw - 40px); padding:6px; border:1px solid #d8e2ce; border-radius:12px; background:#fff; box-shadow:0 8px 22px #173e3117; } .sort-menu .sort-chip { min-height:44px; justify-content:flex-start; text-align:left; padding:10px 12px; } .sort-menu summary:focus-visible { outline:3px solid #9baf65; outline-offset:2px; } @media(max-width:700px) { .sort-bar { padding:0; } .sort-bar .view-switch { padding:2px; flex-shrink:0; gap:0; } .sort-bar .view-chip { width:44px; min-height:44px; padding:8px; } .sort-bar .view-chip svg { width:18px; height:18px; } .sort-bar .view-chip>span { display:none; } .app.catalog-active .brand { padding:9px 16px; gap:8px; } .app.catalog-active .brand img { width:32px; height:32px; } .app.catalog-active .brand strong { font-size:18px; } .app.catalog-active .brand span:not(.city) { display:none; } .app.catalog-active .brand .city { align-self:center; margin-top:0; } .app.catalog-active .fulfillment { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:0 16px 8px; } .app.catalog-active .shopping-mode { margin:0; padding:2px; } .app.catalog-active .shopping-mode button { min-width:0; min-height:44px; padding:6px 5px; font-size:11px; } .app.catalog-active .shopping-mode svg { display:none; } .app.catalog-active .store-picker, .app.catalog-active .delivery-info { min-width:0; min-height:48px; margin:0; padding:6px 8px; gap:5px; } .app.catalog-active .store-picker small, .app.catalog-active .delivery-info small { display:none; } .app.catalog-active .store-picker b, .app.catalog-active .delivery-info b { font-size:11px; line-height:1.3; } .app.catalog-active .store-picker>svg, .app.catalog-active .delivery-info>svg { width:15px; height:15px; } .app.catalog-active .sticky-search { padding:8px 16px; } .app.catalog-active .content { padding-top:10px; } } #results[data-view="list"], #results.view-list { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; } #results[data-view="list"] > :not(.product-card), #results.view-list > :not(.product-card) { grid-column:1/-1; } @media(min-width:1120px) { #results[data-view="list"], #results.view-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } } #results[data-view="list"] .product-card, #results.view-list .product-card { margin-bottom:6px; border-radius:14px; } #results[data-view="list"] > .product-card, #results.view-list > .product-card { margin-bottom:0; } #results[data-view="list"] .product, #results.view-list .product { grid-template-columns:48px minmax(0,1fr) 10px; gap:10px; padding:11px 12px; align-items:center; } #results[data-view="list"] .product > svg, #results.view-list .product > svg { align-self:center; margin-top:0; } #results[data-view="list"] .product .thumb, #results.view-list .product .thumb { width:48px; height:56px; min-height:56px; flex:0 0 48px; border-radius:10px; gap:3px; align-self:center; margin-top:0; } #results[data-view="list"] .product .thumb svg, #results.view-list .product .thumb svg { width:22px; height:22px; } #results[data-view="list"] .product .thumb small, #results.view-list .product .thumb small { font-size:8px; } #results[data-view="list"] .product-info .unit-tag, #results.view-list .product-info .unit-tag { display:inline-block; margin:0 0 3px; padding:2px 5px; font-size:8.5px; } #results[data-view="list"] .product-info .p-name, #results.view-list .product-info .p-name { font-size:13px; line-height:1.3; padding-right:30px; } #results[data-view="list"] .product-info .p-meta, #results.view-list .product-info .p-meta { font-size:11px; margin-top:2px; line-height:1.35; } #results[data-view="list"] .product .price, #results.view-list .product .price { margin:5px 0 3px; } #results[data-view="list"] .product .price b, #results.view-list .product .price b { font-size:16px; } #results[data-view="list"] .product .availability, #results[data-view="list"] .product .card-location, #results.view-list .product .availability, #results.view-list .product .card-location { font-size:11px; margin-top:2px; line-height:1.35; } #results[data-view="list"] .fav-toggle, #results.view-list .fav-toggle { top:8px; right:8px; width:30px; height:30px; } #results[data-view="list"] .fav-toggle svg, #results.view-list .fav-toggle svg { width:15px; height:15px; } #results[data-view="list"] .product-action, #results.view-list .product-action { min-height:48px; padding:7px 0 8px; margin:0 12px; } #results[data-view="list"] .product-action .quick-add, #results[data-view="list"] .product-action .in-list, #results.view-list .product-action .quick-add, #results.view-list .product-action .in-list { min-height:34px; padding:6px 10px; font-size:11px; } #results[data-view="list"] .product-action .card-step, #results.view-list .product-action .card-step { width:34px; min-height:34px; } @media(max-width:359px) { .sort-bar { padding:0; gap:6px; } .view-chip { padding:4px 8px; font-size:10.5px; min-height:32px; } .sort-chip { padding:6px 6px; font-size:10.5px; min-height:34px; } #results[data-view="list"] .product, #results.view-list .product { grid-template-columns:44px minmax(0,1fr) 9px; gap:8px; padding:10px; } #results[data-view="list"] .product .thumb, #results.view-list .product .thumb { width:44px; height:52px; min-height:52px; flex:0 0 44px; } #results[data-view="list"] .product-action, #results.view-list .product-action { margin:0 10px; } } /* v308: A single document scroll surface; fixed controls do not share a clipped/transformed ancestor on mobile WebViews. Size allowances follow the actual panels, including wrapped text and the phone safe area. */ #subcategories, #pack-options, #direct-filter-panel, #results-context { scroll-margin-top:calc(var(--catalog-search-height,80px) + 8px); } .product-card { isolation:isolate; } #results { overflow-anchor:none; } #results.catalog-pending>.catalog-loading { position:sticky; top:calc(var(--catalog-search-height,80px) + 12px); align-self:start; } @media(max-width:700px) { html { overscroll-behavior-y:none; background:var(--soft); } body { background:var(--soft); } .app { overflow:visible; padding-bottom:0; } .app-navigation { left:0; right:0; margin-left:auto; margin-right:auto; transform:none; background:var(--soft); backdrop-filter:none; -webkit-backdrop-filter:none; } .bottom-nav { background:#fff; } .product:active:not(:disabled) { filter:none; background:#f5f8ee; } .app .content, .app.has-basket .content, .app.has-basket:not(.delivery-mode) .content { padding-bottom:calc(var(--catalog-nav-height,176px) + 20px); } dialog::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; } } /* Android Telegram can repaint sticky inputs and filtered active buttons on separate layers while its keyboard resizes the WebView. Keep editing in the document flow; the native keyboard owns the viewport until it has closed. */ @media(max-width:700px) { .brand, .fulfillment, .sticky-search { background:#fff; } .sticky-search { box-shadow:none; } .catalog-editing .sticky-search, .keyboard-open .sticky-search { position:relative; top:auto; z-index:auto; box-shadow:none; } .keyboard-open .app-navigation { visibility:hidden; pointer-events:none; } button:active:not(:disabled) { filter:none; } .searchbox:focus-within { outline:none; box-shadow:none; } .searchbox input { -webkit-appearance:none; appearance:none; } .categories.is-compact, .section-rail, .direct-filters { overflow-y:hidden; align-items:center; scrollbar-width:none; } .categories.is-compact::-webkit-scrollbar, .section-rail::-webkit-scrollbar, .direct-filters::-webkit-scrollbar { display:none; } } /* Mobile chrome stays outside the single scrolling catalogue. No sticky or fixed header/footer layers have to be moved over Android WebView tiles. */ @media(max-width:700px) { html, body { height:100%; overflow:hidden; } .layout { height:100%; } .app { height:100%; min-height:0; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto minmax(0,1fr) auto; } .app>.demo-notice { grid-row:1; } .app>.brand { grid-row:2; } .app>.fulfillment { grid-row:3; } .app>.sticky-search { grid-row:4; } .app>.content { grid-row:5; } .app>.app-navigation { grid-row:6; } .sticky-search, .catalog-editing .sticky-search, .keyboard-open .sticky-search { position:static; top:auto; z-index:auto; } .app-navigation { position:static; width:100%; max-width:none; margin:0; z-index:auto; } .keyboard-open .app-navigation { display:none; } .app .content, .app.has-basket .content, .app.has-basket:not(.delivery-mode) .content { min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding-bottom:20px; } #subcategories, #pack-options, #direct-filter-panel, #results-context { scroll-margin-top:8px; } #results.catalog-pending>.catalog-loading { position:static; padding-top:calc(35px + var(--catalog-loading-offset,0px)); } } /* Mobile cards are a real tile view; the compact list keeps its own layout. */ @media(max-width:700px) { #results.view-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; } #results.view-cards > :not(.product-card) { grid-column:1/-1; } #results.view-cards > .product-card { margin:0; display:flex; flex-direction:column; border-radius:16px; min-width:0; } #results.view-cards .product { display:flex; flex:1; flex-direction:column; align-items:stretch; gap:0; padding:12px 10px 10px; min-width:0; } #results.view-cards .product > svg { display:none; } #results.view-cards .product .thumb { align-self:center; width:100%; height:auto; min-height:0; aspect-ratio:1; flex:0 0 auto; margin:0 0 10px; padding:7px; border-radius:12px; } #results.view-cards .product-info { display:flex; flex-direction:column; flex:1; min-width:0; } #results.view-cards .product-info .p-name { padding-right:0; font-size:13px; line-height:1.35; } #results.view-cards .product-info .p-meta { font-size:11px; line-height:1.4; } #results.view-cards .product .price { margin-top:auto; padding-top:10px; margin-bottom:7px; gap:3px 5px; } #results.view-cards .product .price b { font-size:18px; } #results.view-cards .product .price small { font-size:10px; } #results.view-cards .availability, #results.view-cards .card-location { font-size:10px; line-height:1.4; } #results.view-cards .product-action { margin:0 10px; padding:9px 0; gap:0; min-height:56px; } #results.view-cards .product-action > span { display:none; } #results.view-cards .product-action .quick-add { width:100%; min-width:0; min-height:38px; font-size:11px; padding:8px 5px; gap:5px; } #results.view-cards .product-action .in-list { min-width:0; font-size:11px; padding:5px; } #results.view-cards .card-stepper { display:grid; grid-template-columns:30px minmax(0,1fr) 30px; width:100%; } #results.view-cards .card-stepper .card-step { width:30px; min-width:0; min-height:36px; } #results.view-cards .card-stepper .in-list { white-space:nowrap; } #results.view-cards .card-stepper .in-list svg { display:none; } #results.view-cards .product-action > .in-list { width:100%; } } /* Preserve the selected layout and every control's geometry. */ .product-card { border-color:#dbe3d6; background:#fff; } .product-card .price b { color:#173e31; } .product-card .price small, .product-info .p-meta { color:#5d705a; } .product-card .availability:not(.out) { color:#42683c; } .product-action .quick-add { background:#24583d; color:#fff; } .product-action .quick-add:hover { background:#1d4933; } .product-action .quick-add:disabled { background:#e7ebdf; color:#73806a; } .fav-toggle:not([aria-pressed="true"]) { color:#5b7250; border-color:#d6e1cd; } .searchbox { background:#fff; border-color:#bfceb1; } .searchbox input::placeholder { color:#75816d; } .category:not(.active)>span { background:#fff; border-color:#e0e6d8; } .section-chip:not(.selected) { background:#fff; border-color:#dce4d3; color:#4b6247; } .section-chip.selected { background:#eaf2df; border-color:#91a975; color:#244d33; } .direct-filter { background:#fff; border-color:#d6e0cc; color:#355337; }