/* ProductTabsSlider content block  (ControlName: producttabsslider)
   "What's new" style: a row of category filter pills over a horizontally
   scrollable strip of product cards (image + wishlist heart + title + price),
   flanked by prev/next arrows with a scroll-window progress bar underneath.

   Colours / fonts / radius come ENTIRELY from the theme Site-Settings tokens
   (--site-* emitted at :root by SiteThemeCss). The fallbacks after each var()
   are only for contexts with no theme (e.g. the admin preview); the live store
   always overrides them, so the block tracks whatever the admin configures.
   Only structural sizing (lengths/spacing) is literal. Keep selectors
   namespaced under .sf-cb-ptabs.

   --ptabs-media: the image-box height; the prev/next arrows are vertically
   centred on it, so keep this in sync with the value used in any card sizing. */

.sf-cb-ptabs {
    --ptabs-media: 200px;
    --ptabs-card: 210px;
    --ptabs-gap: 22px;
    font-family: inherit;
    color: var(--site-content-text, #1a1a1a);
    box-sizing: border-box;
    width: 100%;            /* fill the home content column, like the section below it */
    margin: 36px 0;
    padding: 0 24px;        /* small gutter so the slider isn't flush to the page edges */
    position: relative;
}
.sf-cb-ptabs *,
.sf-cb-ptabs *::before,
.sf-cb-ptabs *::after { box-sizing: border-box; }
/* Neutralise any generic theme borders that leak onto images/links inside cards. */
.sf-cb-ptabs__img,
.sf-cb-ptabs__imglink,
.sf-cb-ptabs__name { border: 0; }

/* ---- heading ---- */
.sf-cb-ptabs__head {
    text-align: center;
    margin: 0 0 20px;
}
.sf-cb-ptabs__title {
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .2px;
    color: var(--site-content-text, #1a1a1a);
}

/* ---- category filter pills ---- */
.sf-cb-ptabs__tabs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    margin-bottom: 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sf-cb-ptabs__tabs::-webkit-scrollbar { display: none; }

.sf-cb-ptabs__tab {
    flex: 0 0 auto;
    border: 1px solid var(--site-border, #cdcdcd);
    background: var(--site-surface, #f4f5f7);
    color: var(--site-content-text, #1a1a1a);
    font: inherit;
    font-size: .9em;
    font-weight: 500;
    line-height: 1.2;
    padding: 12px 22px;
    border-radius: var(--site-radius, 6px);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sf-cb-ptabs__tab:hover {
    background: var(--site-button-hover, #e9edf2);
    border-color: var(--site-button-hover, #e9edf2);
    color: var(--site-button-text, #fff);   /* keep text legible when hover bg is dark */
}
.sf-cb-ptabs__tab.is-active {
    background: var(--site-button-bg, #0a5fb4);
    color: var(--site-button-text, #fff);
    border-color: var(--site-button-bg, #0a5fb4);
}

/* ---- carousel viewport (arrows overlay the scroller) ---- */
.sf-cb-ptabs__viewport {
    position: relative;
}
.sf-cb-ptabs__scroller {
    overflow-x: auto;
    scroll-behavior: smooth;
}
/* Native scrollbar (same shape as the mv-suggest carousel) used as the scroll-position
   indicator. Thumb uses the site color from the theme token. */
.sf-cb-ptabs__scroller::-webkit-scrollbar { height: 8px; }
.sf-cb-ptabs__scroller::-webkit-scrollbar-thumb { background: var(--site-button-bg, #0a5fb4); border-radius: 4px; }

.sf-cb-ptabs__track {
    display: flex;
    gap: var(--ptabs-gap);
    padding: 4px 2px;
}

/* ---- prev / next arrows: circular, overlaying the card row, centred on the image ---- */
.sf-cb-ptabs__nav {
    position: absolute;
    top: calc(4px + var(--ptabs-media) / 2);
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--site-border, #e0e0e0);
    background: var(--site-surface, #fff);
    color: var(--site-content-text, #1a1a1a);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
    transition: opacity .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.sf-cb-ptabs__nav--prev { left: 0; }
.sf-cb-ptabs__nav--next { right: 0; }
.sf-cb-ptabs__nav:hover { background: var(--site-button-hover, #f3f3f3); box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.sf-cb-ptabs__nav:disabled { opacity: 0; pointer-events: none; }

/* ---- product card ---- */
.sf-cb-ptabs__card {
    flex: 0 0 var(--ptabs-card);
    width: var(--ptabs-card);
    text-align: left;
}
.sf-cb-ptabs__media {
    position: relative;
    height: var(--ptabs-media);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--site-surface, #fff);
    border-radius: var(--site-radius, 6px);
}
/* Discount badge (top-left) + manufacturer logo (bottom-left) — matches ProductSliderShorty. */
/* Overlay layout matches the category grid: logo top-left, stock badge below it (left), discount
   badge on the RIGHT below the fav heart. */
.sf-cb-ptabs__badge {
    position: absolute;
    top: 46px; right: 8px; left: auto;
    z-index: 2;
    background: var(--site-button-bg, #e1251b);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.sf-cb-ptabs__logo {
    position: absolute;
    left: 8px; top: 8px;
    z-index: 2;
    display: inline-block;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--site-border, #e0e0e0);
    border-radius: 4px;
    padding: 2px 5px;
    line-height: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sf-cb-ptabs__logo img { max-height: 22px; max-width: 72px; width: auto; display: block; }
/* Stock/availability badge: left, just below the logo. */
.sf-cb-ptabs__stock {
    position: absolute;
    left: 8px; top: 40px;
    z-index: 2;
    max-width: calc(100% - 16px);
    pointer-events: none;
}
/* Available-quantity badge (admin only): pinned to the bottom-right of the media box,
   independent of the status badge above. */
.sf-cb-ptabs__qte {
    position: absolute;
    right: 8px; bottom: 8px;
    z-index: 2;
    max-width: calc(100% - 16px);
    pointer-events: none;
    text-align: right;
}
.sf-cb-ptabs__qte > span {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    line-height: 1.3;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}
/* Shared badge shape (structure only). The background colour is status-driven
   below: this mirrors the category grid, where the status spans emitted by
   ProductUtils.RenderProductStatus carry .siteprice (in stock) or .yousave
   (out of stock / limited) and styles.css paints them green / orange with white
   text. Higher specificity here (.sf-cb-ptabs__stock .siteprice = 0,0,2,0) wins
   over the theme's plain .siteprice/.yousave background. */
.sf-cb-ptabs__stock .siteprice,
.sf-cb-ptabs__stock .yousave,
.sf-cb-ptabs__stock span {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
}
/* In stock = green, out of stock / limited = orange (same as the category page). */
.sf-cb-ptabs__stock .siteprice { background: green; }
.sf-cb-ptabs__stock .yousave  { background: orange; }
.sf-cb-ptabs__imglink {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.sf-cb-ptabs__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply; /* lets product whites blend with the surface tone */
    transition: opacity .35s ease, transform .4s ease;
}
/* Second image, faded in over the first on hover (the ecommerce image-swap). */
.sf-cb-ptabs__img--alt {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
/* With an alt image: cross-fade main -> alt. */
.sf-cb-ptabs__media--hasalt:hover .sf-cb-ptabs__img--main { opacity: 0; }
.sf-cb-ptabs__media--hasalt:hover .sf-cb-ptabs__img--alt  { opacity: 1; }
/* Without an alt image: gently zoom the single image instead. */
.sf-cb-ptabs__media:not(.sf-cb-ptabs__media--hasalt):hover .sf-cb-ptabs__img--main { transform: scale(1.07); }

/* wishlist heart, top-right of the image */
.sf-cb-ptabs__wish {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: 1px solid var(--site-border, #e0e0e0);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    z-index: 2;
}
.sf-cb-ptabs__wish svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--site-muted, #6b6b6b);
    stroke-width: 1.7;
    transition: stroke .15s ease, fill .15s ease;
}
.sf-cb-ptabs__wish:hover svg {
    stroke: var(--site-button-bg, #e1251b);
    fill: var(--site-button-bg, #e1251b);
}

/* title + price (min-heights keep prices on a shared baseline across cards) */
.sf-cb-ptabs__name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.9em;
    margin-top: 14px;
    color: var(--site-link, #0b5cab);
    font-size: .92em;
    line-height: 1.3;
    text-decoration: none;
}
.sf-cb-ptabs__name:hover { color: var(--site-link-hover, #3399ff); text-decoration: underline; }
.sf-cb-ptabs__price {
    margin-top: 6px;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--site-price, #111);
}
/* Compact the price block so the current price (.your-price) sits right under the
   struck list price (.your-siteprice / .size-listprice) — no gap between the lines.
   Theme price rules use !important, so match it here (scoped to the card). */
.sf-cb-ptabs__price .prices,
.sf-cb-ptabs__price .prices p,
.sf-cb-ptabs__price .your-siteprice,
.sf-cb-ptabs__price .your-price,
.sf-cb-ptabs__price .small-TTC {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}
/* Make only the current price value 15px. Must be prefixed with #main-content to
   out-specify the theme's `#main-content span {font-size:12px !important}` global rule
   (0,1,0,1); this is (0,1,3,0) and wins. Keep the TTC mention small. */
#main-content .sf-cb-ptabs__price .your-price,
#main-content .sf-cb-ptabs__price .your-price .size-listprice {
    font-size: 15px !important;
}
#main-content .sf-cb-ptabs__price .your-price .mention {
    font-size: 9px !important;
}

/* preview error (admin editor only) */
.sf-cb-ptabs-preview-error { color: var(--site-price, #b00); font: 13px/1.4 inherit; }

/* ---- narrow screens ---- */
@media (max-width: 640px) {
    .sf-cb-ptabs { --ptabs-media: 150px; --ptabs-card: 150px; --ptabs-gap: 14px; margin: 20px auto; padding: 0 12px; }
    .sf-cb-ptabs__title { font-size: 1.4em; }
    .sf-cb-ptabs__nav { width: 36px; height: 36px; font-size: 20px; }
}