/* Slide-out cart (cart-drawer.php / cart-drawer.js). Above the header (200), below the image viewer (1500). */
.rt-drawer {--rt-ease-out:cubic-bezier(.32,.72,0,1);--rt-ease-in:cubic-bezier(.4,0,.9,.6);position:fixed;inset:0;z-index:300;}
.rt-drawer[hidden] {display:none;}
html.rt-drawer-locked {overflow:hidden;}
html.rt-drawer-locked body {padding-right:var(--rt-scrollbar,0px);}

.rt-drawer-backdrop {position:absolute;inset:0;background:rgba(15,35,42,.34);opacity:0;transition:opacity .34s ease-out;}
.rt-drawer-panel {position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(500px,calc(100vw - 36px));background:#fff;color:var(--ink);box-shadow:-30px 0 60px -36px rgba(16,46,60,.55);transform:translateX(100%);transition:transform .46s var(--rt-ease-out);outline:0;}
.rt-drawer.is-open .rt-drawer-backdrop {opacity:1;}
.rt-drawer.is-open .rt-drawer-panel {transform:none;}
.rt-drawer.is-closing .rt-drawer-backdrop {transition:opacity .24s ease-in;}
.rt-drawer.is-closing .rt-drawer-panel {transition:transform .26s var(--rt-ease-in);}

/* Contents arrive just behind the panel: items one after another, then the total and button. */
.rt-drawer.is-entering .rt-mini-item, .rt-drawer.is-entering .rt-delivery, .rt-drawer.is-entering .rt-mini-empty {animation:rt-drawer-item .5s var(--rt-ease-out) both;animation-delay:calc(.1s + var(--i,0) * .045s);}
.rt-drawer.is-entering .rt-mini-foot {animation:rt-drawer-foot .5s var(--rt-ease-out) .14s both;}
@keyframes rt-drawer-item {from {opacity:0;transform:translateX(18px);} to {opacity:1;transform:none;}}
@keyframes rt-drawer-foot {from {opacity:0;transform:translateY(14px);} to {opacity:1;transform:none;}}

/* Head */
.rt-drawer-head {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 16px 14px 24px;border-bottom:1px solid #e6eaee;}
.rt-drawer-head h2 {margin:0;font-size:20px;font-weight:750;letter-spacing:-.01em;}
.rt-drawer-count {color:#6a7a8c;font-weight:600;}
body .rt-drawer-close {display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .15s;}
.rt-drawer-close svg, .rt-mini-step svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
@media (hover:hover) {body .rt-drawer-close:hover {background:#ebebeb;}}
.rt-drawer :focus-visible {outline:2px solid var(--ink);outline-offset:2px;}

/* Undo message after removing a product */
.rt-drawer-undo {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 24px 0;padding:10px 10px 10px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;animation:rt-undo-in .32s var(--rt-ease-out);}
.rt-drawer-undo[hidden] {display:none;}
.rt-drawer-undo.is-leaving {animation:rt-undo-out .2s ease-in forwards;}
body .rt-drawer-undo button {flex:none;min-height:36px;padding:0 14px;border:0;border-radius:99px;background:var(--green);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;}
@keyframes rt-undo-in {from {opacity:0;transform:translateY(-6px);}}
@keyframes rt-undo-out {to {opacity:0;transform:translateY(-6px);}}

/* Body */
.rt-mini-cart {display:flex;flex-direction:column;flex:1;min-height:0;}
.rt-mini-scroll {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 24px 8px;}
.rt-mini-scroll .rt-delivery {padding:14px 16px;border-radius:12px;background:var(--surface-muted);margin-bottom:8px;}
.rt-mini-scroll .rt-delivery > div {display:flex;align-items:center;gap:10px;font-size:14px;}
.rt-mini-scroll .rt-delivery svg {width:22px;height:22px;flex:none;}
.rt-mini-scroll .rt-delivery progress {display:block;width:100%;height:6px;margin:10px 0 6px;border:0;border-radius:99px;background:#dbe3ec;overflow:hidden;appearance:none;-webkit-appearance:none;}
.rt-mini-scroll .rt-delivery progress::-webkit-progress-bar {background:#dbe3ec;border-radius:99px;}
.rt-mini-scroll .rt-delivery progress::-webkit-progress-value {background:var(--green);border-radius:99px;transition:width .5s var(--rt-ease-out);}
.rt-mini-scroll .rt-delivery progress::-moz-progress-bar {background:var(--green);border-radius:99px;}
.rt-mini-scroll .rt-delivery small {color:#6a7a8c;font-size:12px;}

.rt-mini-items {margin:0;padding:0;list-style:none;}
/* Each row can fold away: the grid row animates from 1fr to 0fr. */
.rt-mini-item {display:grid;grid-template-rows:1fr;margin:0 -12px;padding:0 12px;border-radius:14px;transition:grid-template-rows .3s var(--rt-ease-out),opacity .2s ease,background-color .6s ease;}
.rt-mini-item-inner {display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:start;min-height:0;overflow:hidden;padding:16px 0;}
.rt-mini-item + .rt-mini-item .rt-mini-item-inner {border-top:1px solid #ebebeb;}
.rt-mini-item.is-removing {grid-template-rows:0fr;opacity:0;}
.rt-mini-item.is-removing .rt-mini-item-inner {padding-block:0;transition:padding .3s var(--rt-ease-out);}
.rt-mini-item.is-new {animation:rt-item-new 1.8s ease-out;}
@keyframes rt-item-new {0%,35% {background-color:rgba(0,103,176,.10);} 100% {background-color:transparent;}}
/* While the drawer opens, the new item slides in like the others and is highlighted as it lands. */
.rt-drawer.is-entering .rt-mini-item.is-new {animation:rt-drawer-item .5s var(--rt-ease-out) both,rt-item-new 1.8s ease-out;animation-delay:calc(.1s + var(--i,0) * .045s),.25s;}

.rt-mini-thumb {display:block;width:72px;height:72px;border-radius:10px;background:var(--surface-muted);overflow:hidden;}
.rt-mini-thumb img {width:100%;height:100%;object-fit:contain;display:block;}
.rt-mini-info {min-width:0;}
body .rt-drawer a.rt-mini-name, .rt-mini-name {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink);font-size:15px;font-weight:650;line-height:1.35;text-decoration:none;}
body .rt-drawer a.rt-mini-name:hover {text-decoration:underline;text-underline-offset:3px;}
.rt-mini-info dl.variation {margin:4px 0 0;font-size:13px;color:#6a7a8c;}
.rt-mini-info dl.variation dt, .rt-mini-info dl.variation dd {display:inline;margin:0;}
.rt-mini-info dl.variation dd p {display:inline;margin:0;}
.rt-mini-controls {display:flex;align-items:center;gap:14px;margin-top:10px;}
.rt-mini-qty {display:inline-flex;align-items:center;border:1px solid #dfe4ea;border-radius:99px;}
body .rt-mini-step {display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .15s;}
.rt-mini-step svg {width:18px;height:18px;}
.rt-mini-step:disabled {opacity:.35;cursor:default;}
@media (hover:hover) {body .rt-mini-step:not(:disabled):hover {background:#ebebeb;}}
.rt-mini-qty-value {min-width:26px;text-align:center;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;}
body .rt-mini-remove {padding:4px 0;border:0;background:none;color:#6a7a8c;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
body .rt-mini-remove:hover {color:var(--ink);}
.rt-mini-line {font-size:15px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .2s;}
.rt-mini-item.is-busy .rt-mini-line {opacity:.4;}
[data-value].is-changed {animation:rt-value .34s var(--rt-ease-out);}
@keyframes rt-value {from {opacity:0;transform:translateY(5px);}}

/* Foot */
.rt-mini-foot {padding:16px 24px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid #e6eaee;background:#fff;box-shadow:0 -14px 24px -22px rgba(16,46,60,.35);}
.rt-mini-total {display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;font-size:16px;font-weight:650;}
.rt-mini-total strong {display:inline-block;font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.rt-mini-note {margin:4px 0 14px;color:#6a7a8c;font-size:13px;}
body .rt-drawer a.rt-mini-primary {display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:99px;background:var(--green);color:var(--ink);font-size:17px;font-weight:750;text-decoration:none;transition:background-color .15s;}
@media (hover:hover) {body .rt-drawer a.rt-mini-primary:hover {background:#005694;}}
body .rt-drawer a.rt-mini-secondary {display:block;margin-top:12px;text-align:center;color:var(--ink);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;}

/* Empty */
.rt-mini-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:48px 32px;text-align:center;}
.rt-mini-empty-icon {display:grid;place-items:center;width:76px;height:76px;margin-bottom:18px;border-radius:50%;background:var(--surface-muted);}
.rt-mini-empty-icon svg {width:30px;height:30px;}
.rt-mini-empty-title {margin:0 0 6px;font-size:19px;font-weight:750;}
.rt-mini-empty p {margin:0;color:#6a7a8c;}
.rt-mini-empty .rt-mini-primary {width:100%;max-width:300px;margin-top:24px;}

/* Header cart count: a small bounce when it changes. */
.rt-cart-count.is-bump {animation:rt-bump .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes rt-bump {0% {transform:scale(1);} 40% {transform:scale(1.4);} 100% {transform:scale(1);}}

@media (max-width:700px) {
 .rt-drawer-panel {width:calc(100vw - 28px);}
 .rt-drawer-head {padding:14px 10px 12px 18px;}
 .rt-drawer-head h2 {font-size:19px;}
 .rt-drawer-undo {margin:12px 18px 0;}
 .rt-mini-scroll {padding:14px 18px 8px;}
 .rt-mini-item-inner {grid-template-columns:64px minmax(0,1fr) auto;gap:12px;}
 .rt-mini-thumb {width:64px;height:64px;}
 .rt-mini-foot {padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));}
}

@media (prefers-reduced-motion:reduce) {
 .rt-drawer-backdrop, .rt-drawer-panel, .rt-drawer.is-closing .rt-drawer-backdrop, .rt-drawer.is-closing .rt-drawer-panel, .rt-mini-item, .rt-mini-item.is-removing .rt-mini-item-inner {transition:none;}
 .rt-drawer.is-entering .rt-mini-item, .rt-drawer.is-entering .rt-delivery, .rt-drawer.is-entering .rt-mini-empty, .rt-drawer.is-entering .rt-mini-foot, .rt-mini-item.is-new, [data-value].is-changed, .rt-cart-count.is-bump, .rt-drawer-undo, .rt-drawer-undo.is-leaving {animation:none;}
}

/* ---------- "Andre kjøpte også" (cart-recommendations.php) ---------- */
.rt-recs {margin:20px 0 12px;padding-top:20px;border-top:1px solid var(--line);}
body .rt-recs-title {margin:0 0 12px;font-size:18px;font-weight:700;line-height:1.3;color:var(--ink);}
.rt-recs-list {list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.rt-rec {border-radius:12px;transition:opacity .2s;}
.rt-rec.is-busy {opacity:.55;}
.rt-rec-row {display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;}
.rt-rec-thumb {display:block;width:56px;height:56px;border-radius:10px;background:var(--surface-muted);overflow:hidden;}
.rt-rec-thumb img {width:100%;height:100%;object-fit:contain;display:block;}
.rt-rec-info {display:flex;flex-direction:column;min-width:0;line-height:1.35;}
body a.rt-rec-name {font-size:16px;font-weight:650;color:var(--ink);text-decoration:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
body a.rt-rec-name:hover {text-decoration:underline;}
.rt-rec-price {font-size:16px;font-weight:700;margin-top:2px;}
.rt-rec-free {font-size:16px;font-weight:400;}
.rt-rec-free::before {content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--green);vertical-align:1px;}
body .rt-rec-add {display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:650;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s;}
body .rt-rec-add:hover, body .rt-rec-add[aria-expanded="true"] {background:var(--ink);color:#fff;text-decoration:none;}
body .rt-rec-add:focus-visible, .rt-rec-choices button:focus-visible {outline:2px solid #0067b0;outline-offset:2px;}
.rt-rec-choices {display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px 68px;}
.rt-rec-choices[hidden] {display:none;}
body .rt-rec-choices button {min-width:48px;min-height:40px;padding:0 12px;border:1px solid #cad3dd;border-radius:99px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:650;cursor:pointer;}
body .rt-rec-choices button:hover {border-color:var(--ink);}
@media (max-width:700px) {.rt-rec-choices {margin-left:0;}}

/* ---------- Cart lines (2026-11-07, Allbirds pattern) ----------
   Name, the choice (e.g. "Svart") and a small "Fjern" on the left; price at the top right and a compact stepper at
   the bottom right, whose minus becomes a bin when one is left. */
.rt-mini-item-inner {grid-template-columns:72px minmax(0,1fr) auto;align-items:stretch;}
.rt-mini-info {display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.rt-mini-variant {display:block;margin-top:2px;font-size:14px;color:#6a7a8c;}
body .rt-drawer .rt-mini-remove {margin-top:auto;padding:6px 0 0;font-size:14px;}
.rt-mini-side {display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:12px;}
.rt-mini-side .rt-mini-qty {height:34px;}
body .rt-mini-side .rt-mini-step {width:32px;height:32px;}
.rt-mini-side .rt-mini-step svg {width:16px;height:16px;}
.rt-mini-side .rt-mini-step svg.is-bin {width:17px;height:17px;stroke-width:1.6;stroke-linejoin:round;}
.rt-mini-side .rt-mini-qty-value {min-width:22px;font-size:14px;}

/* Only vertical scrolling in the drawer: lines slide in from the side when it opens, which briefly showed a
   horizontal scrollbar. */
.rt-mini-scroll {overflow-x:hidden;}

/* Compact drawer (2026-11-07): 14px text in the lines, delivery note and suggestions; "Fjern" right under the name
   or choice; a lighter bin; wider panel on desktop (500px). */
.rt-mini-info {justify-content:flex-start;}
body .rt-drawer .rt-mini-remove {margin-top:4px;padding:2px 0;}
.rt-mini-variant {font-size:14px;}
.rt-mini-side .rt-mini-qty-value {font-size:14px;}
.rt-mini-side .rt-mini-step svg.is-bin {width:16px;height:16px;stroke-width:1.25;}
.rt-mini-side .rt-mini-step svg {stroke-width:1.5;}
.rt-mini-scroll .rt-delivery > div {font-size:14px;}
body .rt-drawer .rt-recs-title {font-size:16px;}
body .rt-drawer a.rt-rec-name, .rt-drawer .rt-rec-price, .rt-drawer .rt-rec-free {font-size:14px;}
body .rt-drawer .rt-rec-add, body .rt-drawer .rt-rec-choices button {min-height:36px;font-size:14px;}