/* ============================================================
   Produktvelger — Frontend Picker Styles
   Designed to sit comfortably inside any WordPress theme.
   All selectors are scoped to #pv-picker to avoid conflicts.
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
#pv-picker {
    font-family: inherit;
    color: inherit;
    box-sizing: border-box;

    /* Table left-edge geometry. The image column, the thumbnails and the branch
       lines drawn between them all have to agree on these, so they live in one
       place: the trunk runs down the centre of a parent's thumbnail, and an
       accessory's thumbnail starts where its branch ends, plus a small gap. */
    --pv-row-gutter: 14px;
    --pv-thumb: 56px;
    --pv-child-thumb: 40px;
    --pv-tree-line: 2px;
    --pv-tree-color: #c3cad0;
    --pv-branch: 15px;
    --pv-trunk-x: calc(var(--pv-row-gutter) + var(--pv-thumb) / 2 - var(--pv-tree-line) / 2);
    --pv-child-thumb-x: calc(var(--pv-trunk-x) + var(--pv-branch) + 4px);

    /* Table column widths. Every column is declared, because the table is laid
       out fixed and scrolls rather than reflows — see the table rules below for
       why. The image column is the one an accessory row needs: its thumbnail's
       offset, the thumbnail, the right-hand gutter. The text columns are
       measured rather than guessed: each is its widest value in the catalogue
       plus the two gutters, rounded up for headroom, so a name or part number
       never wraps and leaves one row taller than the rest. Descriptions
       are the exception — they wrap by nature, and 260px keeps the longest of
       them inside the height the thumbnail already sets. --pv-table-width is
       the sum, so resizing or adding a column cannot leave the table's floor
       behind. */
    --pv-col-image: calc(var(--pv-child-thumb-x) + var(--pv-child-thumb) + var(--pv-row-gutter));
    --pv-col-name: 210px;
    --pv-col-sku: 120px;
    --pv-col-nobb: 100px;
    --pv-col-description: 260px;
    --pv-col-action: 120px;
    --pv-table-width: calc(
        var(--pv-col-image) + var(--pv-col-name) + var(--pv-col-sku) +
        var(--pv-col-nobb) + var(--pv-col-description) + var(--pv-col-action)
    );

    /* Model specs widths. Fixed rather than sized to the text, so picking
       another model changes the words but not where they sit. The model column
       fits "Produsent Modell" names well past the longest in the catalogue, and
       a longer one wraps inside it instead of pushing the specs right. The spec
       column fits its widest label, "Farge taksikring", and its widest value,
       a range like "165 – 330mm", with room to spare. */
    --pv-info-model: 200px;
    --pv-info-col: 140px;
}

#pv-picker *,
#pv-picker *::before,
#pv-picker *::after {
    box-sizing: inherit;
}

/* ── Controls panel ───────────────────────────────────────── */
/* One panel holds the filters and, once a model is chosen, its specs, so the
   specs read as the outcome of the choice right above them instead of as a
   callout of their own. */
.pv-controls {
    margin-bottom: 24px;
    padding: 20px;
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
}

/* ── Filter bar ───────────────────────────────────────────── */
.pv-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.pv-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 200px;
}

.pv-filter-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin: 0;
}

.pv-filter-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 0.95rem;
    color: #333;
    cursor: pointer;
    appearance: auto;
}

.pv-filter-group select:focus {
    outline: 2px solid #e07800;
    outline-offset: 1px;
    border-color: #e07800;
}

.pv-filter-group select:disabled {
    background: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

/* ── Model specs ──────────────────────────────────────────── */
/* Neutral, like the rest of the panel: the orange accent is for controls that
   change state, and these only describe the choice. The model's name repeats
   the dropdowns just above, so it heads the row as one more label and value at
   the specs' weight rather than leading it; the chosen colour ends the row the
   same way. Labels are sentence case, quieter than the filter labels, and #666
   keeps them readable on the grey. */
#pv-model-info {
    display: flex;
    align-items: flex-start;
    gap: 12px 32px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e2e2;
    color: #1d2327;
}

.pv-model-info__header,
.pv-model-info__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pv-model-info__header {
    flex: 0 0 var(--pv-info-model);
}

.pv-model-info__label {
    font-size: 0.8rem;
    color: #666;
}

.pv-model-info__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d2327;
    overflow-wrap: break-word;
}

