/* ============================================================
   STADLIO SHOP PAGE — dedicated design (DM Sans + Playfair)
   Redesign: cover vh, header, info bar, grid enjoy, mobile-first
   ============================================================ */

.stadlio-shop-page-wrap {
  --mp-black:   #1a1a18;
  --mp-900:    #2c2c2a;
  --mp-500:    #6b6a65;
  --mp-300:    #b4b2a9;
  --mp-50:     #faf9f6;
  --mp-white:  #ffffff;
  --mp-gold:   #d4a853;
  --mp-blue:   #1a4b8c;
  --mp-green:  #2d6a4f;
  --mp-font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mp-font-serif: 'Playfair Display', Georgia, serif;

  font-family: var(--mp-font-sans) !important;
  color: var(--mp-900) !important;
  background: var(--mp-50) !important;
  min-height: 40vh !important;
  padding: 36px 24px 60px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── BREADCRUMB ── */
.stadlio-shop-page-wrap .stadlio-shop-breadcrumb {
  font-size: 12px !important;
  color: var(--mp-300) !important;
  margin-bottom: 20px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-breadcrumb a {
  color: var(--mp-blue) !important;
  text-decoration: none !important;
}
.stadlio-shop-page-wrap .stadlio-shop-breadcrumb a:hover {
  text-decoration: underline !important;
}
.stadlio-shop-page-wrap .stadlio-shop-breadcrumb__sep {
  margin: 0 6px !important;
  opacity: 0.6 !important;
}
.stadlio-shop-page-wrap .stadlio-shop-breadcrumb__current {
  color: var(--mp-900) !important;
}

/* ── HERO / COVER ── */
.stadlio-shop-page-wrap .stadlio-shop-hero {
  margin: 0 -24px 24px !important;
  overflow: hidden !important;
}
.stadlio-shop-page-wrap .stadlio-shop-hero__cover {
  width: 100% !important;
  aspect-ratio: 21/9 !important;
  max-height: 35vh !important;
  min-height: 200px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}
.stadlio-shop-page-wrap .stadlio-shop-hero__cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
}
.stadlio-shop-page-wrap .stadlio-shop-hero__cover--placeholder {
  min-height: 200px !important;
  max-height: 35vh !important;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: relative !important;
}
.stadlio-shop-page-wrap .stadlio-shop-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.15) 0%, transparent 50%) !important;
  pointer-events: none !important;
}
.stadlio-shop-page-wrap .stadlio-shop-hero__title {
  font-family: var(--mp-font-serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--mp-900) !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  padding: 0 16px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-hero__icon {
  color: var(--mp-blue) !important;
  opacity: 0.5 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Tablet */
@media (max-width: 1023px) {
  .stadlio-shop-page-wrap .stadlio-shop-hero__cover,
  .stadlio-shop-page-wrap .stadlio-shop-hero__cover img,
  .stadlio-shop-page-wrap .stadlio-shop-hero__cover--placeholder {
    max-height: 32vh !important;
    min-height: 180px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .stadlio-shop-page-wrap {
    padding: 24px 16px 48px !important;
  }
  .stadlio-shop-page-wrap .stadlio-shop-hero {
    margin: 0 -16px 20px !important;
    border-radius: 0 !important;
  }
  .stadlio-shop-page-wrap .stadlio-shop-hero__cover,
  .stadlio-shop-page-wrap .stadlio-shop-hero__cover img,
  .stadlio-shop-page-wrap .stadlio-shop-hero__cover--placeholder {
    max-height: 30vh !important;
    min-height: 140px !important;
    border-radius: 0 !important;
  }
  .stadlio-shop-page-wrap .stadlio-shop-hero__title {
    font-size: 18px !important;
  }
}

/* ── HEADER ── */
.stadlio-shop-page-wrap .stadlio-shop-header {
  margin-bottom: 24px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-header__top {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  margin-bottom: 16px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-header__title {
  font-family: var(--mp-font-serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--mp-black) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: var(--mp-50) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-status--open {
  color: var(--mp-green) !important;
  background: #e6f4ed !important;
}
.stadlio-shop-page-wrap .stadlio-shop-status--closed {
  color: var(--mp-500) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-status__dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}
.stadlio-shop-page-wrap .stadlio-shop-status--closed .stadlio-shop-status__dot {
  opacity: 0.6 !important;
}

/* Actions */
.stadlio-shop-page-wrap .stadlio-shop-header__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  align-items: center !important;
}
.stadlio-shop-page-wrap .stadlio-shop-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--mp-font-sans) !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}
.stadlio-shop-page-wrap .stadlio-shop-btn--manage,
.stadlio-shop-page-wrap .stadlio-shop-btn--outline {
  color: var(--mp-900) !important;
  background: #fff !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-btn--manage:hover,
.stadlio-shop-page-wrap .stadlio-shop-btn--outline:hover {
  color: var(--mp-blue) !important;
  border-color: var(--mp-blue) !important;
  background: rgba(26,75,140,0.04) !important;
  box-shadow: 0 2px 8px rgba(26,75,140,0.12) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-btn--primary {
  color: #fff !important;
  background: var(--mp-blue) !important;
  border-color: var(--mp-blue) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-btn--primary:hover {
  background: #153a6e !important;
  border-color: #153a6e !important;
  box-shadow: 0 4px 12px rgba(26,75,140,0.25) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-btn--share {
  color: var(--mp-900) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-btn--share:hover {
  color: var(--mp-blue) !important;
  border-color: var(--mp-blue) !important;
  background: rgba(26,75,140,0.04) !important;
  box-shadow: 0 2px 8px rgba(26,75,140,0.12) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-btn svg {
  flex-shrink: 0 !important;
}

/* Mobile header */
@media (max-width: 767px) {
  .stadlio-shop-page-wrap .stadlio-shop-header__title {
    font-size: 22px !important;
  }
  .stadlio-shop-page-wrap .stadlio-shop-header__actions {
    gap: 8px 10px !important;
  }
  .stadlio-shop-page-wrap .stadlio-shop-btn {
    padding: 12px 20px !important;
    min-height: 44px !important;
  }
}

/* ── DESCRIPTION ── */
.stadlio-shop-page-wrap .stadlio-shop-description {
  font-size: 14px !important;
  color: var(--mp-500) !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-description p {
  margin: 0 0 0.5em !important;
}
.stadlio-shop-page-wrap .stadlio-shop-description p:last-child {
  margin-bottom: 0 !important;
}

/* ── INFO BAR ── */
.stadlio-shop-page-wrap .stadlio-shop-info {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px 24px !important;
  margin-bottom: 28px !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-info__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--mp-500) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-info__icon {
  flex-shrink: 0 !important;
  color: var(--mp-500) !important;
  margin-top: 2px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-info__item a {
  color: var(--mp-blue) !important;
  text-decoration: none !important;
}
.stadlio-shop-page-wrap .stadlio-shop-info__item a:hover {
  text-decoration: underline !important;
}
.stadlio-shop-page-wrap .stadlio-shop-info__hours {
  flex: 1 1 100% !important;
  margin-top: 8px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-info__hours-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mp-900) !important;
  margin: 0 0 10px !important;
}
.stadlio-shop-page-wrap .stadlio-opening-hours {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 6px 24px !important;
  font-size: 13px !important;
  color: var(--mp-500) !important;
}
.stadlio-shop-page-wrap .stadlio-opening-hours__day {
  font-weight: 500 !important;
  color: var(--mp-900) !important;
}

@media (max-width: 767px) {
  .stadlio-shop-page-wrap .stadlio-shop-info {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 16px 0 !important;
  }
  .stadlio-shop-page-wrap .stadlio-opening-hours {
    grid-template-columns: 80px 1fr !important;
    gap: 6px 16px !important;
  }
}

/* ── PRODUCTS SECTION ── */
.stadlio-shop-page-wrap .stadlio-shop-products__title {
  font-family: var(--mp-font-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--mp-black) !important;
  margin: 0 0 20px !important;
}

/* Grid: 4 → 3 → 2 → 1 */
.stadlio-shop-page-wrap .stadlio-shop-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 1023px) {
  .stadlio-shop-page-wrap .stadlio-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  .stadlio-shop-page-wrap .stadlio-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 479px) {
  .stadlio-shop-page-wrap .stadlio-shop-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Empty state */
.stadlio-shop-page-wrap .stadlio-shop-empty {
  text-align: center !important;
  padding: 48px 24px !important;
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px dashed rgba(0,0,0,0.12) !important;
}
.stadlio-shop-page-wrap .stadlio-shop-empty__icon {
  color: var(--mp-300) !important;
  margin-bottom: 16px !important;
}
.stadlio-shop-page-wrap .stadlio-shop-empty__msg {
  font-size: 15px !important;
  color: var(--mp-500) !important;
  margin: 0 0 20px !important;
  line-height: 1.5 !important;
}
.stadlio-shop-page-wrap .stadlio-shop-empty .stadlio-shop-btn {
  min-height: 44px !important;
}

/* ── PRODUCT CARD (enjoy) ── */
.stadlio-shop-page-wrap .stadlio-product-card {
  background: var(--mp-white) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.stadlio-shop-page-wrap .stadlio-product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 8px rgba(26,75,140,0.08) !important;
}
.stadlio-shop-page-wrap .stadlio-card-image {
  height: 180px !important;
  background: #f0ede8 !important;
  overflow: hidden !important;
}
.stadlio-shop-page-wrap .stadlio-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}
.stadlio-shop-page-wrap .stadlio-product-card:hover .stadlio-card-image img {
  transform: scale(1.05) !important;
}
.stadlio-shop-page-wrap .stadlio-card-image-placeholder--enjoy {
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
}
.stadlio-shop-page-wrap .stadlio-card-body {
  padding: 14px 16px !important;
}
.stadlio-shop-page-wrap .stadlio-card-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--mp-900) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.stadlio-shop-page-wrap .stadlio-price-main {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--mp-black) !important;
}
.stadlio-shop-page-wrap .stadlio-seller-avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  font-size: 7px !important;
}

/* Focus visible */
.stadlio-shop-page-wrap .stadlio-shop-btn:focus-visible,
.stadlio-shop-page-wrap .stadlio-shop-breadcrumb a:focus-visible,
.stadlio-shop-page-wrap .stadlio-shop-info__item a:focus-visible,
.stadlio-shop-page-wrap .stadlio-product-card a:focus-visible {
  outline: 2px solid var(--mp-blue) !important;
  outline-offset: 2px !important;
}