/* Shop product cards (Etsy listings) */
#Shop .shop-products { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width:700px){ #Shop .shop-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width:1000px){ #Shop .shop-products { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }
#Shop .product-card a { display: flex; flex-direction: column; height: 100%; background: #fff; color: #0b0b0b; border-radius: 14px; overflow: hidden; text-decoration: none; box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .15s ease, box-shadow .2s ease; }
#Shop .product-card a:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.45); }
#Shop .product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; display: block; padding: 8px; box-sizing: border-box; }
#Shop .product-info { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; font-family: 'Lato',sans-serif; }
#Shop .product-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
#Shop .product-price { font-size: 15px; color: #444; }
#Shop .product-buy { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--clr-accent-700); }
#Shop .product-card a:hover .product-buy { text-decoration: underline; }
@media (prefers-reduced-motion: reduce){ #Shop .product-card a { transition: none; } #Shop .product-card a:hover { transform: none; } }

/* Hero on portrait screens (phones, upright tablets): show the whole widescreen video
   at the top instead of cropping it to fill the screen; title and buttons sit below it. */
@media (orientation: portrait){
  .hero { height: auto !important; min-height: 0 !important; background-color: #0f1a24 !important; padding-top: 76px; }
  .hero video { position: relative !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: contain !important; display: block; }
  .hero .hero-overlay, .hero .hero-logo { display: none; }
  .hero .hero-content { position: relative; inset: auto; padding: 28px 16px 40px; }
}