/* Shared visual rules for product detail and functional catalogue pages.
   Kept in a dedicated file so the product-image treatment cannot be lost when
   the broader site stylesheet is regenerated. */
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.wordmark { grid-column: 1; justify-self: start; }
.nav-links { grid-column: 2; }
.nav-cta { grid-column: 3; justify-self: end; }

/* iPhone 18 and functional details share one edge-to-edge visual stage. */
body.product-detail-standard.product-immersive-hero .detail-image {
  background: #f5f5f7;
}
/* Extend the source artwork's color field across the complete hero stage so
   portrait assets never appear as a pasted rectangle inside a white block. */
.product-immersive-hero .detail-image {
  overflow: hidden;
  isolation: isolate;
}
body.product-detail-standard.product-functional-charger-mini-red .detail-image,
body.product-detail-standard.product-charger-mini-red .detail-image,
body.product-detail-standard.product-functional-cable-gaming .detail-image,
body.product-detail-standard.product-cable-gaming .detail-image {
  background: #dce4f4;
}
body.product-detail-standard.product-functional-charger-mini-white .detail-image,
body.product-detail-standard.product-charger-mini-white .detail-image,
body.product-detail-standard.product-functional-cable-watch .detail-image,
body.product-detail-standard.product-cable-watch .detail-image,
body.product-detail-standard.product-functional-cable-pd100w .detail-image,
body.product-detail-standard.product-cable-pd100w .detail-image {
  background: #f7f7f8;
}
body.product-detail-standard.product-functional-speaker .detail-image,
body.product-detail-standard.product-functional-audio-mini .detail-image {
  background: #202126;
}
.functional-accessories-page .section:has(.feature-band) {
  padding-top: 0;
  padding-bottom: 0;
}
.product-immersive-hero .detail-image img#product-image,
.product-immersive-hero .detail-image img#fd-hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  transform: none !important;
}

/* Wide scene compositions need their complete canvas, not a center crop. */
.product-immersive-hero:is(.product-titanium-camera,
  .product-liuli,
  .product-creative-touch,
  .product-shield-ar-easy,
  .product-shield-easy,
  .product-shield-clear,
  .product-shield-privacy-easy,
  .product-eagle-lens,
  .product-eagle-lens-metal) .detail-image img#product-image {
  object-fit: contain !important;
  padding: 20px !important;
}

/* The焕彩 hero export is a tall poster sheet (790×8770). Its approved
   card-white cut keeps the same product while giving the detail hero a usable
   portrait composition. */
.product-metallic-color .detail-image img#product-image {
  object-fit: contain !important;
  padding: 20px !important;
}

/* Functional detail pages now use the same hierarchy: advertising headline
   first, product explanation below it. */
.functional-product-detail .detail-copy #fd-tagline[hidden] {
  display: none !important;
}
.functional-product-detail .detail-copy #fd-name {
  width: min(100%, 500px);
  margin: 0 0 18px;
  font-size: clamp(48px, 5.5vw, 74px);
  line-height: 1.04;
  letter-spacing: -.06em;
  font-weight: 700;
  text-wrap: balance;
}

/* Film products have clean landscape card cuts. Fill the shared stage with
   those cuts so the product remains legible instead of floating in poster
   whitespace. */
.product-immersive-hero:is(.product-kunlun,
  .product-shield-clear,
  .product-shield-privacy,
  .product-suda) .detail-image img#product-image {
  object-fit: cover !important;
  padding: 0 !important;
}

/* Functional catalogue cards use one fixed image stage and data-driven visual
   scale values, preserving the original product proportions. */
.functional-accessories-page .product-tile img,
#computer-product-list .product-tile img {
  height: 265px;
  padding: 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  transform: translateY(var(--product-image-y, 0px)) scale(var(--product-image-scale, 1)) !important;
}
.functional-accessories-page .product-tile:hover img,
#computer-product-list .product-tile:hover img {
  transform: translateY(var(--product-image-y, 0px)) scale(calc(var(--product-image-scale, 1) * 1.025)) !important;
}
/* Match the legacy charger selector's specificity so its hard-coded scales
   cannot override the data-driven values above. */
