/* ─── Shop — shop.css ────────────────────────────────────────────────────────
   Loaded on the shop archive / product category pages.
   CSS variables from main.css are available here.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Layout ─────────────────────────────────────────────────────────────── */

/* Whole shop page (incl. the gutters either side of the centered content) uses
   the same grey as the section headers. shop.css is only loaded on shop pages,
   so this body rule is safely scoped. */
body {
    background: #EBEBEB !important;
}

/* Transparent so the page grey shows through the gutters without stacking the
   alpha (which would make it darker than the sections). */
.shop-archive {
    background: transparent;
}

.shop {
    max-width: var(--max-width-desktop);
    margin: 0 auto;
    background: white;
}

/* ─── Filter sidebar / drawer ─────────────────────────────────────────────────
   Below 1200px the sidebar is an off-canvas drawer opened by the Filter button;
   at 1200px+ it becomes an inline column (see the min-width: 1200px block).
   ────────────────────────────────────────────────────────────────────────── */

.shop__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 320px;
    max-width: 86vw;
    height: 100%;
    overflow-y: auto;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.shop__sidebar.is-open {
    transform: translateX(0);
}

.shop__sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid hsla(0, 0%, 90%, 1);
}

.shop__sidebar-title {
    font-family: "DM Sans", var(--font-body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: hsla(0, 0%, 41%, 1);
}

.shop__sidebar-close {
    padding: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: hsla(0, 0%, 30%, 1);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.shop__backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
}

.shop__backdrop[hidden] {
    display: none;
}

/* Filter button that opens the drawer (hidden when the sidebar is inline). */
.shop__filter-toggle {
    display: inline-flex;
    align-items: center;
    height: 33px;
    padding: 0 16px;
    border: 1px solid hsla(0, 0%, 70%, 1);
    background: transparent;
    color: #575757;
    font-family: "DM Sans", var(--font-body);
    font-size: 16px;
    cursor: pointer;
}

/* The inline "Filter:" label is only used when the sidebar is inline. */
.shop__filter-label {
    display: none;
}

/* ─── Top bar (logout) ───────────────────────────────────────────────────── */

.shop__topbar {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 0;
    background: #EBEBEB;
}

/* Desktop provides logout in the header/sub-nav, so the shop top bar is
   redundant there — only needed on mobile where the header hides it. */
@media (min-width: 768px) {
    .shop__topbar {
        display: none;
    }
}

.shop__logout {
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.16px;
    color: var(--color-text);
    text-decoration: none;
}

/* ─── Search ─────────────────────────────────────────────────────────────── */

.shop__search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
    padding: 12px 20px;
    background: #EBEBEB;
}

.shop__title {
    margin: 0;
    color: hsla(0, 0%, 41%, 1);
    font-family: "DM Sans", var(--font-body);
    font-size: 32px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0.36px;
    text-align: right;
    padding-right: 20px;
}

/* Mobile: no large page title (matches design). */
@media (max-width: 899px) {
    .shop__title {
        display: none;
    }
}

.shop__search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    height: 39px;
    padding: 0 14px;
    border: none;
    border-radius: 0;
    background: white;
}

.shop__search-icon {
    color: hsla(0, 0%, 72%, 1);
    flex-shrink: 0;
}

.shop__search-input {
    flex: 1;
    border: none;
    background: transparent !important;
    font-family: var(--font-body);
    font-size: 18px;
    padding-left: 0 !important;
    box-shadow: none !important;
}

.shop__search-input::placeholder {
    color: hsla(0, 0%, 72%, 1) !important;
    opacity: 1;
}

.shop__search-input:focus {
    outline: none;
}

.shop__filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    /* Own full-width row below the search (kept inline at 1200px+). */
    flex: 1 1 100%;
}

.shop__filter-label {
    color: #686868;
    text-align: center;
    font-family: "DM Sans", var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.shop__filter-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.shop__filter-tag {
    display: flex;
    min-width: 106px;
    height: 39px;
    padding: 6px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 0 solid #9A9999;
    background: #686868;
    color: #FFF;
    text-align: center;
    font-family: "DM Sans", var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    cursor: pointer;
}

.shop__filter-tag:hover {
    background: #575757;
}

/* ─── Chips ──────────────────────────────────────────────────────────────── */

.shop__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px;
    border-top: 1px solid hsla(0, 0%, 92%, 1);
    background: #EBEBEB;
}

