:root{
  --bg:#0b0b0c;
  --glass: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.15);
  --text:#f4f4f6;
  --muted:#cfcfd6;
  --accent:#e5c07b; /* champagne gold */
  --accent-2:#b48ead; /* plum */
  --ok:#98c379;
  --danger:#e06c75;
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

html,body {
margin:0;
height:100%;
 /*background:radial-gradient(1200px 800px at 20% -10%, rgba(229,192,123,.2), transparent 60%), radial-gradient(1000px 600px at 120% 30%, rgba(180,142,173,.16), transparent 50%), var(--bg); color:var(--text); */
 /* background: radial-gradient(1100px 760px at 25% -10%, #5a1bd6 0%, #2e0a63 42%, #130522 100%); */
 /* background: radial-gradient(1100px 760px at 25% -10%, #9c0b2f 0%, #5b0a2a 45%, #21040f 100%), radial-gradient(900px 600px at 90% 120%, #d61f6a22 0%, transparent 60%); */
 background: radial-gradient(1100px 760px at 25% -10%, #7b0f59 0%, #3a0b2a 45%, #140613 100%), linear-gradient(180deg, #ff5fb833 0%, #ff9dd633 60%, transparent 100%); 
 font-family: "Avenir", Helvetica, sans-serif;
 color: white;
 }

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button, input, select, textarea{font:inherit;color:inherit;background:transparent;border:1px solid var(--stroke);border-radius:12px;padding:.8rem 1rem}
button{cursor:pointer}

button.primary, 
a.primary{
background:linear-gradient(120deg, rgba(229,192,123,.2), rgba(229,192,123,.05)); border:1px solid rgba(229,192,123,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), var(--shadow);
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
border-radius: 5px;
}

button.secondary, 
a.secondary{
border:1px solid var(--stroke);
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
border-radius: 5px;
}

.glass{background:var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border:1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow);}

.site-header{position:sticky; top:.5rem; margin:.5rem; display:flex; align-items:center; gap:.75rem; padding:.6rem .8rem; z-index:50}

.site-header .logo{font-weight:700; letter-spacing:.3px}

/* If an <img> is used, size it by width and keep aspect ratio */
.site-header .logo img {
  width: 120px;              /* set your desired width */
  height: auto;              /* auto-adjust height */
  max-width: 100%;           /* don’t overflow container */
  display: block;            /* remove inline gap */
}

.nav{display:none}

#menuToggle{font-size:1.2rem}
.cart-link{margin-left:auto; position:relative}
.badge{position:absolute; top:-8px; right:-8px; font-size:.7rem; background:var(--accent); color:#1a1a1a; border-radius:999px; padding:.1rem .35rem; border:1px solid rgba(0,0,0,.2)}

.page{padding:1rem; padding-bottom:4rem}

.hero{padding:1.2rem; display:grid; gap:.8rem}
.hero h1{font-size:1.6rem; margin:0}
.searchbar{display:flex; gap:.5rem; color:white !important}
  /*.searchbar */
   .searchplaceholdertext {
    color: white !important;
  }




/* Carousel */

.carousel {
margin-top:1rem; 
display:grid; 
grid-auto-flow:column; 
gap:.8rem; 
overflow-x:auto; 
scroll-snap-type:x mandatory; 
padding-bottom:.5rem
}

.carousel .card {
min-width:72vw; 
scroll-snap-align:start;

  border-radius: var(--radius);    /* Ensure carousel images are rounded like cards */
  overflow: hidden;          /* clip children */
}


/* Make the media container inherit rounding and clip */
.carousel .card .media {
  border-radius: inherit;
  overflow: hidden;
}

/* Image should fill and inherit rounding */
.carousel .card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* avoid square-looking letterboxing */
  border-radius: inherit;
  display: block;
}

/* Fallback: if any carousel item renders without .card structure */
.carousel img {
  border-radius: var(--radius);
}




/* Card Grid */

.grid {
display:grid; 
gap:.8rem; 
grid-template-columns: repeat(2, minmax(0,1fr)); 
margin-top:1rem
}



@media (min-width:700px){
  .nav{display:flex; gap:.6rem; margin-left:1rem}
  #menuToggle{display:none}
  .grid{grid-template-columns: repeat(3, minmax(0,1fr));}
  .hero h1{font-size:2.2rem}
}



/* Card */

.card {
border-radius:var(--radius); 
overflow:hidden; 
border:1px solid var(--stroke); 
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); 
margin-bottom: 1.0rem;
}

/* Full card */
.card .media {
aspect-ratio: 4/5; 
background: rgba(255,255,255,.05);  /* Full Card :  red for DEV*/
display:grid; 
place-items:center;
}

/* Complete Card area below image incl. CTAs */
.card .body{
padding:.8rem
}

.card .title{font-weight:600; font-size:.95rem; line-height:1.2}

/* Brand / Line 1 and Description / Line 3 */
.card .meta {
color:var(--muted); 
font-size:.85rem
}

.price {
font-weight:700;
margin-bottom: 10px
}

.toolbar{
padding: 3.0rem; 
display:grid; 
gap:.6rem
border: 2px solid yellow;
}

.filters{display:grid; 
gap:.5rem; 
grid-template-columns: repeat(2, minmax(0,1fr));
/* min-width: 300px; */
}

