.acceRow td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.h2-horizontal-line {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
    line-height: 0.1em;
}

    .h2-horizontal-line span {
        background: #fff;
        padding: 0 10px;
    }

/* Outer carousel containers: position context for the arrows (which sit at -50px),
       kept overflow-visible so arrows are not clipped by Swiper's inner overflow:hidden. */
.slickCarousel,
.slickFeatures {
    position: relative;
}

    .slickCarousel .swiper,
    .slickFeatures .swiper {
        width: 100%;
        height: 100%;
    }

    /* Feature logos vary in aspect ratio (e.g. the wide TCO badge). Keep each one
       inside its slide so wide logos scale down instead of overlapping neighbours. */
    .slickFeatures .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

        .slickFeatures .swiper-slide img {
            max-width: 100%;
            height: 40px;
            object-fit: contain;
            margin: 0 !important; /* override the inline 4px margins; spacing comes from Swiper spaceBetween */
        }

/* Live line total next to the qty stepper */
.line-total {
    color: var(--secondaryColor, #828282);
    white-space: nowrap;
}

/* Muted article-number line under accessory names */
.accessory-artno {
    color: var(--secondaryColor, #828282);
    font-size: 0.85em;
}

/* Sticky buy-bar: slides up from the bottom once the hero buy box scrolls out of view */
.sticky-buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
    background: var(--boxColor, #fff);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(110%);
    transition: transform 250ms ease;
}

    .sticky-buy-bar.visible {
        transform: translateY(0);
    }

@@media (prefers-reduced-motion: reduce) {
    .sticky-buy-bar {
        transition: none;
    }
}

.sticky-buy-bar-thumb {
    height: 40px;
    width: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.sticky-buy-bar-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.sticky-buy-bar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.sticky-buy-bar-total {
    font-weight: 700;
    white-space: nowrap;
}

/* Custom arrow styling */
.slick-prev,
.slick-next {
    font-size: 24px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
}

.slick-prev {
    left: -50px;
}

.slick-next {
    right: -50px;
}

    .slick-prev:hover,
    .slick-next:hover {
        background: rgba(0, 0, 0, 0.8);
    }

.tablinks {
    background: none;
    border: 1px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    height: 35px;
    width: 200px;
    color: white;
    margin-top: -9px;
    margin-bottom: -9px;
    font-size: 14px;
    font-weight: normal;
    height: 36px;
}

    .tablinks:hover {
        color: var(--sitebuttonTextHoverColor);
        background-color: var(--sitebuttonBackgroundHoverColor);
        transition: .4s linear;
    }

.tab button.active {
    color: var(--sitebuttonTextHoverColor);
    background-color: var(--sitebuttonBackgroundHoverColor);
}

.toggle-icon {
    margin-right: 5px;
    font-size: 20px;
    float: right;
    font-family: 'Material Icons Outlined';
}

#fav-icon {
    font-size: 15px;
    vertical-align: sub;
    height: 1rem;
}

.tab-container {
    display: flex;
    flex-direction: column;
    padding: 0;
    /*background-color: #f9f9f9;*/
    width: 100%;
}

.tab-header {
    padding: 10px 5px;
    font-weight: bold;
    margin: 0;
    /*background-color: #e2e2e2;*/
}

.tab-list {
    display: flex;
    flex-direction: column;
}

.tab-button {
    display: block;
    padding: 8px 10px;
    text-align: left;
    border: none;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

    .tab-button:hover {
        background-color: #f5f5f5;
    }

    .tab-button.active-tab {
        background-color: #f0f0f0;
        font-weight: bold;
    }

.artPrice {
    align-self: flex-end;
    letter-spacing: .02rem;
    font-size: 1.5rem;
    margin-right: 0.6rem;
    font-family: 'Graphik', sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

    .artPrice.artRental {
        font-size: 1rem;
    }

        /* Estimates are deliberately quieter than a real rental price: lighter and italic, so the
       "ca" prefix is reinforced visually and nobody reads it as a contractual figure. */
        .artPrice.artRental.artRentalEstimate {
            font-style: italic;
            opacity: 0.75;
        }

.login-price-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    margin-right: 0.6rem;
    color: var(--primaryColor);
    font-family: 'Graphik', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(50, 50, 50, .4);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 150ms ease, text-decoration-color 150ms ease, text-decoration-thickness 150ms ease;
}

    /* Material Icons, matching SearchResults/Main so the same link looks identical everywhere.
       1.15em (not the .85em Font Awesome used) because the Material glyph sits differently in its em box. */
    .login-price-link .material-icons {
        font-size: 1.15em;
        color: var(--secondaryColor);
        transition: color 150ms ease;
    }

    .login-price-link:hover {
        color: #000;
        text-decoration-color: var(--main-color);
        text-decoration-thickness: 2px;
    }

        .login-price-link:hover .material-icons {
            color: var(--primaryColor);
        }

    .login-price-link:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 2px;
        border-radius: 2px;
    }

.article-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.price-container {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 5px;
}

.separator-div {
    height: 1px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.sitebutton-enabled {
    text-decoration: none;
    padding: 4px 8px;
    margin: 0 2px;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    display: inline-block;
    background-color: var(--navColor);
    border: 1px solid var(--primaryColor);
    border-radius: 3px;
}

    .sitebutton-enabled.current-page {
        background-color: var(--main-color);
        border: 1px solid var(--navThemeColor);
        color: var(--darkText);
    }

.specGroup {
    margin-bottom: 5px;
    padding: 5px;
    page-break-inside: avoid;
}

.groupHeader {
    font-weight: bold;
    padding: 10px 0;
    text-align: left;
}

.specRows {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.specRow {
    display: contents;
}

.specHeader {
    padding: 10px;
    border: 1px solid #d3d3d3;
    background-color: #f0f0f0;
}

.specValue {
    padding: 10px;
    border: 1px solid #d3d3d3;
    word-break: break-word;
}

/*#relatedArticlesList {
        height: 520px;
        overflow-y: auto;
        -ms-overflow-style: none;*/
/* IE and Edge */
/*scrollbar-width: none;*/
/* Firefox */
/*}

    .relatedArticlesList::-webkit-scrollbar {
        display: none;
    }*/

.toggle-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.dx-row img {
    height: 60px;
}

#dxDataGridRelatedArticles .dx-data-row.dx-state-hover td {
    cursor: pointer;
}

#dxDataGridRelatedArticles tr.main-row td:not(:first-child) {
    height: 21px;
}

#dxDataGridRelatedArticles tr.main-row td:not(:last-child) {
    vertical-align: bottom;
    padding-bottom: 2px;
}

#dxDataGridRelatedArticles tr.main-row td:is(:last-child) {
    vertical-align: middle;
    text-align: center;
    width: 60px;
}

