/* Storefront Display V1.1: shared public-work-list Masonry and detail image sizing. */
body:not(.theme-admin) .work-masonry {
  display: block;
  gap: normal;
  grid-template-columns: none;
  position: relative;
  width: 100%;
}

.work-masonry.is-masonry-ready > .work-card {
  animation: none !important;
  left: 0;
  position: absolute;
  top: 0;
  transform: none !important;
  transition: none !important;
}

body:not(.theme-admin) .work-masonry .portfolio-work-card {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  transition: none !important;
}

.work-masonry .portfolio-work-card:hover,
.work-masonry .work-card:hover {
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* A masonry column is measured from the source image, never a fixed crop. */
body:not(.theme-admin) .work-masonry .work-card-link {
  display: block !important;
  grid-template-rows: none !important;
  height: auto !important;
}

body:not(.theme-admin) .work-masonry .work-card-media {
  aspect-ratio: auto !important;
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  position: relative;
  width: 100%;
}

body:not(.theme-admin) .work-masonry .work-card-media img {
  display: block;
  height: auto !important;
  inset: auto !important;
  max-width: 100%;
  object-fit: initial !important;
  object-position: initial !important;
  position: static !important;
  transition: none !important;
  width: 100% !important;
}

/* Only images taller than 9:16 receive this class. Their list preview is
   capped without changing the source asset; every ordinary image keeps its
   natural ratio through the rules above. */
body:not(.theme-admin) .work-masonry .work-card-media.is-capped {
  aspect-ratio: 9 / 16 !important;
}

body:not(.theme-admin) .work-masonry .work-card-media.is-capped img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.work-masonry .work-card-media.is-broken::after {
  color: #aab2bd;
  content: "图片加载失败";
  font-size: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.work-masonry-status { margin: 4px 0 0; text-align: center; }
.work-masonry-loading,
.work-masonry-end { color: #999; font-size: 12px; margin: 0; padding: 14px 0 6px; }
.work-masonry-loading[hidden],
.work-masonry-end[hidden] { display: none; }
.js-infinite .public-work-pagination { display: none; }

.storefront-backtop-float {
  align-items: center;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  bottom: 32px;
  box-shadow: 0 4px 14px rgba(23, 32, 42, .12);
  color: #111;
  display: inline-flex;
  font-size: 13px;
  gap: 4px;
  justify-content: center;
  opacity: 0;
  padding: 8px 16px;
  pointer-events: none;
  position: fixed;
  right: 24px;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}

.storefront-backtop-float.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.storefront-backtop-float:hover { background: #f5f6f8; }

body:not(.theme-admin) .case-detail-page .case-detail-shell .case-work-gallery-slide.active img {
  height: auto !important;
  max-height: min(78vh, 900px) !important;
  max-width: 100% !important;
  object-fit: contain;
  width: auto !important;
}

@media (min-width: 1240px) {
  .work-masonry .portfolio-work-card .work-card-body { gap: 8px; padding: 12px 12px 10px; }
  .work-masonry .portfolio-work-card h3 { font-size: 16px; min-height: 0; }
}

@media (max-width: 760px) {
  .storefront-backtop-float { bottom: calc(76px + env(safe-area-inset-bottom)); right: 12px; }
  body:not(.theme-admin) .case-detail-page .case-detail-shell .case-work-gallery-slide.active img { height: auto !important; max-height: none !important; width: 100% !important; }
}

/* Work-detail media stays visually compact without changing the original
   asset requested by the page or Lightbox. The top visual is the authoritative
   cover; uploaded work-showcase media flows through the detail narrative. */
body.theme-white:not(.theme-admin) .case-detail-page .case-detail-shell.public-flow-shell > section.case-work-gallery,
body.theme-white:not(.theme-admin) .case-detail-page .case-detail-shell.public-flow-shell > section.case-work-details {
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px !important;
  width: 100% !important;
}

body:not(.theme-admin) .case-detail-page .case-work-showcase {
  margin: 26px auto 0;
  max-width: 860px;
  width: 100%;
}

body:not(.theme-admin) .case-detail-page .case-work-showcase > h3 {
  color: #1f2937;
  font-size: 16px;
  margin: 0 0 14px;
}

body:not(.theme-admin) .case-detail-page .case-showcase-stream {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  position: static;
  width: 100%;
}

body:not(.theme-admin) .case-detail-page .case-work-details > .case-content-stream {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: static;
}

body:not(.theme-admin) .case-detail-page .case-showcase-media,
body:not(.theme-admin) .case-detail-page .case-showcase-media .zoomable-image {
  box-sizing: border-box;
  display: block;
  float: none;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  position: static;
  transform: none;
  width: 100%;
}

body:not(.theme-admin) .case-detail-page .case-showcase-media .zoomable-image {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  justify-content: center;
  padding: 0;
}

body:not(.theme-admin) .case-detail-page .case-showcase-media img,
body:not(.theme-admin) .case-detail-page .case-showcase-media video {
  display: block;
  height: auto !important;
  margin: 0 auto;
  max-width: 100% !important;
  object-fit: contain;
  width: auto !important;
}

body:not(.theme-admin) .case-detail-page .case-showcase-media video {
  display: block;
  height: auto !important;
  position: static;
  width: 100% !important;
}

body:not(.theme-admin) .case-detail-page .case-work-details .case-content-media {
  display: block;
  float: none;
  position: static;
  transform: none;
}

body:not(.theme-admin) .case-detail-page .case-work-details .case-content-media video {
  display: block;
  height: auto !important;
  position: static;
  width: 100% !important;
}

@media (max-width: 760px) {
  body.theme-white:not(.theme-admin) .case-detail-page .case-detail-shell.public-flow-shell > section.case-work-gallery,
  body.theme-white:not(.theme-admin) .case-detail-page .case-detail-shell.public-flow-shell > section.case-work-details,
  body.theme-white:not(.theme-admin) .case-detail-page .case-work-showcase {
    max-width: 100% !important;
  }

  body:not(.theme-admin) .case-detail-page .case-showcase-stream {
    gap: 16px;
  }
}

/* The toolbar owns an opaque paint layer at all times. This keeps the sticky
   state deterministic even before the scroll observer adds its elevation
   class, and prevents absolutely positioned Masonry cards from showing
   through its controls. */
html:has(.store-public-page) {
  /* Keep horizontal clipping without creating a scrolling ancestor that
     prevents the toolbar from sticking to the viewport. */
  overflow-x: clip;
}

body:not(.theme-admin):has(.store-public-page) {
  overflow: visible !important;
}

body:not(.theme-admin) .home-page-shell .category-list-toolbar {
  background: #fff;
  isolation: isolate;
  position: sticky;
  z-index: 20;
}

/* Paint the sticky surface across the viewport while leaving the toolbar's
   content box, controls and page gutters untouched. The shop page already
   clips horizontal overflow, so the scrollbar-width edge cannot create a
   horizontal scroll track. */
body:not(.theme-admin) .home-page-shell .category-list-toolbar::before {
  background: #fff;
  bottom: 0;
  content: "";
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
}

body:not(.theme-admin) .home-page-shell .design-work-section > .category-list-toolbar.is-stuck {
  backdrop-filter: none;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}