/* Maisonblock demo stores: shared chrome for the fictional brands the live demos run in.
   Fonts are system fonts (the demos load nothing from outside the site). */
:root {
  --demo-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --demo-sans: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
}
body { font-family: var(--demo-sans); }
.ds-head.demo-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 14px 24px; background: #fbf8f2; border-bottom: 1px solid #e6dfd2; font-size: 14px; }
.ds-head .spacer { flex: 1; }
.ds-logo { font: 400 22px/1 var(--demo-serif); letter-spacing: .14em; color: #1f1b16; text-decoration: none; white-space: nowrap; }
.ds-logo em { font-style: italic; letter-spacing: .04em; }
.ds-nav { display: flex; gap: 22px; }
.ds-nav a { color: #5b5249; text-decoration: none; font-size: 13.5px; letter-spacing: .04em; }
.ds-nav a:hover { color: #1f1b16; }
.ds-head .cart-btn { border: 1px solid #d8cfbf; background: transparent; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.ds-note { max-width: 1180px; margin: 22px auto 30px; padding: 0 20px; font-size: 12px; color: #8a8174; }

/* Brand themes */
.demo-beauty .ds-head { background: #f6efe9; border-color: #eadbd0; }
.demo-beauty .ds-logo { letter-spacing: .32em; font-size: 20px; color: #3b2a24; }
.demo-audio .ds-head { background: #0f1113; border-color: #23262a; color: #e9ecef; }
.demo-audio .ds-logo { font-family: var(--demo-sans); font-weight: 700; letter-spacing: .02em; color: #f2f4f5; }
.demo-audio .ds-nav a { color: #9aa1a8; }
.demo-audio .ds-nav a:hover { color: #fff; }
.demo-audio .ds-head .cart-btn { border-color: #3a3f45; color: #e9ecef; }
.demo-home .ds-head { background: #f3efe7; border-color: #e1d8c8; }
.demo-home .ds-logo { letter-spacing: .06em; font-size: 23px; color: #2d3a2e; }

/* Product gallery used on the product-page demos */
.ds-gallery { display: grid; gap: 12px; }
.ds-gallery-main { position: relative; overflow: hidden; border-radius: 6px; background: #ece6dc; aspect-ratio: 4 / 5; cursor: zoom-in; }
.ds-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .25s; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.ds-gallery-main.zoom img { transform: scale(1.9); }
.ds-gallery-main .ds-badge { position: absolute; left: 12px; top: 12px; z-index: 2; background: #fff; color: #1f1b16; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 3px; }
.ds-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ds-thumbs button { padding: 0; border: 1.5px solid transparent; border-radius: 5px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 1; opacity: .7; transition: opacity .2s, border-color .2s; }
.ds-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-thumbs button[aria-current=true] { border-color: #1f1b16; opacity: 1; }
.ds-thumbs button:hover { opacity: 1; }
.ds-crumbs { font-size: 12px; color: #8a8174; letter-spacing: .04em; margin: 0 0 10px; }
.ds-price { font-size: 18px; margin: 4px 0 6px; }
.ds-price s { color: #9a9088; margin-left: 8px; font-size: 15px; }
.ds-desc { color: #5b5249; font-size: 14.5px; line-height: 1.6; margin: 8px 0 4px; }
.ds-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5b5249; }
@media (max-width: 700px) {
  .ds-nav { display: none; }
  .ds-head.demo-bar { padding: 12px 16px; gap: 12px; }
  .ds-logo { font-size: 18px; }
}