.functional-accessories-page .product-tile[data-functional-category="charger"]:nth-child(n) img {
  transform: translateY(var(--product-image-y, 0px)) scale(var(--product-image-scale, 1)) !important;
}

/* Keep the supporting feature sentence on one line on desktop, matching the
   compact product-detail rhythm without changing the mobile reading width. */
.product-detail-standard .section-heading :is(#product-feature-copy,#fd-copy) {
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .nav-inner { display: grid; grid-template-columns: 1fr auto; }
  .wordmark { grid-column: 1; justify-self: start; }
  .menu-toggle { grid-column: 2; justify-self: end; }
  .product-detail-standard .detail-copy #product-name,
  .functional-product-detail .detail-copy #fd-name {
    font-size: clamp(34px, 9vw, 54px) !important;
    line-height: 1.08;
  }
  .product-detail-standard .section-heading :is(#product-feature-copy,#fd-copy) {
    white-space: normal;
  }
}

/* Shared detail story: whole product -> material/function -> structure.
   Supporting frames are landscape, edge-to-edge images without nested posters. */
.product-gallery .gallery-card:nth-child(n+2) {
  isolation: isolate;
  border: 0;
  background: #181a1e;
}
.product-gallery .gallery-card:nth-child(n+2) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent;
  filter: none;
  transform: none;
}
.product-gallery .gallery-card:nth-child(2) img {
  object-position: 56% center !important;
}
.product-gallery .gallery-card:nth-child(3) img {
  object-position: 58% center !important;
}
.product-gallery .gallery-card:nth-child(n+2) > div {
  z-index: 2;
  padding: 72px 28px 24px;
  color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(9, 10, 12, .08) 34%, rgba(9, 10, 12, .78) 100%);
}
.product-gallery .gallery-card:nth-child(n+2) h3 {
  margin: 0 0 6px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 650;
}
.product-gallery .gallery-card:nth-child(n+2) p {
  max-width: 360px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .product-gallery .gallery-card:nth-child(n+2) > div {
    padding: 80px 22px 22px;
  }
  .product-gallery .gallery-card:nth-child(2) img,
  .product-gallery .gallery-card:nth-child(3) img {
    object-position: 56% center !important;
  }
}

/* Final detail-hero guardrail: never crop a product off the visual stage. */
.product-immersive-hero .detail-image img#product-image,
.product-immersive-hero .detail-image img#fd-hero {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .product-immersive-hero .detail-image img#product-image,
  .product-immersive-hero .detail-image img#fd-hero {
    padding: 14px !important;
  }
}

/* Only the 54 reviewed galleries; approved samples and all other sections stay intact. */
@media (max-width: 960px) {
  .product-gallery:has(img[src^="assets/gallery-refined-20260916/"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: auto;
    height: auto !important;
    min-height: 0;
    align-items: stretch;
  }
  .product-gallery:has(img[src^="assets/gallery-refined-20260916/"]) .gallery-card:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 360px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }
  .product-gallery .gallery-card:nth-child(n+2):has(img[src^="assets/gallery-refined-20260916/"]) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    background: #181a1e;
  }
  .product-gallery .gallery-card:nth-child(n+2) img[src^="assets/gallery-refined-20260916/"] {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
    object-fit: contain !important;
    object-position: center !important;
    flex: 0 0 auto;
  }
  .product-gallery .gallery-card:nth-child(n+2):has(img[src^="assets/gallery-refined-20260916/"]) > div {
    position: relative;
    flex: 1;
    padding: 20px 22px 22px;
    background: #181a1e;
  }
  .product-gallery .gallery-card:nth-child(n+2):has(img[src^="assets/gallery-refined-20260916/"]) h3 {
    font-size: 22px;
    line-height: 1.3;
  }
}
@media (max-width: 720px) {
  .product-gallery:has(img[src^="assets/gallery-refined-20260916/"]) {
    grid-template-columns: minmax(0, 1fr);
  }
}