/* Amazon Product Page Template - minimal overrides
   Base styling lives in style.css.
*/

/* Base container */
.amz-wrap{max-width:1500px;margin:0 auto;padding:0 12px;}

/* Make PDP feel like Amazon: white page, no card-like containers */
.amz-pdp-page{background:#fff;}
.amz-pdp-page .container{max-width:1500px;}

/* Layout: thumbs | hero+copy | buybox */
.product-layout--amazon{
  display:grid;
  gap: 22px;
  grid-template-columns: 64px minmax(0,1fr) 300px;
  align-items:start;
}

/* Gallery */
.product-layout--amazon .product-gallery{max-width:none;}
.amz-gallery{display:flex;gap:14px;align-items:flex-start;}

.amz-thumbrail{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.amz-thumb{
  width:48px;
  height:48px;
  border:1px solid #d5d9d9;
  border-radius:8px;
  background:#fff;
  padding:4px;
  cursor:pointer;
}
.amz-thumb.is-active{outline:2px solid #007185; outline-offset:0;}
.amz-thumb img{width:100%;height:100%;object-fit:contain;display:block;}

.amz-hero{
  margin:0;
  width:min(640px, 100%);
}
.amz-hero img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  display:block;
}

/* Title area tighter */
.amz-pdp-hero{margin-top:10px;margin-bottom:6px;}
.amz-pdp-title{margin:6px 0 0;}
.hero-subtitle{margin:6px 0 0;}

/* Middle column (copy) */
.product-main .product-copy{padding-top:4px;}

/* Buybox */
.product-buybox .buybox{
  border:1px solid #d5d9d9;
  border-radius:8px;
  padding:14px;
  background:#fff;
}
.product-buybox .stock{color:#007600;font-weight:700;margin:0 0 10px;}
.product-buybox .qty{display:block;margin:8px 0 6px;font-size:13px;}
.product-buybox .qty-select{width:100%;height:34px;border:1px solid #d5d9d9;border-radius:8px;padding:0 10px;background:#fff;}
.product-buybox .btn-cart,
.product-buybox .btn-buy{display:block;width:100%;text-align:center;border-radius:24px;padding:10px 12px;font-weight:700;margin-top:10px;}

/* Amazon button colors (apply on all pages, even if global CSS is scoped to home) */
.product-buybox .btn-cart,
.mobile-buy-cta .btn-secondary,
.amz-mobile-cta .btn-cart{
  background:#ffd814;
  color:#0f1111;
  border:1px solid #fcd200;
  text-decoration:none;
}

.product-buybox .btn-buy,
.mobile-buy-cta .btn-primary,
.amz-mobile-cta .btn-buy{
  background:#ffa41c;
  color:#0f1111;
  border:1px solid #ff8f00;
  text-decoration:none;
}

.product-buybox .btn-cart:hover,
.mobile-buy-cta .btn-secondary:hover,
.amz-mobile-cta .btn-cart:hover{filter:brightness(0.98);}

.product-buybox .btn-buy:hover,
.mobile-buy-cta .btn-primary:hover,
.amz-mobile-cta .btn-buy:hover{filter:brightness(0.98);}

/* Bullets like Amazon */
.amz-bullets{margin:10px 0 0;padding-left:18px;}
.amz-bullets li{margin:8px 0;line-height:1.35;}

/* Ensure the buybox stays top-aligned like Amazon */
.product-buybox{position:sticky; top:18px; align-self:start;}

/* Mobile order: title/rating first, then gallery, then buy buttons (buybox hidden by base CSS) */
@media (max-width:1100px){
  .product-layout--amazon{grid-template-columns:1fr;}
  .product-layout--amazon .product-main{order:1;}
  .product-layout--amazon .product-gallery{order:2;}
  .product-layout--amazon .product-buybox{order:3; position:static;}
  .amz-gallery{display:none;}
  .amz-mobile-gallery{display:block;}
}

@media (min-width:1101px){
  .amz-mobile-gallery{display:none;}
}

/* Dots for mobile gallery */
.amz-mdots{display:flex;gap:6px;justify-content:center;margin:8px 0 0;}
.amz-mdot{width:6px;height:6px;border-radius:999px;background:#c9c9c9;border:0;padding:0;}
.amz-mdot.is-active{background:#0f1111;}


/* Mobile swipe track: show ONE image at a time (Amazon-like) */
.amz-mobile-gallery{background:#fff;}
.amz-mtrack{
  display:flex;
  width:100%;
  overflow:hidden;
  will-change:transform;
}
.amz-mslide{
  flex:0 0 100%;
  min-width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.amz-mslide img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  display:block;
  background:#fff;
}

/* Make sure the CTA buttons have side margins on mobile */
.mobile-buy-cta{
  padding: 0 12px;
}
.mobile-buy-cta a{
  display:block;
  width:100%;
  max-width:520px;
  margin:10px auto 0;
}