/* SeafoodMeNow V278 — mobile/tablet product media fill + cinematic Watch Story visibility.
   Final-authority stylesheet loaded after legacy responsive rules and pk-cinematic.css. */

/* V338: apply the same proportional product-media fill on desktop too. */
@media (min-width:0px){
  /* Stable media box: fill every card without changing the image aspect ratio. */
  .product-card .product-image{
    position:relative!important;
    display:block!important;
    width:100%!important;
    aspect-ratio:1 / 1!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    background:#071f35!important;
  }
  .product-card .product-image>img,
  .product-card .product-image img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:translate(var(--smn-media-x,0%),var(--smn-media-y,0%)) scale(var(--smn-media-zoom,1))!important;
    transform-origin:center center!important;
    image-rendering:auto!important;
    opacity:1!important;
    visibility:visible!important;
    will-change:auto!important;
  }

  /* A few source photographs contain dark/empty perimeter pixels baked into
     the image. These focal crops remove only that internal padding. The image
     remains proportional: no independent X/Y scaling and therefore no stretch. */
  .product-image img[src*="/pk-v229/black-tiger-shrimp.webp"]{--smn-media-zoom:1.22;--smn-media-x:-4.8%;--smn-media-y:-6.0%}
  .product-image img[src*="/pk-v229/calamari-rings.webp"]{--smn-media-zoom:1.19;--smn-media-x:-3.2%;--smn-media-y:-9.5%}
  .product-image img[src*="/pk-v229/cut-crab.webp"]{--smn-media-zoom:1.28;--smn-media-x:-4.4%;--smn-media-y:8.6%}
  .product-image img[src*="/pk-v229/finger-fish-surmai-v381.webp"]{--smn-media-zoom:1.15;--smn-media-x:2.6%;--smn-media-y:-1.5%}
  .product-image img[src*="/pk-v229/jumbo-tempura-shrimps.webp"]{--smn-media-zoom:1.22;--smn-media-x:-1.8%;--smn-media-y:3.5%}
  .product-image img[src*="/pk-v229/lobster-meat.webp"]{--smn-media-zoom:1.32;--smn-media-x:-2.2%;--smn-media-y:.3%}
  .product-image img[src*="/pk-v229/salmon.webp"]{--smn-media-zoom:1.21;--smn-media-x:1.3%;--smn-media-y:6.2%}
  .product-image img[src*="/pk-v229/xl-tempura-shrimps.webp"]{--smn-media-zoom:1.17;--smn-media-x:-3.2%;--smn-media-y:-.2%}
  .product-image img[src*="/pk-v229/xlarge-shrimps.webp"]{--smn-media-zoom:1.23;--smn-media-x:-2.1%;--smn-media-y:6.8%}
  .product-image img[src*="/pk-v229/large-shrimps.webp"]{--smn-media-zoom:1.24;--smn-media-x:-1.5%;--smn-media-y:5.8%}

  .product-image img[src*="/pk-fresh-v254/black-tiger-shrimp.webp"]{--smn-media-zoom:1.23;--smn-media-x:-4.1%;--smn-media-y:-6.3%}
  .product-image img[src*="/pk-fresh-v254/calamari-rings.webp"]{--smn-media-zoom:1.27;--smn-media-x:-3.7%;--smn-media-y:-1.7%}
  .product-image img[src*="/pk-fresh-v254/croaker-cleaned.webp"]{--smn-media-zoom:1.07;--smn-media-x:-1.4%;--smn-media-y:-.2%}
  .product-image img[src*="/pk-fresh-v254/croaker-fillet.webp"]{--smn-media-zoom:1.09;--smn-media-x:-2.8%;--smn-media-y:-1.2%}
  .product-image img[src*="/pk-fresh-v254/cut-crab.webp"]{--smn-media-zoom:1.29;--smn-media-x:-4.5%;--smn-media-y:9.3%}
  .product-image img[src*="/pk-fresh-v254/finger-fish.webp"]{--smn-media-zoom:1.15;--smn-media-x:2.6%;--smn-media-y:-1.4%}
  .product-image img[src*="/pk-fresh-v254/jumbo-tempura-shrimps.webp"]{--smn-media-zoom:1.24;--smn-media-x:-2.5%;--smn-media-y:-.9%}
  .product-image img[src*="/pk-fresh-v254/large-shrimps.webp"]{--smn-media-zoom:1.24;--smn-media-x:-1.9%;--smn-media-y:5.8%}
  .product-image img[src*="/pk-fresh-v254/lobster-meat.webp"]{--smn-media-zoom:1.32;--smn-media-x:1.6%;--smn-media-y:4.0%}
  .product-image img[src*="/pk-fresh-v254/salmon.webp"]{--smn-media-zoom:1.32;--smn-media-x:16.6%;--smn-media-y:7.4%}
  .product-image img[src*="/pk-fresh-v254/xl-tempura-shrimps.webp"]{--smn-media-zoom:1.28;--smn-media-x:-4.2%;--smn-media-y:6.7%}
  .product-image img[src*="/pk-fresh-v254/xlarge-shrimps.webp"]{--smn-media-zoom:1.27;--smn-media-x:-3.7%;--smn-media-y:6.9%}
}

/* Keep the cinematic controls readable at every touch breakpoint. */
@media (max-width:767px){
  .pk-cinema-hero-actions{
    grid-template-columns:minmax(0,1fr) minmax(138px,1.08fr)!important;
    align-items:stretch!important;
  }
  .pk-cinema-watch{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    min-width:0!important;
    width:100%!important;
    overflow:visible!important;
    background:#f8fbff!important;
    color:#08253e!important;
    border:1px solid rgba(156,198,229,.82)!important;
    opacity:1!important;
    visibility:visible!important;
    -webkit-text-fill-color:#08253e!important;
  }
  .pk-cinema-watch b{
    display:inline-block!important;
    flex:0 1 auto!important;
    color:#08253e!important;
    -webkit-text-fill-color:#08253e!important;
    opacity:1!important;
    visibility:visible!important;
    font-size:.69rem!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
    text-indent:0!important;
    text-shadow:none!important;
  }
  .pk-cinema-watch .play-ring{
    display:grid!important;
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    color:#1679c7!important;
    -webkit-text-fill-color:#1679c7!important;
    background:#eef7ff!important;
    border-color:rgba(46,126,190,.25)!important;
  }
}

@media (max-width:380px){
  .pk-cinema-hero-actions{grid-template-columns:minmax(0,.96fr) minmax(132px,1.04fr)!important;gap:7px!important}
  .pk-cinema-watch{gap:6px!important;padding-inline:8px!important}
  .pk-cinema-watch b{font-size:.64rem!important;letter-spacing:.055em!important}
  .pk-cinema-watch .play-ring{flex-basis:28px!important;width:28px!important;height:28px!important}
}