#dxDataGridRelatedArticles tr.notes-row {
    white-space: normal;
    vertical-align: top;
}

    #dxDataGridRelatedArticles tr.notes-row td {
        height: 21px;
        color: #999;
    }

.dark #dxDataGridRelatedArticles tr.notes-row td {
    color: #777;
}

#dxDataGridRelatedArticles tbody.dx-state-hover {
    background-color: #EBEBEB;
}

.dark #dxDataGridRelatedArticles tbody.dx-state-hover {
    background-color: #484848;
}

#dxDataGridRelatedArticles tbody.dx-state-hover tr.main-row td {
    color: #000;
}

.dark #dxDataGridRelatedArticles tbody.dx-state-hover tr.main-row td {
    color: #CCC;
}

#dxDataGridRelatedArticles tbody.dx-state-hover tr.notes-row td {
    color: #888;
}

#dxDataGridRelatedArticles .dx-datagrid-header-panel {
    border-bottom: 0px hidden;
}

#dxDataGridRelatedArticles .dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-bottom: none !important;
    border-left: none !important;
}

#dxDataGridRelatedArticles .dx-datagrid-borders > .dx-datagrid-headers, .dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-right: none !important;
}

.active-tab {
    font-weight: bold;
    color: #000;
}

/* Fix for the shopping cart button column width issue */
#dxDataGridRelatedArticles tr.main-row td:is(:last-child) {
    vertical-align: middle;
    text-align: center;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    box-sizing: border-box;
}

/* Ensure the entire table has stable layout */
#dxDataGridRelatedArticles {
    table-layout: fixed !important;
}

    /* Prevent DevExtreme from overriding column widths during scroll */
    #dxDataGridRelatedArticles .dx-datagrid-table-content table {
        table-layout: fixed !important;
    }

    #dxDataGridRelatedArticles .dx-datagrid-content .dx-datagrid-table {
        table-layout: fixed !important;
    }

    #dxDataGridRelatedArticles,
    #dxDataGridRelatedArticles table,
    #dxDataGridRelatedArticles .dx-datagrid-table-content table,
    #dxDataGridRelatedArticles .dx-datagrid-content .dx-datagrid-table {
        table-layout: fixed !important;
    }

