/* Shared pieces of the open shops (Direct, Gap): the product page of a real product, the delivery country dialog, the country chip in the header. Neutral so that each shop's own style can sit around it. */
.shop-country{border:0;border-radius:14px;padding:26px 28px;width:min(420px,calc(100vw - 32px));background:#fff;color:#1c211e;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.shop-country::backdrop{background:rgba(0,0,0,.4)}
.shop-country h2{margin:0 0 8px;font-size:20px}
.shop-country p{margin:0 0 16px;font-size:14px;color:#4b514d}
.shop-country label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.shop-country select{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid #cfd4cf;border-radius:8px;font:inherit;background:#fff;color:#1c211e}
.shop-btn{display:block;width:100%;margin-top:14px;padding:13px;border:0;border-radius:10px;background:#1d221f;color:#fff;font:600 14px inherit;cursor:pointer}
.shop-link{display:block;margin:10px auto 0;border:0;background:none;color:#4b514d;font:500 13px inherit;text-decoration:underline;cursor:pointer}
.shop-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;background:none;color:inherit;font:600 12px inherit;cursor:pointer}
.shop-chip:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
/* product page of a real product */
.direct-main .parts-detail,.gap-main .parts-detail{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:30px 0 70px;max-width:1100px;margin:0 auto}
.direct-main .parts-detail-image,.gap-main .parts-detail-image{background:#f4f5f2;border:1px solid #e1e3e0;border-radius:10px;align-self:start}
.direct-main .parts-detail-image img,.gap-main .parts-detail-image img{display:block;width:100%;height:auto;padding:20px}
.direct-main .parts-detail-buy h1,.gap-main .parts-detail-buy h1{font-size:clamp(26px,3vw,38px);line-height:1.1;margin:6px 0 10px}
.direct-main .parts-article-number,.gap-main .parts-article-number{font-size:13px;color:#5d625f}
.direct-main .parts-detail-price,.gap-main .parts-detail-price{font-size:30px;letter-spacing:-.03em;margin:22px 0 0}
.direct-main .parts-help,.gap-main .parts-help{margin:4px 0;font-size:13px;color:#5d625f}
.direct-main .parts-stock,.gap-main .parts-stock{margin:12px 0;font-size:14px;font-weight:600}
.direct-main .parts-buy-form,.gap-main .parts-buy-form{display:flex;align-items:end;gap:12px;margin:20px 0}
.direct-main .parts-buy-form label,.gap-main .parts-buy-form label{width:90px;font-size:12px;display:grid;gap:4px}
.direct-main .parts-buy-form input,.gap-main .parts-buy-form input{padding:11px;border:1px solid #cfd4cf;border-radius:8px;font:inherit}
.direct-main .parts-buy-form button,.gap-main .parts-buy-form button{flex:1;padding:13px 18px;border:0;border-radius:10px;background:#1f8a4c;color:#fff;font:700 14px inherit;cursor:pointer}
.direct-main .parts-detail-information,.gap-main .parts-detail-information{grid-column:1/-1;border-top:1px solid #e1e3e0;padding-top:24px}
.direct-main .parts-detail-information h2,.gap-main .parts-detail-information h2{font-size:19px}
.direct-main .parts-detail-information p,.gap-main .parts-detail-information p{font-size:14px;color:#4b514d}
.direct-main .parts-reference-tags,.gap-main .parts-reference-tags{display:flex;flex-wrap:wrap;gap:8px}
.direct-main .parts-reference-tags span,.gap-main .parts-reference-tags span{font-size:12px;border:1px solid #e1e3e0;padding:6px 10px;border-radius:6px}
@media(max-width:760px){.direct-main .parts-detail,.gap-main .parts-detail{grid-template-columns:1fr;gap:20px}}
/* account, cart and checkout pages inside the open shops */
.direct-main .acct,.gap-main .acct{margin:0 -16px;border-radius:0}

/* Delivery country dialog (Direct, Gap): clean and modern. Scoped and strong enough to beat the button styles of the shop themes. */
.shop-country{border:0;border-radius:18px;padding:30px 28px 24px;width:min(400px,calc(100vw - 32px));background:#fff;color:#14181a;box-shadow:0 24px 70px rgba(10,14,18,.28),0 2px 8px rgba(10,14,18,.08)}
.shop-country::backdrop{background:rgba(10,14,18,.5);backdrop-filter:blur(3px)}
.shop-country .shop-country-icon{display:grid;place-items:center;width:46px;height:46px;margin:0 0 16px;border-radius:50%;background:#f1f3f2;color:#14181a}
.shop-country h2{margin:0 0 6px;font-size:22px;line-height:1.25;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
.shop-country p{margin:0 0 22px;font-size:14px;line-height:1.55;color:#5a625d}
.shop-country label{display:block;margin:0 0 7px;font-size:12px;font-weight:600;letter-spacing:.02em;color:#3a413d}
.shop-country select{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;height:50px;padding:0 44px 0 14px;border:1px solid #d5dad7;border-radius:12px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23596059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 16px center;color:#14181a;font:500 15px/1 inherit}
.shop-country select:focus-visible{outline:2px solid #14181a;outline-offset:2px}
.shop-country .shop-btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin:16px 0 0;padding:0 18px;border:0;border-radius:12px;background:#14181a;color:#fff;font:600 15px/1 inherit;cursor:pointer;transition:background .15s}
.shop-country .shop-btn:hover{background:#2a3033}
.shop-country .shop-link{display:block;width:auto;height:auto;margin:6px auto 0;padding:12px 10px;border:0;border-radius:8px;background:none;color:#5a625d;font:500 13.5px/1 inherit;text-decoration:none;cursor:pointer}
.shop-country .shop-link:hover{color:#14181a;background:none;text-decoration:underline}
.shop-country .shop-btn:focus-visible,.shop-country .shop-link:focus-visible{outline:2px solid #14181a;outline-offset:2px}
@media(max-width:420px){.shop-country{padding:26px 20px 20px}}

/* Direct header: language and currency are two visible choices, the delivery country is a quiet pin + name (like the other header texts), not a button. */
.direct-tools .direct-choice{display:flex;align-items:center;gap:2px;font-size:11px;font-weight:600}
.direct-tools .direct-choice a{padding:8px 6px;border-radius:6px;opacity:.65;text-decoration:none;color:inherit}
.direct-tools .direct-choice a:hover{opacity:1}
.direct-tools .direct-choice a[aria-current=true]{opacity:1;box-shadow:inset 0 -2px 0 currentColor;border-radius:0}
.direct-tools .shop-chip{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;min-height:44px;padding:8px 6px;font-size:11px;font-weight:600;color:inherit;cursor:pointer;white-space:nowrap}
.direct-tools .shop-chip svg{flex:none;opacity:.85}
.direct-tools .shop-chip:hover svg{opacity:1}
.direct-tools .shop-chip:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:700px){.direct-tools .shop-chip span{display:none}}
/* The catalogue page of Direct and Gap uses the layout of PRO: the shop themes colour headings and strong text, so the white cards of the catalogue get their dark text back. */
body.shop-catalogue .catalog-target-name strong,body.shop-catalogue .catalog-target h2,body.shop-catalogue .catalog-target-name small{color:#14181a}
body.shop-catalogue .catalog-target small,body.shop-catalogue .catalog-target-brief{color:#5d625f}
body.shop-catalogue .catalog-target .catalog-target-pick{color:#fff}
body.shop-catalogue .catalog-results{color:#14181a}
body.shop-catalogue .vt-modes button{color:#14181a}
body.shop-catalogue .vt-modes button[aria-selected=false]{color:#4b514d}

/* The catalogue pages of Direct and Gap: plain white for now (no background picture); the shop's own header and footer keep their colours. */
body.parts-professional.parts-catalogue.shop-catalogue{background:#fff!important;background-image:none!important}
body.shop-catalogue .catalog-target,body.shop-catalogue .catalog-results,body.shop-catalogue .catalog-tree-card,body.shop-catalogue .catalog-sidebar>nav{border:1px solid #e1e3e0!important;box-shadow:none!important}

body.shop-catalogue .catalog-target p,body.shop-catalogue .catalog-target a:not(.catalog-target-pick){color:#14181a}
body.shop-catalogue .catalog-target small{color:#5d625f}

/* the vehicle's product groups under the "Valt fordon" box on the start page */
body.shop-catalogue .shop-vehicle-groups{margin-top:12px;padding:14px 16px;border:1px solid #e1e3e0;border-radius:14px;background:#fff}
body.shop-catalogue .shop-vehicle-groups .catalog-tree-label{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#3a403c}
body.shop-catalogue .shop-vehicle-groups ul{list-style:none;margin:0;padding:0}
body.shop-catalogue .shop-vehicle-groups a{display:block;padding:9px 6px;border-top:1px solid #eceeed;color:#14181a;font-size:14px;text-decoration:none}
body.shop-catalogue .shop-vehicle-groups a:hover{background:#f3f4f3}

/* Phone (Direct and Gap): the delivery country question is a sheet at the bottom of the screen, not a box in the middle */
@media(max-width:600px){
 body:is(.direct,.gap) dialog.shop-country[open]{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;box-sizing:border-box;border-radius:18px 18px 0 0;padding:24px 18px calc(24px + env(safe-area-inset-bottom,0px));box-shadow:0 -14px 44px rgba(0,0,0,.3)}
 body:is(.direct,.gap) dialog.shop-country select,body:is(.direct,.gap) dialog.shop-country button{min-height:48px}
}