.shop-chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 31px !important;
    padding: 6px 8px !important;
    border: 1px solid hsla(0, 0%, 60%, 1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--color-text) !important;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.shop-chip.is-active {
    background: hsla(0, 0%, 41%, 1) !important;
    color: white !important;
    border-color: hsla(0, 0%, 41%, 1) !important;
}

/* ─── Quick-filter chips (mobile) ─────────────────────────────────────────────
   Replace the drawer "Filter" button with clickable region/status chips.
   ────────────────────────────────────────────────────────────────────────── */
.shop__quickfilter {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    background: #EBEBEB;
}

@media (max-width: 899px) {
    .shop__quickfilter {
        display: flex;
    }

    /* Separator line under the search row. */
    .shop__search {
        border-bottom: 1px solid #B2B2B2;
    }

    /* Chips take over from the drawer toggle on mobile. */
    .shop__filter-toggle {
        display: none;
    }

    /* "Filter:" sits inline next to the search; active-tag list is redundant
       (the chips already show the active state). */
    .shop__filter {
        flex: 0 0 auto;
    }

    .shop__filter-label {
        display: inline;
        color: #686868;
        text-align: center;
        font-family: "DM Sans", var(--font-body);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: -0.16px;
    }

    .shop__filter-tags {
        display: none;
    }

    .shop__quickfilter .shop-chip {
        height: auto !important;
        padding: 6px 8px !important;
        gap: 10px;
        border: 1px solid #9A9999 !important;
        border-radius: 0 !important;
        color: #686868 !important;
        text-align: center;
        font-family: "DM Sans", var(--font-body);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0.16px;
    }

    /* Keep the active chip readable (white on the dark fill from .is-active). */
    .shop__quickfilter .shop-chip.is-active {
        color: #fff !important;
        border-color: hsla(0, 0%, 41%, 1) !important;
    }
}

/* ─── Legend ─────────────────────────────────────────────────────────────── */

.shop__legend {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 20px;
    border-top: 1px solid #B2B2B2;
    border-bottom: 1px solid #B2B2B2;
    color: hsla(0, 0%, 41%, 1);
    font-family: "DM Sans", var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0.2px;
    background: #EBEBEB;
}

.shop__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.shop__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.shop__dot--in    { background: hsla(0, 0%, 20%, 1); }
.shop__dot--onway { background: var(--color-grey); }

.shop__square {
    width: 15px;
    height: 15px;
    display: inline-block;
    flex-shrink: 0;
}

.shop__square--white { background: hsla(135, 59%, 49%, 1); } /* white wine marker (green) */

/* Price list PDF download — pushed to the right edge of the legend row. */
/* Right end of the legend: tax note + PDF link. */
.shop__legend-end {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    flex-shrink: 0;
}

.shop__tax-note {
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.16px;
    color: var(--color-grey);
    white-space: nowrap;
}

