@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&family=Pacifico&display=swap');

:root {
  --orange: #f7a94b;
  --orange-dark: #e08f2c;
  --ink: #131313;
  --red: #c8202a;
  --red-dark: #8f1319;
  --slate: #a9a9a9;
  --cream: #fff7ec;
  --green: #1a7a3c;
  --blue: #0b7ff7;
  --bg-app: #eaeded;
  --bg-canvas: #f0eee9;
  --line: rgba(0, 0, 0, 0.09);
  --text-soft: rgba(0, 0, 0, 0.55);
  --text-softer: rgba(0, 0, 0, 0.42);
  --radius: 8px;
}

* { box-sizing: border-box; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; font: 600 10.5px/1.6 Poppins, sans-serif; }
.pill.gray { background: #f2f4f7; color: rgba(0, 0, 0, 0.5); }
.pill.green { background: #ecfdf3; color: var(--green); }
.pill.red { background: #fef3f2; color: var(--red); }
.pill.orange { background: #fff6ed; color: var(--orange-dark); }

/* .ph is a grey placeholder box sized per-context below; when a product has a real photo,
   this fills the same box rather than needing a separate image treatment per view. */
.ph { overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-app);
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.desktop-only { display: none; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

button { font-family: inherit; cursor: pointer; }

.script {
  font-family: 'Pacifico', cursive;
  color: var(--red);
}

/* ---------- Mobile app shell ---------- */

.app {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-app);
  min-height: 100vh;
  position: relative;
  padding-bottom: 78px;
}

.app-header {
  background: var(--orange);
  padding: 14px 12px 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand-mark {
  flex: none;
  line-height: 1.05;
}
.brand-mark .name {
  font: 800 12px/1.05 Poppins, sans-serif;
  color: var(--ink);
  white-space: nowrap;
}
.brand-mark .tag {
  font: 400 9.5px/1.2 'Pacifico', cursive;
  color: var(--red);
  white-space: nowrap;
}

.search-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: none;
  border-radius: 7px;
  padding: 10px 10px;
  font: 400 12px/1 Poppins, sans-serif;
  color: rgba(0, 0, 0, 0.45);
}
.search-pill input, .dt-search input {
  flex: 1; border: none; background: none; outline: none; font: inherit; color: var(--ink); min-width: 0; padding: 0;
}
.search-pill input::placeholder, .dt-search input::placeholder { color: inherit; }

.plp-empty { font: 400 12px/1.7 Poppins, sans-serif; color: rgba(0, 0, 0, 0.5); padding: 20px 0; }
.plp-empty a { font-weight: 600; }

.plp-list-card { background: #fff; border-radius: 8px; padding: 12px; display: flex; gap: 12px; margin-bottom: 10px; }
.plp-list-card .ph { flex: 0 0 104px; height: 104px; background: #ededed; border-radius: 5px; display: block; }
.plp-list-card .info { flex: 1; min-width: 0; }
.plp-list-card .name { font: 500 12.5px/1.35 Poppins, sans-serif; color: var(--ink); }
.plp-list-card .rating { font: 400 10px/1.6 Poppins, sans-serif; color: var(--red); }
.plp-list-card .rating span { color: rgba(0, 0, 0, 0.45); }
.plp-list-card .price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.plp-list-card .price { font: 700 15px/1 Poppins, sans-serif; }
.plp-list-card .mrp { font: 400 10px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.4); text-decoration: line-through; }
.plp-list-card .delivery { font: 400 10px/1.5 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6); margin-top: 4px; }
.plp-list-card .add-btn {
  display: inline-block; margin-top: 8px; min-height: 34px; background: var(--orange); border-radius: 18px;
  padding: 0 18px; font: 600 11px/34px Poppins, sans-serif; color: var(--ink); border: none;
}
.plp-result-count { font: 400 11px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.55); margin-bottom: 10px; }

.plp-filter-group { margin-bottom: 20px; }
.plp-filter-group .ttl { font: 600 10.5px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.5); margin-bottom: 9px; text-transform: uppercase; letter-spacing: .03em; }
.plp-filter-opt { display: flex; align-items: center; gap: 8px; font: 400 12px/2.1 Poppins, sans-serif; color: var(--ink); cursor: pointer; }
.plp-filter-opt input { width: 14px; height: 14px; accent-color: var(--red); cursor: pointer; flex: none; }
.plp-clear { display: inline-block; font: 600 10.5px/1 Poppins, sans-serif; color: var(--red); }

.plp-subnav {
  display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none;
  background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.plp-subnav::-webkit-scrollbar { display: none; }
.plp-subnav a {
  flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.12);
  font: 500 11px/1 Poppins, sans-serif; color: var(--ink); white-space: nowrap;
}
.plp-subnav a.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.result-bar { background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: flex; }
.rb-tab {
  flex: 1; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 5px;
  font: 500 11px/1 Poppins, sans-serif; color: var(--ink); background: none; border: none; position: relative;
}
.rb-select-wrap select { position: absolute; inset: 0; opacity: 0; width: 100%; border: none; }
.plp-filter-panel-m { background: #fff; padding: 14px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.plp-filter-panel-m .plp-filter-group:last-child { margin-bottom: 8px; }

.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: transparent;
  border: none;
  color: var(--ink);
  flex: none;
}
.back-btn { font-size: 20px; width: 30px; }

.deliver-bar {
  background: var(--orange-dark);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font: 400 10.5px/1.4 Poppins, sans-serif;
  color: var(--ink);
}
.deliver-bar .chev { margin-left: auto; color: var(--red); font-weight: 600; }

.cat-strip {
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 10px/1.2 Poppins, sans-serif;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.cat-strip img { height: 14px; width: auto; }
.cat-strip a.active { color: var(--orange); }

.feed { display: flex; flex-direction: column; gap: 10px; }

.hero-card-m { background: var(--orange); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hero-card-m .eyebrow { font: 600 12px/1.2 Poppins, sans-serif; color: var(--ink); letter-spacing: .03em; }
.hero-card-m .headline { font: 800 20px/1.15 Poppins, sans-serif; color: var(--ink); }
.hero-card-m img { width: 100%; height: auto; display: block; }
.hero-card-m .cta-m { align-self: flex-start; background: var(--ink); color: #fff; border-radius: 20px; padding: 11px 20px; font: 600 11.5px/1 Poppins, sans-serif; }

.card { background: #fff; padding: 12px; }
.card-title { font: 600 15px/1.3 Poppins, sans-serif; margin-bottom: 10px; }
.see-all { font: 500 11px/1 Poppins, sans-serif; color: var(--red); margin-top: 10px; display: inline-block; }

.tile-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile img.ph, .tile .ph { height: 104px; width: 100%; background: #ededed; border-radius: 4px; }
.tile .name { font: 400 10px/1.4 Poppins, sans-serif; color: rgba(0, 0, 0, 0.7); margin-top: 5px; height: 28px; overflow: hidden; }

.rail { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-item { flex: 0 0 112px; }
.rail-item .ph { height: 112px; width: 100%; background: #ededed; border-radius: 4px; }
.price-chip {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font: 700 10px/1 Poppins, sans-serif;
  padding: 4px 7px;
  margin-top: 6px;
  border-radius: 2px;
}
.rail-item .name { font: 400 9.5px/1.4 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6); margin-top: 4px; }

.member-banner { padding: 0; }
.member-banner .head { padding: 12px 12px 8px; font: 600 15px/1.3 Poppins, sans-serif; }
.member-banner .body {
  background: var(--red);
  color: #fff;
  padding: 14px 12px;
  font: 500 11.5px/1.6 Poppins, sans-serif;
}
.member-banner strong { font-weight: 700; font-size: 14px; }
.join-btn {
  display: inline-block;
  margin-top: 9px;
  background: #fff;
  color: var(--ink);
  border-radius: 4px;
  padding: 9px 16px;
  font: 600 11px/1 Poppins, sans-serif;
  border: none;
}

.deal-rail-item { flex: 0 0 128px; }
.deal-rail-item .ph { height: 128px; width: 100%; background: #ededed; border-radius: 4px; }
.off-chip {
  background: var(--red); color: #fff; font: 700 9px/1 Poppins, sans-serif; padding: 4px 6px; display: inline-block;
}
.deal-label { font: 400 9px/1 Poppins, sans-serif; color: var(--red); margin-left: 5px; }
.deal-price { font: 700 13px/1 Poppins, sans-serif; margin-top: 5px; }
.deal-mrp { font: 400 9px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.4); text-decoration: line-through; }
.deal-name { font: 400 9.5px/1.35 Poppins, sans-serif; color: rgba(0, 0, 0, 0.65); margin-top: 4px; height: 26px; overflow: hidden; }

.cat-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.cat-tile { display: flex; flex-direction: column; gap: 7px; align-items: center; background: none; border: none; padding: 0; }
.cat-tile .sq {
  width: 100%; aspect-ratio: 1; background: var(--ink); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.cat-tile .sq img { height: 38px; width: auto; }
.cat-tile .label { font: 400 10px/1.25 Poppins, sans-serif; color: var(--ink); text-align: center; }

.pay-section p { font: 400 10.5px/1.7 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6); margin: 6px 0 0; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pay-badge { border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 3px; padding: 6px 9px; font: 600 9px/1 Poppins, sans-serif; }

.site-footer {
  background: var(--ink); color: rgba(255, 255, 255, 0.8); padding: 16px 12px;
  font: 400 10px/1.9 Poppins, sans-serif;
}
.site-footer .head { font: 600 11px/1 Poppins, sans-serif; color: var(--orange); margin-bottom: 8px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--orange); }

.policy-section { max-width: 720px; }
.policy-section .updated { font: 400 10.5px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.45); margin-bottom: 18px; }
.policy-section h2 { font: 700 14px/1.3 Poppins, sans-serif; margin: 22px 0 8px; }
.policy-section h2:first-of-type { margin-top: 0; }
.policy-section p { font: 400 12.5px/1.8 Poppins, sans-serif; color: rgba(0, 0, 0, 0.68); margin: 0 0 4px; }

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  padding: 7px 2px calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
}
.bottom-nav a {
  flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: rgba(0, 0, 0, 0.7); font: 500 9px/1 Poppins, sans-serif;
}
.bottom-nav .dot { width: 21px; height: 21px; border-radius: 5px; background: #ededed; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bottom-nav a.active { color: var(--red); }
.bottom-nav a.active .dot { background: var(--cream); }
.bottom-nav .cart-count {
  position: absolute; top: -3px; right: 50%; margin-right: -16px;
  min-width: 15px; height: 15px; border-radius: 8px; background: var(--red); color: #fff;
  font: 700 9px/15px Poppins, sans-serif; text-align: center; padding: 0 2px;
}
.bottom-nav .dot-wrap { position: relative; }

/* Product / checkout page bits shared with mobile */
.crumb { font: 400 10.5px/1.4 Poppins, sans-serif; color: rgba(0, 0, 0, 0.5); }
.gallery-ph { height: 262px; width: 100%; background: #ededed; border-radius: 4px; margin-top: 8px; overflow: hidden; }
.gallery-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: 9px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); }
.dots span.on { background: var(--ink); }
.p-title { font: 400 14px/1.4 Poppins, sans-serif; color: var(--ink); margin-top: 12px; }
.p-brand { font: 400 10.5px/1 Poppins, sans-serif; color: var(--red); margin-top: 6px; }
.p-rating { display: flex; align-items: center; gap: 6px; margin-top: 7px; font: 400 10.5px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6); }
.p-rating .stars { color: var(--orange); }

.deal-row { display: flex; align-items: center; gap: 8px; }
.deal-badge { background: var(--red); color: #fff; font: 700 10px/1 Poppins, sans-serif; padding: 5px 7px; }
.limited { font: 400 10.5px/1 Poppins, sans-serif; color: var(--red); }
.price-row { display: flex; align-items: baseline; gap: 7px; margin-top: 9px; }
.price-row .cur { font: 400 15px/1 Poppins, sans-serif; color: var(--red); }
.price-row .amt { font: 700 30px/1 Poppins, sans-serif; }
.price-row .mrp { font: 400 10.5px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.45); }
.tax-note { font: 400 10px/1.6 Poppins, sans-serif; color: rgba(0, 0, 0, 0.55); }
.deliver-note { font: 400 11px/1.7 Poppins, sans-serif; margin-top: 10px; }
.deliver-note strong { color: var(--green); font-weight: 600; }
.deliver-loc { display: flex; align-items: center; gap: 7px; margin-top: 8px; font: 400 11px/1 Poppins, sans-serif; color: var(--red); }
.stock-ok { font: 600 11px/1 Poppins, sans-serif; color: var(--green); margin-top: 10px; }

.qty-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.qty-row .label { font: 400 11px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6); }
.qty-stepper {
  display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; min-height: 36px;
}
.qty-stepper button { background: none; border: none; padding: 0 12px; font: 600 12px/36px Poppins, sans-serif; color: var(--ink); }
.qty-stepper span { font: 600 12px/36px Poppins, sans-serif; min-width: 18px; text-align: center; }

.btn-stack { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.btn {
  min-height: 46px; border-radius: 23px; display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 Poppins, sans-serif; white-space: nowrap; border: none;
}
.btn-cart { background: var(--orange); color: var(--ink); }
.btn-buy { background: var(--ink); color: #fff; }
.btn-full { flex: 1; }
.btn:disabled { opacity: 0.6; cursor: default; }

.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; font: 400 9.5px/1.4 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6); }

.about-list { font: 400 11px/1.85 Poppins, sans-serif; color: rgba(0, 0, 0, 0.72); }

.sticky-cta {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px;
  background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.12); padding: 9px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 9px; z-index: 30;
}

/* Checkout */
.checkout-top {
  background: var(--orange); padding: 14px 12px 10px; display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 20;
}
.checkout-top .title { font: 700 14px/1 Poppins, sans-serif; }
.rzp-chip {
  margin-left: auto; display: flex; align-items: center; gap: 6px; font: 500 9.5px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6);
}
.rzp-chip .dot-sq { width: 11px; height: 11px; border-radius: 2px; background: var(--blue); }

.step-label { font: 600 12px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.5); margin-bottom: 8px; }
.addr-text { font: 400 11px/1.7 Poppins, sans-serif; color: var(--ink); }
.change-link { font: 600 10.5px/1 Poppins, sans-serif; color: var(--red); margin-top: 8px; display: inline-block; background: none; border: none; padding: 0; }

.addr-form { display: flex; flex-direction: column; gap: 10px; }
.addr-form .field-row { display: flex; gap: 10px; }
.addr-form .field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.addr-form label { font: 500 10.5px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.55); }
.addr-form input, .addr-form select, .addr-form textarea {
  font: 400 12.5px/1 Poppins, sans-serif; color: var(--ink); padding: 10px 11px;
  border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; background: #fff; width: 100%;
}
.addr-form textarea { font: 400 12.5px/1.6 Poppins, sans-serif; resize: vertical; min-height: 70px; }
.addr-form input:focus, .addr-form select:focus, .addr-form textarea:focus { outline: none; border-color: var(--red); }
.addr-form input.invalid, .addr-form select.invalid, .addr-form textarea.invalid { border-color: var(--red); background: #fff3f3; }
.addr-error { font: 500 10.5px/1.5 Poppins, sans-serif; color: var(--red); margin-top: 2px; }

.pay-method-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pay-method-row .swatch { width: 32px; height: 24px; border-radius: 3px; background: #ededed; flex: none; }
.pay-method-row .info { flex: 1; font: 500 12px/1.4 Poppins, sans-serif; }
.pay-method-row .info small { display: block; font: 400 9.5px/1.4 Poppins, sans-serif; color: rgba(0, 0, 0, 0.5); }
.pay-method-row input[type="radio"] { width: 18px; height: 18px; accent-color: var(--red); flex: none; margin: 0; }
.pay-method-row.disabled { cursor: not-allowed; opacity: .45; }
.pay-method-row.disabled input { pointer-events: none; }
.pay-method-row .tag { font: 600 9.5px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.4); white-space: nowrap; }

.arriving { font: 400 11px/1.6 Poppins, sans-serif; color: var(--green); font-weight: 600; margin-bottom: 10px; }
.cart-line { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(0, 0, 0, 0.07); }
.cart-line .ph { flex: 0 0 62px; height: 62px; background: #ededed; border-radius: 2px; }
.cart-line .info { flex: 1; }
.cart-line .name { font: 400 11px/1.4 Poppins, sans-serif; }
.cart-line .price { font: 700 12px/1 Poppins, sans-serif; margin-top: 4px; }
.cart-line .meta { font: 400 9.5px/1.5 Poppins, sans-serif; color: rgba(0, 0, 0, 0.5); }

.totals-row { display: flex; justify-content: space-between; font: 400 11px/2 Poppins, sans-serif; color: rgba(0, 0, 0, 0.7); }
.grand-row {
  display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 8px; padding-top: 9px;
}
.grand-row .lbl { font: 700 13px/1 Poppins, sans-serif; color: var(--red); }
.grand-row .val { font: 700 17px/1 Poppins, sans-serif; color: var(--red); }
.fine-print { font: 400 9px/1.6 Poppins, sans-serif; color: rgba(0, 0, 0, 0.5); margin-top: 10px; }

.pay-cta { min-height: 46px; background: var(--orange); border-radius: 23px; display: flex; align-items: center; justify-content: center; font: 700 13px/1 Poppins, sans-serif; border: none; width: 100%; color: var(--ink); }
.rzp-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font: 500 9px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.45); }