/* Fixed widths, not stretched to the space left over, which would move the
   specs whenever that changed. The colour is the exception: it comes last, so
   nothing moves when it grows, and it takes the rest of the line so a long
   colour name stays on one. */
.pv-model-info__props {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    flex: 1 1 var(--pv-info-col);
}

.pv-model-info__row {
    flex: 0 0 var(--pv-info-col);
}

.pv-model-info__row--fill {
    flex-grow: 1;
}

/* ── Product grid ─────────────────────────────────────────── */
#pv-product-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
    gap: 20px;
}

/* ── Product card ─────────────────────────────────────────── */
.pv-product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pv-product-card:hover {
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.10 );
    transform: translateY( -2px );
}

/* Image. Shown whole, so a photo that is not 4:3 leaves strips either side;
   white makes them blend into the white most product photos are shot on. */
.pv-product-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    display: block;
}

.pv-product-card__image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #fff;
}

/* Body */
.pv-product-card__body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.pv-product-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    margin: 0;
    line-height: 1.3;
}

.pv-product-card__sku,
.pv-product-card__nobb {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
}

.pv-product-card__description {
    font-size: 0.88rem;
    color: #555;
    margin: 0;
    flex: 1;
    line-height: 1.5;
}

/* Footer / CTA */
.pv-product-card__footer {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
}

/* Outlined, not filled: the orange accent belongs to the controls that change
   state (view toggle, focus), so the product link stays subordinate and
   only borrows the accent on hover. */
.pv-product-card__link {
    display: inline-block;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #ccc;
    color: #444 !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    width: 100%;
    text-align: center;
}

.pv-product-card__link:hover,
.pv-product-card__link:focus-visible {
    background: #fff4e6;
    border-color: #e07800;
    color: #e07800 !important;
}

.pv-product-card--no-link .pv-product-card__footer {
    display: none;
}

/* ── No results message ───────────────────────────────────── */
#pv-no-results {
    padding: 32px;
    text-align: center;
    color: #777;
    font-size: 1rem;
    border: 1px dashed #ccc;
    border-radius: 6px;
    background: #fafafa;
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media ( max-width: 600px ) {
    /* Stretch, not the desktop flex-end: in a column the cross axis is
       horizontal, so flex-end shrank each dropdown to its text and pushed it
       to the right edge. */
    .pv-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .pv-filter-group {
        flex: 1 1 100%;
    }

    /* One field per line. Too narrow for the specs to share a line with the
       model, and wrapped side by side each would land wherever the text before
       it left room. */
    #pv-model-info,
    .pv-model-info__props {
        flex-direction: column;
        gap: 12px;
    }

    .pv-model-info__header,
    .pv-model-info__props,
    .pv-model-info__row {
        flex: none;
    }

    #pv-product-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media ( max-width: 400px ) {
    #pv-product-grid {
        grid-template-columns: 1fr;
    }
}

/* ── View toggle buttons ──────────────────────────────────────────────────── */
#pv-picker .pv-view-toggle {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
}

#pv-picker .pv-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#pv-picker .pv-view-btn:hover {
    border-color: #ff8c02;
    color: #ff8c02;
}

#pv-picker .pv-view-btn--active {
    background: #ff8c02;
    border-color: #ff8c02;
    color: #fff;
}

#pv-picker .pv-view-btn--active:hover {
    background: #d97702;
    border-color: #d97702;
}

/* ── Product table ────────────────────────────────────────────────────────── */
#pv-picker #pv-product-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Deliberately NOT border-collapse. Collapsing makes each border a negotiation
   between adjacent cells, resolved and painted half-in/half-out of the cell
   box — and Chrome and Firefox round that differently, so the same table draws
   different separators in each. With separate borders every cell paints its
   own, identically everywhere. Nothing doubles up because this table only ever
   sets bottom borders, so the result is visually the same as collapsing was
   meant to be.

   Only bottom borders is also enforced: the table and its cells clear every
   border first, because themes commonly outline tables and draw a line down
   between each column, and those vertical lines would otherwise show through.

   Fixed layout, and never narrower than the sum of its columns: below that the
   wrapper scrolls sideways instead of the table reflowing. Auto layout squeezes
   every column to its minimum on a narrow screen, and this table cannot take
   that — the image column collapses past the branch indent an accessory's
   thumbnail sits at, leaving a sliver of image (a theme's img { max-width:100% }
   finishes the job), and the description column narrows until rows are all
   different heights. Fixed widths mean a phone shows the same rows as a desktop,
   just fewer of them at a time. */