.shop__pricelist {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.16px;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.shop__pricelist:hover,
.shop__pricelist:focus {
    color: var(--color-accent);
}

/* Mobile: legend labels (I lager / På väg / Vitt vin). */
@media (max-width: 899px) {
    /* Tax note + price list link drop to their own line below the legend labels. */
    .shop__legend-end {
        flex-basis: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .shop__legend {
        flex-wrap: wrap;
        gap: 12px;
        color: #686868;
        font-family: "DM Sans", var(--font-body);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 19px;
        letter-spacing: 0.16px;
    }
}

/* ─── Sidebar filters ─────────────────────────────────────────────────────── */

.shop-filters {
    padding: 0;
}

.shop-filters__group {
    padding: 0;
}

/* Section titles sit on the page background (transparent). */
.shop-filters__title {
    margin: 0;
    padding: 16px 20px 10px;
    color: hsla(0, 0%, 49%, 1);
    font-family: "DM Sans", var(--font-body);
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.shop-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Option rows are white with thin dividers. */
.shop-filters__check {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 20px;
    background: white;
    border-bottom: 1px solid hsla(0, 0%, 90%, 1);
    cursor: pointer;
    transition: background 0.2s ease;
}

.shop-filters__check:hover {
    background: hsla(0, 0%, 96%, 1);
}

.shop-filters__check input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1.5px solid #7E7E7E;
    border-radius: 5px;
    background: white;
    cursor: pointer;
    flex-shrink: 0;
}

.shop-filters__check input:checked {
    border-color: #000;
    background: #000;
}

.shop-filters__check input:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.shop-filters__name {
    flex: 1;
    color: hsla(0, 0%, 49%, 1);
    font-family: "DM Sans", var(--font-body);
    font-size: 21px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.21px;
}

.shop-filters__count {
    color: hsla(0, 0%, 49%, 1);
    text-align: right;
    font-family: "DM Sans", var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.15px;
}

.shop-filters__range {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px 10px;
    background: white;
    border-bottom: 1px solid hsla(0, 0%, 90%, 1);
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

.shop-filters__num {
    width: 100%;
    height: 34px;
    border: none !important;
    background: white !important;
    box-shadow: none !important;
    padding: 0;
    color: #575757;
    font-family: "DM Sans", var(--font-body);
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.21px;
    box-sizing: border-box;
}

.shop-filters__num::placeholder {
    color: #7E7E7E;
    opacity: 1;
}

.shop-filters__num:focus {
    outline: none;
}

.shop-filters__dash {
    color: #575757;
    font-family: "DM Sans", var(--font-body);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0.21px;
}

.shop-filters__clear {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 16px 29px !important;
    border: none !important;
    border-bottom: 1px solid hsla(0, 0%, 90%, 1) !important;
    border-radius: 0 !important;
    background: white !important;
    color: hsla(0, 0%, 49%, 1) !important;
    font-family: "DM Sans", var(--font-body);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.shop-filters__submit {
    display: none !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 40px) !important;
    height: 44px !important;
    margin: 86px 20px 0;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: hsla(0, 0%, 72%, 1) !important;
    color: white !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

/* ─── Group ──────────────────────────────────────────────────────────────── */

/* White gap above the first (visible) category (desktop only). Put it on the
   list container so it renders on every page — hidden groups collapse, so the
   padding always sits directly above the first visible group. */
.shop__list {
    padding-top: 20px;
}

/* Mobile: no gap above the first category. */
@media (max-width: 899px) {
    .shop__list {
        padding-top: 0;
    }
}

.shop-group__header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    /* Taller than a plain divider so the switch between appellations is clear. */
    padding: 18px 20px;
    background: #EBEBEB;
}

.shop-group__name {
    font-family: "DM Sans", var(--font-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 17px;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: hsla(0, 0%, 0%, 1);
}

.shop-group__count {
    font-family: "DM Sans", var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0;
    color: #686868;
    width: 145px;
    text-align: right;
}

/* ─── Item (mobile card) ─────────────────────────────────────────────────── */

.shop-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "product aside"
        "specs   aside"
        "extra   extra";
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
    padding: 14px 20px;
    border-bottom: 1px solid hsla(0, 0%, 92%, 1);
}

/* Right column (mobile): price on top, stock beneath, action pinned to bottom. */
.shop-item__aside {
    grid-area: aside;
}

/* Green corner marker shown on white-wine rows. */
.shop-item__wine-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: hsla(135, 59%, 49%, 1);
}

.shop-item__product {
    grid-area: product;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.shop-item__cat {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #575757;
}

.shop-item__name {
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    color: black;
    text-decoration: none;
}

.shop-item__classification {
    font-size: 14px;
    line-height: 18px;
    color: var(--color-grey);
    margin: 0;
}

.shop-item__price {
    grid-area: price;
    justify-self: end;
    font-weight: 500;
    font-size: 16px;
    line-height: 17px;
    text-align: right;
    color: black;
    white-space: nowrap;
}

.shop-item__specs {
    grid-area: specs;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 13px;
    color: var(--color-grey);
}

.shop-item__bottle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.shop-item__vintage,
.shop-item__rating,
.shop-item__case {
    white-space: nowrap;
    font-size: 16px;
}

/* Text after the rating number (the source, e.g. "JS"). */
.shop-item__rating {
    color: #7E7E7E;
    font-family: "DM Sans", var(--font-body);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.22px;
}

/* The rating number itself. */
.shop-item__rating strong {
    color: #575757;
    font-family: "DM Sans", var(--font-body);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.22px;
}

/* Mobile: match the size/weight of the other row attributes. */
@media (max-width: 899px) {
    .shop-item__rating,
    .shop-item__rating strong {
        font-size: 16px;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: -0.16px;
    }
}

.shop-item__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--color-text);
}

.shop-item__stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shop-item__stock--in::before    { background: hsla(0, 0%, 20%, 1); }
.shop-item__stock--onway::before { background: var(--color-grey); }

/* The action cell stacks the control and the "Beställs per kolli/flaska" caption. */
.shop-item__action {
    grid-area: action;
    justify-self: end;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;   /* control and caption share a centre line */
    gap: 4px;
}

/* Caption under the add-to-cart control, same tone as the kolli text. */
.shop-item__unit {
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-grey);
    white-space: nowrap;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */

.shop-item__badges {
    display: inline-flex;
    gap: 6px;
}

.shop-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.shop-badge--new  { background: hsla(208, 100%, 50%, 1); color: white; }
.shop-badge--exkl { background: hsla(349, 100%, 59%, 1); color: white; }

/* ─── Mobile row reflow (< 900px) ─────────────────────────────────────────────
   Right column stacks price → stock → action; the characteristics line runs
   bottle · vintage · rating with the NYTT/EXKL badges last.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
    .shop-item__aside {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;
        gap: 4px;
    }

    .shop-item__price        { order: 1; }
    .shop-item__stock        { order: 2; }
    .shop-item__case--mobile { order: 3; font-size: 14px; color: var(--color-grey); }
    .shop-item__action       { order: 4; margin-top: auto; align-items: flex-end; } /* "+" and caption flush right */

    /* Flatten the bottle wrapper so its children sit inline in the specs row. */
    .shop-item__bottle { display: contents; }

    .shop-item__bottle-size { order: 1; }
    .shop-item__vintage     { order: 3; }
    .shop-item__rating      { order: 4; }

    /* The arrow for extra information gets its own line under the specs,
       left-aligned, after the badges. (.shop-item: outranks the base rule's all: unset) */
    .shop-item .shop-item__more--mobile {
        order: 7;
        flex-basis: 100%;
        justify-content: flex-start;
        margin-left: -4px;
    }

    /* Desktop placements of kolli and the arrow. */
    .shop-item .shop-item__case--desktop,
    .shop-item .shop-item__more--desktop { display: none; }

    /* Badges last, stacked vertically (NYTT over EXKL) with equal width. */
    .shop-item__badges {
        order: 6;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .shop-item__badges .shop-badge {
        justify-content: center;
    }

    /* Dot separators between bottle · vintage · rating (not before the badges). */
    .shop-item__vintage::before,
    .shop-item__rating::before {
        content: "•";
        margin-right: 6px;
        color: var(--color-grey);
    }

    /* Add button collapses to just the "+" icon (square). */
    .shop-item__add .shop-item__add-label {
        display: none;
    }

    .shop-item__action .shop-item__add {
        width: 26px;
        height: 26px;
        padding: 0;
        gap: 0;
    }

    /* Compact quantity picker (~73px total: 20 + 29 + 20 + 2×2 gap). */
    .shop-item__qty .shop-item__qty-btn {
        flex: 0 0 20px;
        width: 20px;
    }

    .shop-item__qty .shop-item__qty-value {
        flex: 0 0 29px;
        width: 29px;
    }
}

/* ─── Add / preorder buttons ─────────────────────────────────────────────── */

.shop-item__add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid hsla(0, 0%, 80%, 1);
    border-radius: 0;
    background: white;
    color: black;
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.shop-item__add-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.shop-item__add-label {
    display: inline-flex;
    align-items: center;
    color: #000;
    font-family: "DM Sans", var(--font-body);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Hover (not while showing the success state). */
.shop-item__add:not(.is-added):hover {
    background: hsla(0, 0%, 96%, 1);
    border-color: hsla(0, 0%, 55%, 1);
}

/* Checkmark overlay — always present, faded in only in the "added" state. */
.shop-item__add::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.25s ease;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Success feedback: turns green with a checkmark for ~2s after adding. */
.shop-item__add.is-added {
    background: #2E7D32 !important;
    border-color: #2E7D32;
    color: transparent;
}

.shop-item__add.is-added::after {
    opacity: 1;
}

.shop-item__preorder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid hsla(0, 0%, 80%, 1);
    border-radius: 4px;
    background: white;
    color: black;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.shop-item__preorder:hover {
    background: hsla(0, 0%, 96%, 1);
    border-color: hsla(0, 0%, 55%, 1);
}

/* ─── Quantity selector (shown once the product is in the cart) ────────────── */

.shop-item__qty {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 26px;
    background: transparent;
    flex-shrink: 0;
    box-sizing: border-box;
}

.shop-item__action.is-incart .shop-item__add {
    display: none !important;
}

.shop-item__action.is-incart .shop-item__qty {
    display: inline-flex;
}

.shop-item__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #EE7100;
    color: #FFF;
    text-align: center;
    font-family: "DM Sans", var(--font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 1.8px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s ease;
}

.shop-item__qty-btn:hover {
    background: #D96700;
}

.shop-item__qty-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    width: 50px;
    height: 26px;
    background: #EE7100;
    color: #FFF;
    text-align: center;
    font-family: "DM Sans", var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 1.7px;
    box-sizing: border-box;
}

/* ─── Empty state ────────────────────────────────────────────────────────── */

.shop__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-grey);
}