/* Razorpay-style sheet modal */
.rzp-overlay {
  position: fixed; inset: 0; background: rgba(10, 10, 10, 0.55); display: none; align-items: flex-end; justify-content: center; z-index: 100;
}
.rzp-overlay.open { display: flex; }
.rzp-sheet {
  width: 100%; max-width: 480px; background: #fff; border-radius: 16px 16px 0 0; overflow: hidden;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25); animation: slideUp .25s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rzp-sheet-head { background: var(--ink); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.rzp-sheet-head .logo-sq { width: 34px; height: 34px; border-radius: 6px; background: var(--orange); flex: none; }
.rzp-sheet-head .info { flex: 1; }
.rzp-sheet-head .info .name { font: 600 12px/1.3 Poppins, sans-serif; }
.rzp-sheet-head .info .oid { font: 400 9.5px/1.4 Poppins, sans-serif; color: rgba(255, 255, 255, 0.6); }
.rzp-sheet-head .close { background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 15px; }
.rzp-sheet-body { padding: 14px 16px; }
.rzp-sheet-body .lbl { font: 600 11px/1 Poppins, sans-serif; margin-bottom: 10px; }
.upi-apps { display: flex; gap: 10px; }
.upi-app { flex: 1; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; padding: 11px 4px; text-align: center; background: none; }
.upi-app .sw { width: 28px; height: 28px; border-radius: 7px; background: #ededed; margin: 0 auto 6px; }
.upi-app .lbl2 { font: 500 9px/1.2 Poppins, sans-serif; }
.upi-input { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; padding: 12px; margin-top: 10px; font: 400 11px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.45); }
.rzp-rows { margin-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.rzp-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 500 11.5px/1 Poppins, sans-serif; }
.rzp-row .sw2 { width: 24px; height: 24px; border-radius: 5px; background: #ededed; }
.rzp-row .chev { margin-left: auto; color: rgba(0, 0, 0, 0.3); }
.rzp-pay-btn { min-height: 48px; background: var(--blue); color: #fff; border: none; border-radius: 8px; width: 100%; font: 700 13px/1 Poppins, sans-serif; margin-top: 12px; }
.rzp-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font: 500 9px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.4); }
.rzp-fail-link { display: block; width: 100%; text-align: center; margin-top: 14px; background: none; border: none; font: 500 10px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.4); text-decoration: underline; cursor: pointer; }
.rzp-sheet-waiting { padding: 44px 24px; text-align: center; }
.rzp-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: var(--blue); margin: 0 auto 18px; animation: rzp-spin 0.8s linear infinite; }
@keyframes rzp-spin { to { transform: rotate(360deg); } }
.rzp-waiting-title { font: 700 14px/1.3 Poppins, sans-serif; color: var(--ink); margin-bottom: 8px; }
.rzp-waiting-note { font: 400 11px/1.6 Poppins, sans-serif; color: rgba(0, 0, 0, 0.55); }

