:root {
  color-scheme: light;
  --ink: #423732;
  --muted: #8e8080;
  --forest: #517322;
  --green: #91b34a;
  --paper: #fcf8f8;
  --hairline: rgba(255,255,255,.78);
  --shadow: 0 10px 28px rgba(101,76,87,.10), inset 0 1px 0 rgba(255,255,255,.84);
  --nav-h: 74px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body {
  background: radial-gradient(circle at 17% 12%, #f5dce8, transparent 39%),
              radial-gradient(circle at 86% 88%, #e2eacd, transparent 46%),#eae5e7;
  color: var(--ink); display: flex; justify-content: center; overflow: hidden;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #7ba32f; outline-offset: 3px; }
button:disabled { opacity:.40; cursor:not-allowed; }
.icon-defs {position:absolute; width:0; height:0; overflow:hidden; pointer-events:none;}
.ico { width:21px; height:21px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.app {
  position:relative; width:100%; max-width:430px; height:100dvh; isolation:isolate;
  background: linear-gradient(170deg,rgba(255,255,255,.54),rgba(255,255,255,.21) 43%,rgba(255,255,255,.37)),
              radial-gradient(ellipse at 95% 16%,#f5d9e5,transparent 54%),
              radial-gradient(ellipse at 9% 84%,#f1dfe5,transparent 45%),
              radial-gradient(ellipse at 78% 91%,#e5efcf,transparent 46%), #f4eef0;
  overflow:clip;
}
.ambient { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ambient > div { position:absolute; border-radius:50%; filter:blur(38px); opacity:.6; transform:translateZ(0); }
.ambient-one { width:220px; height:200px; background:#f3c4d7; top:-60px; right:-100px; }
.ambient-two { width:240px; height:250px; background:#d5e8ac; bottom:-90px; left:-90px; }
.ambient-three { width:160px; height:210px; background:#fffaf4; top:39%; right:-90px; }
.view {
  position:absolute; z-index:1; inset:0; padding:18px 16px calc(118px + env(safe-area-inset-bottom));
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.view::-webkit-scrollbar, .sheet-scroll::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display:none; }
.view > * { animation:rise .35s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(9px) } to {opacity:1;transform:translateY(0)} }
.glass {
  border:1px solid var(--hairline); background:rgba(255,255,255,.43);
  box-shadow:var(--shadow); backdrop-filter:blur(22px) saturate(1.1); -webkit-backdrop-filter:blur(22px) saturate(1.1);
}
.topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; min-height:47px; }
.topline .left {display:flex; flex-direction:column; gap:3px; min-width:0;}
.topline h1 { font-size:25px; line-height:1.03; letter-spacing:-.85px; margin:0; font-weight:730; }
.topline p { font-size:12px; margin:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-button { border:1px solid rgba(255,255,255,.80); width:43px; height:43px; border-radius:17px; background:rgba(255,255,255,.46); color:#5d6e32; display:grid; place-items:center; box-shadow:var(--shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.icon-button.soft { background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(220,234,179,.52)); }
.supply-pill {display:flex; align-items:center; gap:7px; max-width:100%; white-space:nowrap; padding:10px 12px; margin-bottom:15px; border-radius:19px 25px 20px 22px; font-size:12px; color:#68872b; background:rgba(255,255,255,.52); border:1px solid rgba(255,255,255,.9); box-shadow:0 6px 18px rgba(107,91,94,.08);}
.supply-pill .ico{width:16px;height:16px}
.supply-pill b{font-weight:700; color:#536936;}
.supply-pill span {opacity:.75}
.supply-pill .ico:last-child {margin-left:auto;width:15px;opacity:.6}
.search-row {display:flex; gap:9px; align-items:center; margin:0 0 12px;}
.search-field { height:50px; min-width:0; flex:1; display:flex; align-items:center; gap:9px; padding:0 14px; border-radius:20px 25px 21px 24px; }
.search-field .ico{color:#9e9191;width:19px;height:19px}
.search-field input {border:0; outline:0; background:transparent; color:var(--ink); flex:1; font-size:13px; min-width:0;}
.search-field input::placeholder{color:#9f9391;opacity:1}
.filter-button {flex:none;width:50px;height:50px; border-radius:19px 23px 18px 24px; border:1px solid rgba(255,255,255,.89); background:linear-gradient(140deg,rgba(247,253,232,.87),rgba(199,224,137,.72)); color:#577b1d; box-shadow:var(--shadow); display:grid;place-items:center}
.chip-row {display:flex; gap:8px; overflow:auto; scrollbar-width:none; padding:2px 1px 9px; margin-bottom:8px;}
.chip {flex:none; border:1px solid rgba(255,255,255,.82); padding:9px 14px; background:rgba(255,255,255,.48); color:#645b57; border-radius:19px 22px 20px 22px; font-size:12px; box-shadow:0 5px 15px rgba(104,83,90,.05);}
.chip.active {background:linear-gradient(150deg,#f1f8de,#cce397);color:#577323; border-color:rgba(255,255,255,.94); font-weight:680; box-shadow:0 6px 16px rgba(142,174,70,.18), inset 0 1px 0 #fff;}
.section-label {display:flex; align-items:center; justify-content:space-between; min-height:26px; margin:5px 2px 10px;}
.section-label h2 {font-size:15px;letter-spacing:-.2px;margin:0}
.section-label small {font-size:12px;color:#948785}
.section-label button {background:none;border:none;font-size:12px;color:#738c48;}

/* Organic but legible: the rounded content layer never changes shape */
.product-spotlight {position:relative; min-height:142px; border-radius:27px; padding:17px 17px; overflow:hidden; display:flex; align-items:center; isolation:isolate; margin-bottom:11px;}
.product-spotlight::before {content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.65),rgba(255,255,255,.20) 68%);z-index:1;pointer-events:none;}
.spotlight-image {position:absolute; z-index:0; width:55%;height:100%;right:0;top:0; object-fit:cover;object-position:center; opacity:.95; mask-image:linear-gradient(90deg,transparent,#000 24%);}
.spotlight-copy {position:relative; z-index:2;display:flex;flex-direction:column;align-items:flex-start; max-width:58%;}
.spotlight-copy .eyebrow {font-size:11px;color:#9e6d85;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.85);padding:5px 9px;border-radius:15px;}
.spotlight-copy h3 {font-size:28px; margin:10px 0 5px; letter-spacing:-1.1px;}
.spotlight-copy .sub {font-size:12px;color:#837675;}
.spotlight-bottom {display:flex; align-items:center;gap:12px;margin-top:13px;}
.spotlight-bottom strong {font-size:16px;color:#5c493f;}
.circle-action {width:36px;height:36px;border:1px solid rgba(255,255,255,.92);border-radius:16px 18px 16px 18px; background:rgba(255,255,255,.58);color:#638623;display:grid;place-items:center;box-shadow:0 5px 14px rgba(137,161,65,.16);}
.circle-action .ico{width:18px;height:18px}
.decor-drop {position:absolute;pointer-events:none;z-index:0;filter:blur(1px);background:radial-gradient(circle at 34% 29%,rgba(255,255,255,.56),rgba(234,196,216,.18) 45%,rgba(180,216,139,.12) 75%); border:1px solid rgba(255,255,255,.26);}
.product-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
.product-card {min-width:0; display:flex; flex-direction:column; padding:9px; position:relative; isolation:isolate; border-radius:25px; overflow:hidden; min-height:229px;}
.product-card::before {content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,rgba(255,255,255,.27),transparent 56%);pointer-events:none;}
.product-image {position:relative; z-index:1; border-radius:19px; height:121px; width:100%; object-fit:cover; display:block; flex:none;}
.product-card.tall .product-image{height:136px;}
.product-details {position:relative; z-index:1; flex:1; padding:9px 3px 3px; display:flex; flex-direction:column;}
.product-title {font-size:14px;font-weight:700;letter-spacing:-.3px;line-height:1.14; margin:0 0 4px;}
.product-meta {font-size:11px;color:#8c7f79;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 6px;}
.product-bottom {margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:3px;}
.product-price {font-size:18px;font-weight:760;letter-spacing:-.6px;white-space:nowrap;}
.product-unit{font-size:10px;color:#9a8d89;font-weight:400;white-space:nowrap;display:block;margin-bottom:2px}
.product-add{width:35px;height:35px;flex:none;display:grid;place-items:center;border:none;border-radius:14px 17px 13px 17px; background:linear-gradient(145deg,#f1f9dd,#cbe397);box-shadow:0 5px 13px rgba(139,169,77,.21),inset 0 1px 0 #fff;color:#58771d;}
.product-add .ico{width:17px;height:17px}
.product-card.wide {grid-column:span 2; min-height:136px; display:grid;grid-template-columns:125px 1fr;gap:9px;}
.product-card.wide .product-image {width:125px; height:116px; border-radius:19px;}
.product-card.wide .product-details{padding:11px 3px 4px;}
.product-card.wide .product-title{font-size:17px}
.product-card.wide .product-meta{white-space:normal;}
.empty-state {padding:29px 15px;text-align:center;border-radius:27px;color:#857c77;font-size:14px;line-height:1.5;}

/* Supplies and orders */
.supply-card {border-radius:27px;margin:0 0 12px; padding:12px; position:relative; overflow:hidden;}
.supply-image {width:100%;height:132px;object-fit:cover;border-radius:21px;display:block;margin-bottom:12px;}
.supply-card h3{font-size:19px;letter-spacing:-.45px;margin:0 0 6px;}
.supply-card p{margin:0 0 13px;font-size:12px;color:#8c7b79;line-height:1.5;}
.supply-foot{display:flex;align-items:center;justify-content:space-between;gap:9px}
.pill-status {padding:7px 10px;border-radius:99px;background:rgba(214,237,174,.74);font-size:11px;color:#668029;white-space:nowrap}
.btn-secondary {min-height:42px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.58);color:#53731c; border-radius:19px;padding:0 13px;font-weight:680;font-size:12px;}
.order-card{padding:15px;border-radius:25px;margin:0 0 12px;}
.order-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}
.order-header strong{font-size:16px}
.order-card .details{font-size:12px;color:#857978;display:flex;justify-content:space-between;margin:7px 0;gap:10px}
.order-card .details strong{color:#594740;font-size:13px}

/* Cart */
.cart-supply {padding:12px 13px;display:flex;align-items:center;gap:9px;margin-bottom:13px;border-radius:20px;font-size:12px;color:#607c2d;}
.cart-supply strong{color:#4d6c24}
.cart-products{display:flex;flex-direction:column;gap:10px;}
.cart-line {position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:10px;border-radius:25px;overflow:hidden;}
.cart-line img {height:82px;width:78px;object-fit:cover;border-radius:19px;}
.cart-line h3{font-size:14px;margin:2px 0 5px;line-height:1.2}
.cart-line small{color:#988b88;font-size:11px;}
.cart-line-bottom{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:9px;}
.cart-line-bottom strong{font-size:14px;white-space:nowrap}
.counter-ctrl {display:flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.93);background:rgba(255,255,255,.52);border-radius:18px;box-shadow:inset 0 1px 0 #fff;flex:none;height:31px;overflow:hidden;}
.counter-ctrl button{height:100%;width:28px;display:grid;place-items:center;background:none;border:none;color:#5d7a22;}
.counter-ctrl button:last-child{background:rgba(213,237,168,.63);}
.counter-ctrl .ico{width:14px;height:14px}
.counter-ctrl b{font-size:12px;min-width:20px;text-align:center}
.link-add {height:46px;margin:13px 0 16px;width:100%;border-radius:23px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.84);color:#5c7931;font-size:13px;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:var(--shadow)}
.cart-summary {border-radius:28px;padding:18px 16px 15px;position:relative;overflow:hidden;margin-top:8px;}
.cart-summary .decor-drop {opacity:.7;}
.total-line{position:relative;z-index:2;display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.total-line span{font-size:14px;}.total-line strong{font-size:23px;letter-spacing:-.8px;}
.btn {width:100%;height:52px;border-radius:24px 28px 22px 27px;padding:0 15px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:680;font-size:14px}
.btn .ico{width:18px;height:18px}
.btn-primary {border:1px solid #c4e38e;background:linear-gradient(169deg,#cbe79b,#9fc253 46%,#86ac32);color:#fff;text-shadow:0 1px 1px #608a23a6;box-shadow:0 9px 19px rgba(145,180,71,.22),inset 0 2px 2px rgba(255,255,255,.5);}
.cart-hint{font-size:11px;color:#9d8d89;margin:9px 2px 0;text-align:center;line-height:1.4}

/* Filter sheet */
.scrim{position:absolute;inset:0;background:rgba(57,47,51,.26);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:15;opacity:0;visibility:hidden;transition:opacity .24s, visibility .24s;}
.scrim.show{opacity:1;visibility:visible;}
.filter-sheet{
  position:absolute;z-index:16;left:0;right:0;bottom:0;height:min(76dvh,680px);min-height:460px;
  display:flex;flex-direction:column; padding:0 20px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,rgba(255,251,252,.92),rgba(248,239,244,.90) 66%,rgba(240,242,226,.87));
  border:1px solid rgba(255,255,255,.92); border-bottom:0;border-radius:34px 34px 0 0;
  box-shadow:0 -20px 45px rgba(87,65,75,.20),inset 0 2px 1px rgba(255,255,255,.8);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  opacity:0; visibility:hidden; transform:translateY(110%);
  transition:transform .36s cubic-bezier(.19,.84,.18,1),opacity .25s,visibility .36s;
}
.filter-sheet.show{opacity:1;visibility:visible;transform:translateY(0)}
.sheet-handle{width:42px;height:5px;border-radius:99px;background:#c8babe;margin:12px auto 17px;flex:none}
.sheet-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;flex:none}
.sheet-title-row h2{font-size:25px;letter-spacing:-.6px;margin:0}
.txt-btn{border:none;background:none;color:#9e8e8b;font-size:13px;padding:10px 0}
.sheet-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;flex:1;padding:0 0 5px}
.filter-group{margin:16px 0 21px}
.filter-group h3{font-size:13px;margin:0 0 13px}
.filter-choices{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 5px}
.filter-choices::-webkit-scrollbar{display:none}
.range-labels{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.range-labels span:first-child{background:rgba(255,255,255,.73);border:1px solid #fff;padding:9px 13px;border-radius:18px;font-size:13px}
.range-helper{font-size:11px;color:#948888}
.price-range{width:100%;accent-color:#9fbe55}
.swatch-row{display:flex;gap:11px}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 5px 12px rgba(100,78,86,.10);position:relative}
.swatch.selected{outline:2px solid #98bb54;outline-offset:2px}
.swatch.selected::after{content:'✓';font-size:14px;color:#688c2c;display:grid;place-items:center;inset:0;position:absolute}
.select-wrap{border:1px solid #fff;background:rgba(255,255,255,.55);height:46px;border-radius:22px;display:flex;align-items:center;padding:0 13px}
.select-wrap select{appearance:none;border:none;background:transparent;outline:none;flex:1;font-size:13px;color:#5c4d4b}
.select-wrap .ico{transform:rotate(90deg);width:15px}
.sheet-bottom{flex:none;padding-top:12px}

/* Navigation: translucent container with moving SVG fill */
.nav-wrap{position:absolute;z-index:12;bottom:calc(10px + env(safe-area-inset-bottom));left:14px;right:14px;}
.nav-glass{
  position:relative;height:var(--nav-h);border-radius:29px 31px 30px 30px;overflow:hidden;
  border:1.4px solid rgba(255,255,255,.90);
  background:linear-gradient(170deg,rgba(255,255,255,.58),rgba(255,255,255,.23) 65%,rgba(255,255,255,.38));
  backdrop-filter:blur(26px) saturate(1.35);-webkit-backdrop-filter:blur(26px) saturate(1.35);
  box-shadow:0 15px 34px rgba(85,68,80,.17),inset 0 2px 0 rgba(255,255,255,.90),inset 0 -1px 1px rgba(255,255,255,.7);
}
.nav-glass::after{content:"";pointer-events:none;position:absolute;left:9px;right:9px;top:2px;height:21px;border-radius:30px 30px 48% 48%;background:linear-gradient(180deg,rgba(255,255,255,.33),transparent);z-index:1}
.nav-liquid{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none;mix-blend-mode:normal}
.nav-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:100%;padding:7px;position:relative;z-index:2}
.nav-item{border:0;background:transparent;color:#6e625f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;min-width:0;border-radius:23px;transition:color .22s}
.nav-item .ico{width:21px;height:21px;stroke-width:1.9}
.nav-item span{font-size:10px;font-weight:590;line-height:1.1;white-space:nowrap}
.nav-item.selected{color:#284d0d;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.counter{position:absolute;top:8px;right:12px;border-radius:99px;min-width:17px;height:17px;padding:1px 4px;border:1.5px solid rgba(255,255,255,.92);background:#87ad29;color:#fff;display:grid;place-items:center;font-size:9px;line-height:1}
.nav-item.selected .counter{background:#547a1b}
.toast {position:absolute;z-index:25;left:23px;right:23px;bottom:calc(99px + env(safe-area-inset-bottom));padding:12px 16px;border-radius:19px;background:rgba(61,89,40,.89);backdrop-filter:blur(14px);color:#fff;font-size:13px;text-align:center;box-shadow:0 12px 24px rgba(57,75,37,.19);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateY(0)}
@media (max-width:355px){.view{padding-left:12px;padding-right:12px}.product-card{min-height:218px}.product-image{height:105px}.product-card.tall .product-image{height:118px}.product-title{font-size:13px}.product-price{font-size:16px}.cart-line{grid-template-columns:65px 1fr}.cart-line img{width:65px;height:73px}.nav-wrap{left:9px;right:9px}}
@media (max-height:700px){.view{padding-top:12px}.topline{margin-bottom:11px}.product-spotlight{min-height:126px}.product-spotlight .spotlight-image{width:48%}.product-grid .product-image{height:105px}.filter-sheet{height:84dvh}}
@media (min-width:431px){.app{box-shadow:0 20px 55px rgba(61,50,59,.12)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.product-spotlight[hidden]{display:none!important}

/* V5: transparent shader canvas; ordinary accessible controls remain HTML. */
.nav-liquid-canvas {
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;display:block;opacity:1;
}
.nav-glass {
  background:linear-gradient(162deg,rgba(255,255,255,.62),rgba(247,254,236,.34) 57%,rgba(255,255,255,.43));
}
.nav-item.selected {color:#24547a;text-shadow:0 1px 1px rgba(255,255,255,.72)}
.nav-glass.no-webgl .nav-item.selected::before {
  content:'';position:absolute;left:50%;top:50%;width:62px;height:62px;
  transform:translate(-50%,-50%);z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 34% 25%,rgba(252,255,255,.97),rgba(163,215,249,.83) 42%,rgba(94,172,231,.78) 80%,rgba(70,151,218,.82));
  border:1px solid rgba(245,253,255,.85);
  box-shadow:0 6px 19px rgba(65,144,200,.18),inset 0 2px 3px rgba(255,255,255,.96);
}

/* V8: diffused frosted dock; remove the hard vector-like white outline. */
.nav-wrap::before {
  content:""; position:absolute; left:-5px; right:-5px; top:-6px; bottom:-7px;
  border-radius:36px;
  background:linear-gradient(125deg,rgba(255,255,255,.68),rgba(211,231,190,.42) 55%,rgba(255,255,255,.62));
  filter:blur(12px); opacity:.82; pointer-events:none;
}
.nav-glass {
  border:1px solid rgba(255,255,255,.39);
  background:linear-gradient(158deg,rgba(255,255,255,.46),rgba(233,245,214,.22) 50%,rgba(255,255,255,.36));
  backdrop-filter:blur(32px) saturate(1.24);
  -webkit-backdrop-filter:blur(32px) saturate(1.24);
  box-shadow:0 13px 32px rgba(84,100,73,.09),0 2px 12px rgba(255,255,255,.27),
             inset 0 2px 5px rgba(255,255,255,.37),inset 0 -2px 5px rgba(192,215,176,.12);
}
.nav-glass::after {
  top:2px;height:19px;left:14px;right:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));
  filter:blur(7px);
}
.nav-item.selected {color:#365e20;text-shadow:0 1px 1px rgba(255,255,255,.72)}
.nav-glass.no-webgl .nav-item.selected::before {
  background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.94),rgba(203,236,156,.80) 42%,rgba(146,192,68,.80) 80%,rgba(112,158,46,.80));
  border:0;
  box-shadow:0 6px 20px rgba(111,162,65,.15),inset 0 2px 4px rgba(255,255,255,.84);
}

/* V8: the page fades out first and the next page eases in after 210 ms. */
.view {
  transition:opacity .19s cubic-bezier(.25,.75,.3,1),transform .19s cubic-bezier(.25,.75,.3,1);
  transform:translate3d(0,0,0);
}
.view.is-leaving {
  opacity:0;
  transform:translate3d(-11px,0,0) scale(.987);
  pointer-events:none;
}
.view.is-entering {
  animation:page-liquid-enter .36s cubic-bezier(.18,.75,.2,1) both;
}
.view.is-entering > * {animation:none}
@keyframes page-liquid-enter {
  from {opacity:0; transform:translate3d(14px,9px,0) scale(.984); filter:blur(2.5px)}
  to {opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0)}
}
@media (prefers-reduced-motion:reduce){
  .view,.view.is-leaving,.view.is-entering{animation:none!important;transition:none!important;filter:none!important;transform:none!important;opacity:1!important}
}

/* v9: iOS WebKit-safe dock composition.
   A radial -webkit-mask on a backdrop-filter pseudo-element can become
   an opaque white compositing island in the MAX iOS WebView.
   Frost glass uses one stable compositing surface; the outer halo is paint-only.
*/
.nav-wrap::before {
  left:-7px;right:-7px;top:-7px;bottom:-9px;
  border-radius:38px;
  background:linear-gradient(120deg,rgba(227,242,207,.24),rgba(255,255,255,.14),rgba(210,237,179,.22));
  filter:blur(16px);
  opacity:.72;
}
.nav-glass {
  isolation:isolate;
  overflow:hidden;
  border-radius:31px;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(160deg,rgba(255,255,255,.31),rgba(235,247,220,.22) 55%,rgba(252,255,246,.28));
  backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
  box-shadow:0 14px 30px rgba(84,104,81,.10), inset 0 1px 2px rgba(255,255,255,.30);
  -webkit-mask-image:none;
  mask-image:none;
}
.nav-glass::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 60%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.28);
  /* No mask or backdrop-filter here: avoids a nested WebKit backdrop layer. */
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  -webkit-mask-image:none;
  mask-image:none;
}
.nav-glass::after {
  z-index:0;
  opacity:.45;
}
.nav-liquid-canvas {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  opacity:1;
  pointer-events:none;
  background:transparent;
  mix-blend-mode:normal;
}
.nav-items {z-index:2}

/* v11 — compact single-column supply catalog, with legible packaging controls.
   Keep the v9 iOS-safe dock and its WebGL layer untouched. */
.product-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}
.product-card,
.product-card.tall,
.product-card.wide {
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  align-items:stretch;
  gap:13px;
  min-height:164px;
  padding:10px;
  border-radius:26px;
  overflow:hidden;
  position:relative;
  transform:translateZ(0);
}
.product-card.featured {background:linear-gradient(140deg,rgba(255,255,255,.61),rgba(248,237,244,.46));}
.product-card.out-of-stock {background:rgba(255,255,255,.37);}
.product-photo-window {
  width:100%;min-width:0;min-height:145px;
  align-self:stretch;position:relative;z-index:1;
  overflow:hidden;border-radius:20px;
  background:linear-gradient(130deg,#f7e7ef,#eaf1d8);
}
.product-card .product-image,
.product-card.tall .product-image,
.product-card.wide .product-image {
  display:block;
  position:absolute;
  inset:-12px 0 auto 0;
  width:100%;height:calc(100% + 24px);
  border-radius:0;
  object-fit:cover;
  object-position:50% 50%;
  transform:translate3d(0,var(--photo-shift,0px),0) scale(1.04);
  will-change:transform;
}
.product-card.out-of-stock .product-image {filter:saturate(.68);opacity:.75;}
.product-card .product-details,
.product-card.wide .product-details {
  min-width:0;
  padding:3px 1px 1px 0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
}
.product-heading {display:flex;align-items:start;gap:6px;min-width:0;justify-content:space-between;}
.product-card .product-title,
.product-card.wide .product-title {
  margin:0;
  font-size:16px;line-height:1.18;
  letter-spacing:-.4px;min-width:0;
  overflow-wrap:anywhere;
}
.product-mini-tag {display:inline-block;flex:none;white-space:nowrap;font-size:9px;color:#947385;
  padding:4px 6px;border:1px solid rgba(255,255,255,.78);
  border-radius:10px;background:rgba(255,255,255,.43);}
.product-card .product-meta,
.product-card.wide .product-meta {
  margin:0;
  font-size:11px;
  color:#918381;
  line-height:1.2;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.stock-info {display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;
  font-size:10.5px;color:#786e6a;line-height:1.2;}
.stock-info b {color:#536e2b;font-weight:750;}
.stock-status {color:#578027;}
.stock-status.missing {color:#ac626b;}
.product-price-line {display:flex;align-items:baseline;gap:7px;margin-top:auto;}
.product-card .product-price {font-size:19px;letter-spacing:-.55px;line-height:1.1;color:#3f372f;}
.product-price-line>span {font-size:11px;color:#948581;}
.quantity-stepper {
  display:grid;grid-template-columns:33px minmax(0,1fr) 33px;
  gap:1px;align-items:center;
  height:39px;
  width:100%;
  border-radius:19px;
  border:1px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.57);
  box-shadow:0 5px 13px rgba(113,91,99,.07),inset 0 1px 0 rgba(255,255,255,.92);
  overflow:hidden;
}
.quantity-stepper>button {height:100%;border:0;min-width:0;display:grid;place-items:center;
  background:rgba(236,245,219,.65);color:#5c7923;padding:0;}
.quantity-stepper>button:last-child {background:linear-gradient(135deg,#e9f4ce,#cce69d);}
.quantity-stepper>button:first-child {border-radius:18px 8px 8px 18px;}
.quantity-stepper>button:last-child {border-radius:8px 18px 18px 8px;}
.quantity-stepper>button:disabled {opacity:.3;background:transparent;color:#7d8070;}
.quantity-stepper .ico {width:16px;height:16px;}
.quantity-readout {display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:0;}
.quantity-readout input {
  width:100%;max-width:85px;height:21px;
  min-width:0;border:0;outline:0;padding:0 2px;margin:0;
  background:transparent;text-align:center;
  color:#3f4e21;font-weight:750;font-size:15px;
  appearance:textfield;-moz-appearance:textfield;
  font-variant-numeric:tabular-nums;
}
.quantity-readout input::-webkit-inner-spin-button,
.quantity-readout input::-webkit-outer-spin-button {-webkit-appearance:none;margin:0;}
.quantity-readout input:focus-visible {outline:none;background:rgba(220,239,185,.32);border-radius:5px;}
.quantity-readout small {font-size:9px;color:#8b8374;line-height:1;white-space:nowrap;}
.cart-line {grid-template-columns:78px minmax(0,1fr);}
.cart-line-bottom {flex-wrap:wrap;align-items:center;gap:9px;margin-top:9px;}
.cart-line-bottom .cart-stepper {flex:1 1 130px;width:auto;max-width:195px;}
.cart-line-bottom>strong {margin-left:auto;white-space:nowrap;}
.cart-line small {line-height:1.3;}

/* Slow, scroll-reactive ambient "liquid light". Only the content layer moves;
   none of these effects are placed on or inside the iOS-safe navigation compositor. */
.ambient-one,.ambient-two,.ambient-three {will-change:transform;border-radius:42% 58% 54% 46% / 51% 41% 59% 49%;}
.ambient-one {animation:ambient-liquid-one 19s ease-in-out infinite alternate;}
.ambient-two {animation:ambient-liquid-two 23s ease-in-out infinite alternate;}
.ambient-three {animation:ambient-liquid-three 16s ease-in-out infinite alternate;opacity:.4;}
.ambient::after {
  content:"";position:absolute;left:56%;top:41%;width:150px;height:180px;
  opacity:.21;pointer-events:none;
  border-radius:45% 55% 54% 46% / 44% 60% 40% 56%;
  background:radial-gradient(ellipse at 31% 31%,rgba(255,255,255,.87),rgba(222,242,194,.33) 43%,rgba(245,215,227,.18) 74%,transparent 100%);
  filter:blur(16px);
  animation:ambient-liquid-three 28s ease-in-out infinite alternate-reverse;
}
@keyframes ambient-liquid-one {
  0%{transform:translate3d(-14px,var(--ambient-shift-a,0px),0) rotate(-9deg) scale(.96);border-radius:42% 58% 54% 46% / 51% 41% 59% 49%;}
  100%{transform:translate3d(34px,var(--ambient-shift-a,0px),0) rotate(16deg) scale(1.12);border-radius:56% 44% 42% 58% / 39% 56% 44% 61%;}
}
@keyframes ambient-liquid-two {
  0%{transform:translate3d(-8px,var(--ambient-shift-b,0px),0) rotate(6deg) scale(1.07);border-radius:48% 52% 59% 41% / 44% 52% 48% 56%;}
  100%{transform:translate3d(29px,var(--ambient-shift-b,0px),0) rotate(-14deg) scale(.94);border-radius:57% 43% 46% 54% / 60% 44% 56% 40%;}
}
@keyframes ambient-liquid-three {
  0%{transform:translate3d(0,var(--ambient-shift-c,0px),0) scale(.93) rotate(0deg);}
  100%{transform:translate3d(-28px,var(--ambient-shift-c,0px),0) scale(1.09) rotate(17deg);}
}
@media (prefers-reduced-motion:reduce) {
  .ambient-one,.ambient-two,.ambient-three,.ambient::after {animation:none!important;will-change:auto;}
  .product-card .product-image {transform:none!important;will-change:auto;}
}
@media (max-width:355px) {
  .product-card,.product-card.tall,.product-card.wide {grid-template-columns:94px minmax(0,1fr);gap:10px;min-height:160px;}
  .product-photo-window {min-height:136px;}
  .product-card .product-title {font-size:14px;}
  .product-mini-tag {display:none;}
  .quantity-stepper {grid-template-columns:30px minmax(0,1fr) 30px;}
  .quantity-stepper>button {min-width:0;}
  .quantity-readout small {font-size:8px;}
  .cart-line-bottom .cart-stepper {flex:1 1 100%;max-width:none;}
}
/* Keep supply context within narrow MAX WebView widths. */
.supply-pill {width:100%;}
.supply-pill b {flex:none;}
.supply-pill span {min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left;}
.supply-pill .ico:last-child {flex:none;}

/* v12 — remove redundant page headers; keep meaningful supply context and controls. */
.view {scroll-padding-top:12px;overscroll-behavior-y:contain;}
.catalog-meta {display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:1px 3px 10px;color:#9b8988;font-size:12px;}
.catalog-meta small {font-size:11px;}
.gesture-note,.cart-gesture-note {font-size:10px;color:#9c9189;letter-spacing:.01em;white-space:nowrap;}
.cart-gesture-note {text-align:right;margin:0 3px 12px;white-space:normal;}
.cart-supply {margin-top:2px;margin-bottom:8px;}

/* Slightly offset, diffused glass inside a stable, readable card silhouette. */
.product-card, .product-card.tall, .product-card.wide,
.cart-line,.supply-card,.order-card,.cart-summary,.cart-supply {
  border-color:rgba(255,255,255,.66);
  background:linear-gradient(141deg,rgba(255,255,255,.61),rgba(255,255,255,.32) 58%,rgba(248,239,244,.30));
  box-shadow:0 14px 35px rgba(95,73,91,.10),0 3px 10px rgba(111,94,95,.065),
    inset 0 1px 1px rgba(255,255,255,.88);
}
.product-card,.product-card.tall,.product-card.wide {
  border-radius:29px 25px 32px 26px / 27px 32px 29px 31px;
}
.product-card:nth-child(3n+2) {border-radius:25px 30px 27px 32px / 29px 26px 32px 28px;}
.product-card:nth-child(3n) {border-radius:30px 28px 33px 26px / 26px 32px 28px 30px;}
.cart-line {border-radius:27px 32px 29px 26px / 30px 27px 32px 28px;}
.supply-card {border-radius:29px 25px 30px 27px;}
.order-card {border-radius:26px 30px 26px 29px;}
.product-card::before,
.cart-line::before,
.supply-card::before,
.order-card::before,
.cart-summary::before,
.cart-supply::before {
  content:"";
  position:absolute;inset:2px 3px 1px 2px;
  border-radius:41% 59% 55% 45% / 54% 40% 60% 46%;
  background:radial-gradient(ellipse at 13% 12%,rgba(255,255,255,.56),transparent 47%),
             radial-gradient(ellipse at 94% 90%,rgba(208,231,169,.38),transparent 55%),
             radial-gradient(ellipse at 66% 8%,rgba(248,216,230,.22),transparent 48%);
  filter:blur(13px);opacity:.82;pointer-events:none;z-index:0;
}
.product-card>:not(.decor-drop), .cart-line>*, .supply-card>*, .order-card>* , .cart-summary>:not(.decor-drop), .cart-supply>* {
  position:relative;z-index:1;
}
.product-card .product-photo-window{overflow:hidden;border:1px solid rgba(255,255,255,.51);}

/* Horizontal card gesture: left is minus one pack; right is plus one pack.
   Vertical momentum scrolling remains native and uninhibited. */
[data-swipe-id] {
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
  transform:translate3d(var(--drag-x,0px),0,0);
  transition:transform .30s cubic-bezier(.19,.87,.25,1.16), box-shadow .28s ease;
}
[data-swipe-id].is-dragging {transition:none!important;will-change:transform;}
[data-swipe-id].swipe-positive {
  box-shadow:0 18px 38px rgba(106,159,91,.16),inset 0 1px 0 rgba(255,255,255,.88);
}
[data-swipe-id].swipe-negative {
  box-shadow:0 18px 38px rgba(192,124,144,.15),inset 0 1px 0 rgba(255,255,255,.88);
}
.product-card[data-swipe-id]::after,
.cart-line[data-swipe-id]::after {
  content:attr(data-feedback);
  position:absolute;top:16px;left:16px;z-index:6;
  padding:8px 12px;border-radius:17px 20px 18px 19px;
  border:1px solid rgba(255,255,255,.82);
  background:rgba(240,250,224,.88);color:#426823;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 7px 20px rgba(113,116,94,.14),inset 0 1px 1px rgba(255,255,255,.9);
  opacity:0;transform:translate3d(0,9px,0) scale(.93);
  transition:opacity .15s ease,transform .24s cubic-bezier(.18,.82,.22,1);
  pointer-events:none;font-weight:750;font-size:12px;letter-spacing:.02em;
}
.product-card[data-swipe-id].swipe-negative::after,
.cart-line[data-swipe-id].swipe-negative::after {background:rgba(255,239,242,.92);color:#9a5264;}
[data-swipe-id].is-dragging::after,
[data-swipe-id].swipe-confirm::after {opacity:1;transform:translate3d(0,0,0) scale(1);}
@media (prefers-reduced-motion:reduce) {
  [data-swipe-id] {transition:none!important;}
  [data-swipe-id].is-dragging {transform:none!important;}
  .product-card[data-swipe-id]::after,.cart-line[data-swipe-id]::after {transition:none!important;}
}
@media (max-width:355px) {
 .catalog-meta{gap:7px;}
 .catalog-meta small,.gesture-note{font-size:9px;}
 .cart-gesture-note{font-size:9px;}
}
.cart-supply,.order-card {position:relative;overflow:hidden;isolation:isolate;}

/* v13 — deep ambient liquid atmosphere. All layers sit BEHIND the content and
   independently from the iOS MAX-safe WebGL navigation compositor. */
.app {
  background:
    radial-gradient(ellipse 115% 47% at 72% -5%,rgba(206,230,174,.65),transparent 77%),
    radial-gradient(ellipse 88% 44% at 0% 8%,rgba(245,199,222,.68),transparent 78%),
    linear-gradient(169deg,#f6eef1 0%,#f7f4f3 34%,#f2f1eb 66%,#ecf1e0 100%);
}
.ambient {
  contain:paint;
}
.fluid-canopy {
  position:absolute;
  top:-140px;left:-22%;width:144%;height:570px;
  pointer-events:none;
  opacity:var(--liquid-top-opacity,1);
  transition:opacity .35s linear;
  transform:translateZ(0);
}
.fluid-cloud {
  position:absolute;display:block;
  filter:blur(27px);
  pointer-events:none;
  will-change:transform;
}
.fluid-cloud-a {
  width:290px;height:330px;left:-17px;top:50px;
  border-radius:51% 49% 61% 39% / 43% 59% 41% 57%;
  background:radial-gradient(ellipse at 32% 30%,rgba(253,247,246,.94),rgba(246,192,214,.64) 49%,rgba(238,167,199,.26) 73%,transparent 91%);
  animation:liquid-cloud-a 19s ease-in-out infinite alternate;
}
.fluid-cloud-b {
  width:390px;height:360px;right:-62px;top:0;
  border-radius:44% 56% 41% 59% / 60% 45% 55% 40%;
  background:radial-gradient(ellipse at 39% 39%,rgba(255,255,248,.92),rgba(202,234,164,.72) 51%,rgba(141,201,162,.27) 75%,transparent 98%);
  animation:liquid-cloud-b 23s ease-in-out infinite alternate;
}
.fluid-cloud-c {
  width:350px;height:270px;left:22%;top:246px;
  border-radius:60% 40% 54% 46% / 48% 58% 42% 52%;
  background:radial-gradient(ellipse at 64% 34%,rgba(255,250,250,.86),rgba(208,217,246,.39) 43%,rgba(245,198,225,.16) 78%,transparent);
  opacity:.85;
  animation:liquid-cloud-c 27s ease-in-out infinite alternate;
}
.fluid-light-arc {
  position:absolute;left:16%;right:0;top:90px;height:280px;
  border-radius:54% 46% 57% 43% / 35% 49% 51% 65%;
  background:conic-gradient(from 32deg at 50% 45%,rgba(255,255,255,.58),transparent 21%,rgba(255,238,246,.21) 33%,transparent 49%,rgba(255,255,255,.51) 74%,transparent 90%);
  filter:blur(36px);opacity:.52;
  transform:rotate(-14deg);
  animation:liquid-arc 29s ease-in-out infinite alternate;
}
.fluid-ribbon {
  position:absolute;left:-30%;right:-30%;top:18%;height:78%;
  background:
    radial-gradient(ellipse 25% 22% at 21% 52%,rgba(221,233,188,.37),transparent 95%),
    radial-gradient(ellipse 30% 22% at 83% 67%,rgba(238,188,217,.32),transparent 95%),
    radial-gradient(ellipse 34% 21% at 44% 89%,rgba(205,228,230,.23),transparent 95%);
  opacity:.65;filter:blur(49px);pointer-events:none;
  animation:liquid-ribbon 26s ease-in-out infinite alternate;
}
@keyframes liquid-cloud-a {
  from {transform:translate3d(-21px,var(--ambient-shift-a,0px),0) rotate(-10deg) scale(.93);border-radius:51% 49% 61% 39% / 43% 59% 41% 57%;}
  to {transform:translate3d(65px,var(--ambient-shift-a,0px),0) rotate(18deg) scale(1.11);border-radius:38% 62% 49% 51% / 63% 39% 61% 37%;}
}
@keyframes liquid-cloud-b {
  from {transform:translate3d(26px,var(--ambient-shift-b,0px),0) rotate(8deg) scale(1.05);border-radius:44% 56% 41% 59% / 60% 45% 55% 40%;}
  to {transform:translate3d(-80px,var(--ambient-shift-b,0px),0) rotate(-15deg) scale(.92);border-radius:58% 42% 55% 45% / 40% 64% 36% 60%;}
}
@keyframes liquid-cloud-c {
  from {transform:translate3d(-39px,var(--ambient-shift-c,0px),0) rotate(-18deg) scale(.94);}
  to {transform:translate3d(48px,var(--ambient-shift-c,0px),0) rotate(12deg) scale(1.12);}
}
@keyframes liquid-arc {
  from {transform:translate3d(-29px,0,0) rotate(-17deg) scale(.91);}
  to {transform:translate3d(26px,30px,0) rotate(17deg) scale(1.1);}
}
@keyframes liquid-ribbon {
  from {transform:translate3d(-19px,-9px,0) rotate(-7deg);}
  to {transform:translate3d(30px,19px,0) rotate(9deg);}
}

/* v13 — liquid glass skin instead of an outlined vector rectangle.
   A soft halo outside each card blurs its contour, while the moving shell
   forms subtle independent, non-identical rounded edges. */
.product-card,.product-card.featured,.product-card.out-of-stock,
.product-card.tall,.product-card.wide,
.cart-line,.supply-card,.order-card,.cart-summary,.cart-supply {
  position:relative;
  overflow:visible;
  isolation:isolate;
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.product-card::before,.cart-line::before,.supply-card::before,
.order-card::before,.cart-summary::before,.cart-supply::before {content:none!important;}
.fluid-surface {
  position:absolute !important;
  z-index:0 !important;
  inset:-2px -1px -2px -1px;
  display:block;
  pointer-events:none;
  border-radius:34px 27px 38px 28px / 30px 39px 27px 36px;
  background:
    radial-gradient(ellipse 130% 74% at 18% -8%,rgba(255,255,255,.72),transparent 61%),
    radial-gradient(ellipse 92% 105% at 94% 106%,rgba(217,237,195,.38),transparent 72%),
    linear-gradient(137deg,rgba(255,255,255,.68),rgba(255,255,255,.42) 53%,rgba(248,231,241,.37));
  box-shadow:inset 0 2px 3px rgba(255,255,255,.82),inset 0 -1px 3px rgba(255,255,255,.18),
    0 11px 27px rgba(89,78,84,.078),0 3px 10px rgba(96,80,86,.065);
  backdrop-filter:blur(16px) saturate(1.11);
  -webkit-backdrop-filter:blur(16px) saturate(1.11);
  transform:translateZ(0);
}
.fluid-surface::before {
  content:"";
  position:absolute;inset:-7px -7px -6px -6px;
  border-radius:inherit;
  background:
    radial-gradient(ellipse at 17% 13%,rgba(255,255,255,.89),transparent 51%),
    radial-gradient(ellipse at 89% 81%,rgba(178,220,151,.37),rgba(249,209,231,.23) 60%,transparent 91%);
  filter:blur(9px);opacity:.85;
  z-index:-1;
  pointer-events:none;
}
.fluid-surface::after {
  content:"";position:absolute;top:1px;left:8%;width:67%;height:25px;
  background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,0));
  border-radius:50%;filter:blur(9px);opacity:.72;
  pointer-events:none;
}
.product-card:nth-child(3n+2)>.fluid-surface,
.cart-line:nth-child(2n)>.fluid-surface {
  border-radius:27px 39px 29px 36px / 38px 28px 37px 29px;
  background:
    radial-gradient(ellipse 115% 92% at 12% -15%,rgba(255,255,255,.69),transparent 65%),
    radial-gradient(ellipse 95% 98% at 95% 105%,rgba(244,209,229,.31),transparent 73%),
    linear-gradient(150deg,rgba(255,255,255,.68),rgba(255,255,255,.42) 53%,rgba(226,239,205,.40));
}
.product-card:nth-child(3n)>.fluid-surface {
  border-radius:40px 29px 35px 28px / 30px 39px 32px 38px;
}
.product-card.out-of-stock>.fluid-surface {opacity:.74;}
.cart-line>.fluid-surface {border-radius:32px 38px 30px 35px / 38px 29px 38px 31px;}
.supply-card>.fluid-surface {border-radius:36px 29px 36px 30px / 29px 35px 32px 38px;}
.order-card>.fluid-surface {border-radius:28px 38px 32px 34px / 38px 29px 35px 30px;}
.cart-summary>.fluid-surface,.cart-supply>.fluid-surface {border-radius:30px 35px 32px 29px / 33px 30px 37px 29px;}
/* Cosmetic contour breathing is limited to cards near the scroll viewport. */
.fluid-in-view>.fluid-surface {
  animation:fluid-card-breathe 11.5s ease-in-out infinite alternate;
}
.product-card:nth-child(even).fluid-in-view>.fluid-surface {animation-duration:13.7s;animation-delay:-6s;}
.product-card:nth-child(3n).fluid-in-view>.fluid-surface {animation-duration:16s;animation-delay:-9s;}
@keyframes fluid-card-breathe {
  0% {border-radius:34px 27px 38px 28px / 30px 39px 27px 36px;}
  55% {border-radius:29px 38px 31px 39px / 37px 29px 38px 28px;}
  100% {border-radius:39px 30px 34px 29px / 30px 35px 39px 32px;}
}
/* Photo edges are softened to match the irregular surface without clipping controls. */
.product-card .product-photo-window {
  border:0;
  border-radius:24px 18px 26px 20px / 19px 25px 20px 26px;
  box-shadow:0 1px 8px rgba(255,255,255,.40),0 3px 13px rgba(120,102,111,.08);
}
.product-card:nth-child(2n) .product-photo-window {
  border-radius:19px 27px 20px 26px / 26px 21px 26px 20px;
}
.cart-line>img {border-radius:19px 25px 20px 24px / 25px 20px 25px 20px;}
/* More readable glass atop the luminous canopy. */
.search-field,.filter-button,.chip,.supply-pill {
  box-shadow:0 8px 24px rgba(96,79,90,.075),inset 0 1px 2px rgba(255,255,255,.74);
}
@media (prefers-reduced-motion: reduce) {
  .fluid-cloud,.fluid-ribbon,.fluid-light-arc {animation:none!important;will-change:auto!important;}
  .fluid-in-view>.fluid-surface {animation:none!important;}
  .fluid-canopy {transition:none!important;}
}