/* ── Admin Panel ── */
.admin-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 12px;
}

.admin-card-header {
    background: #f5f5f5;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
}

.admin-card-body {
    padding: 16px;
}

.admin-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.admin-form-label {
    min-width: 130px;
    font-weight: 500;
    font-size: 13px;
    color: #555;
    flex-shrink: 0;
}

.admin-form-field {
    flex: 1;
    min-width: 160px;
}

.admin-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
    height: 34px;
}

    .admin-input:focus {
        border-color: #66afe9;
        outline: none;
        box-shadow: 0 0 4px rgba(102, 175, 233, .4);
    }

.admin-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/*    .admin-btn { padding: 6px 16px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font-size: 13px; cursor: pointer; font-weight: 500; transition: all .15s; }
    .admin-btn:hover { background: #f5f5f5; border-color: #999; }
    .admin-btn-primary { background: var(--navColor, #337ab7); color: #fff; border-color: var(--navColor, #337ab7); }
    .admin-btn-primary:hover { opacity: .85; }*/
.admin-btn-danger {
    color: #c0392b;
}

.admin-btn-block {
    width: 100%;
    text-align: left;
}

.admin-info-badge {
    display: inline-block;
    background: #e8f4fd;
    color: #1976d2;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
}

.admin-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.admin-fav-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 13px;
}

    .admin-fav-table th {
        background: #f5f5f5;
        padding: 8px 12px;
        text-align: left;
        border: 1px solid #e0e0e0;
        font-weight: 600;
    }

    .admin-fav-table td {
        padding: 6px 12px;
        border: 1px solid #e0e0e0;
    }

.admin-section-label {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 8px;
    color: #333;
}

/* ===================================================================
       RESPONSIVE — added 2026-07-30. See docs/mobile/article-info-responsive.md.
       Everything lives inside max-width media queries, so desktop is untouched.
       =================================================================== */

/* The page's outer layout table carries an inline `padding-left: 210px` gutter that
       centres the two-column layout on wide desktops (same idea as .productsContainer on
       ArticleBrowse). Below ~1130px that gutter no longer has room: at 430px it alone put
       the legacy #container table at 1191px, so the shared header was drawn 1191px wide
       and everything — hamburger, logo, cart — was pushed off-screen.
       Inline styles need !important. */
