/* Minimal mobile-first CSS for NC-Marketing starter */
:root{
  /* Petrol palette */
  --petrol-900: #012e2e; /* darkest */
  --petrol-700: #034f4f; /* primary */
  --petrol-500: #0a8b8b; /* accent */
  --petrol-300: #7fd6d6; /* light */

  /* Mustard / Senfgelb for CTAs */
  --mustard-500: #d6a600;
  --mustard-400: #e0b600;

  --muted:#f7f8f8;
  --text:#222;
}
*{box-sizing:border-box}
.sr-only{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:var(--text);background:#fff}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{position:sticky;top:0;background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));border-bottom:1px solid rgba(0,0,0,0.06);z-index:20}
.site-header .container{display:flex;gap:1rem;align-items:center}
.logo{font-weight:700;color:var(--petrol-700);text-decoration:none}
.search input{padding:.5rem .75rem;border:1px solid #ddd;border-radius:6px;width:100%;max-width:320px}

/* Autosuggest dropdown */
.autosuggest{box-shadow:0 8px 20px rgba(2,16,16,.08);border-radius:10px;overflow:hidden}
.autosuggest a:hover{background:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem;padding:1rem 0}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:linear-gradient(180deg,var(--petrol-700),var(--petrol-500));border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,0.06);box-shadow:0 10px 30px rgba(2,16,16,0.06);color:#fff;transition:transform .18s ease,box-shadow .18s ease}
.card a{color:inherit;text-decoration:none;display:block}
.card-image{position:relative;padding-top:100%;overflow:hidden}
.card-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:.5rem;top:.5rem;background:var(--mustard-500);color:#081414;padding:.35rem .6rem;border-radius:8px;font-size:.82rem;font-weight:700}
.badge.rating{left:.5rem;top:.5rem;background:var(--mustard-500);color:#081414}
.badge.id{right:.5rem;left:auto;background:var(--petrol-700);color:#fff;padding:.35rem .6rem;border-radius:8px;font-size:.82rem;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,0.2)}
.card-body{padding:.75rem;background:linear-gradient(180deg,transparent 0%, rgba(0,0,0,0.18) 100%)}
.card-title{font-size:1rem;margin:0 0 .25rem;color:#fff}
.card-desc{font-size:.875rem;color:rgba(255,255,255,0.95);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(2,16,16,0.14)}
.loading{text-align:center;padding:1rem;color:#666}
.cta{display:inline-block;background:var(--mustard-500);color:#081414;padding:.75rem 1rem;border-radius:10px;text-decoration:none;font-weight:700}
.cta:hover{background:var(--mustard-400)}
.product-detail .two-col{display:block}
@media(min-width:900px){.product-detail .two-col{display:flex;gap:1rem}}
.images img{width:100%;height:auto}
.gallery{max-width:780px}
.gallery-main{position:relative;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.06);border-radius:10px;overflow:hidden}
.gallery-main img{width:100%;height:auto;display:block}
.gallery-prev,.gallery-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.35);color:#fff;border:0;padding:.6rem .8rem;border-radius:6px;cursor:pointer}
.gallery-prev{left:8px}
.gallery-next{right:8px}
.gallery-thumbs{display:flex;gap:.5rem;margin-top:.5rem;overflow:auto;padding-bottom:.25rem}
.gallery-thumbs .thumb{border:0;background:transparent;padding:0;flex:0 0 64px;height:64px;border-radius:6px;overflow:hidden}
.gallery-thumbs .thumb img{width:100%;height:100%;object-fit:cover}
.meta{margin:.5rem 0}
.site-footer{padding:1rem 0;background:var(--muted);text-align:center;font-size:.9rem;color:#444}

/* Links and accents */
a{color:var(--petrol-700)}
a:hover{color:var(--petrol-500)}