/* Shared by every storefront theme: category navigation + sections. Themes restyle these. */
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; }
.cats[hidden], .cat[hidden] { display: none; }
.cats a, .cats button { font: inherit; color: inherit; text-decoration: none; cursor: pointer; padding: 6px 16px; border: 1px solid currentColor; border-radius: 999px; background: transparent; opacity: .8; }
.cats a:hover, .cats button:hover { opacity: 1; }
.cats .on { opacity: 1; background: var(--brand, #111); border-color: var(--brand, #111); color: var(--on-brand, #fff); }
.cat { margin-bottom: 40px; }
.cat-title { margin: 8px 0 16px; }

/* Announcement bar and social links. Playful has no --brand, so fall back to its --purple. */
.announce { margin: 0; padding: 10px 16px; text-align: center; font-size: .92rem; font-weight: 600; line-height: 1.4; background: var(--brand, var(--purple, #111)); color: var(--on-brand, #fff); }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0 0 14px; }
.socials a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
main > .socials { margin-top: 32px; }

/* Product cards open the product view; long descriptions are cut to 3 lines there (the view shows all of it) */
.card { cursor: pointer; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.card .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Product view (a <dialog>) */
body:has(.product-view[open]) { overflow: hidden; }
.product-view { width: min(960px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 16px; overflow: auto; background: #fff; color: var(--ink, #111); box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.product-view::backdrop { background: rgba(0,0,0,.55); }
.pv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.product-view .pic { aspect-ratio: 4 / 5; height: auto; border: 0; border-radius: 0; margin: 0; transform: none; }
.pv-info { display: flex; flex-direction: column; gap: 12px; padding: 40px 32px 32px; }
.pv-info h2 { margin: 0; font-size: 2rem; line-height: 1.15; }
.pv-info p { margin: 0; }
.pv-info .price { align-self: flex-start; font-size: 1.35rem; font-weight: 700; }
.pv-info .pv-cat { color: var(--muted, #666); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-info .desc > * { margin: 0; }
.pv-info .desc > * + * { margin-top: .7em; }
.pv-info .desc ul, .pv-info .desc ol { padding-left: 1.3em; }
.pv-info .desc li + li { margin-top: .25em; }
.pv-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #111; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pv-share { align-self: flex-start; margin-top: auto; padding: 10px 22px; border: 0; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; background: var(--brand, var(--purple, #111)); color: var(--on-brand, #fff); }
@media (max-width: 700px) {
  .product-view { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .pv { grid-template-columns: 1fr; }
  .pv-info { padding: 20px 20px 32px; }
}

/* Store owner's layout & font choices (data attributes on <body>); attribute selectors outrank the theme's own rules */
body[data-shape=square] .gallery .pic { aspect-ratio: 1; }
body[data-shape=portrait] .gallery .pic { aspect-ratio: 4 / 5; }
body[data-shape=landscape] .gallery .pic { aspect-ratio: 4 / 3; }
body[data-shape=circle] .gallery .pic { aspect-ratio: 1; border-radius: 50%; }
body[data-shape=circle] .gallery .dots { bottom: 10%; } /* the circle's bottom edge is too narrow for the photo dots */
@media (min-width: 900px) {
  body[data-cols="2"] .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-cols="3"] .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-cols="4"] .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body[data-cols-phone="1"] .gallery { grid-template-columns: minmax(0, 1fr); }
  body[data-cols-phone="2"] .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}
body[data-font], body[data-font] *:not(.mk-demo, .mk-demo *) { font-family: var(--f-body) !important; }
body[data-font] :is(h1, h2, h3, .brand, h1 *, h2 *, h3 *, .brand *) { font-family: var(--f-head) !important; }
@media (max-width: 700px) { .pv-close { position: fixed; } }