#pv-picker #pv-product-table {
    width: 100%;
    min-width: var(--pv-table-width);
    table-layout: fixed;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
    color: #333;
}

#pv-picker .pv-th {
    padding: 10px var(--pv-row-gutter);
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    color: #444;
    background: #f7f7f7;
    border: 0;
    border-bottom: 3px solid #000000;
    white-space: nowrap;
}

/* Left-aligned, not centred: the branch lines are drawn at fixed distances from
   the cell's left edge, so the thumbnails they connect have to sit at fixed
   distances too. No padding of its own — .pv-th / .pv-td already apply the
   gutter, and being later in the file they would win anyway. The width is what
   an accessory row needs (its thumbnail's offset, the thumbnail, the right-hand
   padding), declared rather than left to the table so the other columns don't
   shift sideways when a model with accessories is swapped for one without. */
#pv-picker .pv-th--image,
#pv-picker .pv-td--image {
    width: var(--pv-col-image);
    text-align: left;
}

#pv-picker .pv-th--action,
#pv-picker .pv-td--action {
    width: var(--pv-col-action);
    text-align: center;
    white-space: nowrap;
}

/* The remaining columns. Under table-layout: fixed only the header row is
   measured, so these live on the th alone. */
#pv-picker .pv-th--name { width: var(--pv-col-name); }
#pv-picker .pv-th--sku { width: var(--pv-col-sku); }
#pv-picker .pv-th--nobb { width: var(--pv-col-nobb); }
#pv-picker .pv-th--description { width: var(--pv-col-description); }

/* A fixed column cannot grow for a long unbroken SKU or URL, so such a word
   breaks instead of overflowing into its neighbour. */
#pv-picker .pv-td {
    padding: 10px var(--pv-row-gutter);
    border: 0;
    border-bottom: 1px solid #ebebeb;
    vertical-align: middle;
    overflow-wrap: break-word;
}

#pv-picker .pv-td--description {
    color: #666;
    font-size: 0.85rem;
}

#pv-picker .pv-product-row:hover .pv-td {
    background: #f9f9f9;
}

/* Visually-hidden text. WordPress leaves .screen-reader-text to the theme, and
   the accessory rows depend on it for the "Tilbehør til X:" prefix — without a
   definition that prefix renders as visible text on themes that omit it. */
#pv-picker .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Accessory (sub-product) rows ───────────────────────────────────────── */

/* Accessories hang off their parent on a drawn branch: a trunk drops from the
   parent's thumbnail and each accessory gets an elbow into its own, smaller
   thumbnail — ├ where another accessory follows, └ on the last. That line is
   the whole treatment. It already says which product an accessory belongs to
   and that it is not a product in its own right, so the rows otherwise keep
   their parent's columns, height and type.

   The lines are pseudo-elements on the image cells rather than borders, because
   they run through the middle of a cell, not along an edge. Where a group ends
   comes from .pv-product-row--group-end, not :last-child — see "Groups read as
   blocks" below for why. */

/* A parent with accessories showing: no row line under its image cell for the
   trunk to cross, and the trunk itself. It starts just below the thumbnail,
   which is vertically centred, so its bottom edge is half a thumbnail below the
   middle of the cell. */
#pv-picker .pv-product-row--parent:not(.pv-product-row--group-end) .pv-td--image {
    position: relative;
    border-bottom: 0;
}

#pv-picker .pv-product-row--parent:not(.pv-product-row--group-end) .pv-td--image::after {
    content: '';
    position: absolute;
    top: calc(50% + var(--pv-thumb) / 2 + 4px);
    bottom: 0;
    left: var(--pv-trunk-x);
    border-left: var(--pv-tree-line) solid var(--pv-tree-color);
}

/* Accessory rows match their parent's height: the smaller thumbnail is made up
   in vertical padding (the 10px is .pv-td's own). Their row lines are lighter
   than a parent's, so a group's accessories still hold together. */
#pv-picker .pv-product-row--child .pv-td {
    border-bottom-color: #f1f1f1;
}

#pv-picker .pv-product-row--child .pv-td--image {
    position: relative;
    padding-top: calc((var(--pv-thumb) - var(--pv-child-thumb)) / 2 + 10px);
    padding-bottom: calc((var(--pv-thumb) - var(--pv-child-thumb)) / 2 + 10px);
    padding-left: var(--pv-child-thumb-x);
    border-bottom: 0;
}

