/* P1 Quote Cart — styles (standalone; SCSS source to be folded into the theme build later) */

/* ---- Add-to-quote button ---- */
.quote-add-wrapper.single { margin: 18px 0; }
.add-to-quote-button.in-quote {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}
.add-to-quote-button.loading { opacity: .7; pointer-events: none; }
ul.products li.product .add-to-quote-button { margin-top: 10px; }

/* ---- Navbar quote link + badge ---- */
.quote-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: inherit;
	line-height: 1;
	padding: 6px;
}
.quote-cart-link:hover { color: inherit; opacity: .85; }
.quote-cart-icon { display: inline-flex; }
.quote-badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #b30000;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.quote-badge.is-empty { display: none; }

/* ---- Confirmation toast (prominent) ---- */
.quote-toast {
	position: fixed;
	z-index: 100000;
	right: 24px;
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 400px;
	background: #1d1d1d;
	color: #fff;
	padding: 18px 22px;
	border-radius: 12px;
	border-left: 5px solid #2e7d32;
	box-shadow: 0 12px 40px rgba(0,0,0,.35);
	font-size: 15px;
	font-weight: 500;
	transform: translateY(30px) scale(.96);
	opacity: 0;
	pointer-events: none;
	transition: transform .3s cubic-bezier(.2,.9,.3,1.3), opacity .3s ease;
}
.quote-toast.is-visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.quote-toast.pop .quote-toast__icon { animation: qc-pop .45s ease; }
@keyframes qc-pop { 0%{ transform: scale(.4); } 60%{ transform: scale(1.2); } 100%{ transform: scale(1); } }
.quote-toast__icon { display: inline-flex; flex: 0 0 auto; }
.quote-toast__msg { flex: 1 1 auto; line-height: 1.35; }
.quote-toast__link {
	display: inline-block;
	flex: 0 0 auto;
	color: #ffd34d;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.quote-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* =====================================================================
 * Quote cart page (1c)
 * ===================================================================== */
/* Full-width content on the cart template (no theme sidebars). */
.quote-cart-entry .content,
.quote-cart-entry .content.content-full {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}

.quote-cart-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 28px;
	align-items: start;
	max-width: 1120px;            /* prevent the table column sprawling on wide screens */
}
.quote-cart-items { min-width: 0; }            /* let the table fill its column, no overflow */
.quote-cart-page, .quote-cart-page * { box-sizing: border-box; }
.quote-cart-items .woocommerce-cart-form, .quote-cart-table { width: 100%; }
.qc-name a { word-break: break-word; }
.qc-field input, .qc-field select, .qc-field textarea { max-width: 100%; }
/* Honeypot — hidden from humans */
.qc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.quote-cart-heading,
.quote-form-heading { font-size: 22px; margin: 0 0 16px; }

