/* shop/assets/shop.css — storefront-komponenter genskabt fra BitTech-designet.
   Bruger design-systemets tokens (assets/ds). Ingen farver/mål hardcodes udenom tokens. */

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--white);font:var(--type-body);color:var(--text-body)}
h1,h2,h3,p,ul,li{margin:0;padding:0}
ul{list-style:none}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
img{max-width:100%}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.wrap{max-width:var(--container-max,1200px);margin:0 auto}

/* ---- Utility top bar (navy) ---- */
.util{background:var(--brand-navy);color:rgba(255,255,255,.85);padding:8px 22px;font:var(--fw-regular) var(--fs-xs)/1.4 var(--font-body)}
.util .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.util .grow{flex:1}
.util .hit{display:flex;align-items:center;gap:7px}
.util .hit i{color:var(--brand-green);width:14px;height:14px}

/* ---- Header ---- */
.hdr{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--border-subtle)}
.hdr .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:14px 22px}
.hdr .logo{height:38px;width:auto;display:block}
.search{flex:999 1 260px;position:relative}
.search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted)}
.search input{width:100%;height:44px;padding:0 16px 0 42px;border:1px solid var(--border-default);border-radius:var(--radius-input);
  font:var(--type-body-sm);color:var(--text-body);background:var(--white)}
.search input:focus{outline:none;border-color:var(--border-strong);box-shadow:var(--shadow-focus)}
.hdr .actions{display:flex;align-items:center;gap:6px}
.iconbtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;
  border-radius:var(--radius-pill);color:var(--brand-blue);cursor:pointer;transition:var(--transition-control)}
.iconbtn:hover{background:var(--blue-50)}
.iconbtn i{width:20px;height:20px}
.cart{display:flex;align-items:center;gap:9px;border:1px solid var(--border-default);border-radius:var(--radius-pill);
  background:var(--white);padding:9px 16px;cursor:pointer;font:var(--type-button);color:var(--brand-blue)}
.cart i{width:18px;height:18px}
.cart .sum{font:var(--fw-bold) var(--fs-sm)/1 var(--font-body);color:var(--text-body)}

/* ---- Sprog- & valuta-vælger (util-bar) ---- */
.langsel{display:inline-flex;gap:5px;align-items:center}
.langsel a{display:inline-flex;width:20px;height:14px;border-radius:2px;overflow:hidden;opacity:.5;line-height:0}
.langsel a.on{opacity:1;box-shadow:0 0 0 1.5px #fff}
.langsel .fi{width:20px;height:14px}
.ccysel{display:inline-flex;gap:3px;align-items:center}
.ccysel a{font:var(--fw-semibold) 11px/1 var(--font-body);color:rgba(255,255,255,.6);padding:2px 6px;border-radius:4px;text-decoration:none}
.ccysel a.on{color:#fff;background:rgba(255,255,255,.2)}
.ccysel a:hover{color:#fff}

/* ---- Fælles shop-admin-header + navigation (shop/admin/_nav.php) ---- */
/* Matcher CRM'ets look: blå brand-bar (#4565AD = --brand-blue) + hvid menu med blå aktiv. */
.adminbar{display:flex;align-items:center;gap:14px;background:var(--brand-blue);color:#fff;
  padding:12px 18px;border-radius:12px 12px 0 0;box-shadow:var(--shadow-sm)}
.adminbar .chip{background:#fff;border-radius:8px;padding:5px 9px;display:inline-flex;align-items:center}
.adminbar .chip img{height:22px;display:block}
.adminbar .t{font:var(--fw-semibold) var(--fs-md)/1 var(--font-display,inherit);letter-spacing:.01em}
.adminbar .sp{flex:1}
.adminbar a{color:#fff;text-decoration:none;font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);
  opacity:.92;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;transition:var(--transition-control)}
.adminbar a:hover{opacity:1;background:rgba(255,255,255,.15)}
.adminbar a i{width:15px;height:15px}
.adminnav{display:flex;gap:2px;flex-wrap:wrap;align-items:center;background:#fff;
  border:1px solid var(--border-subtle);border-top:0;border-radius:0 0 12px 12px;padding:7px 9px;margin-bottom:22px;box-shadow:var(--shadow-sm)}
.adminnav a{display:inline-flex;align-items:center;gap:7px;font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);
  color:var(--text-body);padding:9px 13px;border-radius:8px;text-decoration:none;transition:var(--transition-control)}
.adminnav a i{width:16px;height:16px;opacity:.75}
.adminnav a:hover{background:var(--blue-50);color:var(--brand-blue)}
.adminnav a:hover i{opacity:1}
.adminnav a.active{background:var(--brand-blue);color:#fff}
.adminnav a.active i{opacity:1}
.adminnav .sp{flex:1}

/* ---- Konto-menu (header) ---- */
.acct{position:relative}
.acct>summary{list-style:none}
.acct>summary::-webkit-details-marker{display:none}
.acct[open]>summary{background:var(--blue-50)}
.acctmenu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--white);
  border:1px solid var(--border-default);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:8px;z-index:60}
.acctmenu .who{padding:8px 10px;display:grid;gap:2px;border-bottom:1px solid var(--border-subtle);margin-bottom:6px}
.acctmenu .who strong{font:var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body);color:var(--text-body)}
.acctmenu .who span{font:var(--type-caption);color:var(--text-muted)}
.acctmenu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-input);
  font:var(--type-body-sm);color:var(--text-body)}