@media (min-width:820px){ .filters{grid-template-columns: repeat(6, minmax(0,1fr));} }

.product{display:grid; gap:1rem; padding:1rem}

.product .media {
  aspect-ratio: 4/5; 
  overflow:hidden; 
  border-radius: 16px; 
  background: rgba(255,255,255,.06);
  /* Make the product image fill the media box and center it */
  display: grid;            /* center content both ways */
  place-items: center;      /* vertical + horizontal centering */
}

  .product .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill the box; crop if needed */
  object-position: center;  /* ensure crop is centered */
  display: block;           /* remove inline-gap quirks */
}



.product .info{display:grid; gap:.6rem}
.product h1{margin:.2rem 0}
.product .buy{display:flex; gap:.6rem; align-items:center;}


.basket{padding:1rem; display:grid; gap:.8rem}
.basket-item{display:grid; grid-template-columns:64px 1fr auto; gap:.8rem; align-items:center; padding:.6rem; border-bottom:1px solid var(--stroke)}
.basket-summary{margin-top:.6rem; display:grid; gap:.2rem}
.basket-summary > div{display:flex; justify-content:space-between}
.basket-summary .total{font-size:1.2rem; font-weight:700}
.basket-actions{display:flex; gap:.6rem; justify-content:flex-end; margin-top:.6rem}

.checkout-form{display:grid; gap:1rem}
.checkout-form fieldset{border:1px solid var(--stroke); border-radius:12px; padding:1rem}
.checkout-form label{display:grid; gap:.3rem; margin:.2rem 0}
.order-result{margin-top:1rem; padding:1rem; border-radius:12px; border:1px solid var(--stroke)}

.site-footer{position:sticky; bottom:.5rem; margin:.5rem; text-align:center; padding:.7rem}
.badge-filter{display:inline-flex; gap:.4rem; align-items:center; padding:.2rem .5rem; border:1px dashed var(--stroke); border-radius:999px; font-size:.8rem; margin-right:.4rem}











/* ===== Desktop polish (≥1024px) ===== */
@media (min-width: 1024px) {
  /* Center the main content and header on wide screens */
  .site-header {
    max-width: 1200px;
    margin: .5rem auto;
    padding: .8rem 1rem;
    gap: 1rem;
  }

  .page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
  }

  /* Make the logo image a bit larger on desktop while keeping aspect ratio */
  .site-header .logo img {
    width: clamp(140px, 12vw, 180px);
    height: auto;
  }

  /* Promote the nav and give it breathing room (it already shows at ≥700px) */
  .nav {
    gap: 1rem;
    font-size: 1rem;
  }

  /* Roomier hero */
  .hero {
    padding: 2rem;
    gap: 1.2rem;
  }
  .hero h1 {
    font-size: 2.6rem;
    line-height: 1.1;
  }
  .searchbar {
    gap: .8rem;
  }
   .searchbar placeholder {
    color: white !important;
  }

  

  /* Product/card grids: go from 3 cols (at 700px) to 4 cols on desktop */
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  /* Carousel cards: stop spanning huge widths on desktop, show more items at once */
  .carousel {
    gap: 1rem;
    padding-bottom: .75rem;
  }
  .carousel .card {
    min-width: 360px; /* was ~72vw on mobile; fixed card width feels nicer on desktop */
    scroll-snap-align: start;
  }

  /* Filters: make them denser and easier to scan */
  .toolbar {
    padding: 1rem;
    gap: .8rem;
  }
  .filters {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .6rem;
  }



  /* Product detail: side-by-side layout */
  .product {
    grid-template-columns: 1fr 1.2fr;
    gap: 1.2rem;
    padding: 2rem 1.5rem;
  }
  
  .product .media {
    aspect-ratio: 3 / 4; /* a bit wider image on desktop */
    border-radius: 18px;
    /* Make the product image fill the media box and center it */
     display: grid;            /* center content both ways */
  place-items: center;      /* vertical + horizontal centering */
  }
  
  .product .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill the box; crop if needed */
  object-position: center;  /* ensure crop is centered */
  display: block;           /* remove inline-gap quirks */
}

  .product h1 {
    font-size: 2rem;
  }
  .product .buy {
    gap: .8rem;
  }



  /* Basket spacing tweaks */
  .basket {
    gap: 1rem;
    padding: 1.5rem;
  }
  .basket-item {
    grid-template-columns: 96px 1fr auto;
    gap: 1rem;
    padding: .8rem;
  }




  /* Footer: less sticky feel on desktop */
  .site-footer {
    position: static;
    margin: 2rem auto 0;
    max-width: 1200px;
    padding: 1rem;
  }
}



/* ===== Very wide screens (≥1440px) ===== */
@media (min-width: 1440px) {
  .site-header,
  .page,
  .site-footer {
    max-width: 1320px;
  }

  /* Denser product grid at very large widths */
  .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .filters {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .site-header .logo img {
    width: clamp(160px, 10vw, 200px);
  }
}




/* Add-to-basket success feedback */
button.primary.added {
  border-color: var(--ok);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 2px rgba(152,195,121,.28),
    var(--shadow);
  background: linear-gradient(120deg, rgba(152,195,121,.22), rgba(152,195,121,.08));
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}