:root {
  color-scheme: light;
  --ink: #20251f;
  --muted: #74796e;
  --paper: #f7f6f1;
  --white: #fffefa;
  --green: #31483b;
  --green-dark: #263a30;
  --sage: #e4eae0;
  --line: #e6e5dc;
  --orange: #de895b;
  --display: "Manrope", "Aptos Display", sans-serif;
  --body: "DM Sans", "Aptos", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 15px/1.55 var(--body); }
button, a, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #d98a61; outline-offset: 3px; }
[hidden] { display: none !important; }
.demo-strip { height: 31px; display: flex; justify-content: center; align-items: center; gap: 9px; background: var(--green); color: #f4f5ed; letter-spacing: .13em; font-size: 9px; font-weight: 700; }
.demo-dot, .live-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #b8d3a5; }
.strip-divider { opacity: .48; }
.site-header { height: 78px; padding: 0 max(5.5vw, 28px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(32,37,31,.07); background: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 27px; height: 27px; display: grid; align-content: center; justify-items: center; gap: 3px; border-radius: 50%; background: #dce5d8; transform: rotate(-22deg); }
.brand-mark span { display: block; height: 2px; border-radius: 3px; background: var(--green); }
.brand-mark span:nth-child(1) { width: 8px; transform: translateX(2px); }
.brand-mark span:nth-child(2) { width: 13px; }
.brand-mark span:nth-child(3) { width: 8px; transform: translateX(-2px); }
.brand-name { font: 700 16px var(--display); letter-spacing: -.06em; }
.brand-name b { color: #87927c; font-weight: 600; }
.top-nav { display: flex; gap: 39px; margin-left: 68px; color: #60665d; font-size: 12px; font-weight: 600; }
.top-nav a:hover, .back-top:hover { color: var(--orange); }
.header-cart { display: inline-flex; align-items: center; gap: 8px; padding: 9px 0; font-size: 12px; font-weight: 700; }
.bag-icon { font-size: 20px; transform: rotate(180deg); line-height: 1; }
.cart-count { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 10px; }

main { width: min(1190px, calc(100% - 64px)); margin: 0 auto; }
.hero { min-height: 403px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; padding: 43px 0 47px 5.4%; }
.eyebrow { margin: 0 0 13px; color: #7a8175; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.eyebrow-line { width: 25px; height: 1px; margin: 0 9px 3px 0; display: inline-block; background: #d68b64; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 17px; font: 700 clamp(48px, 6vw, 74px)/.99 var(--display); letter-spacing: -.075em; }
h1 span { color: var(--green); }
.hero-intro { max-width: 330px; margin-bottom: 23px; color: #697067; font-size: 14px; line-height: 1.7; }
.button { min-height: 45px; padding: 0 18px; border: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; cursor: pointer; font-size: 11px; font-weight: 700; transition: background .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: #38443a; }
.button-green { color: white; background: var(--green); }
.button-green:hover { background: var(--green-dark); }
.hero-note { margin: 19px 0 0; color: #83877f; font-size: 10px; }
.sparkle { margin-right: 5px; color: var(--orange); font-size: 13px; }
.hero-art { position: relative; height: 340px; max-width: 470px; justify-self: center; width: 100%; }
.sun-disc { position: absolute; width: 245px; height: 245px; top: 43px; left: 50%; border-radius: 50%; background: #e9e9dd; transform: translateX(-45%); }
.hero-orbit { position: absolute; border: 1px solid rgba(94,110,91,.23); border-radius: 50%; transform: rotate(-28deg); }
.orbit-one { width: 345px; height: 150px; top: 104px; left: 12%; }
.orbit-two { width: 345px; height: 150px; top: 104px; left: 12%; transform: rotate(52deg); }
.hero-sticker { position: absolute; top: 46px; right: 16px; width: 92px; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #f0c18e; color: #3b493c; text-align: center; transform: rotate(11deg); box-shadow: 0 7px 18px #b28a6540; }
.hero-sticker span { font-size: 8px; font-weight: 800; letter-spacing: .07em; line-height: 1.5; }
.hero-sticker b { margin-top: 3px; font-size: 13px; }
.hero-caption { position: absolute; right: 8%; bottom: 34px; color: var(--green); font: 600 19px/1.2 var(--display); letter-spacing: -.05em; transform: rotate(-7deg); }
.hero-squiggle { position: absolute; top: 16px; left: 22%; color: #d78e68; font-size: 41px; transform: rotate(-22deg); }

.trust-row { min-height: 87px; padding: 0 5.4%; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-row > div { display: flex; align-items: center; gap: 12px; }
.trust-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d7ddd2; border-radius: 50%; color: var(--green); font-size: 9px; font-weight: 700; }
.trust-row b, .trust-row small { display: block; }
.trust-row b { font-size: 11px; }
.trust-row small { margin-top: 2px; color: #82877e; font-size: 9px; }

.shop-layout { padding: 77px 0 69px; display: grid; grid-template-columns: minmax(0,1fr) 310px; align-items: start; gap: 44px; }
.section-heading, .orders-heading { display: flex; justify-content: space-between; align-items: end; }
.section-heading { margin-bottom: 25px; }
.section-heading .eyebrow, .orders-heading .eyebrow { margin-bottom: 8px; }
h2 { margin-bottom: 0; font: 700 30px/1.15 var(--display); letter-spacing: -.06em; }
.heading-star { margin-left: 3px; color: var(--orange); font-size: 14px; vertical-align: top; }
.stock-caption { margin: 0 0 4px; color: #7d8279; font-size: 9px; }
.live-dot { margin: 0 6px 1px 0; background: #819b78; }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.catalogue-error { grid-column: 1 / -1; margin: 0; padding: 24px; background: #fffefa; color: #697067; font-size: 12px; }
.product-card { min-width: 0; background: var(--white); border: 1px solid #ecebe3; }
.product-image-wrap { height: 220px; position: relative; overflow: hidden; display: grid; place-items: center; }
.product-card.sage .product-image-wrap { background: #e8ebe2; }
.product-card.sand .product-image-wrap { background: #eee8df; }
.product-card.rose .product-image-wrap { background: #f1e6de; }
.product-number, .product-stock { position: absolute; z-index: 1; top: 12px; color: #73796f; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.product-number { left: 12px; }
.product-stock { right: 12px; padding: 5px 7px; background: #f9f8f2cf; }
.product-stock.out-of-stock { color: #a74b39; }
.product-image { width: 81%; height: 78%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.product-card:hover .product-image { transform: scale(1.035); }
.image-sparkle { position: absolute; bottom: 13px; left: 14px; color: #c58a66; font-size: 14px; }
.product-info { padding: 16px 14px 14px; }
.product-eyebrow { margin-bottom: 7px; color: #90958b; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.product-description { min-height: 30px; margin: 0 0 7px; color: #858a80; font-size: 9px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.product-info h3 { min-height: 42px; margin-bottom: 17px; font: 600 13px/1.42 var(--display); letter-spacing: -.03em; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.product-price { font: 700 20px var(--display); letter-spacing: -.06em; }
.add-button { padding: 8px 0 8px 5px; border: 0; background: transparent; color: var(--green); cursor: pointer; font-size: 9px; font-weight: 700; white-space: nowrap; }
.add-button span { margin-left: 7px; font-size: 13px; }
.add-button:hover { color: #ad6845; }
.add-button:disabled { color: #9b9d96; cursor: not-allowed; }

.cart-panel { position: sticky; top: 20px; padding: 20px; border: 1px solid #e7e6dd; background: #fffefa; }
.cart-head { padding-bottom: 17px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.cart-head .eyebrow { margin-bottom: 4px; font-size: 8px; }
.cart-head h2 { font-size: 20px; }
.cart-head h2 span { color: #8a8d84; font: 500 11px var(--body); letter-spacing: 0; }
.cart-bag-large { color: #98a292; font-size: 23px; transform: rotate(180deg); }
.cart-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-bag { color: #a7b09f; font-size: 30px; transform: rotate(180deg); }
.cart-empty p { margin: 10px 0 3px; font: 600 12px var(--display); }
.cart-empty small { max-width: 170px; color: #858980; font-size: 9px; }
.cart-item { padding: 14px 0; display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: start; gap: 10px; border-bottom: 1px solid #efeee8; }
.cart-thumb { width: 52px; height: 55px; display: grid; place-items: center; background: #efefe8; }
.cart-thumb img { width: 85%; height: 85%; object-fit: contain; mix-blend-mode: multiply; }
.cart-item-main h3 { margin: 0 0 3px; font: 600 10px/1.4 var(--display); }
.cart-item-main > span { color: #80857b; font-size: 9px; }
.cart-line-total { padding-top: 2px; font-size: 10px; }
.quantity-control { width: max-content; margin-top: 7px; display: flex; align-items: center; border: 1px solid #e6e5de; }
.quantity-control button { width: 23px; height: 22px; border: 0; background: transparent; cursor: pointer; font-size: 13px; }
.quantity-control button:disabled { color: #b9bbb4; cursor: not-allowed; }
.quantity-control span { min-width: 20px; text-align: center; font-size: 9px; }
.cart-summary { padding-top: 16px; }
.summary-row { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.summary-row strong { font: 700 17px var(--display); }
.collection-note { margin-bottom: 15px; padding: 10px; display: flex; gap: 9px; background: #f1f3ed; color: var(--green); font-size: 9px; font-weight: 700; }
.collection-note > span:first-child { color: #bf805f; }
.collection-note small { color: #878c82; font-size: 8px; font-weight: 400; }
.checkout-button { width: 100%; min-height: 43px; padding: 0 12px; font-size: 10px; }
.secure-note { margin: 11px 0 0; color: #888d83; text-align: center; font-size: 8px; }
.checkout-contact { display: grid; gap: 7px; margin: 14px 0 12px; padding: 14px; background: #f7f6f1; border: 1px solid var(--line); }
.checkout-contact .eyebrow { margin: 0 0 2px; }
.checkout-contact label { color: var(--ink); font-size: 10px; font-weight: 600; }
.checkout-contact label span { color: var(--muted); font-weight: 400; }
.checkout-contact input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid #d9ddd4; background: var(--white); color: var(--ink); font: 12px var(--body); }
.checkout-contact > small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.auth-status { margin: 0 0 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.auth-form { display: grid; gap: 8px; }
.auth-form label { color: var(--ink); font-size: 10px; font-weight: 600; }
.auth-form input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid #d9ddd4; background: var(--white); color: var(--ink); font: 12px var(--body); }
.auth-form .button { min-height: 40px; justify-content: center; font-size: 10px; }
.auth-form > small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.signed-in-email { margin: 0 0 13px; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.signed-in-email a { color: var(--green); font-weight: 700; }
.checkout-contact [hidden] { display: none !important; }

.account-page { min-height: 100vh; display: flex; flex-direction: column; }
.account-shell { width: min(850px, calc(100% - 48px)); margin: 70px auto 90px; flex: 1; }
.account-card { padding: clamp(24px, 5vw, 52px); background: var(--white); border: 1px solid var(--line); }
.account-card h1 { margin: 8px 0 12px; font: 800 clamp(38px, 7vw, 58px)/1.05 var(--display); letter-spacing: -0.065em; }
.account-intro { max-width: 460px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.account-status { margin: 22px 0; padding: 13px 15px; background: #f7f6f1; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.account-signin { display: grid; gap: 9px; max-width: 460px; }
.account-signin label { color: var(--ink); font-size: 11px; font-weight: 600; }
.account-signin input { min-height: 46px; padding: 0 12px; border: 1px solid #d9ddd4; background: var(--white); color: var(--ink); font: 13px var(--body); }
.account-signin .button { justify-content: center; min-height: 46px; margin-top: 4px; }
.account-signin > small { color: var(--muted); font-size: 10px; }
.account-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 22px 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.account-identity > span { color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.account-identity > strong { color: var(--green); font-size: 12px; overflow-wrap: anywhere; }
.account-identity .text-button { margin-left: auto; }
.account-order { margin-top: 14px; padding: 18px; border: 1px solid var(--line); }
.account-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.account-order-head > div { display: grid; gap: 5px; }
.account-order-head strong { color: var(--green); font: 700 15px var(--display); }
.account-order-head span { color: var(--muted); font-size: 10px; }
.account-order-status { padding: 5px 8px; background: #eef1e8; color: var(--green) !important; font-size: 9px !important; }
.account-order ul { margin: 14px 0; padding: 12px 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.account-order li,.account-order-total { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--ink-soft); font-size: 11px; }
.account-order-total { align-items: center; }
.account-order-total strong { color: var(--ink); font-size: 15px; }
.account-privacy { max-width: 700px; margin: 20px auto 0; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: center; }

.orders-section { padding: 4px 0 67px; }
.orders-heading { margin-bottom: 17px; }
.orders-heading h2 { font-size: 26px; }
.orders-count { margin-left: 4px; padding: 4px 7px; border-radius: 20px; background: #e9ece4; color: var(--green); font: 700 9px var(--body); vertical-align: middle; letter-spacing: 0; }
.text-button { padding: 8px 0 4px 9px; border: 0; background: transparent; color: #72786e; cursor: pointer; font-size: 9px; font-weight: 700; }
.text-button:hover { color: #a75f43; }
.text-button span { margin-left: 5px; font-size: 13px; }
.orders-list { border-top: 1px solid var(--line); }
.orders-empty { min-height: 135px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid var(--line); text-align: center; }
.orders-empty > span { color: #bd8b67; font-size: 16px; }
.orders-empty p { margin: 5px 0 2px; font: 600 11px var(--display); }
.orders-empty small { color: #858980; font-size: 9px; }
.order-card { min-height: 79px; padding: 13px 7px; display: grid; grid-template-columns: 1fr 75px 185px; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.order-id-row { display: flex; align-items: center; gap: 10px; }
.order-id { color: var(--green); font-size: 10px; font-weight: 700; }
.order-date { color: #8a8f85; font-size: 9px; }
.order-items { margin: 4px 0 0; color: #555d52; font-size: 10px; }
.order-payment { display: inline-block; margin-top: 4px; color: #9a805b; font-size: 7px; font-weight: 700; letter-spacing: .1em; }
.order-total { font: 700 14px var(--display); text-align: right; }
.status-select { width: 100%; padding: 9px 10px; border: 1px solid #dfe4da; border-radius: 0; appearance: none; background: #eef2eb; color: var(--green); cursor: pointer; font-size: 9px; font-weight: 700; }
.status-ready { border-color: #edd6b7; background: #faf2e3; color: #916a36; }
.status-collected { border-color: #d9e8d6; background: #edf5ea; color: #47704a; }
.pickup-banner { position: relative; min-height: 158px; margin-bottom: 45px; padding: 29px 45px; overflow: hidden; display: flex; align-items: center; gap: 21px; background: #e8ece4; }
.pickup-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #d5dfd0; color: var(--green); font-size: 19px; }
.pickup-banner .eyebrow { margin-bottom: 6px; }
.pickup-banner h2 { margin-bottom: 5px; font-size: 20px; }
.pickup-banner p:last-child { max-width: 490px; margin: 0; color: #71796f; font-size: 10px; }
.pickup-flower { position: absolute; right: 45px; bottom: -40px; color: #d8dfd3; font-size: 147px; line-height: 1; }
.site-footer { min-height: 75px; padding: 0 max(5.5vw,28px); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #7d8279; }
.footer-brand .brand-mark { width: 23px; height: 23px; }
.footer-brand .brand-name { font-size: 13px; }
.site-footer > p { margin: 0; font-size: 9px; }
.site-footer > p span { margin-left: 13px; color: #9a9d95; }
.back-top { font-size: 9px; font-weight: 700; }
.footer-links { display: flex; align-items: center; gap: 22px; font-size: 10px; }
.footer-links > a:first-child { color: var(--muted); }
.footer-links > a:first-child:hover { color: var(--orange); }
.toast { position: fixed; z-index: 5; right: 24px; bottom: 24px; max-width: min(340px,calc(100% - 48px)); padding: 12px 16px; background: var(--ink); color: white; font-size: 11px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.order-dialog { width: min(430px,calc(100% - 32px)); padding: 39px; border: 0; background: var(--white); color: var(--ink); text-align: center; box-shadow: 0 20px 70px #10171035; }
.order-dialog::backdrop { background: #1d2923a6; backdrop-filter: blur(3px); }
.dialog-close { position: absolute; top: 12px; right: 15px; border: 0; background: transparent; color: #737a70; cursor: pointer; font-size: 24px; }
.dialog-sparkle { width: 52px; height: 52px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: #e9eee5; color: var(--green); font-size: 21px; }
.order-dialog .eyebrow { margin-bottom: 7px; }
.order-dialog h2 { font-size: 26px; }
.order-dialog > p:not(.eyebrow) { margin: 11px auto 18px; color: #72796f; font-size: 11px; }
.order-reference { padding: 12px; background: #f1f3ed; }
.order-reference span, .order-reference strong { display: block; }
.order-reference span { color: #838a7f; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.order-reference strong { margin-top: 3px; color: var(--green); font: 700 18px var(--display); }
.order-dialog .dialog-footnote { margin: 13px 0 18px !important; font-size: 9px !important; }
.dialog-done { width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 950px) {
  .shop-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 23px; }
  .product-grid { gap: 9px; }
  .product-info { padding: 14px 11px 12px; }
  .product-info h3 { font-size: 12px; }
  .product-image-wrap { height: 190px; }
  .product-price { font-size: 18px; }
}
@media (max-width: 760px) {
  main { width: min(100% - 36px,560px); }
  .site-header { height: 67px; padding: 0 18px; }
  .top-nav { gap: 17px; margin-left: 0; font-size: 10px; }
  .top-nav a:last-child { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 34px 0 22px; }
  .hero-copy { padding: 12px 4px 0; }
  h1 { font-size: 59px; }
  .hero-art { height: 230px; max-width: 400px; margin-top: -2px; }
  .sun-disc { width: 180px; height: 180px; top: 23px; }
  .orbit-one, .orbit-two { width: 280px; height: 120px; top: 53px; left: 13%; }
  .hero-sticker { width: 72px; height: 72px; top: 19px; right: 24px; }
  .hero-sticker span { font-size: 7px; }
  .hero-caption { right: 8%; bottom: 12px; font-size: 16px; }
  .hero-squiggle { top: 5px; left: 20%; font-size: 30px; }
  .trust-row { padding: 14px 3px; grid-template-columns: 1fr; gap: 13px; }
  .trust-row > div { gap: 10px; }
  .trust-icon { width: 27px; height: 27px; }
  .shop-layout { padding: 48px 0 47px; grid-template-columns: 1fr; gap: 27px; }
  .section-heading { align-items: end; }
  h2 { font-size: 26px; }
  .product-grid { gap: 10px; }
  .product-image-wrap { height: clamp(122px,35vw,220px); }
  .product-number, .product-stock { top: 8px; font-size: 7px; }
  .product-number { left: 8px; }
  .product-stock { right: 7px; padding: 4px 5px; }
  .product-info { padding: 12px 9px 10px; }
  .product-eyebrow { font-size: 6px; letter-spacing: .08em; }
  .product-info h3 { min-height: 52px; margin-bottom: 9px; font-size: 10px; }
  .product-bottom { align-items: start; flex-direction: column; gap: 4px; }
  .product-price { font-size: 18px; }
  .add-button { padding: 4px 0; font-size: 8px; }
  .add-button span { margin-left: 4px; }
  .cart-panel { position: static; padding: 16px; }
  .cart-empty { min-height: 130px; }
  .orders-section { padding-bottom: 42px; }
  .orders-heading h2 { font-size: 22px; }
  .text-button { max-width: 135px; text-align: right; font-size: 8px; }
  .order-card { grid-template-columns: 1fr 60px; gap: 8px 12px; }
  .order-total { grid-column: 2; grid-row: 1; }
  .status-select-wrap { grid-column: 1 / -1; }
  .status-select { padding: 8px; }
  .pickup-banner { min-height: 150px; margin-bottom: 28px; padding: 22px 19px; align-items: flex-start; gap: 12px; }
  .pickup-icon { width: 35px; height: 35px; font-size: 15px; }
  .pickup-banner h2 { max-width: 240px; font-size: 17px; }
  .pickup-banner p:last-child { max-width: 260px; font-size: 9px; }
  .pickup-flower { right: 0; bottom: -25px; font-size: 100px; opacity: .8; }
  .site-footer { min-height: 84px; padding: 14px 18px; flex-wrap: wrap; gap: 8px; }
  .site-footer > p { order: 3; width: 100%; text-align: center; font-size: 8px; }
  .site-footer > p span { margin-left: 5px; }
  .back-top { font-size: 8px; }
  .order-dialog { padding: 34px 22px 24px; }
}
@media (max-width: 390px) {
  .demo-strip { font-size: 8px; letter-spacing: .08em; }
  .brand-name { font-size: 14px; }
  .top-nav { display: none; }
  .product-grid { gap: 6px; }
  .product-info { padding-left: 7px; padding-right: 7px; }
  .product-info h3 { font-size: 9px; }
  .stock-caption { font-size: 8px; }
}