/* ─── Pagination ──────────────────────────────────────────────────────────── */

.shop__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 21px 34px;
    background: white;
    border-top: 1px solid hsla(0, 0%, 90%, 1);
}

.shop__pagination:empty {
    display: none;
}

/* Mobile: stack and right-align the pagination. */
@media (max-width: 899px) {
    .shop__pagination {
        flex-direction: column;
        align-items: flex-end;
    }
}

.shop__pagination-info {
    color: #616161;
    font-family: "DM Sans", var(--font-body);
    font-size: 21px;
    font-weight: 400;
    line-height: normal;
}

.shop__pagination-controls {
    display: flex;
    align-items: center;
    gap: 0px;
}

.shop__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid hsla(0, 0%, 80%, 1);
    background: white;
    color: #575757;
    font-family: "DM Sans", var(--font-body);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Collapse adjacent borders to a single 1px line (button-group overlap). */
.shop__page-btn:not(:first-child) {
    margin-left: -1px;
}

/* Active/hovered button draws its border over the neighbour's. */
.shop__page-btn.is-active,
.shop__page-btn:hover {
    position: relative;
    z-index: 1;
}

.shop__page-btn:hover:not(:disabled):not(.is-active) {
    background: hsla(0, 0%, 96%, 1);
    border-color: hsla(0, 0%, 60%, 1);
}