.acctmenu a:hover{background:var(--blue-50);color:var(--brand-blue)}
.acctmenu a i{width:16px;height:16px}

/* ---- Category nav ---- */
.catnav{background:var(--white);border-bottom:1px solid var(--border-subtle)}
.catnav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 22px}
.catnav a{padding:14px 14px;font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);border-bottom:2px solid transparent;color:var(--text-body)}
.catnav a:hover{color:var(--brand-blue)}
.catnav a.active{color:var(--brand-blue);border-bottom-color:var(--brand-green)}
.catnav .grow{flex:1}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  border-radius:var(--radius-pill);cursor:pointer;font:var(--type-button);padding:10px 18px;transition:var(--transition-control);text-decoration:none}
.btn i{width:16px;height:16px}
.btn--accent{background:var(--action-accent);color:#fff}
.btn--accent:hover{background:var(--action-accent-hover);color:#fff}
.btn--primary{background:var(--action-primary);color:#fff}
.btn--primary:hover{background:var(--action-primary-hover);color:#fff}
.btn--outline{background:var(--white);border-color:var(--border-default);color:var(--brand-blue)}
.btn--outline:hover{background:var(--blue-50);color:var(--brand-blue)}
.btn--ghost{background:transparent;color:var(--brand-blue)}
.btn--ghost:hover{background:var(--blue-50)}
.btn--outline-inverse{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--outline-inverse:hover{background:#fff;color:var(--brand-navy);border-color:#fff}
.btn--sm{padding:7px 13px}
.btn--lg{padding:14px 22px;font:var(--fw-semibold) var(--fs-base)/1 var(--font-body)}
.btn--full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- Pills (facets) ---- */
.pill{display:inline-flex;cursor:pointer;border-radius:var(--radius-pill);padding:7px 13px;
  font:var(--fw-regular) var(--fs-sm)/1 var(--font-body);border:1px solid var(--border-default);background:var(--white);color:var(--text-body);transition:var(--transition-control);text-decoration:none}
.pill:hover{background:var(--blue-50);color:var(--brand-blue)}
.pill.on{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}

/* ---- Eyebrow / headings ---- */
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--brand-green)}
.h1{font:var(--type-h1);color:var(--text-heading)}
.h2{font:var(--type-h2);color:var(--text-heading)}
.h3{font:var(--type-h3);color:var(--text-heading)}
.muted{color:var(--text-muted)}

/* ---- Catalog layout ---- */
.catalog{padding:26px 22px 50px}
.catalog .head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:22px}
.catalog .head .t{flex:1 1 320px;display:grid;gap:8px}
.sortsel{height:44px;border:1px solid var(--border-default);border-radius:var(--radius-input);padding:0 12px;
  font:var(--type-body-sm);color:var(--text-body);background:var(--white)}
.cols{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.facets{flex:1 1 230px;max-width:100%;display:grid;gap:22px;border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:22px}
.facets h4{font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);color:var(--text-body);text-transform:uppercase;letter-spacing:var(--ls-caps);margin-bottom:12px}
.facets .rule{height:1px;background:var(--border-subtle)}
.facets .chips{display:flex;flex-wrap:wrap;gap:8px}
.advisor{background:var(--green-100);border-radius:var(--radius-card);padding:16px;display:grid;gap:8px}
.advisor b{font:var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body);color:var(--green-800)}
.advisor p{font:var(--fw-regular) var(--fs-xs)/1.5 var(--font-body);color:var(--green-800)}
.grid-wrap{flex:999 1 520px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}

/* ---- Product card ---- */
.pcard{border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-sm);
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;transition:box-shadow var(--dur-fast,140ms) cubic-bezier(.2,0,.2,1),transform var(--dur-fast,140ms) cubic-bezier(.2,0,.2,1)}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pcard .media{background:var(--blue-50);color:var(--brand-blue);height:140px;display:flex;align-items:center;justify-content:center}
.pcard .media i{width:52px;height:52px}
.pcard .media img{width:100%;height:100%;object-fit:contain;padding:12px}
.pcard .body{padding:18px;display:grid;gap:8px;align-content:start}
.pcard .brand{font:var(--fw-regular) var(--fs-2xs)/1 var(--font-body);color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}
.pcard .name{border:0;background:transparent;padding:0;text-align:left;font:var(--fw-semibold) var(--fs-sm)/1.4 var(--font-body);color:var(--text-body)}
.pcard .price{font:var(--fw-bold) var(--fs-lg)/1 var(--font-body);color:var(--brand-blue)}
.pcard .stock{display:flex;align-items:center;gap:7px;font:var(--fw-semibold) 12px/1.3 var(--font-body);color:var(--status-success)}
.pcard .stock .dot{width:7px;height:7px;border-radius:50%;background:var(--status-success)}
.pcard .deliv{display:flex;align-items:center;gap:7px;font:var(--fw-regular) 12px/1.3 var(--font-body);color:var(--text-muted)}
.pcard .deliv i{width:13px;height:13px}
.pcard .foot{padding:0 18px 18px;display:flex;gap:8px}

.count{font:var(--type-body-sm);color:var(--text-muted);margin-bottom:14px}
.empty{border:1px dashed var(--border-default);border-radius:var(--radius-card);padding:40px;text-align:center;display:grid;gap:12px;justify-items:center}