/* The elbow: down from the top of the cell to its middle, then across to the
   thumbnail. */
#pv-picker .pv-product-row--child .pv-td--image::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pv-trunk-x);
    width: var(--pv-branch);
    height: calc(50% + var(--pv-tree-line) / 2);
    border-left: var(--pv-tree-line) solid var(--pv-tree-color);
    border-bottom: var(--pv-tree-line) solid var(--pv-tree-color);
    border-bottom-left-radius: 9px;
}

/* The trunk carrying on to the next accessory. It starts above the elbow's
   curve, so the two overlap into one line instead of meeting at a seam. */
#pv-picker .pv-product-row--child:not(.pv-product-row--group-end) .pv-td--image::after {
    content: '';
    position: absolute;
    top: 40%;
    bottom: 0;
    left: var(--pv-trunk-x);
    border-left: var(--pv-tree-line) solid var(--pv-tree-color);
}

/* Smaller thumbnail for accessories — the placeholder too, or an accessory
   without a photo puts a full-size blank box on the end of its branch. */
#pv-picker .pv-product-row--child .pv-table-thumb,
#pv-picker .pv-product-row--child .pv-table-thumb-placeholder {
    width: var(--pv-child-thumb);
    height: var(--pv-child-thumb);
    max-width: var(--pv-child-thumb);
}

/* Groups read as blocks. The closing line goes on the last *visible* row, which
   the template marks and picker.js re-marks on every filter pass. :last-child
   cannot find that row: the filter hides accessories one row at a time, and a
   hidden last row still matches :last-child, taking the line — and the └ — with
   it. Comes after the accessory rules so it wins the border on an image cell. */
#pv-picker .pv-product-row--group-end .pv-td {
    border-bottom: 2px solid #ddd;
}

/* max-width is set as well as width: themes routinely ship img { max-width:
   100% }, which caps the thumbnail at its cell's content box — and an accessory
   row spends most of that box on the branch indent. Without this the thumbnail
   shrinks to a sliver whenever the theme's rule wins.

   The white background is for the strips object-fit: contain leaves, as on the
   card; without it they take the row's hover grey or the theme's page colour. */
#pv-picker .pv-table-thumb {
    width: var(--pv-thumb);
    height: var(--pv-thumb);
    max-width: var(--pv-thumb);
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    display: block;
}

#pv-picker .pv-table-thumb-placeholder {
    width: var(--pv-thumb);
    height: var(--pv-thumb);
    max-width: var(--pv-thumb);
    background: #fff;
    border-radius: 4px;
}

/* A quiet text link, not the card's outlined button. The card has one action
   and a footer to put it in; the table repeats it on every row, and a column of
   boxes outweighs the product data beside it. Muted and regular weight at rest,
   so it reads like the description column; the accent and underline arrive on
   hover. The arrow says it leaves the page, which target="_blank" does. */
#pv-picker .pv-table-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    color: #666 !important;
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 400;
    transition: color 0.15s;
    white-space: nowrap;
}

/* Drawn as a mask so it takes the link's colour through every state, and
   renders the same whatever font the theme sets. */
#pv-picker .pv-table-link::after {
    content: '';
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 1.5h5.5V7M8.5 1.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 1.5h5.5V7M8.5 1.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

#pv-picker .pv-table-link:hover,
#pv-picker .pv-table-link:focus-visible {
    color: #e07800 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

#pv-picker .pv-table-link:focus-visible {
    outline: 2px solid #e07800;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Empty-state placeholders (no model or colour selected yet) ─────────── */
#pv-picker .pv-td--placeholder {
    padding: 32px 14px;
    text-align: center;
    color: #777;
    font-size: 0.95rem;
    background: #fafafa;
    border-bottom: 1px solid #ebebeb;
}

#pv-picker .pv-product-row--placeholder:hover .pv-td {
    background: #fafafa;
}

#pv-picker .pv-grid-placeholder {
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
    color: #777;
    font-size: 1rem;
    border: 1px dashed #ccc;
    border-radius: 6px;
    background: #fafafa;
}

/* ── Accessories inside a product card ────────────────────────────────────── */
#pv-picker .pv-card-accessories-wrap {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ebebeb;
}

#pv-picker .pv-product-card__accessories-title {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}

#pv-picker .pv-product-card__accessories {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

#pv-picker .pv-card-accessory {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 2px 0;
}

#pv-picker .pv-card-accessory__sku {
    color: #888;
    font-size: 0.85em;
}