/* The cart page of TTB PRO (uses the account page's cards and fields). */
.cartp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media(max-width:900px){.cartp-grid{grid-template-columns:1fr}}
.cartp-lines{list-style:none;margin:0;padding:0}
.cartp-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto 110px 28px;gap:12px 16px;align-items:center;padding:14px 0;border-top:1px solid #eceeed}
.cartp-line:first-child{border-top:0;padding-top:0}
.cartp-thumb{width:72px;height:72px;object-fit:contain;background:#f3f4f3;border-radius:8px;display:block}
.cartp-info p{margin:0}
.cartp-name{font-size:14px;font-weight:600}
.cartp-sku{font-size:12px;color:#5d625f;margin-top:2px!important}
.cartp-warn{font-size:12px;color:#8a2a24;margin-top:4px!important}
.cartp-stepper{display:inline-flex;align-items:center;border:1px solid #cfd2d0;border-radius:8px;background:#fff;overflow:hidden}
.cartp-stepper button{all:unset;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;font-size:16px}
.cartp-stepper input{all:unset;width:40px;text-align:center;font-weight:600;font-size:13px;-moz-appearance:textfield}
.cartp-stepper input::-webkit-outer-spin-button,.cartp-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cartp-price{margin:0;text-align:right;font-weight:700;font-size:14px;white-space:nowrap}
.cartp-price small{display:block;font-weight:400;font-size:11px;color:#5d625f}
.cartp .cartp-remove{all:unset!important;box-sizing:border-box;display:grid!important;place-items:center;width:32px;height:32px;border-radius:8px;cursor:pointer;color:#6b6f6c!important;background:transparent!important}
.cartp .cartp-remove:hover,.cartp .cartp-remove:focus-visible{color:#111!important;background:#eef0ee!important}
@media(max-width:640px){.cartp-line{grid-template-columns:56px minmax(0,1fr) 28px;grid-template-areas:"img info rm" "step step price"}.cartp-thumb{width:56px;height:56px}}
.cartp-addresses{display:grid;gap:8px;margin-bottom:8px}
.cartp-address{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #dfe2dd;border-radius:10px;cursor:pointer;font-size:13px}
.cartp-address.is-on{border-color:#1d221f;background:#f7f8f7}
.cartp-address input{width:auto!important;margin-top:3px}
.cartp-address strong,.cartp-address small{display:block}
.cartp-address small{color:#5d625f;margin-top:2px}
.cartp-applied{margin:0;font-size:14px}
.cartp-summary .cartp-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.cartp-row.is-muted strong{font-weight:400;color:#5d625f}
.cartp-row.is-discount strong{color:#1f7a42}
.cartp-row.is-total{border-top:1px solid #eceeed;margin-top:6px;padding-top:12px;font-size:16px}
.cartp-go{width:100%;margin:12px 0 8px;box-sizing:border-box;border-radius:10px;padding:13px}
.cartp-go[aria-disabled=true]{opacity:.45;cursor:not-allowed}

.cartp .cartp-address input[type=radio]{width:18px!important;height:18px!important;flex:0 0 18px;margin:2px 0 0;accent-color:#1d221f}

/* Cart page lines on phones: image | name, article number, quantity | line total with quantity x unit price, and the bin under it. */
@media(max-width:899px){
 .cartp-line{grid-template-columns:56px minmax(0,1fr) auto!important;grid-template-areas:"img info price" "img step rm"!important;gap:6px 12px!important;align-items:start}
 .cartp-thumb{grid-area:img;width:56px;height:56px;object-fit:contain}
 .cartp-info{grid-area:info;min-width:0}
 .cartp-stepper{grid-area:step;justify-self:start;overflow:visible}
 .cartp-stepper button{width:34px;height:34px;font-size:18px}
 .cartp-stepper input{width:38px;font-size:15px}
 .cartp-price{grid-area:price;justify-self:end;text-align:right}
 .cartp-remove{grid-area:rm;justify-self:end;align-self:center}
}

.chk-line{grid-template-columns:56px minmax(0,1fr) 48px auto;align-items:center}
.chk-qty{margin:0;font-size:13px;color:#5d625f;text-align:right}
.chk-addr{margin:0 0 8px;font-size:14px;line-height:1.5}
.chk-accept{display:flex;gap:8px;align-items:flex-start;margin:12px 0;font-size:13px;cursor:pointer}
.chk-accept input{width:18px!important;height:18px!important;flex:0 0 18px;margin:1px 0 0;accent-color:#1d221f}
.cartp-go[disabled]{opacity:.45;cursor:not-allowed}

.cartp-vat{margin:2px 0 10px;font-size:12px;color:#5d625f}

/* Cart page: rounded and modern. */
.cartp-summary,.cartp-address,.cartp-applied,.cartp-grid>div>.acct-card{border-radius:20px}
.cartp-stepper{border-radius:999px}
.cartp-go,.cartp-summary button{border-radius:999px!important}
.cartp-lines input:not([type=checkbox]):not([type=radio]),.cartp-summary input{border-radius:999px}
.cartp-thumb{border-radius:12px}

/* Order confirmation (guest, signed-in private person, company) */
.cartp .acct-head h1 strong{font-weight:700}
.conf-sub{margin:6px 0 20px;font:14px/1.5 Arial,Helvetica,sans-serif;color:#5d625f}
.conf-banner{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:20px 24px;border:1px solid #dfe2dd;border-radius:18px;background:#fff}
.conf-check{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#e6f5e6;color:#2e8b2e}
.conf-check .conf-ico{width:24px;height:24px}
.conf-lead{margin:0 0 3px;font:15px/1.4 Arial,Helvetica,sans-serif;color:#14181a}
.conf-lead strong{font-weight:700}
.conf-note{margin:0;font:13px/1.5 Arial,Helvetica,sans-serif;color:#5d625f}
.conf-card{border-radius:18px}
.conf-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 16px/1.3 Arial,Helvetica,sans-serif;color:#14181a}
.conf-h .conf-ico{flex:none;width:20px;height:20px}
.conf-lines{margin:0;padding:0;list-style:none}
.conf-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:6px 16px;align-items:center;padding:14px 0;border-top:1px solid #eceeed}
.conf-line:first-child{border-top:0;padding-top:0}
.conf-thumb{display:grid;place-items:center;width:64px;height:64px;border-radius:12px;background:#f3f4f3;object-fit:contain;color:#8a8e8b}
.conf-info{min-width:0}
.conf-name{margin:0;font:600 14px/1.35 Arial,Helvetica,sans-serif;color:#14181a}
.conf-sku{margin:3px 0 0;font:12px/1.4 Arial,Helvetica,sans-serif;color:#5d625f}
.conf-qty{margin:0;font:13px Arial,Helvetica,sans-serif;color:#5d625f;white-space:nowrap}
.conf-price{margin:0;min-width:84px;text-align:right;font:700 14px Arial,Helvetica,sans-serif;white-space:nowrap}
.conf-go{display:flex!important;align-items:center;justify-content:center;gap:10px}
.conf-go .conf-ico{width:18px;height:18px}
.conf-status{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px 16px;border:1px solid #dfe2dd;border-radius:999px;color:#14181a;font:13px Arial,Helvetica,sans-serif;text-decoration:none}
.conf-status .conf-ico{width:18px;height:18px}
.conf-status .is-end{margin-left:auto}
@media(max-width:560px){.conf-line{grid-template-columns:56px minmax(0,1fr)}.conf-thumb{width:56px;height:56px}.conf-qty,.conf-price{grid-column:2;text-align:left}.conf-banner{padding:16px}}

/* the VAT of a cart / order is a row of its own, as clear as the other rows */
.cartp-summary .cartp-row.is-vat{margin:4px -12px;padding:10px 12px;border-radius:10px;background:#f3f4f3;font-size:14px}
.cartp-summary .cartp-row.is-vat strong{font-weight:700;color:#14181a}
.cartp-vat{margin:8px 0 10px;font-size:13px;color:#33393a}

/* the terms checkbox: white box, green tick when chosen (a shell's input styles, Gap, can not make it a black square) */
.chk-accept{display:flex!important;align-items:center;gap:10px}
.chk-accept input[type=checkbox]{appearance:none!important;-webkit-appearance:none!important;flex:none;width:18px!important;height:18px!important;min-width:18px!important;margin:0!important;padding:0!important;border:1.5px solid #8a8e8b!important;border-radius:4px!important;background:#fff!important;box-shadow:none!important}
.chk-accept input[type=checkbox]:checked{border-color:#58b957!important;background:#58b957 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat!important}

/* checkout fields: always a white box with black text, also when the browser fills them in (autofill otherwise paints them yellow/olive) */
[data-checkout] :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
[data-checkout] :is(input,select,textarea):-webkit-autofill,
[data-checkout] :is(input,select,textarea):-webkit-autofill:hover,
[data-checkout] :is(input,select,textarea):-webkit-autofill:focus{background-color:#fff!important;color:#14181a!important;-webkit-text-fill-color:#14181a!important;caret-color:#14181a;-webkit-box-shadow:0 0 0 1000px #fff inset!important;box-shadow:0 0 0 1000px #fff inset!important;transition:background-color 9999s ease-in-out 0s}
[data-checkout] select option{background:#fff;color:#14181a}

/* checkout: the phone number with its country code */
.chk-phone{display:flex;gap:8px;width:100%}
.chk-phone .chk-cc{flex:0 0 46%;min-width:0}
.chk-phone input{flex:1 1 auto;min-width:0}

/* terms checkbox: exactly a small square (a shell's field height must not stretch it), and air above the VAT row */
.chk-accept input[type=checkbox]{height:18px!important;min-height:18px!important;max-height:18px!important;width:18px!important;min-width:18px!important;max-width:18px!important;flex:none!important;align-self:center;padding:0!important;border-radius:4px!important}
.cartp-summary .cartp-row.is-vat{margin:14px -12px 6px!important}
.cartp-summary .cartp-row.is-total{margin-bottom:0}

/* more air between the total and the VAT row on the cart / checkout page */
.cartp-summary .cartp-row.is-total{margin-bottom:16px!important}
.cartp-summary .cartp-row.is-vat{margin:0 -12px 16px!important}

/* the country-code list: the row under the pointer and the chosen row stay readable (dark text on a light grey, never white on white) */
[data-checkout] select option:hover,[data-checkout] select option:focus,[data-checkout] select option:checked{background:#e3e8e3!important;background-color:#e3e8e3!important;color:#14181a!important;-webkit-text-fill-color:#14181a}

/* the quantity stepper of the cart page: white pill, dark − and +, in every shop (a shop's button style must not turn the two buttons into black blocks) */
html body .cartp-stepper{display:inline-flex!important;align-items:center;border:1px solid #cfd2d0!important;border-radius:999px!important;background:#fff!important;overflow:hidden}
html body .cartp-stepper button{all:unset;box-sizing:border-box;display:grid!important;place-items:center;width:34px!important;height:34px!important;min-height:0!important;padding:0!important;cursor:pointer;font:18px/1 Arial,Helvetica,sans-serif!important;color:#14181a!important;background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-decoration:none!important}
html body .cartp-stepper button:hover,html body .cartp-stepper button:focus-visible{background:#f1f3f1!important;color:#14181a!important;outline:0!important}
html body .cartp-stepper input{all:unset;box-sizing:border-box;width:40px;text-align:center;font:600 14px Arial,Helvetica,sans-serif;color:#14181a!important;background:#fff!important;-moz-appearance:textfield}

/* the checkout selects (country code, delivery country) are pills like the text boxes in every shop (Direct's own select style is square) */
[data-checkout] select{border-radius:999px!important;min-height:48px!important;padding-left:20px!important;padding-right:20px!important}
[data-checkout] select{-webkit-appearance:none!important;appearance:none!important;background-color:#fff!important;background-image:linear-gradient(45deg,transparent 50%,#14181a 50%),linear-gradient(135deg,#14181a 50%,transparent 50%)!important;background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%!important;background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important;padding-right:42px!important}
[data-checkout] select,[data-checkout] select:-webkit-autofill{box-shadow:none!important;-webkit-box-shadow:none!important}
[data-checkout] select[name][name][name]{box-shadow:none!important;-webkit-box-shadow:none!important}
/* the quantity number: dark on the white stepper (all:unset made it inherit the light text colour of the dark page) */
.cartp-stepper input{color:#14181a;-webkit-text-fill-color:#14181a;caret-color:#14181a}
.cartp-stepper button{color:#14181a}
/* the quantity box: the general ".acct input" rule (account.css) gives every field 20px side padding and 48px height, which left no room for the number in a 40px box */
.cartp .cartp-stepper input{box-sizing:border-box!important;padding:0!important;min-height:0!important;border:0!important;background:transparent!important;width:40px;height:34px;line-height:34px;text-align:center}
@media(max-width:700px){.cartp .cartp-stepper input{width:38px}}
/* the picture and the name of a cart line are links (part page, or the Performance page with the car and product) */
.cartp-link{color:inherit;text-decoration:none;display:contents}
.cartp-name .cartp-link{display:inline;color:inherit;text-decoration:none}
.cartp-name .cartp-link:hover,.cartp-name .cartp-link:focus-visible{text-decoration:underline}
.cartp-line>.cartp-link:hover .cartp-thumb{opacity:.85}
.conf-name .cartp-link{display:inline;color:inherit;text-decoration:none}
.conf-name .cartp-link:hover,.conf-name .cartp-link:focus-visible{text-decoration:underline}

/* PRO (user 2026-10-12): the same white pill with black text on the cart drawer, the cart page and the checkout - only the look, no behaviour */
html body.parts-professional:not(.gap):not(.direct) :is(.cartp-go,.cartp-summary button.acct-btn,.cartp-summary a.acct-btn,.acct a.acct-btn.cartp-go,.acct button.acct-btn.cartp-go,.sf-cart .sf-checkout,.sf-cart a.sf-button.sf-checkout,.sf-cart-clean .sf-cart-checkout,.sf-cart-clean .sf-cart-go){
  background:#fff!important;color:#0b0f14!important;-webkit-text-fill-color:#0b0f14!important;
  border:1px solid #b9bec4!important;border-radius:999px!important;box-shadow:0 2px 10px rgba(20,24,26,.08)!important;
  font:600 14px/1.2 Arial,Helvetica,sans-serif!important;text-decoration:none!important;
}
html body.parts-professional:not(.gap):not(.direct) :is(.cartp-go,.cartp-summary button.acct-btn,.cartp-summary a.acct-btn,.sf-cart .sf-checkout):hover:not([disabled]):not([aria-disabled=true]){background:#f3f4f6!important;border-color:#202124!important}
html body.parts-professional:not(.gap):not(.direct) :is(.cartp-go[disabled],.cartp-go[aria-disabled=true]){opacity:.5!important;background:#f3f4f6!important}

/* Checkout summary (owner 2026-10-26): "Lägg beställning" and "Tillbaka till varukorgen" are the same size, full width and a medium height (smaller than the big cart button). */
html body .acct .cartp-summary .cartp-go,html body .cartp-summary .cartp-go,html body .acct .cartp-summary a.acct-link,html body .cartp-summary a.acct-link{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;width:100%!important;min-height:44px!important;margin:8px 0 0!important;padding:0 18px!important;border:1px solid #101311!important;border-radius:999px!important;background:#fff!important;color:#101311!important;font:600 14px/1 inherit!important;text-decoration:none!important;text-align:center!important}
html body .acct .cartp-summary .cartp-go:hover,html body .cartp-summary .cartp-go:hover,html body .acct .cartp-summary a.acct-link:hover,html body .cartp-summary a.acct-link:hover{background:#eef0ee!important;color:#101311!important}