/* iPhone frame shared by every page that shows an ad mockup (home page, product pages):
   titanium bezel, side buttons and a dynamic island drawn in CSS around a screenshot.
   Size it by setting --w (the phone's width) on the .phone element or a parent. */
.phone{
  position:relative; flex:none; width:var(--w, 190px); padding:calc(var(--w, 190px) * .03); box-sizing:border-box;
  border-radius:calc(var(--w, 190px) * .165);
  background:linear-gradient(145deg, #4a4c52 0%, #1a1b1e 38%, #2e3035 62%, #17181b 100%);
  box-shadow:inset 0 0 0 calc(var(--w, 190px) * .006) rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.55), 0 calc(var(--w, 190px) * .16) calc(var(--w, 190px) * .3) rgba(6,22,56,.38);
}
.phone img{ display:block; width:100%; height:auto; aspect-ratio:300/650; object-fit:cover; object-position:top center; border-radius:calc(var(--w, 190px) * .138); background:#fff; }
.phone .island{ position:absolute; left:50%; top:calc(var(--w, 190px) * .061); width:calc(var(--w, 190px) * .335); height:calc(var(--w, 190px) * .088); transform:translateX(-50%); background:#000; border-radius:999px; }
.phone::before, .phone::after{ content:""; position:absolute; width:calc(var(--w, 190px) * .014); background:#2a2c31; }
.phone::before{ left:calc(var(--w, 190px) * -.012); top:calc(var(--w, 190px) * .46); height:calc(var(--w, 190px) * .13); border-radius:3px 0 0 3px; box-shadow:0 calc(var(--w, 190px) * .17) 0 #2a2c31; }
.phone::after{ right:calc(var(--w, 190px) * -.012); top:calc(var(--w, 190px) * .62); height:calc(var(--w, 190px) * .21); border-radius:0 3px 3px 0; }