.result-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.result-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 22px/1 Poppins, sans-serif; color: #fff; }
.result-icon.ok { background: var(--green); }
.result-icon.info { background: var(--blue); }
.result-icon.fail { background: var(--red); }
.result-title { font: 700 16px/1.3 Poppins, sans-serif; }
.result-body { font: 400 11px/1.8 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6); }
.result-actions { display: flex; gap: 10px; margin-top: 4px; }
.result-actions .btn { padding: 0 20px; min-height: 44px; }
.btn-outline { background: none; border: 1px solid rgba(0, 0, 0, 0.18); color: var(--ink); }

/* ---------- Desktop ---------- */

@media (min-width: 860px) {
  body { background: #fff; }
  .app { max-width: none; padding-bottom: 0; }
  .mobile-only { display: none !important; }

  .desktop-only { display: block; }

  .dt-header {
    display: flex; align-items: center; gap: 28px; padding: 12px 40px; background: #fff; border-bottom: 1px solid var(--line);
  }
  .dt-header .logo-link { display: flex; align-items: center; flex: none; }
  .dt-header .logo-img { width: 190px; flex: none; }
  .dt-header .deliver {
    display: flex; align-items: center; gap: 8px; font: 400 12px/1.3 Poppins, sans-serif; white-space: nowrap;
  }
  .dt-header .deliver .ring {
    width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 9px;
  }
  .dt-search {
    flex: 1; display: flex; align-items: center; gap: 10px; background: #f2f2f2; border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 22px; padding: 10px 18px; font: 400 13px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.45);
  }
  .dt-header-actions { display: flex; align-items: center; gap: 22px; flex: none; }
  .dt-cart {
    position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--ink);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px;
  }
  .dt-cart .cnt {
    position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--red);
    color: #fff; font: 600 9px/16px Poppins, sans-serif; text-align: center;
  }
  .dt-signin { display: flex; align-items: center; gap: 7px; font: 500 12px/1 Poppins, sans-serif; color: var(--ink); text-decoration: none; }
  .dt-signin .av { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }

  .dt-nav-img { display: block; width: 100%; background: var(--ink); }
  .dt-nav-bar { background: var(--ink); }
  .dt-nav-bar-inner {
    max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 40px;
  }
  .dt-nav-bar-inner a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.8); font: 500 12.5px/1 Poppins, sans-serif; white-space: nowrap; }
  .dt-nav-bar-inner a.active, .dt-nav-bar-inner a:hover { color: var(--orange); }
  .dt-nav-bar-inner img { height: 20px; width: auto; flex: none; }
  .dt-nav-bar-inner .nav-icon { height: 19px; width: 19px; flex: none; }

  .dt-main { max-width: 1240px; margin: 0 auto; padding: 24px 40px 40px; display: flex; flex-direction: column; gap: 20px; }

  .dt-hero {
    height: 240px; border-radius: 6px; background: var(--orange); display: flex; align-items: center;
    justify-content: space-between; text-align: center; gap: 20px; overflow: hidden; padding: 0 40px;
  }
  .dt-hero-img { height: 200px; width: auto; flex: none; }
  .dt-hero-badge { height: 150px; width: auto; flex: none; }
  .dt-hero .eyebrow { font: 600 21px/1.2 Poppins, sans-serif; letter-spacing: .02em; }
  .dt-hero .headline { font: 800 34px/1.2 Poppins, sans-serif; letter-spacing: .01em; }
  .dt-hero .cta {
    margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff;
    border-radius: 22px; padding: 12px 26px; font: 600 12px/1 Poppins, sans-serif; border: none;
  }

  .dt-strip {
    background: var(--red); color: #fff; border-radius: 4px; display: flex; align-items: center; gap: 24px;
    padding: 12px 24px; font: 500 12px/1 Poppins, sans-serif; flex-wrap: wrap;
  }
  .dt-strip strong { font-weight: 700; }
  .dt-strip .join {
    margin-left: auto; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 20px; padding: 7px 18px;
    font: 600 11px/1 Poppins, sans-serif; background: none; color: #fff;
  }

  .dt-section-head { display: flex; align-items: baseline; justify-content: space-between; }
  .dt-section-head h2 { font: 800 22px/1 Poppins, sans-serif; letter-spacing: .01em; margin: 0; }

  .dt-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .dt-pcard { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; }
  .dt-pcard .imgwrap { position: relative; }
  .dt-pcard .ph { width: 100%; aspect-ratio: 1; background: #ededed; border-radius: 5px; }
  .dt-pcard .off {
    position: absolute; top: 0; left: 0; background: var(--red); color: #fff; border-radius: 5px 0 8px 0;
    padding: 5px 7px 6px; text-align: center;
  }
  .dt-pcard .off .amt { font: 700 12px/1 Poppins, sans-serif; }
  .dt-pcard .off .lbl { font: 600 8px/1 Poppins, sans-serif; letter-spacing: .08em; margin-top: 2px; }
  .dt-pcard .name { font: 500 12px/1.4 Poppins, sans-serif; margin-top: 10px; height: 34px; overflow: hidden; }
  .dt-pcard .unit { font: 400 11px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.5); margin-top: 6px; }
  .dt-pcard .bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
  .dt-pcard .price { font: 700 15px/1 Poppins, sans-serif; }
  .dt-pcard .mrp { font: 400 11px/1.4 Poppins, sans-serif; color: rgba(0, 0, 0, 0.42); text-decoration: line-through; }
  .dt-add-btn {
    flex: none; border: 1.5px solid var(--orange); border-radius: 7px; padding: 8px 16px; font: 700 11px/1 Poppins, sans-serif;
    color: var(--ink); background: var(--cream);
  }

  .dt-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
  .dt-panel { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; padding: 18px; }
  .dt-panel.cream { background: var(--cream); }
  .dt-panel h3 { font: 700 14px/1 Poppins, sans-serif; margin: 0 0 14px; }
  .dt-kitchen-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .dt-kitchen-grid .item { display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--ink); text-decoration: none; }
  .dt-kitchen-grid .circle { width: 100%; aspect-ratio: 1; background: #ededed; border-radius: 50%; overflow: hidden; }
  .dt-kitchen-grid .circle img { width: 100%; height: 100%; object-fit: cover; }
  .dt-kitchen-grid .lbl { font: 500 11px/1.3 Poppins, sans-serif; text-align: center; }

  .dt-footer { background: var(--ink); color: #fff; padding: 26px 40px; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 20px; max-width: 1240px; margin: 0 auto; }
  .dt-footer .brand .name { font: 800 14px/1.05 Poppins, sans-serif; white-space: nowrap; }
  .dt-footer .brand .tag { font: 400 13px/1.05 'Pacifico', cursive; color: var(--orange); margin-top: 4px; }
  .dt-footer .brand .contact { font: 400 10px/1.7 Poppins, sans-serif; color: rgba(255, 255, 255, 0.6); margin-top: 10px; }
  .dt-footer .col .head { font: 600 11px/1 Poppins, sans-serif; color: var(--orange); margin-bottom: 10px; }
  .dt-footer .col a, .dt-footer .col div { font: 400 10px/1.9 Poppins, sans-serif; color: rgba(255, 255, 255, 0.72); display: block; }
  .dt-footer .col a:hover { color: var(--orange); }
  .dt-legal { background: #0b0b0b; color: rgba(255, 255, 255, 0.5); padding: 12px 40px; font: 400 9.5px/1.5 Poppins, sans-serif; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
  .dt-legal a { color: inherit; text-decoration: none; }
  .dt-legal a:hover { color: #fff; }
  .dt-legal .links a:not(:last-child)::after { content: " · "; color: inherit; }

  /* Desktop product page */
  .plp-subnav-dt { max-width: 1240px; margin: 0 auto; padding: 14px 40px 0; border-bottom: none; }
  .plp-subnav-dt a { padding: 8px 16px; font-size: 12px; }
  .plp-layout { display: flex; align-items: flex-start; gap: 32px; }
  .plp-filters { flex: 0 0 210px; }
  .plp-filters-title { font: 700 12px/1 Poppins, sans-serif; margin-bottom: 16px; }

  .plp-main { flex: 1; min-width: 0; }
  .plp-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .plp-count { font: 700 14px/1 Poppins, sans-serif; }
  .plp-count span { font-weight: 400; color: rgba(0, 0, 0, 0.5); }
  .plp-sort { display: flex; align-items: center; gap: 8px; font: 500 11px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.6); }
  .plp-sort select { font: 500 11px/1 Poppins, sans-serif; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; padding: 8px 10px; color: var(--ink); background: #fff; }
  .plp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .dt-product { max-width: 1240px; margin: 0 auto; padding: 24px 40px 40px; display: grid; grid-template-columns: 420px 1fr; gap: 40px; }
  .dt-product-cart { max-width: 1240px; margin: -16px auto 0; padding: 0 40px 40px; }
  .dt-product-cart .dt-panel { max-width: 520px; }
  .dt-product .gallery .ph { width: 100%; aspect-ratio: 1; background: #ededed; border-radius: 6px; }
  .dt-product .thumbs { display: flex; gap: 8px; margin-top: 10px; }
  .dt-product .thumbs .th { width: 64px; height: 64px; background: #ededed; border-radius: 4px; }
  .dt-product .thumbs .th.sel { border: 1.5px solid var(--orange); }
  .dt-buybox .title { font: 600 22px/1.35 Poppins, sans-serif; }
  .dt-buybox .brand { font: 400 11px/1 Poppins, sans-serif; color: var(--red); margin-top: 8px; }
  .dt-buybox .price-row { margin-top: 16px; }
  .dt-buybox .price-row .amt { font: 700 32px/1 Poppins, sans-serif; }
  .dt-info-box { background: var(--cream); border-radius: 6px; padding: 14px; margin-top: 16px; font: 400 12px/1.7 Poppins, sans-serif; }
  .dt-buy-actions { display: flex; gap: 12px; margin-top: 16px; align-items: center; }
  .dt-buy-actions .btn { border-radius: 22px; padding: 12px 28px; }

  /* Desktop checkout */
  .dt-checkout { max-width: 1000px; margin: 0 auto; padding: 24px 40px 60px; display: grid; grid-template-columns: 1fr 360px; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .dt-checkout-left { padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }
  .dt-checkout-right { border-left: 1px solid var(--line); padding: 22px; background: #fafafa; }
  .dt-checkout-topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 12px 26px; border-bottom: 1px solid var(--line); }
  .dt-steps { display: flex; align-items: center; gap: 10px; font: 600 11px/1 Poppins, sans-serif; color: rgba(0, 0, 0, 0.45); }
  .dt-steps .on { color: var(--ink); }
}






/* ── Hero scene (home.blade.php, partials/hero-sky.blade.php) ───────────────────
   The stall (hero-shelf-draw.svg) and two bamboo clumps sketch themselves in; behind them,
   Mizo hill ridges and a 30s weather loop: sun & birds → clouds gather → light rain (a puddle
   forms in front of the stall, reflecting it) → valley mist → sun again. On desktop the sky
   fades out before the headline. A puan-stripe band runs along the bottom edge. */
.hero-card-m, .dt-hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-card-m > :not(.hero-sky):not(.hero-puan), .dt-hero > :not(.hero-sky):not(.hero-puan) { position: relative; z-index: 1; }

.hero-stall { position: relative; aspect-ratio: 651 / 440; }
.hero-card-m .hero-stall { width: 100%; }
.hero-stall .stall { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.hero-card-m .hero-stall .bamboo, .hero-stall .bamboo { position: absolute; z-index: 0; bottom: 9%; width: auto; aspect-ratio: 280 / 420; display: block; overflow: visible; }
.hero-stall .bamboo.left { left: -30%; height: 150%; }
.hero-stall .bamboo.right { right: -7%; height: 104%; }
.hero-card-m .hero-stall .bamboo.left { left: -14%; height: 96%; }
.hero-card-m .hero-stall .bamboo.right { right: -12%; height: 80%; }

/* Inline line art (partials/hero-art/*): the stall's outlines draw left-to-right, then the solid
   ink fills in; each bamboo culm grows upward, nodes and leaves follow, then it sways. */
.stall-fill { fill: #131313; fill-rule: evenodd; opacity: 0; animation: art-show .6s ease-out 2.1s forwards; }
.stall-strokes { animation: art-hide .4s ease-out 2.5s forwards; }
.stall-strokes path {
  fill: none; stroke: #131313; stroke-width: 1; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: art-draw .6s cubic-bezier(.45, 0, .2, 1) var(--d) forwards;
}
.bb { animation: art-sway var(--sw) ease-in-out var(--sd) infinite alternate; }
.bb-o, .bb-i { fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: art-draw 1.3s cubic-bezier(.4, 0, .2, 1) var(--d) forwards; }
.bb-o { stroke: #131313; }
.bb-i { stroke: #fff; }
.bb-n { fill: none; stroke: #131313; stroke-width: 1.6; stroke-linecap: round; opacity: 0; animation: art-show .5s ease-out calc(var(--d) + 1s) forwards; }
.bb-l { fill: #131313; opacity: 0; animation: art-show .7s ease-out calc(var(--d) + 1.2s) forwards; }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
@keyframes art-show { to { opacity: 1; } }
@keyframes art-hide { to { opacity: 0; } }
@keyframes art-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } }

/* Rain puddle in front of the stall: a flipped copy of the stall clipped to an ellipse,
   with ripples where drops land. Grows in with the rain, dries up after the mist. */
.hero-stall .puddle {
  position: absolute; z-index: 2; left: 46%; width: 50%; bottom: -3%; height: 17%; border-radius: 50%;
  overflow: hidden; background: rgba(255, 247, 236, .5); box-shadow: inset 0 0 0 1.4px rgba(19, 19, 19, .8);
  opacity: 0; transform: scaleX(.2); animation: sky-puddle 30s ease-in-out infinite;
}
.hero-card-m .hero-stall .puddle .reflect, .hero-stall .puddle .reflect {
  position: absolute; left: -92%; top: -34%; width: 200%; height: 588%; max-width: none;
  transform: scaleY(-1); opacity: .5; filter: blur(.4px);
}
.hero-stall .puddle .ripples { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-stall .puddle .ripples ellipse {
  fill: none; stroke: #131313; stroke-width: .7; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center; animation: sky-ripple 1.4s ease-out infinite;
}
.hero-stall .puddle .ripples ellipse:nth-child(2) { animation-delay: -.5s; }
.hero-stall .puddle .ripples ellipse:nth-child(3) { animation-delay: -.95s; }

.hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dt-hero .hero-sky {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 min(370px, 36%), transparent min(450px, 44%));
          mask-image: linear-gradient(90deg, #000 0, #000 min(370px, 36%), transparent min(450px, 44%));
}
.sky-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }
.sky-hills .far { fill: #fbbd70; }
.sky-hills .mid { fill: #eea046; }
.sky-hills .near { fill: #e3902f; stroke: rgba(19, 19, 19, .35); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Striped sun sitting low behind the far ridge; sinks away while it rains. */
.sky-sun { position: absolute; top: 54px; left: min(318px, 33%); width: 64px; height: 64px; animation: sky-sun 30s ease-in-out infinite; }
.sky-sun circle { fill: #fff1d6; stroke: #131313; stroke-width: 1.4; }
.sky-sun path { stroke: #f7a94b; stroke-width: 2.6; }

.sky-birds { position: absolute; top: 16px; left: 0; width: 54px; overflow: visible; animation: sky-birds 30s linear infinite; }
.sky-birds .w {
  fill: none; stroke: #131313; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: 50% 100%; animation: sky-flap .34s ease-in-out infinite alternate;
}

.sky-cloud { position: absolute; width: 120px; height: auto; }
.sky-cloud path { fill: none; stroke: #131313; stroke-width: 1.6; stroke-linecap: round; }
.sky-cloud.storm path { stroke-width: 2.2; }
.sky-cloud.c1 { top: 10px; left: min(262px, 27%); width: 110px; animation: sky-drift 16s ease-in-out infinite alternate, sky-fair 30s ease-in-out infinite; }
.sky-cloud.c2 { top: 2px; left: 6%; width: 90px; animation: sky-drift 20s ease-in-out -7s infinite alternate, sky-fair 30s ease-in-out infinite; }
.sky-cloud.s1 { top: 0; left: 6%; width: 140px; animation: sky-drift 13s ease-in-out infinite alternate, sky-storm 30s ease-in-out infinite; }
.sky-cloud.s2 { top: 8px; left: min(250px, 26%); width: 150px; animation: sky-drift 17s ease-in-out -5s infinite alternate, sky-storm 30s ease-in-out infinite; }

.sky-tint { position: absolute; inset: 0; background: #50697a; mix-blend-mode: multiply; opacity: 0; animation: sky-tint 30s ease-in-out infinite; }
.sky-rain {
  position: absolute; inset: 0; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='110'%3E%3Cg stroke='%23131313' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M12 4l-2 16M48 42l-2 16M30 78l-2 16M62 92l-1.5 12'/%3E%3C/g%3E%3C/svg%3E");
  animation: sky-rain-fall .6s linear infinite, sky-rain 30s ease-in-out infinite;
}
.sky-mist {
  position: absolute; left: -10%; right: -10%; bottom: 4%; height: 52%; opacity: 0; filter: blur(8px);
  background:
    radial-gradient(38% 55% at 18% 62%, rgba(255, 247, 236, .95), rgba(255, 247, 236, 0) 72%),
    radial-gradient(40% 50% at 55% 70%, rgba(255, 247, 236, .9), rgba(255, 247, 236, 0) 72%),
    radial-gradient(38% 55% at 88% 58%, rgba(255, 247, 236, .95), rgba(255, 247, 236, 0) 72%);
  animation: sky-drift 16s ease-in-out infinite alternate, sky-mist 30s ease-in-out infinite;
}
/* Puanchei-style stripes: mostly white with black, red, green and yellow bands. */
.hero-puan {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 7px;
  background: repeating-linear-gradient(90deg,
    #131313 0 8px, #fff7ec 8px 12px, var(--red) 12px 18px, #fff7ec 18px 22px,
    var(--green) 22px 26px, #f3c93c 26px 29px, #fff7ec 29px 34px, #131313 34px 36px, #fff7ec 36px 44px);
}

/* Mobile: keep the sky to the right of the left-aligned headline. */
.hero-card-m .sky-sun { left: auto; right: 16px; top: 14px; width: 48px; height: 48px; }
.hero-card-m .sky-hills { height: 42%; }
.hero-card-m .sky-birds { top: 70px; }
.hero-card-m .sky-cloud.c1, .hero-card-m .sky-cloud.s1 { left: 52%; top: 58px; }
.hero-card-m .sky-cloud.c2, .hero-card-m .sky-cloud.s2 { left: 44%; top: 84px; width: 110px; }

.hero-card-m .eyebrow, .hero-card-m .headline, .hero-card-m .cta-m,
.dt-hero .eyebrow, .dt-hero .headline, .dt-hero .cta { animation: hero-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.hero-card-m .eyebrow, .dt-hero .eyebrow { animation-delay: .15s; }
.hero-card-m .headline, .dt-hero .headline { animation-delay: .3s; }
.hero-card-m .cta-m, .dt-hero .cta { animation-delay: .45s; }
.dt-hero-badge { animation: hero-stamp .45s cubic-bezier(.3, 1.4, .5, 1) 2.8s both; }

@keyframes hero-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-stamp { 0% { opacity: 0; transform: scale(1.35) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes sky-drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes sky-flap { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }
@keyframes sky-ripple { from { transform: scale(.15); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
/* One 30s weather timeline shared by every layer below. */
@keyframes sky-sun { 0%, 28% { opacity: 1; transform: none; } 38%, 82% { opacity: 0; transform: translateY(26px); } 92%, 100% { opacity: 1; transform: none; } }
@keyframes sky-birds {
  0% { transform: translate(-60px, 10px); opacity: 0; } 2% { opacity: 1; }
  14% { transform: translate(180px, -4px); } 26% { transform: translate(400px, 6px); opacity: 1; }
  30%, 100% { transform: translate(480px, 0); opacity: 0; }
}
@keyframes sky-fair { 0%, 24% { opacity: 1; } 32%, 74% { opacity: 0; } 84%, 100% { opacity: 1; } }
@keyframes sky-storm { 0%, 26% { opacity: 0; } 36%, 64% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes sky-tint { 0%, 30% { opacity: 0; } 42%, 62% { opacity: .2; } 74%, 100% { opacity: 0; } }
@keyframes sky-rain { 0%, 38% { opacity: 0; } 43%, 62% { opacity: .7; } 67%, 100% { opacity: 0; } }
@keyframes sky-rain-fall { from { background-position: 0 0; } to { background-position: -8px 110px; } }
@keyframes sky-mist { 0%, 60% { opacity: 0; } 70%, 80% { opacity: .9; } 90%, 100% { opacity: 0; } }
@keyframes sky-puddle {
  0%, 41% { opacity: 0; transform: scaleX(.2); }
  52%, 78% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: scaleX(.6); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sky *, .hero-stall .puddle, .hero-stall .puddle *, .dt-hero-badge,
  .stall-fill, .stall-strokes, .stall-strokes path, .bb, .bb-o, .bb-i, .bb-n, .bb-l,
  .hero-card-m .eyebrow, .hero-card-m .headline, .hero-card-m .cta-m,
  .dt-hero .eyebrow, .dt-hero .headline, .dt-hero .cta { animation: none; }
  .sky-birds, .sky-rain, .sky-mist, .sky-cloud.storm, .stall-strokes { display: none; }
  .stall-fill, .bb-n, .bb-l { opacity: 1; }
  .bb-o, .bb-i { stroke-dashoffset: 0; }
}