.shop__page-btn.is-active {
    background: #000;
    border-color: #000;
    color: white;
    cursor: default;
}

.shop__page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.shop__page-ellipsis {
    padding: 0 2px;
    color: #575757;
}

/* ─── Desktop ────────────────────────────────────────────────────────────────
   Mobile card layout above is preserved. From 768px up, each item reflows into
   a single table row with columns aligned across all rows (fixed track widths).
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 900px) {

    .shop {
        max-width: var(--max-width-desktop);
        background: #EBEBEB;
    }

    /* Keep the search field from stretching the full width. */
    .shop__search-field {
        flex: 0 1 520px;
    }

    /* Full-width list (sidebar is a drawer until 1200px). */
    .shop__body {
        display: flex;
        align-items: stretch;
        gap: 20px;
    }

    .shop__list {
        flex: 1;
        min-width: 0;
    }

    /* Legend aligns with the item content column (item padding, no sidebar). */
    .shop__legend {
        padding-left: 34px;
    }

    /* Groups render as a plain stack of rows. */
    .shop-group {
        display: block;
        background: none;
    }

    /* Align the group header text with the item content column (item padding);
       26px top/bottom per Kent's sketch (~72px header). */
    .shop-group__header {
        padding: 26px 20px 26px 34px;
    }

    .shop-group__name {
        font-family: "DM Sans", var(--font-body);
        font-weight: 700;
        font-size: 20px;
        line-height: 17px;
        letter-spacing: 3.2px;
        text-transform: uppercase;
        color: hsla(0, 0%, 0%, 1);
    }

    .shop-group__count {
        font-family: "DM Sans", var(--font-body);
        font-weight: 400;
        font-size: 18px;
        line-height: 19px;
        letter-spacing: 0;
        color: #686868;
        width: 145px;
        text-align: right;
    }

    /* Item becomes a table row. Fixed column widths (identical on every row)
       keep the columns aligned across the whole list. */
    .shop-item {
        grid-template-columns:
            minmax(0, 1fr)   /* product */
            96px             /* bottle */
            56px             /* vintage */
            100px            /* rating (fits "92-94 WA") */
            110px            /* stock */
            110px            /* price */
            140px;           /* action */
        grid-template-areas: none;
        align-items: center;
        column-gap: 20px;
        row-gap: 0;
        padding: 15px 30px 15px 34px;
        background: white;
        border-bottom: none;
        margin-bottom: 3px;
    }

    /* Guests: public price list — no stock or action columns. */
    .shop--guest .shop-item {
        grid-template-columns:
            minmax(0, 1fr)   /* product */
            96px             /* bottle */
            56px             /* vintage */
            100px            /* rating (fits "92-94 WA") */
            110px;           /* price */
    }

    /* Reset the mobile area assignments; flatten the specs wrapper so its
       children (bottle / vintage / rating / stock) become row cells. */
    .shop-item__product,
    .shop-item__price {
        grid-area: auto;
    }

    .shop-item__action {
        grid-area: auto;
        align-self: center;
        position: relative;   /* the caption hangs below, like the kolli text under the bottle size */
    }

    /* "Beställs per …" hangs under the control (absolute), so the button
       itself stays on the row's centre line with bottle size, price and stock. */
    .shop-item__unit {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 2px;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.14px;
        color: hsla(0, 0%, 49%, 1);
    }

    .shop-item__specs,
    .shop-item__aside {
        display: contents;
    }

    /* Bottle size stays on the characteristics line; badges float below it
       (absolute) so they don't change the cell height / push "750 ml" up. */
    .shop-item__bottle {
        position: relative;
        display: block;
    }

    /* NYTT / EXKL badges hang below the row too, but start in the next
       column (right of the bottle cell) so they never stack under "6 fl/kolli". */
    .shop-item__badges {
        position: absolute;
        top: 100%;
        left: calc(100% + 20px);   /* = the grid's column-gap */
        margin-top: 2px;
        white-space: nowrap;
    }

    .shop-item__cat {
        color: hsla(0, 0%, 49%, 1);
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        letter-spacing: 2.24px;
    }

    .shop-item__classification {
        color: hsla(0, 0%, 49%, 1);
        font-size: 21px;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.21px;
    }

    .shop-item__name {
        color: #000;
        font-size: 24px;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.24px;
    }

    .shop-item__bottle-size {
        color: hsla(0, 0%, 49%, 1);
        font-size: 22px;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.22px;
    }

    .shop-item .shop-item__case--mobile,
    .shop-item .shop-item__more--mobile {
        display: none;
    }

    /* Bottles per case: a small caption hanging under the bottle size
       (absolute, like the badges), so "750 ml" stays on the row's centre line
       with the vintage, rating and price. Badges move down below it. */
    .shop-item__case {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 2px;
        color: hsla(0, 0%, 49%, 1);
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0.14px;
    }


    .shop-item__vintage {
        color: hsla(0, 0%, 49%, 1);
        font-size: 22px;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.22px;
    }

    .shop-item__price {
        color: #000;
        text-align: right;
        font-size: 24px;
        font-weight: 500;
        line-height: 17px;
    }

    .shop-item__stock {
        color: hsla(0, 0%, 49%, 1);
        text-align: right;
        font-size: 22px;
        font-weight: 400;
        line-height: 19px;
        letter-spacing: 0.22px;
    }

    /* Add button becomes an outlined "+ Lägg till" square button. The quantity
       selector matches its width so the row doesn't shift when toggling. */
    .shop-item__add {
        width: 109px;
        height: 26px;
        padding: 0 16px;
        gap: 6px;
        border-radius: 0;
        font-size: 11px;
    }

    .shop-item__add-label {
        display: inline-flex;
        align-items: center;
        color: #000;
        font-family: "DM Sans", var(--font-body);
        font-size: 12px;
        font-weight: 600;
        line-height: 17px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        white-space: nowrap;
    }
}

