/* Keep the server-rendered SEO preview in the same visual slots as the PDP. */
.product-seo-preview{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);
  grid-template-rows:auto auto 1fr;
  align-content:start;
  column-gap:clamp(24px,3.5vw,48px);
  min-height:clamp(520px,47vw,640px)
}
.product-seo-preview::before{
  content:"";
  grid-column:1;
  grid-row:1/4;
  display:block;
  height:clamp(520px,47vw,640px);
  margin-left:84px;
  border-radius:var(--radius);
  background:linear-gradient(145deg,#f8faf8,#eff4f1)
}
.product-seo-preview h1{
  grid-column:2;
  grid-row:1;
  margin:56px 30px 10px;
  font-size:clamp(26px,2.15vw,30px);
  line-height:1.16;
  letter-spacing:-.8px;
  text-wrap:balance;
  overflow-wrap:anywhere
}
.product-seo-preview p{
  grid-column:2;
  grid-row:2;
  margin:0 30px;
  color:var(--text);
  font-size:13px;
  line-height:1.5
}
@media(max-width:1000px){
  .product-seo-preview{display:block;min-height:0}
  .product-seo-preview::before{height:clamp(260px,52vw,520px);margin-left:0;margin-bottom:22px;max-width:760px}
  .product-seo-preview h1{max-width:760px;margin:0 0 10px}
  .product-seo-preview p{max-width:760px;margin:0}
}
@media(max-width:760px){
  .product-page #product-root:empty::before{min-height:270px}
  .product-seo-preview::before{height:270px;margin-bottom:65px;border-radius:20px}
  .product-seo-preview h1{margin:0 4px 6px;font-size:22px;line-height:1.2;letter-spacing:-.45px;text-wrap:initial;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .product-seo-preview p{margin:0 4px;font-size:12px;line-height:1.45}
}

/* The hero keeps its dimensions while the selected image decodes. */
.gallery-main img{opacity:0;transition:opacity 180ms ease-out}
.gallery-main img.is-ready{opacity:1}
.gallery-main .gallery-image-error{display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:var(--text);font-size:13px}
.gallery-main.image-error .gallery-image-error{display:flex}

@view-transition{navigation:auto}
.site-header{view-transition-name:korm-header}
.mobile-bottom-nav{view-transition-name:korm-bottom-nav}
::view-transition-old(korm-header),::view-transition-old(korm-bottom-nav){animation:none;opacity:0}
::view-transition-new(korm-header),::view-transition-new(korm-bottom-nav){animation:none;opacity:1}
::view-transition-old(root),::view-transition-new(root){animation:none}
@keyframes korm-out-left{to{transform:translateX(-7%);opacity:.45}}
@keyframes korm-in-right{from{transform:translateX(7%);opacity:.55}}
@keyframes korm-out-right{to{transform:translateX(7%);opacity:.45}}
@keyframes korm-in-left{from{transform:translateX(-7%);opacity:.55}}
@media(max-width:760px){
  html[data-korm-navigation="forward"]::view-transition-old(root){animation:korm-out-left 230ms cubic-bezier(.22,.61,.36,1) both}
  html[data-korm-navigation="forward"]::view-transition-new(root){animation:korm-in-right 230ms cubic-bezier(.22,.61,.36,1) both}
  html[data-korm-navigation="back"]::view-transition-old(root){animation:korm-out-right 230ms cubic-bezier(.22,.61,.36,1) both}
  html[data-korm-navigation="back"]::view-transition-new(root){animation:korm-in-left 230ms cubic-bezier(.22,.61,.36,1) both}
}
@media(prefers-reduced-motion:reduce){
  .gallery-main img{transition:none}
  html::view-transition-old(*),html::view-transition-new(*){animation:none!important}
}