/* Om förpackningar (the QR code on the packaging leads here): a Förpackningsinfo card with the supplier and the PDF datasheets, and a REUSABLE card. */
.packaging-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1000px; margin-bottom:72px; }
.packaging-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line,#c9d2de); border-radius:18px; overflow:hidden; box-shadow:0 14px 34px -30px #0b245440; }
.packaging-card-image { aspect-ratio:16 / 9; background:var(--ice,#e5edf6); overflow:hidden; }
.packaging-card-image img { width:100%; height:100%; object-fit:cover; }
.packaging-card-body { display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; color:#20344d; }
.packaging-card-body .eyebrow { color:var(--blue,#1c4e9d); margin-bottom:8px; }
.packaging-card-body h2 { margin:0 0 14px; font-size:21px; line-height:1.15; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#193e67; }
.packaging-card-body p { margin:0 0 14px; font-size:15px; line-height:1.6; }
.packaging-card-body a:not(.packaging-card-link) { color:#1c4e9d; text-decoration:underline; text-underline-offset:3px; }
.packaging-card-link { display:inline-flex; align-items:center; gap:8px; margin-top:auto; min-height:44px; font-size:15px; font-weight:600; color:#1c4e9d; }
.packaging-card-link svg { width:18px; height:18px; transition:transform .2s; }
.packaging-card-link:hover svg { transform:translateX(3px); }
.packaging-details { max-width:760px; }
@media(max-width:800px) {
  .packaging-cards { grid-template-columns:1fr; gap:18px; margin-bottom:52px; }
  .packaging-card-body { padding:22px 20px 22px; }
  .packaging-card-body h2 { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) { .packaging-card-link svg { transition:none; } }
/* Förpackningsinfo: card title, then the sub-headings Leverantör and Datablad. */
.packaging-card-body h3 { margin:0 0 8px; font-size:15px; line-height:1.3; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue,#1c4e9d); }
.packaging-docs-block { margin:6px 0 4px; padding-top:18px; border-top:1px solid var(--line,#c9d2de); }
.packaging-docs { list-style:none; margin:0; padding:0; }
.packaging-docs li + li { border-top:1px solid var(--line,#c9d2de); }
.packaging-card-body .packaging-docs a { display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 8px; margin:0 -8px; border-radius:10px; color:#20344d; text-decoration:none; transition:background .2s; }
.packaging-docs a:hover { background:var(--ice,#e5edf6); }
.packaging-docs a:focus-visible { outline:2px solid #1c4e9d; outline-offset:-2px; }
.packaging-docs svg { flex:none; width:24px; height:24px; color:#1c4e9d; }
.packaging-doc-name { flex:1; display:flex; flex-direction:column; gap:2px; font-size:15px; font-weight:600; line-height:1.35; }
.packaging-doc-name small { font-size:13px; font-weight:400; color:#4a5d75; }
.packaging-doc-meta { flex:none; font-size:12px; font-weight:600; letter-spacing:.04em; color:#1c4e9d; white-space:nowrap; }
.packaging-docs-more { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; padding:0; border:0; background:none; font:inherit; font-size:15px; font-weight:600; color:#1c4e9d; cursor:pointer; }
/* Same arrow as "Läs mer om REUSABLE"; it turns up when the list is open. */
.packaging-docs-more svg { width:18px; height:18px; transition:transform .2s; }
.packaging-docs-more:hover svg { transform:translateX(3px); }
.packaging-docs-more[aria-expanded="true"] svg, .packaging-docs-more[aria-expanded="true"]:hover svg { transform:rotate(-90deg); }
@media(prefers-reduced-motion:reduce) { .packaging-docs a, .packaging-docs-more svg { transition:none; } }
/* The tillverkare's contact link sits under the address instead of at the bottom of the card. */
.packaging-contact-link { margin-top:-6px; align-self:flex-start; }