/* ─── Wide desktop: inline filter sidebar ─────────────────────────────────────
   At 1200px+ there's room for the sidebar as an inline column beside the list,
   with the toolbar/legend aligned past it. Below this it's a drawer.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1200px) {

    /* Sidebar becomes an inline column again. */
    .shop__sidebar {
        transform: none;
        width: auto;
        max-width: none;
        box-shadow: none;
        flex: 0 0 290px;
        min-height: 600px;
        background: transparent;
        border-right: 1px solid hsla(0, 0%, 70%, 1);
        position: sticky;
        top: 0;
        /* As tall as the filters (not the list), so at the end of the list the
           whole panel sits above the footer; scrolls only when the filters are
           taller than the screen. */
        align-self: flex-start;
        overflow-y: auto;
        max-height: 100vh;
    }

    body.admin-bar .shop__sidebar {
        top: 32px;
    }

    .shop__sidebar-head {
        display: none;
    }

    .shop__list {
        border-left: 1px solid hsla(0, 0%, 70%, 1);
    }

    /* Toolbar: title left-aligned at 100px (matching the logo + username), with a
       fixed box so the search field still lands on the sidebar/list divider. */
    .shop__search {
        gap: 46px;
        padding-left: 100px;
    }

    .shop__title {
        flex: 0 0 164px;
        text-align: left;
        padding-right: 0;
    }

    .shop__filter-toggle {
        display: none;
    }

    .shop__filter-label {
        display: inline;
    }

    /* Filter label + tags sit inline in the toolbar (there's room). */
    .shop__filter {
        flex: 0 1 auto;
    }

    /* Legend aligns past the sidebar + gap + item padding. */
    .shop__legend {
        padding-left: calc(290px + 20px + 34px);
    }

    .shop__backdrop {
        display: none !important;
    }
}

