:root{
      --bg:#f7f9fc;           /* page bg */
      --card:#ffffff;         /* card bg */
      --muted:#555f6b;        /* secondary text */
      --text:#1e293b;         /* primary text */
      --brand:#4682B4;        /* blue */
      --brand-2:#4169E1;      /* darker blue */
      --ok:#22c55e;
      --warn:#f59e0b;
      --err:#ef4444;
      --bd:rgba(0,0,0,.08);
      --chip:rgba(37,99,235,.06);
      --shadow: 0 8px 18px rgba(0,0,0,.07);
      --radius:14px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:var(--bg);
    }
    .container{max-width:1400px;margin:40px auto;padding:0 20px}
    .breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:18px}
    .breadcrumbs a{color:var(--brand);text-decoration:none}
    .breadcrumbs a:hover{text-decoration:underline}

    .page{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:24px;
    }
    @media (max-width: 900px){
      .page{grid-template-columns: 1fr}
    }

    .card{
      background:var(--card);
      border:1px solid var(--bd);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .card .hd{
      padding:16px 20px;
      border-bottom:1px solid var(--bd);
      display:flex;align-items:center;gap:12px;
      background:linear-gradient(90deg, var(--brand), var(--brand-2));
      color:#fff;
      font-weight:600;
    }
    .pill{
      padding:4px 10px;border-radius:999px;font-size:12px;
      background:var(--chip);color:var(--brand);font-weight:500;
    }

    /* Product hero */
    .hero{
      display:grid;grid-template-columns: 1fr 1fr;gap:20px;padding:22px
    }
    @media (max-width: 780px){.hero{grid-template-columns:1fr}}
    .image{
      aspect-ratio: 4/3;
      border-radius:12px;
      border:1px solid var(--bd);
      display:grid;place-items:center;
      background:#f0f4ff;
      color:var(--muted);
      font-size:14px;
      position:relative;
        overflow: hidden;
    }
    .title{font-size:26px;font-weight:700;margin:0 0 6px}
    .subtitle{color:var(--muted);font-size:14px;margin-bottom:14px}
    .price{display:flex;align-items:baseline;gap:10px;margin:10px 0 18px}
    .price .main{font-size:28px;font-weight:800;color:var(--brand)}
    .price .per{color:var(--muted);font-size:14px}
    .badges{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
    .badge{background:var(--chip);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--brand)}
    .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
    .btn{
      appearance:none;border:0;cursor:pointer;
      padding:12px 16px;border-radius:10px;font-weight:600;
    }
    .btn.primary{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff}
    .btn.ghost{background:#fff;border:1px solid var(--bd);color:var(--brand)}

    /* Specs grid */
    .specs{padding:18px 22px;border-top:1px solid var(--bd);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media (max-width:700px){.specs{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:420px){.specs{grid-template-columns:1fr}}
    .kv{background:#f9fafb;border:1px solid var(--bd);padding:12px 14px;border-radius:10px}
    .kv .k{font-size:12px;color:var(--muted);margin-bottom:2px}
    .kv .v{font-weight:600}

    /* Gallery */
    .gallery{padding:18px 22px;border-top:1px solid var(--bd);}
    .gallery h3{margin:0 0 12px;font-size:16px;color:var(--brand)}
    .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
    .gallery-item{
      aspect-ratio:1/1;
        max-height: 280px;
      border-radius:10px;
      overflow:hidden;
      border:1px solid var(--bd);
      background:#eef2ff;
      display:flex;align-items:center;justify-content:center;
      font-size:12px;color:var(--muted);
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;   /* keeps aspect ratio, fits inside */
      object-position: center;
      background: linear-gradient(135deg, #eef2ff, #dbeafe); /* soft gradient background */
      padding: 8px; /* optional breathing room */
      border-radius: 20px; /* match parent for clean edges */
    }

    /* Right column cards */
    .section{padding:18px 20px}
    .row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd)}
    .row:last-child{border-bottom:0}
    .left{color:var(--muted)}
    .right{text-align:right;font-weight:500}

    /* Description */
    .desc{padding:18px 22px;line-height:1.6;color:var(--text)}

    /* Footer note */
    .footnote{margin-top:22px;font-size:12px;color:var(--muted);text-align:center}