/* Fictional storefront UI. Device frames remain shared with the existing page. */
.demo-store { font-family: Arial, Helvetica, sans-serif; }
.demo-store-header { display: flex; align-items: center; justify-content: space-between; }
.demo-store .demo-wordmark { flex: none; line-height: 1; letter-spacing: -.04em; }
.demo-store .demo-wordmark small { display: block; letter-spacing: .22em; }
.demo-store-nav { display: flex; align-items: center; justify-content: center; }
.demo-store .demo-search { display: flex; align-items: center; }
.demo-store .demo-cta { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.demo-powered { text-align: center; color: #63716d; border-top: 1px solid #e8e8e4; padding: 3cqw; font-size: 2cqw; }

.demo-home { color: #363b30; background: #fffdf8; }
.demo-home .demo-store-header { height: 10cqw; gap: 5cqw; padding: 0 4cqw; }
.demo-home .demo-wordmark { font-family: Georgia, serif; font-size: 3.2cqw; }
.demo-home .demo-wordmark small { margin-top: .6cqw; font-family: Arial, sans-serif; font-size: .9cqw; }
.demo-home .icon { flex: none; width: 2.2cqw; height: 2.2cqw; }
.demo-home .demo-search { flex: 1; gap: 1cqw; padding: 1.4cqw 2cqw; border: 1px solid #e8e6df; border-radius: 10cqw; color: #74766f; font-size: 1.4cqw; }
.demo-home .demo-store-nav { gap: 5cqw; height: 5cqw; font-size: 1.3cqw; border-block: 1px solid #ece9e1; }
.demo-home-campaign { display: grid; grid-template-columns: 38% 62%; height: 34cqw; background: #f0ebdf; }
.demo-home-campaign > div { padding: 4cqw; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.demo-home-campaign small { font-size: 1cqw; letter-spacing: .13em; }
.demo-home-campaign strong { display: block; font: 4cqw/1.15 Georgia, serif; margin: 2cqw 0 0; }
.demo-home-campaign p { font-size: 1.3cqw; line-height: 1.6; margin: 1.6cqw 0; color: #615f55; }
.demo-home-campaign img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }
.demo-home .demo-cta { gap: 1cqw; background: #4b5543; color: white; padding: 1.1cqw 1.5cqw; font-size: 1.1cqw; }
.demo-home .demo-cta .icon { width: 1.4cqw; height: 1.4cqw; }
.demo-home-selection { padding: 2.4cqw 4cqw; text-align: center; }
.demo-home-selection > strong { font: 2.2cqw Georgia, serif; }
.demo-home-selection > div { display: flex; justify-content: space-around; gap: 2cqw; margin-top: 2cqw; font-size: 1.25cqw; }

.demo-fashion { background: #faf9f5; color: #292f2e; }
.demo-fashion .demo-store-header { padding: 0 5cqw; height: 13cqw; background: #222b29; color: white; }
.demo-fashion .demo-wordmark { font-size: 5.3cqw; letter-spacing: .05em; }
.demo-fashion .icon { width: 3cqw; height: 3cqw; flex: none; }
.demo-fashion .demo-store-header > span { display: flex; gap: 3cqw; }
.demo-fashion .demo-store-nav { height: 7cqw; gap: 9cqw; font-size: 2cqw; letter-spacing: .07em; }
.demo-fashion-campaign { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; }
.demo-fashion-copy { padding: 4cqw; text-align: center; }
.demo-fashion-copy small { font-size: 1.8cqw; letter-spacing: .13em; }
.demo-fashion-copy strong { display: block; font: 5cqw/1.15 Georgia, serif; margin: 2cqw 0 3cqw; }
.demo-fashion .demo-cta { padding: 2cqw 4cqw; gap: 2cqw; background: #222b29; color: white; font-size: 2.2cqw; }
.demo-fashion-categories { display: flex; justify-content: space-around; padding: 3cqw; border-top: 1px solid #dddcd5; }
.demo-fashion-categories > span { display: flex; align-items: center; gap: 3cqw; font-size: 2cqw; letter-spacing: .08em; }

.demo-grocery { position: relative; background: #fbfcf6; color: #234c38; }
.demo-grocery .demo-store-header { padding: 6cqw 5cqw 4cqw; height: 26cqw; background: #28583e; color: white; gap: 5cqw; }
.demo-grocery .demo-wordmark { font-size: 6cqw; letter-spacing: -.035em; }
.demo-grocery .icon { width: 5cqw; height: 5cqw; flex: none; }
.demo-grocery .demo-search { height: 12cqw; margin: 4cqw 5cqw 1cqw; padding: 0 3cqw; gap: 3cqw; background: white; border: 1px solid #dfe4d8; border-radius: 3cqw; font-size: 3.4cqw; color: #6e7b70; }
.demo-grocery .demo-search .icon { width: 4cqw; height: 4cqw; }
.demo-grocery .demo-store-nav { height: 12cqw; justify-content: space-around; font-size: 3cqw; }
.demo-grocery-campaign { display: block; width: 100%; height: 64cqw; object-fit: cover; }
.demo-grocery-copy { padding: 5cqw 6cqw; }
.demo-grocery-copy small { font-size: 2.3cqw; letter-spacing: .12em; }
.demo-grocery-copy strong { display: block; font: 8cqw/1.08 Georgia, serif; margin: 3cqw 0 4cqw; }
.demo-grocery .demo-cta { background: #28583e; color: white; padding: 3cqw 4cqw; gap: 5cqw; font-size: 3cqw; border-radius: 2cqw; }
.demo-grocery .demo-cta .icon { width: 4cqw; height: 4cqw; }
.demo-grocery-delivery { display: flex; align-items: center; gap: 4cqw; margin: 1cqw 5cqw 18cqw; padding: 4cqw; background: #edf1e5; border-radius: 3cqw; font-size: 3cqw; line-height: 1.5; }
.demo-grocery-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 16cqw; display: flex; align-items: center; justify-content: space-around; padding-bottom: 3cqw; border-top: 1px solid #e0e5d8; background: white; }
.demo-grocery-bottom > span { display: flex; align-items: center; flex-direction: column; gap: 1cqw; }
.demo-grocery-bottom small { font-size: 2.7cqw; }