/* Items table */
.quote-cart-table { width: 100%; border-collapse: collapse; }
.quote-cart-table thead th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #666;
	border-bottom: 2px solid #e3e3e3;
	padding: 8px 10px;
}
.quote-cart-table td {
	padding: 14px 10px;
	border-bottom: 1px solid #ececec;
	vertical-align: middle;
	font-size: 14px;
}
.qc-name-cell { display: flex; align-items: center; gap: 12px; }
.qc-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.qc-name { display: flex; flex-direction: column; }
.qc-name a { font-weight: 600; color: #1d1d1d; }
.qc-article { color: #888; font-size: 12px; margin-top: 2px; }
.qc-stock-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.qc-stock-badge.in  { background: #e6f4ea; color: #1e7a34; }
.qc-stock-badge.out { background: #fdeaea; color: #b00020; }
.quote-cart-table .product-quantity input.qty { width: 64px; padding: 6px; text-align: center; }
.quote-cart-table .product-remove .remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: #f1f1f1; color: #b00020 !important; font-size: 18px; text-decoration: none;
}
.quote-cart-table .product-remove .remove:hover { background: #f7d6d6; }

.quote-cart-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.quote-clear-cart { color: #b00020; text-decoration: underline; font-size: 14px; }

/* Quote form sidebar */
.quote-cart-sidebar {
	background: #f7f7f7;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 24px;
	position: sticky;
	top: 20px;
}
.quote-form-intro { font-size: 13px; color: #666; margin: -6px 0 18px; }
.qc-field { margin-bottom: 14px; display: flex; flex-direction: column; }
.qc-field label { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.qc-field input, .qc-field textarea {
	width: 100%; padding: 10px 12px; border: 1px solid #d4d4d4; border-radius: 6px; font-size: 14px; background: #fff;
}
.qc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.qc-toggle-opt { min-width: 0; }
.qc-toggle-opt {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 10px; border: 1px solid #d4d4d4; border-radius: 6px; cursor: pointer; background: #fff; font-size: 14px;
}
.qc-toggle-opt.is-active { border-color: #1d1d1d; background: #1d1d1d; color: #fff; }
.qc-toggle-opt input { accent-color: #fff; }
.qc-conditional { margin-bottom: 12px; }
.qc-file-field small { color: #888; font-size: 12px; margin-top: 4px; }
.qc-file-list { list-style: none; margin: 8px 0 0; padding: 0; }
.qc-file-list li { font-size: 12px; color: #444; padding: 3px 0; border-bottom: 1px dashed #e0e0e0; }
.qc-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #555; margin: 12px 0 16px; }
.qc-consent input { margin-top: 2px; }
.quote-submit { width: 100%; justify-content: center; }
.quote-submit.loading { opacity: .7; pointer-events: none; }
.quote-form-message { margin-top: 14px; padding: 12px 14px; border-radius: 6px; font-size: 14px; }
.quote-form-message.is-success { background: #e6f4ea; color: #1e7a34; }
.quote-form-message.is-error { background: #fdeaea; color: #b00020; }

@media (max-width: 900px) {
	.quote-cart-page { grid-template-columns: 1fr; max-width: 100%; }
	.quote-cart-sidebar { position: static; }
	.qc-row { grid-template-columns: 1fr; }
	.quote-cart-table thead { display: none; }
	.quote-cart-table, .quote-cart-table tbody, .quote-cart-table tr, .quote-cart-table td { display: block; width: 100%; }
	.quote-cart-table tr { border: 1px solid #ececec; border-radius: 8px; margin-bottom: 12px; padding: 6px 10px; }
	.quote-cart-table td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; }
	.quote-cart-table td::before { content: attr(data-title); font-weight: 600; color: #666; font-size: 12px; }
	.quote-cart-table td.product-name::before { content: ""; }
}


/* QA fix B_03/B_12/B_13 — visible inline validation errors */
.field-error { display: block; color: #b00020; font-size: 12px; margin-top: 4px; font-weight: 500; }
.has-error > input, .has-error > select, .has-error > textarea,
.has-error input, .has-error select, .has-error textarea { border-color: #b00020 !important; }

/* QA fix B_05/checkboxes — theme globally hides native checkboxes; restore ours */
.quote-request-form input[type="checkbox"] {
	position: static !important; opacity: 1 !important; z-index: auto !important;
	-webkit-appearance: checkbox !important; appearance: auto !important;
	width: 16px; height: 16px; min-width: 16px; margin: 0; flex: 0 0 auto;
}

/* =====================================================================
 * P1 Offertkorg — redesign to match client mockup (Beställningsunderlag)
 * ===================================================================== */
.oc-page { --oc-orange:#ef7202; width:100%; max-width:1180px; margin-left:auto; margin-right:auto; }
.oc-page .card { background:#fff; border:1px solid #ececec; border-radius:12px; }

/* The theme's legacy two-column cart CSS pins .woocommerce-cart-form to
   width:calc(60% - 1em) and floats it, which squeezed our custom product grid
   into the left ~60% of the card. Our layout owns the columns via .oc-grid, so
   let the form (which wraps the products list) fill the products card fully. */
.woocommerce-cart .woocommerce .oc-page .woocommerce-cart-form {
	width:100%; max-width:none; float:none; margin:0;
}

/* 3-step header */
.oc-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; list-style:none; margin:8px 0 24px; padding:0; }
.oc-step { display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid #ececec; border-radius:10px; padding:14px 16px; }
.oc-step.is-active { border-color:var(--oc-orange); box-shadow:0 0 0 1px var(--oc-orange) inset; }
.oc-step-no { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:#e6e6e6; color:#666; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px; }
.oc-step.is-active .oc-step-no { background:var(--oc-orange); color:#fff; }
.oc-step-txt { display:flex; flex-direction:column; min-width:0; }
.oc-step-txt strong { font-size:14px; }
.oc-step-txt small { color:#888; font-size:12px; line-height:1.3; }

/* Grid */
.oc-grid { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:24px; align-items:start; }

/* Products column */
.oc-products { padding:0; overflow:hidden; }
.oc-products-head { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid #eee; background:#fafafa; }
.oc-products-head h2 { margin:0; font-size:16px; }
.oc-count { background:var(--oc-orange); color:#fff; font-size:12px; font-weight:700; min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; }
.oc-product { padding:18px 20px; border-bottom:1px solid #f0f0f0; }
.oc-product-main { display:grid; grid-template-columns:64px 1fr auto auto; gap:14px; align-items:center; }
.oc-thumb img { width:64px; height:64px; object-fit:cover; border-radius:8px; background:#f1f1f1; }
.oc-product-info { min-width:0; }
.oc-name { font-weight:700; color:#1d1d1d; font-size:15px; display:inline-block; }
.oc-meta { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:#555; margin:4px 0; }
.oc-stock { font-weight:600; }
.oc-stock.in { color:#1e7a34; } .oc-stock.out { color:#b00020; }
.oc-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.oc-pill { font-size:11px; font-weight:600; padding:3px 9px; border-radius:12px; background:#eef0f2; color:#555; }
.oc-pill.is-primary { background:#fdecdc; color:#c2410c; }
.oc-article { color:#999; font-size:11px; }
.oc-qty { display:inline-flex; align-items:center; border:1px solid #d4d4d4; border-radius:8px; overflow:hidden; }
.oc-qty button { width:34px; height:36px; border:0; background:#f7f7f7; cursor:pointer; font-size:16px; color:#333; }
.oc-qty button:hover { background:#eee; }
/* WooCommerce wraps the input in a .quantity div; neutralise the theme's default
   input styling (grey fill, padding, 8px bottom margin) that was poking out the top. */
.oc-qty .quantity { display:flex; align-items:stretch; height:36px; margin:0; padding:0; }
.oc-qty input.qty {
	width:46px; height:36px; margin:0; padding:0 4px; box-sizing:border-box;
	border:0; border-left:1px solid #e3e3e3; border-right:1px solid #e3e3e3; border-radius:0;
	background:#fff; box-shadow:none; color:#333; font-size:15px; line-height:36px;
	text-align:center; vertical-align:top; -moz-appearance:textfield;
}
.oc-qty input.qty::-webkit-outer-spin-button, .oc-qty input.qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.oc-remove { width:28px; height:28px; border-radius:50%; background:#f5f5f5; color:#b00020 !important; display:inline-flex; align-items:center; justify-content:center; font-size:18px; text-decoration:none; }
.oc-remove:hover { background:#f7d6d6; }
.oc-specs { margin-top:12px; }
.oc-specs label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#888; margin-bottom:5px; }
.oc-specs textarea { width:100%; border:1px solid #e0e0e0; border-radius:8px; padding:8px 10px; font-size:13px; resize:vertical; background:#fafafa; }
.oc-list-actions { display:flex; align-items:center; gap:14px; padding:16px 20px; }
.oc-clear { color:#b00020; text-decoration:underline; font-size:13px; }
.oc-continue { display:inline-block; padding:14px 20px; color:#555; font-size:14px; }

/* Form column */
.oc-form { padding:22px; position:sticky; top:20px; }
.oc-form-h { font-size:15px; margin:0 0 10px; }
.oc-form-h:not(:first-child) { margin-top:22px; padding-top:18px; border-top:1px solid #f0f0f0; }
.oc-seg { display:flex; background:#f1f1f1; border-radius:9px; padding:4px; gap:4px; margin-bottom:12px; }
.oc-seg-opt { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; color:#555; }
.oc-seg-opt input { position:static !important; opacity:0; width:0; height:0; margin:0; }
.oc-seg-opt.is-active { background:#fff; color:#1d1d1d; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.oc-store { display:flex; gap:10px; background:#fdf4ec; border:1px solid #f6d8bd; border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.oc-store-icon { color:var(--oc-orange); }
.oc-store-body { display:flex; flex-direction:column; font-size:13px; line-height:1.5; }
.oc-store-body strong { color:#1d1d1d; }
.oc-store-body span { color:#666; }
.oc-form .qc-field { margin-bottom:12px; display:flex; flex-direction:column; }
.oc-form .qc-field label { font-size:13px; font-weight:600; margin-bottom:5px; }
.oc-form .qc-field input, .oc-form .qc-field textarea { width:100%; max-width:100%; padding:10px 12px; border:1px solid #d4d4d4; border-radius:7px; font-size:14px; background:#fff; }
.oc-form .qc-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.oc-dropzone { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; border:2px dashed #d0d0d0; border-radius:10px; padding:22px; text-align:center; cursor:pointer; background:#fafafa; transition:border-color .2s, background .2s; }
.oc-dropzone.is-drag { border-color:var(--oc-orange); background:#fdf4ec; }
.oc-dropzone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.oc-dz-icon { font-size:22px; color:#aaa; }
.oc-dz-text { font-size:13px; color:#555; }
.oc-dropzone small { color:#999; font-size:11px; }
.oc-form .qc-consent { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:#555; margin:14px 0; font-weight:400; }
.oc-submit { width:100%; justify-content:center; text-align:center; background:var(--oc-orange); border-color:var(--oc-orange); color:#fff; font-weight:700; padding:14px; border-radius:8px; }
.oc-submit:hover { filter:brightness(.95); }
.oc-reassure { font-size:11px; color:#999; line-height:1.5; margin:10px 0 0; text-align:center; }

@media (max-width:900px) {
	.oc-steps { grid-template-columns:1fr; }
	.oc-grid { grid-template-columns:1fr; }
	.oc-form { position:static; }
	.oc-product-main { grid-template-columns:56px 1fr; grid-template-areas:"thumb info" "qty qty"; row-gap:12px; }
	.oc-thumb { grid-area:thumb; } .oc-product-info { grid-area:info; }
	.oc-qty { grid-area:qty; } .oc-remove { position:absolute; }
	.oc-form .qc-row { grid-template-columns:1fr; }
}

/* Confirmation popup — match mockup (white card, orange top border) */
.quote-toast { background:#fff !important; color:#1d1d1d !important; border-left:0 !important; border-top:4px solid #ef7202 !important; box-shadow:0 12px 40px rgba(0,0,0,.22) !important; }
.quote-toast .quote-toast__msg { font-weight:700; }
.quote-toast .quote-toast__link { color:#ef7202 !important; }

/* Confirmation popup product name (spec: visa produktnamn) */
.quote-toast__body { display:flex; flex-direction:column; flex:1 1 auto; }
.quote-toast__name { font-weight:700; font-size:14px; color:#1d1d1d; }
.quote-toast__msg { font-weight:500; font-size:13px; color:#2e7d32; }

/* Navbar Projekt + Offertkorg links — now in the main nav row (design spec). */
.project-nav-link, .quote-cart-link { display:inline-flex; align-items:center; gap:6px; color:inherit; font-size:15px; font-weight:600; }
.project-nav-link:hover, .quote-cart-link:hover { color:inherit; opacity:.85; }
.project-nav-icon, .quote-cart-icon { display:inline-flex; }
.quote-cart-label { display:inline-block; }
.menu-item-right > ul .project-nav-item,
.menu-item-right > ul .quote-cart-item { display:flex; align-items:center; }
/* spacing between the main-row items (location · Projekt · Offertkorg · Kontakta oss) */
.menu-item-right > ul .project-nav-item { margin-left:8px; }
.menu-item-right > ul .quote-cart-item { margin-left:20px; margin-right:6px; }

/* QA fix B_18 — on phones the "Projekt"/"Offertkorg" text labels made the header
   wider than the viewport, causing a site-wide horizontal scroll/"shake". Below
   600px show icon + badge only; keep the labels for screen readers. */
@media (max-width: 600px) {
	.project-nav-link > span:not(.project-nav-icon),
	.quote-cart-label {
		position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
		overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
	}
	.project-nav-link, .quote-cart-link { gap:0; }
	.menu-item-right > ul .project-nav-item { margin-left:0; }
	.menu-item-right > ul .quote-cart-item { margin-left:10px; margin-right:4px; }
}

/* =====================================================================
 * SPEC-MATCH pass (client review 2026-07-06) — pin every size/color to the
 * Beställningsunderlag mockups instead of inheriting theme defaults.
 * ===================================================================== */

/* ---- Add-to-offert button: compact orange w/ document-plus icon (mock p.2) ---- */
.button.add-to-quote-button {
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-size:14px; font-weight:600; padding:10px 18px; border-radius:6px;
	background:#ef7202; border-color:#ef7202; color:#fff; line-height:1.2;
}
.button.add-to-quote-button::after { content:none !important; }   /* no theme arrow */
.button.add-to-quote-button .atq-ic { display:inline-flex; }
.button.add-to-quote-button.in-quote,
.button.add-to-quote-button.added { background:#ef7202; color:#fff; opacity:1; }
/* WooCommerce's auto "Visa offertkorg" link — give it breathing room (client) */
a.added_to_cart { margin-left:16px; font-size:14px; font-weight:600; }
/* keep the theme's default loop "wc-forward" duplicate hidden if it appears */
.add-to-quote-button + .added_to_cart { margin-left:16px; }

/* ---- Cart page title (mock p.4: "Offertkorg" + orange count badge) ---- */
.oc-page .oc-title { display:flex; align-items:center; gap:12px; font-size:28px; margin:4px 0 18px; }
.oc-title-count { background:#fdecdc; color:#ef7202; font-size:14px; font-weight:700; padding:3px 10px; border-radius:6px; line-height:1.2; }

/* ---- Products card: small headings + PRODUKT/ANTAL column row ---- */
.oc-page .oc-products-head h2 { font-size:15px; font-weight:700; margin:0; }
.oc-products-head { padding:14px 20px; background:#fff; }
.oc-page .oc-count { background:none; color:#888; font-size:13px; font-weight:600; }
.oc-cols { display:flex; justify-content:space-between; padding:9px 20px; border-bottom:1px solid #f0f0f0; background:#fafafa; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#999; }
.oc-cols span:last-child { margin-right:64px; }

/* ---- Product row: 14px name, stacked 12px meta, green/red location pills ---- */
.oc-page .oc-name { font-size:14px; font-weight:700; color:#1d1d1d; text-decoration:none; border-bottom:0; }
.oc-page .oc-name:hover { color:#ef7202; }
.oc-page .oc-meta { display:flex; flex-direction:column; gap:2px; font-size:12px; color:#777; margin:3px 0 6px; }
.oc-page .oc-pills { gap:6px; margin-top:0; }
.oc-page .oc-pill { font-size:11px; font-weight:600; padding:3px 10px; border-radius:12px; }
.oc-page .oc-pill.stock-in  { background:#e7f4ea; color:#1e7a34; }
.oc-page .oc-pill.stock-out { background:#fdeaea; color:#c62828; }

/* ---- Qty stepper: three separate small squares (mock), subtle × ---- */
.oc-page .oc-qty { border:0; border-radius:0; overflow:visible; gap:6px; }
.oc-page .oc-qty button { width:30px; height:30px; border:1px solid #ddd; border-radius:6px; background:#fff; font-size:14px; color:#555; }
.oc-page .oc-qty button:hover { border-color:#bbb; background:#fafafa; }
.oc-page .oc-qty .quantity { height:30px; }
.oc-page .oc-qty input.qty { width:42px; height:30px; border:1px solid #ddd; border-radius:6px; font-size:14px; }
.oc-page .oc-remove { width:26px; height:26px; background:none; color:#b9b9b9 !important; font-size:17px; }
.oc-page .oc-remove:hover { color:#c62828 !important; background:#fdeaea; }

/* ---- Footer: qty auto-saves (JS) so hide Uppdatera; keep Töm offert subtle ---- */
.oc-list-actions { display:flex; justify-content:flex-end; padding:10px 20px 0; }
.oc-list-actions button[name="update_cart"] { position:absolute; left:-9999px; }
.oc-page .oc-clear { font-size:12px; color:#999; text-decoration:underline; }
.oc-page .oc-clear:hover { color:#c62828; }

/* ---- Specs textarea: tighter, per mock ---- */
.oc-page .oc-specs label { font-size:10px; }
.oc-page .oc-specs textarea { font-size:12px; padding:8px 10px; }

/* ---- Right form column: 14px section headings, 12px labels, soft inputs ---- */
.oc-page h3.oc-form-h { font-size:14px; font-weight:700; margin:0 0 12px; }
.oc-page h3.oc-form-h:not(:first-child) { margin-top:20px; padding-top:18px; }
.oc-form .qc-field label { font-size:12px; font-weight:500; margin-bottom:4px; color:#333; }
.oc-form .req { color:#e02b20; }
.oc-form .qc-field input, .oc-form .qc-field textarea {
	font-size:13px; padding:9px 11px; background:#fafafa; border-color:#e0e0e0; border-radius:6px;
}
.oc-form .qc-field input:focus, .oc-form .qc-field textarea:focus { background:#fff; }
.oc-form .oc-seg-opt { padding:8px 10px; font-size:13px; }
.oc-form .oc-store-box, .oc-store { font-size:12px; }
.oc-form .oc-submit { width:100%; font-size:14px; font-weight:700; padding:12px 18px; border-radius:7px; }
.oc-page .oc-reassure { font-size:11px; line-height:1.5; color:#999; text-align:center; margin-top:12px; }
.oc-form .qc-consent { font-size:11px; }

/* ---- Dropzone: compact per mock ---- */
.oc-form .qc-dropzone, .oc-dropzone { padding:18px 14px; }
.oc-form .qc-dropzone p, .oc-dropzone p { font-size:12px; }
.oc-form .qc-dz-formats, .oc-dz-formats { font-size:10px; letter-spacing:.04em; color:#bbb; }

/* ---- Confirmation popup: link centered at bottom under divider + × (mock p.3) ---- */
.quote-toast { flex-wrap:wrap; padding:16px 18px 12px; }
.quote-toast__close {
	position:absolute; top:8px; right:10px; background:none; border:0; cursor:pointer;
	color:#999; font-size:16px; line-height:1; padding:4px;
}
.quote-toast__close:hover { color:#333; }
.quote-toast__thumb { flex:0 0 auto; width:44px; height:44px; border-radius:6px; overflow:hidden; background:#ececec; }
.quote-toast__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.quote-toast__link {
	flex-basis:100%; text-align:center; border-top:1px solid #eee;
	margin-top:12px; padding-top:10px; color:#ef7202; font-weight:700; text-decoration:none;
}
.quote-toast__link:hover { text-decoration:underline; }
/* toast msg row: green check inline with green "Tillagd i offert" text (mock) */
.quote-toast__msg { display:inline-flex; align-items:center; gap:7px; }
.quote-toast__name { margin-top:2px; }
.quote-toast { align-items:flex-start; padding-right:34px; }

/* The theme sizes buttons/headings with #entry-scoped and deep loop selectors —
   pin the spec sizes on our own components explicitly. */
ul.products li.product .button.add-to-quote-button,
.woocommerce .button.add-to-quote-button,
.button.add-to-quote-button {
	display:inline-flex !important;
	font-size:14px !important;
	padding:10px 18px !important;
	border-radius:6px !important;
	line-height:1.2 !important;
}
.oc-page h1.oc-title { font-size:28px !important; line-height:1.2; }
.oc-page .oc-products-head h2 { font-size:15px !important; }
.oc-page .oc-reassure { font-size:11px !important; }
/* Mock navbar badge is orange, not red */
.quote-badge { background:#ef7202 !important; }

/* =====================================================================
 * Product listing card (archive) — match spec mockup (P1 Del 1):
 * flush-left image filling card height, compact content, orange
 * "Klicka här för full produktdata" link with document icon, clean buttons.
 * ===================================================================== */
.card-list-product { background:#fff; border:1px solid #e6e6e6; border-radius:12px; overflow:hidden; margin-bottom:16px; }
/* Zero the theme's .accordion-item padding/border so the image sits flush to the card edge */
.card-list-product .accordion,
.card-list-product > .accordion > .accordion-item { padding:0 !important; margin:0 !important; border:0 !important; background:none !important; }
.card-list-product .accordion-product-short { display:flex; align-items:stretch; transition:background .3s; }
.card-list-product .accordion-product-short:hover { background:#fafafa; }
/* Image: flush to the left edge, fills the full card height */
.card-list-product .accordion-product-short figure.image-crop { min-width:0; flex:0 0 34%; max-width:300px; margin:0; padding:0; align-self:stretch; }
.card-list-product .accordion-product-short figure.image-crop img { width:100%; height:100% !important; min-height:170px; object-fit:cover; display:block; border-radius:0; }
/* Content column */
.card-list-product .accordion-product-short-inner { flex:1 1 auto; padding:22px 26px !important; display:flex !important; flex-direction:column; align-items:flex-start !important; }
.card-list-product .related-title { font-size:19px; font-weight:700; color:#1d1d1d; display:block; margin-bottom:12px; }
.card-list-product .product-accordion-item { margin:0; }
.card-list-product .product-accordion-item > span { display:flex; gap:16px; font-size:14px; color:#333; padding:3px 0; }
.card-list-product .product-accordion-item .accordion-item-title { color:#888; font-weight:400; min-width:120px; display:inline-block; }
/* "Klicka här för full produktdata" → orange with document icon (mock) — own classes,
   not the theme's heavily-styled .read-more (uppercase / chevron / underline bar). */
.card-list-product .accordion-trigger--produktdata { background:none !important; border:0; padding:0 !important; cursor:pointer; text-align:left; margin:12px 0 16px !important; width:auto !important; }
.card-list-product .pd-link { display:inline-flex !important; align-items:center; gap:7px; width:auto !important; }
.card-list-product .pd-ic { display:inline-flex; color:#ef7202; }
.card-list-product .pd-text { color:#ef7202; font-size:14px; font-weight:600; text-transform:none; letter-spacing:0; text-decoration:none; }
.card-list-product .accordion-trigger--produktdata:hover .pd-text { text-decoration:underline; }
/* Buttons row: outline "Visa produkt" + orange "Lägg till i offert" — EQUAL size (mock).
   flex:1 + capped row width → identical width; align-items:stretch + matched
   padding/line-height → identical height. */
.card-list-product .pd-buttons { display:flex; gap:12px; align-items:stretch; margin-top:auto; padding-top:4px; max-width:400px; width:100%; }
.card-list-product .pd-buttons .button {
	flex:1 1 0 !important; min-width:0; margin:0 !important;
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:11px 16px !important; font-size:14px !important; line-height:1.3 !important;
	border-radius:6px !important; box-sizing:border-box; height:auto !important;
}
@media (max-width:600px) {
	.card-list-product .accordion-product-short { flex-direction:column; }
	.card-list-product .accordion-product-short figure.image-crop { flex-basis:auto; max-width:none; }
	.card-list-product .accordion-product-short figure.image-crop img { min-height:180px; }
}

/* ---- Main-nav Projekt + Offertkorg placement (design spec navbar) ----
   The items now live in .menu-item-right. Keep everything on ONE row: the
   theme's 550px search is a touch too wide once we add two items, so trim it
   slightly on desktop and prevent the row from wrapping. Force white text so
   the links read on the dark bar (they were inheriting #333). */
@media (min-width: 981px) {
	/* Let the right group size to its own content (location + Projekt + Offertkorg
	   + Kontakta oss) instead of being squeezed by flex:1 (which made the items
	   overflow left over the search). The search then takes the remaining space. */
	#navigation nav.menu-middle ul li.menu-item-right { flex: 0 0 auto !important; min-width: 0 !important; }
	#navigation nav.menu-middle ul li.menu-item-right > ul { flex-wrap: nowrap; gap: 20px; }
	#navigation nav.menu-middle ul li.menu-item-search { flex: 0 1 auto; min-width: 0; }
	#navigation nav.menu-middle ul li.menu-item-search input { width: clamp(220px, 26vw, 420px) !important; }
	#navigation .menu-item-right .header-btn { white-space: nowrap; }
}
/* white links on the dark bar (were inheriting #333), never underlined (all widths) */
#navigation .menu-item-right .project-nav-link,
#navigation .menu-item-right .quote-cart-link,
#navigation .menu-item-right .project-nav-link span,
#navigation .menu-item-right .quote-cart-label,
#navigation .menu-item-right .dropdown-toggle,
#navigation .menu-item-right .dropdown-placeholder { color: #fff !important; text-decoration: none !important; }
/* drop the extra per-item margins — the ul gap handles spacing now */
#navigation .menu-item-right > ul .project-nav-item,
#navigation .menu-item-right > ul .quote-cart-item { margin: 0; }

/* Design-spec navbar: Bromma / Projekt / Offertkorg are OUTLINED PILL BUTTONS
   (52px tall, matching the search + Kontakta oss height), with the count badge
   on the Offertkorg pill's top-right corner. */
@media (min-width: 981px) {
	#navigation .menu-item-right .dropdown-toggle,
	#navigation .menu-item-right .project-nav-link,
	#navigation .menu-item-right .quote-cart-link {
		display: inline-flex; align-items: center; gap: 8px;
		height: 52px; padding: 0 18px; margin: 0;
		border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
		background: transparent; box-sizing: border-box; cursor: pointer; white-space: nowrap;
		text-decoration: none;
	}
	#navigation .menu-item-right .project-nav-link span,
	#navigation .menu-item-right .quote-cart-label { text-decoration: none; }
	#navigation .menu-item-right .dropdown-toggle:hover,
	#navigation .menu-item-right .project-nav-link:hover,
	#navigation .menu-item-right .quote-cart-link:hover {
		border-color: rgba(255,255,255,.55); opacity: 1;
	}
	#navigation .menu-item-right .quote-cart-link { position: relative; }
	#navigation .menu-item-right .quote-cart-link .quote-badge { top: -9px; right: -9px; }
	/* the location pill already has its own dropdown; keep the chevron inside */
	#navigation .menu-item-right .dropdown-container { position: relative; }
}

/* ---- Header search box → match spec navbar ----
   Spec: subtle border (not the bright white outline), NO magnifier icon,
   muted grey placeholder, rounded rect with the Sök button flush on the right. */
#navigation nav.menu-middle ul li.menu-item-search form {
	border: 1px solid rgba(255,255,255,.16) !important;
	border-radius: 8px !important;
	overflow: hidden;
}
#navigation nav.menu-middle ul li.menu-item-search form:before { content: none !important; display: none !important; }
#navigation nav.menu-middle ul li.menu-item-search input.field { padding-left: 18px !important; }
#navigation nav.menu-middle ul li.menu-item-search input.field::placeholder { color: rgba(255,255,255,.5) !important; opacity: 1; }
#navigation nav.menu-middle ul li.menu-item-search button { border-radius: 0 !important; }

/* ---- Kontakta oss: no arrow (spec mockup has none) ---- */
#navigation .menu-item-right .header-btn:after { content: none !important; display: none !important; }

/* ---- Mobile header icons (client feedback, Samuel/Bromma) ----
   Was: magnifier 24px vs Projekt/Offertkorg 18px; only 10px between the logo
   and the first icon (cramped), then a 46px gap before the hamburger.
   Now: all icons 18px, breathing room after the logo, cluster sits closer to
   the divider/hamburger with even margins. */
@media (max-width: 980px) {
	#navigation .search-icons .search-toggle-icon-open svg,
	#navigation .search-icons .search-toggle-icon-close svg { width: 18px !important; height: 18px !important; }
	#navigation .menu-item-logotype .search-icons { margin-left: 26px; display: inline-flex; align-items: center; }
	#navigation .menu-item-right > ul { gap: 22px; align-items: center; }
	#navigation .menu-item-right > ul .project-nav-item { margin-left: 4px; }
	#navigation .menu-item-right > ul .menu-item-mobile { margin-left: 6px; }
	/* keep the icons optically aligned with the logo */
	#navigation .menu-item-right .project-nav-icon svg,
	#navigation .menu-item-right .quote-cart-icon svg { width: 18px; height: 18px; }
}