:root{
  --radius:18px;
  --ease:cubic-bezier(.25,.9,.25,1);
  --glass-light: rgba(255,255,255,0.56);
  --glass-strong: rgba(255,255,255,0.38);
  --glass-soft: rgba(255,255,255,0.25);
  --glass-border: rgba(255,255,255,0.45);
  --accent-1: #ff8658;
  --accent-2: #ffb49a;
  --bg: radial-gradient(circle at 30% 20%, #ffffff, #f6f6f8 60%);
  --text-dark: #111315;
  --text-muted: #575c61;
  --shadow-1: 0 8px 30px rgba(0,0,0,0.06);
  --shadow-2: 0 22px 60px rgba(0,0,0,0.12);
  --blur: blur(14px);
  --container: 1180px;
}

/* baseline */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--text-dark);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* container */
.wrap{max-width:var(--container);margin:40px auto;padding:22px}

/* header */
.header{
  display:flex;align-items:center;gap:18px;padding:12px 18px;
  background:var(--glass-light);border-radius:var(--radius);border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(180%);box-shadow:var(--shadow-1);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));box-shadow:0 16px 40px rgba(255,134,88,0.22)}
.brand-title{font-weight:800;font-size:18px}
.brand-sub{font-size:12px;color:var(--text-muted)}

.select,.theme-toggle{
  padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.4);
  background:var(--glass-soft);cursor:pointer;box-shadow:var(--shadow-1)
}

/* hero */
.hero{display:flex;gap:32px;align-items:center;margin-top:32px}
.hero-left{flex:1}
h1{font-weight:900;font-size:34px;margin:6px 0}
p.lead{color:var(--text-muted);max-width:60ch;margin:0}

/* showcase */
.showcase{width:380px;border-radius:22px;padding:18px;background:var(--glass-light);border:1px solid var(--glass-border);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--shadow-2);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.showcase:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 28px 80px rgba(0,0,0,0.14)}
.show-media{height:230px;border-radius:16px;overflow:hidden}
.show-media img{width:100%;height:100%;object-fit:cover}

/* grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}.hero{flex-direction:column-reverse}}

/* product card */
.card{border-radius:20px;padding:18px;background:var(--glass-light);border:1px solid var(--glass-border);backdrop-filter:blur(18px) saturate(180%);box-shadow:var(--shadow-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.card:hover{transform:translateY(-10px) scale(1.015);background:var(--glass-strong);box-shadow:0 26px 70px rgba(0,0,0,0.14)}
.thumb{aspect-ratio:1/1;border-radius:14px;overflow:hidden;margin-bottom:12px}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .thumb img{transform:scale(1.06)}
.title{font-weight:800;font-size:16px;margin-bottom:6px}
.meta{color:var(--text-muted);font-size:13px;margin-bottom:12px}
.price{font-weight:900}
.btn-primary{padding:12px 16px;border-radius:14px;border:none;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));box-shadow:0 18px 40px rgba(255,134,88,0.20);cursor:pointer}
.card-footer{margin-top:10px;display:flex;justify-content:flex-end}

/* reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* PRODUCT PAGE — GALLERY */
.gallery-main{
  width:100%;
  aspect-ratio:1/1; /* AMAZON STYLE */
  border-radius:18px;
  overflow:hidden;
  background:#eee;
  display:grid;
  place-items:center;
}
.gallery-main img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* thumbnails (fixed 1:1) */
.thumb-row{
  display:flex;
  gap:10px;
  margin-top:12px;
  overflow-x:auto;
  padding-bottom:6px;
}
.thumb-row::-webkit-scrollbar{display:none}

.thumb-item{
  aspect-ratio:1/1;
  width:78px;
  border-radius:12px;
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  flex:0 0 auto;
}
.thumb-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.thumb-item.active{border-color:var(--accent-1)}

/* box sections */
.features,.compat{
  margin-top:20px;padding:16px;border-radius:12px;
  background:var(--glass-strong);border:1px solid var(--glass-border)
}
.features h3,.compat h3{margin:0 0 8px;font-size:18px}

/* related */
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:18px;
}
.card-compact{
  padding:12px;
  border-radius:12px;
  background:var(--glass-light);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-1);
}
.card-compact img{
  aspect-ratio:1/1;
  width:100%;
  border-radius:12px;
  object-fit:cover;
}

/* sticky buy */
.sticky-buy{
  display:none;position:fixed;left:12px;right:12px;bottom:12px;
  padding:12px 14px;border-radius:12px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color:#fff;font-weight:800;box-shadow:0 18px 40px rgba(255,134,88,0.22);
  z-index:9999;align-items:center;justify-content:space-between;
}
.sticky-buy .price{font-size:18px;margin:0}
@media(max-width:820px){.sticky-buy{display:flex}}

/* ----------------------------------------------------
   FULL MOBILE OPTIMIZATION (IMAGE ABOVE TITLE)
----------------------------------------------------- */
@media(max-width:820px){

  .product-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:28px !important;
  }

  .product-grid > div{
    width:100% !important;
  }

  /* IMAGE FIRST */
  .product-gallery{order:1}
  .product-info{order:2}

  h1#title{
    font-size:24px !important;
    margin-top:14px !important;
  }

  #buyButtons{
    flex-direction:column !important;
    gap:12px !important;
  }

  #buyButtons a{
    width:100% !important;
    padding:16px !important;
    font-size:16px !important;
  }

  .thumb-row{
    gap:12px;
  }

  /* related */
  .related-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:16px !important;
  }
}

@media(max-width:480px){
  .related-grid{grid-template-columns:1fr !important}
}



/* === PRODUCT IMAGE DESKTOP FIX — AMAZON STYLE === */
@media(min-width: 821px) {

  /* Limit main product image size on desktop */
  .gallery-main {
    max-width: 480px;      /* reduce width */
    margin-bottom: 20px;
    aspect-ratio: 1/1;     /* perfect 1:1 square */
  }

  /* Keep image centered inside grid */
  .product-gallery {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  /* Reduce thumb size slightly for cleaner desktop UI */
  .thumb-item {
    width: 70px;
  }
}


/* DESKTOP FIX — Thumbnails stay under main image like Amazon */
@media(min-width: 821px) {

  .product-grid {
    display: grid !important;
    grid-template-columns: 480px 1fr !important; /* fixed left width */
    align-items: start;
    column-gap: 40px;
  }

  .product-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Force thumbnail row into its own line under main image */
  .thumb-row {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    max-width: 480px;
  }
}

.card {
  position: relative;
}

.card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}