/* Page: Accessories — Sections 1–3 */

/* ===== SECTION 1: Cable Studio (3 images) =============================== */
.cable-studio{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.cable-studio::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 82%, rgba(127,91,255,.08), transparent 60%);
}
.cable-head .lead{ color: var(--qc-dim); }

.length-toggle{ display:grid; gap:10px; margin:8px 0 14px; }
.len-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer; margin-right:8px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.len-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.len-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.len-rail{ position:relative; height:6px; border-radius:999px; background: rgba(255,255,255,.10); overflow:hidden; }
.len-rail b{
  position:absolute; inset:0; transform-origin:left center; transform: scaleX(var(--p, .35));
  background: linear-gradient(90deg, var(--qc-accent), var(--qc-accent-2));
  transition: transform .4s cubic-bezier(.22,.9,.25,1);
}

.cable-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .cable-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .cable-grid{ grid-template-columns: 1fr; } }

.cable-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1); transition: border-color .25s ease, box-shadow .25s ease;
}
.cable-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.cbl-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }

/* ===== SECTION 2: Stands & Grips (2 images) ============================= */
.stands-grips{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.stands-grips::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 80%, rgba(86,240,255,.08), transparent 60%);
}
.sg-head .lead{ color: var(--qc-dim); }

.sg-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .sg-grid{ grid-template-columns: 1fr; } }

.sg-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sg-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.sg-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }

.sg-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.sg-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.sg-notes .meta{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 3: Protection Lab (2 images) ============================= */
.protection-lab{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.protection-lab::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 22%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 78%, rgba(127,91,255,.08), transparent 60%);
}
.pl-head .lead{ color: var(--qc-dim); }

.pl-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .pl-grid{ grid-template-columns: 1fr; } }

.protect-card{
  --tone: 32deg; /* default hue */
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background:
    radial-gradient(240px 140px at 80% 0%, hsl(var(--tone) 90% 60% / .18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.protect-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.protect-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.pl-swatches{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.pl-swatch{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pl-swatch:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.pl-swatch.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
/* ===== SECTION 4: Charging Cradles (2 images) =========================== */
.charging-cradles{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.charging-cradles::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 18%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 82%, rgba(86,240,255,.08), transparent 60%);
}
.ccr-head .lead{ color: var(--qc-dim); }

.ccr-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .ccr-grid{ grid-template-columns: 1fr; } }

.ccr-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.ccr-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.ccr-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.ccr-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.ccr-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.ccr-notes .meta{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 5: Cable Management (2 images) =========================== */
.cable-management{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.cable-management::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 14%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 82% 86%, rgba(127,91,255,.08), transparent 60%);
}
.cm-head .lead{ color: var(--qc-dim); }

.cm-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .cm-grid{ grid-template-columns: 1fr; } }

.cm-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cm-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.cm-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.cm-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.cm-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.cm-notes p{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 6: Travel Pouches (3 images) ============================= */
.travel-pouches{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.travel-pouches::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 80%, rgba(86,240,255,.08), transparent 60%);
}
.tp-head .lead{ color: var(--qc-dim); }

.tp-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .tp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .tp-grid{ grid-template-columns: 1fr; } }

.tp-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.tp-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.tp-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.tp-card .meta{ color: var(--qc-dim); margin-top:8px; }
/* ===== SECTION 7: Screen Comfort (2 images) ============================ */
.screen-comfort{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.screen-comfort::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 82%, rgba(127,91,255,.08), transparent 60%);
}
.sc-head .lead{ color: var(--qc-dim); }

.sc-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .sc-grid{ grid-template-columns: 1fr; } }

.sc-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sc-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.sc-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.sc-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.sc-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.sc-notes .meta{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 8: Spare Power (2 images) =============================== */
.spare-power{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.spare-power::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 14%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 82% 86%, rgba(86,240,255,.08), transparent 60%);
}
.sp-head .lead{ color: var(--qc-dim); }

.sp-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .sp-grid{ grid-template-columns: 1fr; } }

.sp-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sp-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.sp-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.sp-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.sp-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.sp-notes p{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 9: Desk Mats (3 images) ================================= */
.desk-mats{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.desk-mats::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 80%, rgba(127,91,255,.08), transparent 60%);
}
.dm-head .lead{ color: var(--qc-dim); }

.dm-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .dm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .dm-grid{ grid-template-columns: 1fr; } }

.dm-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.dm-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.dm-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.dm-card .bullets{ color: var(--qc-dim); }
/* ===== SECTION 10: Adapters (2 images) ================================== */
.adapters-kit{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.adapters-kit::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 82%, rgba(127,91,255,.08), transparent 60%);
}
.ak-head .lead{ color: var(--qc-dim); }

.ak-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .ak-grid{ grid-template-columns: 1fr; } }

.ak-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.ak-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.ak-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.ak-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.ak-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.ak-notes .meta{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 11: Cooling Helpers (2 images) =========================== */
.cooling-helpers{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.cooling-helpers::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 14%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 82% 86%, rgba(86,240,255,.08), transparent 60%);
}
.ch-head .lead{ color: var(--qc-dim); }

.ch-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .ch-grid{ grid-template-columns: 1fr; } }

.ch-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ch-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.ch-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.ch-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.ch-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.ch-notes p{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 12: Desk Organizers (3 images) =========================== */
.desk-organizers{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.desk-organizers::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 80%, rgba(127,91,255,.08), transparent 60%);
}
.do-head .lead{ color: var(--qc-dim); }

.do-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .do-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .do-grid{ grid-template-columns: 1fr; } }

.do-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.do-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.do-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.do-card .bullets{ color: var(--qc-dim); }
/* ===== SECTION 13: Mounts & Tripods (2 images) ========================= */
.mounts-tripods{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.mounts-tripods::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 82%, rgba(127,91,255,.08), transparent 60%);
}
.mt-head .lead{ color: var(--qc-dim); }

.mt-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .mt-grid{ grid-template-columns: 1fr; } }

.mt-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.mt-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.mounts-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.mt-card .meta{ color: var(--qc-dim); margin-top:6px; }

/* ===== SECTION 14: Input Comfort (2 images) ============================ */
.input-comfort{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.input-comfort::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 80%, rgba(86,240,255,.08), transparent 60%);
}
.ic-head .lead{ color: var(--qc-dim); }

.ic-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .ic-grid{ grid-template-columns: 1fr; } }

.ic-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ic-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.ic-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.ic-card .meta{ color: var(--qc-dim); margin-top:6px; }

/* ===== SECTION 15: Power Safety (2 images) ============================= */
.power-safety{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.power-safety::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 14%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 82% 86%, rgba(127,91,255,.08), transparent 60%);
}
.ps-head .lead{ color: var(--qc-dim); }

.ps-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .ps-grid{ grid-template-columns: 1fr; } }

.ps-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ps-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.ps-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.ps-card .meta{ color: var(--qc-dim); margin-top:6px; }

/* ===== SECTION 16: Packaging & Recycling (2 images) ==================== */
.packaging-recycling{ padding: clamp(28px,5vw,80px) 0; position:relative; }
.packaging-recycling::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 22%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 78%, rgba(127,91,255,.08), transparent 60%);
}
.pr-head .lead{ color: var(--qc-dim); }

.pr-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .pr-grid{ grid-template-columns: 1fr; } }

.pr-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.pr-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.pr-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.pr-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.pr-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.pr-card .meta{ color: var(--qc-dim); margin-top:6px; }