ships with browser default styling that doesn't:
- A list-style marker (▶ triangle) on the left
- Focus outline (often a thick black/blue ring) when clicked
- cursor: default
These create the visual "tjock svart ram" the user sees vs the clean
color-trigger. We strip all of it. */
.pkpro-v4 .pkpro-method-accordion-summary,
.pkpro-v4 .pkpro-addons-summary {
/* Remove browser default triangle marker (Firefox + Chrome) */
list-style: none !important;
/* Remove the dotted/blue focus outline that shows on focus */
outline: none !important;
-webkit-tap-highlight-color: transparent !important;
cursor: pointer !important;
/* Ensure pixel-identical height with color-trigger (42px) */
box-sizing: border-box !important;
min-height: 42px !important;
}
/* Webkit (Chrome, Safari) — remove the disclosure triangle */
.pkpro-v4 .pkpro-method-accordion-summary::-webkit-details-marker,
.pkpro-v4 .pkpro-addons-summary::-webkit-details-marker {
display: none !important;
}
/* Strip any focus visibility, since the dropdown-open state IS the feedback */
.pkpro-v4 .pkpro-method-accordion-summary:focus,
.pkpro-v4 .pkpro-method-accordion-summary:focus-visible,
.pkpro-v4 .pkpro-addons-summary:focus,
.pkpro-v4 .pkpro-addons-summary:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* Also strip outline on the parent element which some browsers
focus-ring instead of summary. */
.pkpro-v4 .pkpro-method-accordion:focus,
.pkpro-v4 .pkpro-method-accordion:focus-within,
.pkpro-v4 .pkpro-addons-details:focus,
.pkpro-v4 .pkpro-addons-details:focus-within {
outline: none !important;
}
/* ─── Width + no-shadow overrides per user request ──────────────────
1) Make the trigger boxes AND open lists 100% wide of their parent so
they don't appear narrower than the Färg dropdown.
2) Remove ALL shadows on Förädling and Tillbehör accordions — open state
should be flat (no drop shadow under the expanded list). */
/* Force full-width on the wrapper, trigger, and the
expanded content. box-sizing ensures border + padding don't shrink them
inside their grid/flex parent. */
.pkpro-v4 .pkpro-method-accordion,
.pkpro-v4 .pkpro-addons-details {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.pkpro-v4 .pkpro-method-accordion-summary,
.pkpro-v4 .pkpro-addons-summary {
width: 100% !important;
box-sizing: border-box !important;
}
.pkpro-v4 .pkpro-method-accordion[open] > .pkpro-method-chips,
.pkpro-v4 .pkpro-addons-details[open] > .pkpro-addons-list {
width: 100% !important;
box-sizing: border-box !important;
}
/* Remove ALL shadows on Förädling + Tillbehör accordions. Overrides the
earlier "match color drop-shadow" rules in this same file. */
.pkpro-v4 .pkpro-method-accordion,
.pkpro-v4 .pkpro-method-accordion[open],
.pkpro-v4 .pkpro-method-accordion-summary,
.pkpro-v4 .pkpro-method-accordion[open] > .pkpro-method-chips,
.pkpro-v4 .pkpro-addons-details,
.pkpro-v4 .pkpro-addons-details[open],
.pkpro-v4 .pkpro-addons-summary,
.pkpro-v4 .pkpro-addons-details[open] > .pkpro-addons-list {
box-shadow: none !important;
}
/* ─── Strip the .pkpro-chip.active drop-shadow inside open accordions ──
priskalkyl.css line ~217 sets `box-shadow: 0 2px 6px rgba(0,0,0,.25)` on
`.pkpro-chip.active` — designed for the OLD chip-style method buttons where
the active state needed a slight lift. Inside the new dropdown-list style
we want NO shadow on rows; selection is shown by light-grey background +
bold text (same as color-options.selected). Override with high specificity
and !important to win over the priskalkyl.css declaration. */
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-chip.active,
.pkpro-v4 .pkpro-method-accordion .pkpro-chip.active,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-addon-row.is-selected,
.pkpro-v4 .pkpro-addons-details .pkpro-addon-row.is-selected,
.pkpro-v4 .pkpro-method-accordion .pkpro-chip,
.pkpro-v4 .pkpro-addons-details .pkpro-addon-row {
box-shadow: none !important;
}
/* ─── Tooltip placement override for dropdown-mode rows ──────────────
Default tooltip sits above the chip (bottom: 100% + 10px), which works
for chip-grid layouts. Inside the open accordion, that puts the bubble
in the middle of the dropdown overlapping other rows — exactly the
problem the user reported.
Solution: when the chip is inside an open method-accordion or addons-
accordion, anchor the tooltip to the RIGHT side of the row instead of
above. It then floats out of the dropdown box entirely. */
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-method-btn.pkpro-has-tooltip .pkpro-tooltip-content,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-method-btn.pkpro-has-tooltip .pkpro-tooltip-content {
/* Reset the above-the-row positioning */
bottom: auto !important;
/* Anchor to the right edge of the row, vertically centered */
top: 50% !important;
left: calc(100% + 12px) !important;
/* translateX(-50%) was for horizontal-centered above; reset it.
translateY(-50%) is what centers it vertically on the row. */
transform: translateY(-50%) translateX(-4px) !important;
/* Sit above any neighboring rows */
z-index: 1100 !important;
}
/* Hover-in state — slide in from the left by removing the initial offset */
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-method-btn.pkpro-has-tooltip:hover .pkpro-tooltip-content,
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-method-btn.pkpro-has-tooltip:focus-visible .pkpro-tooltip-content,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-method-btn.pkpro-has-tooltip:hover .pkpro-tooltip-content,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-method-btn.pkpro-has-tooltip:focus-visible .pkpro-tooltip-content {
transform: translateY(-50%) translateX(0) !important;
}
/* Also handle the legacy data-tooltip (::after) version — same row-side
placement. The legacy version is used on the brodyrkort checkbox and any
method button without a rich tooltip. */
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-method-btn[data-tooltip]::after,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-method-btn[data-tooltip]::after {
bottom: auto !important;
top: 50% !important;
left: calc(100% + 12px) !important;
transform: translateY(-50%) !important;
z-index: 1100 !important;
}
/* ─── Allow tooltip to escape list container ──────────────────────────
Earlier I set `overflow-y: auto` and `max-height: 240px` on the list
container to match color-options scroll behavior. But that clips absolutely-
positioned children — including the tooltip we just placed to the right.
For Förädling (2-3 methods typical) and Tillbehör (max ~8), no scroll is
actually needed, so we revert to overflow: visible. The tooltip can now
float past the right edge of the list. */
.pkpro-v4 .pkpro-method-accordion[open] > .pkpro-method-chips,
.pkpro-v4 .pkpro-addons-details[open] > .pkpro-addons-list {
overflow: visible !important;
max-height: none !important;
}
/* ─── Tooltip placement: above-right of the row ────────────────────
Right-of-list placement (4.23.12) made the bubble slide off the right
edge of the page. The accordion already fills nearly the whole column,
so there's no horizontal room outside it.
New strategy: place the tooltip ABOVE the hovered row, right-aligned to
the row's right edge. For the topmost row this floats out above the
trigger, well clear of the list. For other rows it overlays the row(s)
above — but with high z-index it sits on top cleanly. Right-alignment
keeps it inside the page width even when the tooltip is wide. */
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-method-btn.pkpro-has-tooltip .pkpro-tooltip-content,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-method-btn.pkpro-has-tooltip .pkpro-tooltip-content {
/* Override previous right-of-row positioning */
top: auto !important;
left: auto !important;
/* Sit above the row, right-aligned */
bottom: calc(100% + 8px) !important;
right: 0 !important;
/* Reset transform so animation works from a clean state */
transform: translateY(4px) !important;
z-index: 1100 !important;
}
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-method-btn.pkpro-has-tooltip:hover .pkpro-tooltip-content,
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-method-btn.pkpro-has-tooltip:focus-visible .pkpro-tooltip-content,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-method-btn.pkpro-has-tooltip:hover .pkpro-tooltip-content,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-method-btn.pkpro-has-tooltip:focus-visible .pkpro-tooltip-content {
transform: translateY(0) !important;
}
/* Same treatment for the legacy data-tooltip ::after version */
.pkpro-v4 .pkpro-method-accordion[open] .pkpro-method-btn[data-tooltip]::after,
.pkpro-v4 .pkpro-addons-details[open] .pkpro-method-btn[data-tooltip]::after {
top: auto !important;
left: auto !important;
bottom: calc(100% + 8px) !important;
right: 0 !important;
transform: translateY(0) !important;
z-index: 1100 !important;
}
/* ─── Unavailable addon rows: greyed-out, non-interactive ──────────
Triggered when current qty is below the addon's minimum tier. The text
shows "Min. X st" instead of "+0,00 kr/st" so the customer knows WHY
they can't pick it. Pointer-events disabled = no click. Light grey
colors = clearly inactive but still readable. */
.pkpro-v4 .pkpro-addon-row.is-unavailable {
opacity: 0.45 !important;
pointer-events: none !important;
cursor: not-allowed !important;
}
.pkpro-v4 .pkpro-addon-row.is-unavailable .pkpro-addon-name,
.pkpro-v4 .pkpro-addon-row.is-unavailable .pkpro-addon-price {
color: #999 !important;
}
.pkpro-v4 .pkpro-addon-row.is-unavailable .pkpro-addon-price {
/* Make the min-qty hint feel more like a status label, less like a price */
font-style: italic !important;
}
/* ─── Position open accordion list as floating dropdown ─────────────
The fundamental UX difference user noticed: color-options use
`position: absolute; top: 100%` to hover ON TOP of subsequent content
(z-index 9999), whereas my method/addons accordions used native
block-expansion that PUSHES content below downward.
Mirror color-options' positioning so all three dropdowns feel identical:
open list floats, layout below doesn't move. */
.pkpro-v4 .pkpro-method-accordion,
.pkpro-v4 .pkpro-addons-details {
/* Make the a positioning context for its absolute child */
position: relative !important;
}
.pkpro-v4 .pkpro-method-accordion[open] > .pkpro-method-chips,
.pkpro-v4 .pkpro-addons-details[open] > .pkpro-addons-list {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
}
/* ─── Multi-positions picker: ⓘ-info-ikon + inline-panel (4.23.34) ───
Tooltip-bubblan (som på premiumkepsar) skulle klippas av pickerns
overflow:hidden + scroll. Här visas infon istället inline under raden
när man klickar på ⓘ — ingen klippning, fungerar på mobil. */
.pkpro-position-picker-row{
flex-wrap: wrap;
position: relative;
}
.pkpro-picker-info{
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid currentColor;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 700;
font-size: 12px;
line-height: 1;
text-transform: none;
letter-spacing: 0;
opacity: .5;
cursor: pointer;
user-select: none;
transition: opacity .15s ease;
}
.pkpro-picker-info:hover,
.pkpro-picker-info:focus-visible{ opacity: 1; outline: none; }
.pkpro-position-picker-row.info-open .pkpro-picker-info{ opacity: 1; }
.pkpro-position-picker-row.active .pkpro-picker-info{ border-color: #fff; color: #fff; }
.pkpro-picker-info-panel{
display: none;
flex-basis: 100%;
width: 100%;
margin-top: 4px;
padding: 10px 12px;
gap: 10px;
align-items: flex-start;
background: #fff;
color: #1a1a1a;
border: 1px solid #e5e5e5;
border-radius: 10px;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.pkpro-position-picker-row.info-open .pkpro-picker-info-panel{ display: flex; }
.pkpro-picker-info-img{
flex-shrink: 0;
width: 96px;
height: auto;
max-height: 120px;
object-fit: contain;
border-radius: 6px;
}
.pkpro-picker-info-text{
flex: 1;
font-size: 12.5px;
line-height: 1.45;
color: #444;
}
/* Multi-positions picker: förädling under minsta antal — grå + ej valbar (4.23.35) */
.pkpro-position-picker-row.is-unavailable{
opacity: .5;
cursor: not-allowed;
}
.pkpro-position-picker-row.is-unavailable:hover{
background: #f5f5f3;
}
.pkpro-position-picker-row.is-unavailable .pkpro-position-picker-price{
color: #999;
font-style: italic;
}
.pkpro-position-picker-row.is-unavailable .pkpro-picker-info{
display: none;
}
/* Vanlig förädlings-lista: metod under minsta antal — grå + "minst X st" (4.23.37) */
.pkpro-method-chips .pkpro-method-btn.pkpro-method-below-min{
opacity: .5;
cursor: not-allowed !important;
}
.pkpro-method-chips .pkpro-method-btn.pkpro-method-below-min .pkpro-method-name{
color: #999;
}
.pkpro-method-min-label{
margin-left: auto;
padding-left: 10px;
color: #999;
font-style: italic;
font-size: 12px;
white-space: nowrap;
}
.pkpro-method-btn.pkpro-method-below-min .pkpro-tooltip-content{
display: none !important;
}
/* Vanlig förädlings-lista: pris per metod i optionen (4.23.43) */
.pkpro-method-chips .pkpro-method-price{
margin-left: auto;
padding-left: 12px;
color: #555;
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
}
.pkpro-method-chips .pkpro-method-btn.active .pkpro-method-price{ color: #1a1a1a; }
/* ── Offert-läge "Pris på förfrågan" (4.24.0) ── */
.pkpro-quote-mode .pkpro-method-price,
.pkpro-quote-mode .pkpro-addon-price,
.pkpro-quote-mode .pkpro-picker-price,
.pkpro-quote-mode .pkpro-qty-tier-label,
.pkpro-quote-mode .pkpro-qty-tier-table-link { display: none !important; }
.pkpro-quote-note {
font-size: 18px;
font-weight: 600;
color: #131313;
padding: 14px 2px;
}
.pkpro-wishes-field { margin-top: 6px; }
.pkpro-wishes {
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(19,19,19,.2);
border-radius: 6px;
padding: 10px 12px;
font: inherit;
font-weight: 400;
resize: vertical;
}
/* ── Enkelvals-storlekar (En storlek per order, 4.24.9) ── */
.pkpro-size-single { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pkpro-size-single-chip {
border: 1px solid rgba(19,19,19,.25);
background: #fff;
color: #131313;
border-radius: 6px;
padding: 8px 16px;
font: inherit;
cursor: pointer;
transition: all .12s ease;
}
.pkpro-size-single-chip:hover { border-color: #131313; }
.pkpro-size-single-chip.active {
background: #131313;
color: #fff;
border-color: #131313;
}
.pkpro-size-single-label { display: block; }