@@media (max-width: 1129px) {
    #fullcontent > table {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@@media (max-width: 768px) {
    /* Cap the content column to the viewport. 100cqw (not 100vw) excludes the
           scrollbar and is not circular — menu.css makes <html> an inline-size container
           below 1129px. Without this cap the widest data table inside decides the width of
           the whole legacy table, and with it the shared header. Measured: 702px -> 410px. */
    #fullcontent {
        max-width: 100cqw !important;
        box-sizing: border-box;
    }
        /* Collapse the two-column page layout (product panel | accessories) into a stack. */
        #fullcontent > table,
        #fullcontent > table > tbody,
        #fullcontent > table > tbody > tr,
        #fullcontent > table > tbody > tr > td {
            display: block !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0 !important;
            box-sizing: border-box;
        }
    /* Stacking the layout above drops the right-hand accessories SIDEBAR directly
           beneath the Tillbehör tab, so a phone lists the same accessories twice in a
           row (reported from an iPhone 15).

           The sidebar is a desktop quick-list: its only CTA, "Visa alla tillbehör",
           scrolls to that very tab. Once the two are stacked it adds nothing — the tab
           shows the same articles with stock and the same add-to-cart button, plus the
           per-category browser. So the sidebar is the one to drop.

           Gated on the tab actually being present: the tab bar only renders when the
           article has a specification (`hasArticleSpec` in the markup below), and on an
           article without one this sidebar is the ONLY place accessories appear.

           The child chain is spelled out rather than using a bare `td:has(#lnbAccSide)`
           because the page sits inside the legacy table shell — an unanchored selector
           would also match the outer `#content` cell and blank the entire page. */
    body:has(#btnTabLinkAccessories) #fullcontent > table > tbody > tr > td:has(#lnbAccSide) {
        display: none !important;
    }
    /* Genuine data tables — stock per warehouse (6 cols) and vendor prices (9 cols) —
           can't usefully reflow, so let them scroll horizontally inside their card instead
           of forcing the whole page wide. display:block turns the table into a scroll
           container, which also stops its min-content propagating outward. */
    #fullcontent .box table {
        display: block !important;
        overflow-x: auto !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
        /* ...but NOT the DevExtreme grid's own table. It is `table-layout: fixed` and
           DevExtreme sizes its columns itself; forcing display:block took it out of table
           layout, so its colgroup widths (354px) no longer resolved against the 348px
           container and it grew its own 6px horizontal scrollbar under the accessory
           rows. Handing layout back to the widget removes the scrollbar and lets the
           rows fit properly — measured 354->345 wide and 328->175 tall. */
        #fullcontent .box table.dx-datagrid-table {
            display: table !important;
            width: 100% !important;
            overflow-x: visible !important;
        }
    /* The product header (title + datasheet links + image) is a LAYOUT table, not data
           — it stacks rather than scrolls. */
    .boxcontainer-long-separated > table,
    .boxcontainer-long-separated > table > tbody,
    .boxcontainer-long-separated > table > tbody > tr,
    .boxcontainer-long-separated > table > tbody > tr > td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    /* Breadcrumb, quantity stepper, buy button and favourite/compare are sized to 44px
           in the shared wwwroot/css/mobile.css — not repeated here. Below are only the
           targets unique to this page. */
    /* "Jämför" / "Favoriter" are unclassed clickable divs (verified: this selector
           matches exactly those two elements on the page).
           NOTE: do NOT write `form > div[onclick]` here — Razor parses the bare `form`
           in a <style> block as a form tag helper and the page fails to compile with
           "Found a malformed 'form' tag helper". */
    #fullcontent div[onclick] {
        min-height: 44px;
        align-items: center;
    }
    /* --- Buy area (quantity + "Lägg i kundvagn").

               On desktop this is a narrow right-hand column: #buyMainArticle is a
               flex COLUMN with align-items:flex-end, 148px wide. Stacked on mobile it kept
               that width and right alignment, so the stepper and button sat in a narrow
               right-hand strip with ~220px of empty card to their left, and the button
               matched neither edge.

               Give the wrapper chain full width and lay the two controls out as one row:
               quantity left, buy button filling the rest.

               NOTE the selectors deliberately avoid naming the form element — Razor parses
               a bare `form` inside a style block as a tag helper and the page then fails to
               compile (RZ1034). That applies inside CSS comments too, so this note spells
               it out without angle brackets. `*:has(> #buyMainArticle)` is the form element,
               `div:has(> * > #buyMainArticle)` is its wrapper. --- */
    #fullcontent *:has(> #buyMainArticle),
    #fullcontent div:has(> * > #buyMainArticle) {
        width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box;
    }

    #buyMainArticle {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

        #buyMainArticle > div:has(.qty-counter-spin-number) {
            flex: 0 0 auto !important;
            margin: 0 !important;
        }

        #buyMainArticle > div:has(.site-button-new) {
            flex: 1 1 150px !important;
            margin: 0 !important;
        }

            #buyMainArticle > div:has(.site-button-new) .site-button-new {
                width: 100% !important;
            }
    /* --- Sticky buy bar. It is one nowrap row (thumbnail · total · quantity · buy),
               sized for the 20px desktop stepper. Once mobile.css grows the stepper to
               44px targets the row needs 491px in a 407px viewport and the buy button —
               the whole point of the bar — is pushed off the right edge.

               Drop the decorative thumbnail, tighten the gaps and let the button take the
               remaining space. Measured: 491px -> 407px, exactly the content box, with the
               button at 274-393. --- */
    #stickyBuyBar {
        gap: 6px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
        /* Thumbnail and product name are both context the user already has — they are on
           that product's page. The name span is `flex: 1 1 0` with overflow:hidden, so once
           the actions take 373px of a 407px bar it collapsed to 16px and rendered as "L..".
           Drop both and give the row to price + quantity + buy. */
        #stickyBuyBar .sticky-buy-bar-thumb,
        #stickyBuyBar .sticky-buy-bar-name {
            display: none !important;
        }

        #stickyBuyBar .sticky-buy-bar-total {
            flex: 0 1 auto !important;
            min-width: 0 !important;
            white-space: nowrap;
        }

        #stickyBuyBar .site-button-new {
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }
    /* --- Admin panel. .admin-two-col is a two-column CSS grid; its second cell held a
               long DevExtreme checkbox label ("Identitesmärkning(Sn/IMEI/mm.)") that ran
               60px past the viewport. One column on mobile. --- */
    .admin-two-col {
        grid-template-columns: 1fr !important;
    }

    .admin-form-row {
        flex-wrap: wrap !important;
    }
    /* --- Specification tab: the panel uses a CSS multi-column layout
               (inline `column-count: 2`). At 355px that gives ~171px columns, and the
               label/value tables inside collapsed to roughly one character per line —
               "WUXGA" rendered stacked as W/U/X/G/A. One column on mobile. --- */
    #spec > div {
        column-count: 1 !important;
    }
    /* --- Tillbehör tab: the pane is a flex ROW holding the accessory-category list
               and the results grid side by side. At 385px the category column collapsed to
               ~140px and its labels were clipped mid-word ("Strömförsör…", "Reservdelar
               till Nätverksutru…"), leaving the grid 307px. Stack them: the category list
               reads full width above the grid. --- */
    #relArt > div {
        flex-direction: column !important;
        gap: 8px !important;
    }

        #relArt > div > * {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box;
        }
    /* --- Accessory rows inside that grid are a single line of nowrap cells
               (DevExtreme's default): 80px image, name, stock, price, 60px cart button,
               with the article number on a second row spanning four columns. Nothing in
               that chain can shrink, so at 348px the name cell measured 487px and the
               article-number cell 610px: the rows scrolled sideways inside the pane and
               names were cut mid-word ("...Hankoppling, 3"). Let the text wrap instead so
               a row fits the pane's width.

               Only the two long free-text cells may wrap. Applying this to every cell
               instead put "2308 st i lager" in a ~14px column and broke it to one
               character per line, the same failure the #spec column-count note above
               describes — so the short stock and price values keep nowrap and hold their
               natural width, and the name takes what is left. overflow-wrap is scoped to
               the article-number line, the only text made of unbreakable part numbers. --- */
    #relArt .dx-data-row td {
        white-space: normal !important;
    }

        #relArt .dx-data-row td.accessory-stock,
        #relArt .dx-data-row td.accessory-price {
            white-space: nowrap !important;
        }

    #relArt .dx-data-row .accessory-artno {
        overflow-wrap: anywhere;
    }
    /* --- Specifikation / Tillbehör tabs. Both buttons live inside a single
               `h1.h1.tab` that is 36px tall, with `margin: -9px 0` on the buttons to pull
               them into that heading. Side by side on desktop that is fine; stacked on
               mobile the wrapper doesn't grow and the two tabs overlapped by 18px —
               "Tillbehör" was painted on top of the yellow "Specifikation" tab.
               Let the heading grow, drop the negative margins, and give each tab a
               full-width 44px row. --- */
    .h1.tab {
        height: auto !important;
        padding: 0 !important;
        display: block !important;
    }

        .h1.tab .tablinks {
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            min-height: 44px;
            box-sizing: border-box;
        }
    /* --- Hide the carousel arrows on mobile and rely on swipe.

               The arrows are absolutely positioned at -50px against .slickCarousel, which
               works while that container is a fixed-size desktop column. Once the layout
               stacks they lose their anchor and drop into the flow — measured at 430px
               they landed 100px apart horizontally and 30px apart VERTICALLY, floating in
               white space below the image rather than either side of it.

               Safe to hide: the gallery is Swiper 11 with allowTouchMove and simulateTouch
               both true (verified at runtime, 17 slides), so swiping still works and this
               removes a broken control rather than a needed one. --- */
    .slick-prev,
    .slick-next {
        display: none !important;
    }
}

/* IceCat request popup */
.icecat-request {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

    .icecat-request .icecat-row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 28px;
        font-size: 14px;
    }

    .icecat-request .icecat-label {
        flex: 0 0 70px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.6);
    }

    .icecat-request .icecat-value {
        flex: 1 1 auto;
        min-width: 0;
    }

.icecat-message-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: -4px;
}

.icecat-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.icecat-fixed {
    white-space: pre-wrap;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 1.4;
}