/* ─── Compact desktop rows (900–1439px) ─────────────────────────────────────
   The full-size columns (22–24px type) need ~1440px; on narrower screens
   customer rows (which also have the stock and action columns) would squeeze
   the wine name. Smaller type and columns keep the name ~300px+ wide.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 900px) and (max-width: 1439px) {
    .shop-item__badges {
        left: calc(100% + 12px);   /* column-gap at this width */
    }

    .shop-item {
        grid-template-columns:
            minmax(0, 1fr)   /* product */
            76px             /* bottle (+ kolli caption) */
            44px             /* vintage */
            88px             /* rating (fits "92-94 WA") */
            60px             /* stock */
            80px             /* price */
            112px;           /* action */
        column-gap: 12px;
    }

    .shop--guest .shop-item {
        grid-template-columns:
            minmax(0, 1fr)   /* product */
            76px             /* bottle (+ kolli caption) */
            44px             /* vintage */
            88px             /* rating (fits "92-94 WA") */
            80px;            /* price */
    }

    .shop-item__bottle-size,
    .shop-item__vintage,
    .shop-item__rating,
    .shop-item__rating strong,
    .shop-item__stock,
    .shop-item__price {
        font-size: 18px;
    }
}

/* ─── Extra information ──────────────────────────────────────────────────────
   Wines with extra information (Vin tab → "Extra information") get a double
   arrow under the classification; it folds the text open in a full-width row
   below the wine's row.
   ────────────────────────────────────────────────────────────────────────── */

.shop-item__more {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 28px;
    height: 24px;
    margin-left: -4px;
    color: hsla(0, 0%, 49%, 1);
    cursor: pointer;
}

/* :is() outranks Storefront's grey button:hover/:focus background, which
   would otherwise stay on the arrow after a tap. */
.shop-item__more:is(:hover, :focus) {
    background: none;
}

.shop-item__more:hover {
    color: black;
}

.shop-item__more svg {
    transition: transform 0.2s ease;
}

.shop-item__more[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.shop-item__more:focus-visible {
    outline: 2px solid hsla(0, 0%, 20%, 1);
    outline-offset: 2px;
}

.shop-item__extra {
    grid-area: extra;
    max-width: 50ch;  /* ~65–70 characters per line in DM Sans */
    font-size: 15px;
    line-height: 22px;
    color: hsla(0, 0%, 20%, 1);
}

.shop-item__extra p {
    margin: 0 0 0.75em;
}

.shop-item__extra p:last-child {
    margin-bottom: 0;
}

/* Desktop: a full-width row under the whole wine row (no grid areas there). */
@media (min-width: 900px) {
    .shop-item__extra {
        grid-area: auto;
        grid-column: 1 / -1;
        margin-top: 16px;
        font-size: 18px;
        line-height: 26px;
    }
}