/* Tema "Ecomm B2B" para el front de Sylius 2.3 (Bootstrap 5).
   Identidad de la B2B de eComm360 (azul #1B5585, acento cian del logo) en versión 2026:
   tipografía Geist, superficies limpias, profundidad con sombras suaves y movimiento (transiciones entre páginas,
   aparición al hacer scroll, microinteracciones). Todo el movimiento respeta prefers-reduced-motion. */

:root {
    --b2b-primary: #1B5585;
    --b2b-primary-600: #164A73;
    --b2b-primary-700: #0F3A5C;
    --b2b-primary-50: #EEF4FA;
    --b2b-primary-100: #DCE9F5;
    --b2b-accent: #2FA6CB;
    --b2b-accent-soft: #7FD3EA;
    --b2b-ink: #0B1622;
    --b2b-bg: #F3F5F8;
    --b2b-card: #FFFFFF;
    --b2b-soft: #F4F6F9;
    --b2b-line: #E3E8EE;
    --b2b-line-strong: #D2DAE3;
    --b2b-text: #0F1B2A;
    --b2b-muted: #5E6B7A;
    --b2b-subtle: #8E9AA7;
    --b2b-ok: #12A150;
    --b2b-low: #D97706;
    --b2b-out: #DC2626;
    --b2b-sale: #F04D23;
    --b2b-radius-xl: 24px;
    --b2b-radius: 16px;
    --b2b-radius-md: 12px;
    --b2b-radius-sm: 10px;
    --b2b-ring: 0 0 0 1px var(--b2b-line);
    --b2b-shadow: 0 1px 2px rgba(15, 27, 42, .04), 0 6px 16px -8px rgba(15, 27, 42, .08);
    --b2b-shadow-hover: 0 2px 4px rgba(15, 27, 42, .04), 0 22px 44px -16px rgba(15, 27, 42, .22);
    --b2b-shadow-pop: 0 28px 64px -20px rgba(15, 27, 42, .32), 0 0 0 1px rgba(15, 27, 42, .06);
    --b2b-ease: cubic-bezier(.22, 1, .36, 1);
    --b2b-spring: cubic-bezier(.34, 1.56, .64, 1);
    --b2b-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --b2b-mono: 'Geist Mono', ui-monospace, Consolas, monospace;
    --b2b-dark-bg:
        radial-gradient(620px 380px at 88% 0%, rgba(47, 166, 203, .42), transparent 62%),
        radial-gradient(520px 420px at 0% 100%, rgba(27, 85, 133, .85), transparent 70%),
        linear-gradient(135deg, #0A1726 0%, #0F2B46 52%, #164A73 100%);

    --bs-primary: var(--b2b-primary);
    --bs-primary-rgb: 27, 85, 133;
    --bs-link-color: var(--b2b-primary);
    --bs-link-color-rgb: 27, 85, 133;
    --bs-link-hover-color: var(--b2b-primary-600);
    --bs-link-hover-color-rgb: 22, 74, 115;
    --bs-body-font-family: var(--b2b-font);
    --bs-body-color: var(--b2b-text);
    --bs-body-bg: var(--b2b-bg);
    --bs-border-color: var(--b2b-line);
    --bs-primary-text-emphasis: var(--b2b-primary-600);
    --bs-primary-bg-subtle: var(--b2b-primary-50);
    --bs-border-radius: var(--b2b-radius-sm);
    --bs-font-monospace: var(--b2b-mono);
}

body { font-family: var(--b2b-font); color: var(--b2b-text); background: var(--b2b-bg); font-size: .9375rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.b2b h1, .b2b h2, .b2b h3, .b2b .h1, .b2b .h2, .b2b .h3, .b2b .h4, .b2b .h5 { font-family: var(--b2b-font); font-weight: 600; letter-spacing: -.025em; color: var(--b2b-text); }
.icon-sm { width: 1rem; height: 1rem; }
.b2b .link-reset:hover { color: inherit; }
::selection { background: var(--b2b-primary-100); color: var(--b2b-primary-700); }
:focus-visible { outline: 2px solid var(--b2b-accent); outline-offset: 2px; }
.b2b-mono, code, kbd { font-family: var(--b2b-mono); }
.b2b-kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--b2b-primary); margin-bottom: .45rem; }
.b2b-kicker::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: var(--b2b-accent); }
.b2b-kicker--light { color: var(--b2b-accent-soft); }
.b2b-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .85rem .38rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 500; }
.b2b-pill--glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.b2b-pill__dot, .b2b-welcome__dot, .b2b-float__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #34D17A; box-shadow: 0 0 0 0 rgba(52, 209, 122, .6); animation: b2b-pulse 2.4s infinite; }

/* ---------- Botones y formularios ---------- */
.btn { font-weight: 600; border-radius: var(--b2b-radius-sm); letter-spacing: -.005em; transition: color .2s, background-color .2s, border-color .2s, box-shadow .25s, transform .25s var(--b2b-ease); }
.btn:active { transform: scale(.97); }
.btn-lg { border-radius: var(--b2b-radius-md); padding: .8rem 1.4rem; font-size: 1rem; }
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--b2b-primary); --bs-btn-border-color: var(--b2b-primary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--b2b-primary-600); --bs-btn-hover-border-color: var(--b2b-primary-600);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--b2b-primary-700); --bs-btn-active-border-color: var(--b2b-primary-700);
    --bs-btn-disabled-bg: #AFC0CF; --bs-btn-disabled-border-color: #AFC0CF; --bs-btn-focus-shadow-rgb: 27, 85, 133;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 27, 42, .18);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -8px rgba(27, 85, 133, .7); transform: translateY(-1px); }
.btn-primary:disabled, .btn-primary.disabled { box-shadow: none; background-image: none; }
.btn-outline-primary {
    --bs-btn-color: var(--b2b-primary); --bs-btn-border-color: var(--b2b-line-strong); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--b2b-primary-50); --bs-btn-hover-border-color: var(--b2b-primary); --bs-btn-hover-color: var(--b2b-primary);
    --bs-btn-active-bg: var(--b2b-primary-50); --bs-btn-active-border-color: var(--b2b-primary); --bs-btn-active-color: var(--b2b-primary);
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--b2b-line-strong); --bs-btn-hover-bg: var(--b2b-soft); --bs-btn-hover-border-color: var(--b2b-line-strong); --bs-btn-color: var(--b2b-text); --bs-btn-hover-color: var(--b2b-text); }
.btn-success { --bs-btn-bg: var(--b2b-primary); --bs-btn-border-color: var(--b2b-primary); --bs-btn-hover-bg: var(--b2b-primary-600); --bs-btn-hover-border-color: var(--b2b-primary-600); }
.btn-ghost-light { --bs-btn-color: #fff; --bs-btn-bg: rgba(255, 255, 255, .06); --bs-btn-border-color: rgba(255, 255, 255, .24); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .14); --bs-btn-hover-border-color: rgba(255, 255, 255, .4); --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.btn .icon { vertical-align: -2px; }
.b2b-btn-arrow .icon { transition: transform .35s var(--b2b-ease); }
.b2b-btn-arrow:hover .icon { transform: translateX(3px); }
.b2b .form-control, .b2b .form-select { border-radius: var(--b2b-radius-sm); border-color: var(--b2b-line-strong); background-color: #fff; min-height: 44px; font-size: .92rem; transition: border-color .2s, box-shadow .2s; }
.b2b .form-control:hover, .b2b .form-select:hover { border-color: #BCC7D2; }
.b2b .form-control:focus, .b2b .form-select:focus { border-color: var(--b2b-primary); box-shadow: 0 0 0 4px rgba(27, 85, 133, .12); }
.b2b .form-label, .b2b label.required, .b2b .col-form-label { font-size: .84rem; font-weight: 500; color: var(--b2b-text); }
.b2b .form-check-input { border-color: var(--b2b-line-strong); }
.form-check-input { transition: background-color .2s, border-color .2s, box-shadow .2s; }
.form-check-input:checked { background-color: var(--b2b-primary); border-color: var(--b2b-primary); }
.form-check-input:focus { border-color: var(--b2b-primary); box-shadow: 0 0 0 4px rgba(27, 85, 133, .14); }
.b2b .text-success { color: var(--b2b-ok) !important; }
.b2b .link-primary, .b2b .text-primary, .b2b .text-primary-emphasis { color: var(--b2b-primary) !important; }
.b2b .bg-primary, .b2b .badge.bg-primary { background-color: var(--b2b-primary) !important; }
.b2b .card { border: 0; box-shadow: var(--b2b-ring); border-radius: var(--b2b-radius); background: var(--b2b-card); }
.b2b .alert { border-radius: var(--b2b-radius-md); border: 0; box-shadow: var(--b2b-ring); }
.dropdown-menu { border: 0; border-radius: var(--b2b-radius-md); box-shadow: var(--b2b-shadow-pop); padding: .4rem; }
.dropdown-menu.show { animation: b2b-pop .24s var(--b2b-ease) both; }
.dropdown-item { border-radius: 8px; padding: .5rem .7rem; font-weight: 500; display: flex; align-items: center; gap: .55rem; font-size: .88rem; transition: background .15s, color .15s; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--b2b-primary-50); color: var(--b2b-primary); }
.b2b .pagination { --bs-pagination-border-width: 0; --bs-pagination-bg: transparent; --bs-pagination-color: var(--b2b-muted); --bs-pagination-hover-bg: #fff; --bs-pagination-hover-color: var(--b2b-primary); --bs-pagination-active-bg: var(--b2b-primary); --bs-pagination-active-color: #fff; --bs-pagination-focus-box-shadow: none; gap: .3rem; }
.b2b .page-link { border-radius: 10px !important; min-width: 40px; text-align: center; font-weight: 500; transition: background .2s, color .2s; }
.b2b .page-link.active, .b2b .active > .page-link { color: #fff; font-weight: 600; box-shadow: 0 6px 14px -6px rgba(27, 85, 133, .7); }

/* ---------- Barra superior + cabecera ---------- */
.b2b-welcome { background: var(--b2b-ink); color: rgba(255, 255, 255, .66); font-size: .74rem; }
.b2b-welcome__inner { display: flex; justify-content: center; align-items: center; gap: 1.25rem; padding-top: .5rem; padding-bottom: .5rem; }
.b2b-welcome__item { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; color: inherit; text-decoration: none; }
.b2b-welcome__item:first-child { color: #fff; font-weight: 500; }
.b2b-welcome__item + .b2b-welcome__item::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .3); margin-right: .7rem; }
a.b2b-welcome__item:hover { color: #fff; }
.b2b-header { position: sticky; top: 0; z-index: 1030; padding: .75rem 0; view-transition-name: b2b-header; transition: padding .35s var(--b2b-ease); }
.b2b-header__card { background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-radius: var(--b2b-radius); padding: .55rem .75rem; box-shadow: 0 0 0 1px rgba(15, 27, 42, .06), 0 1px 2px rgba(15, 27, 42, .04); transition: box-shadow .35s var(--b2b-ease), background .35s; }
.b2b-header.is-scrolled { padding: .5rem 0; }
.b2b-header.is-scrolled .b2b-header__card { background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 1px rgba(15, 27, 42, .06), 0 16px 36px -14px rgba(15, 27, 42, .22); }
.b2b-burger { display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: transparent; border-radius: 12px; color: var(--b2b-text); transition: background .2s; }
.b2b-burger:hover { background: rgba(15, 27, 42, .05); }
.b2b-burger svg { width: 22px; height: 22px; }
.b2b-logo { display: inline-flex; align-items: baseline; font-family: 'Teko', var(--b2b-font); font-weight: 600; font-size: 2.05rem; line-height: .9; letter-spacing: .02em; padding-top: .3rem; }
.b2b-logo__a { color: var(--b2b-primary); }
.b2b-logo__b { color: var(--b2b-accent); }
.b2b-logo--light .b2b-logo__a { color: #fff; }
.b2b-search { position: relative; display: flex; align-items: center; max-width: 580px; background: rgba(15, 27, 42, .045); border: 1px solid transparent; border-radius: 999px; transition: background .25s, border-color .25s, box-shadow .25s; }
.b2b-search:hover { background: rgba(15, 27, 42, .065); }
.b2b-search:focus-within { background: #fff; border-color: var(--b2b-primary); box-shadow: 0 0 0 4px rgba(27, 85, 133, .1); }
.b2b-search__icon { display: grid; place-items: center; padding-left: 1rem; color: var(--b2b-subtle); }
.b2b-search__icon svg { width: 18px; height: 18px; }
.b2b-search__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .7rem 3.2rem .7rem .65rem; font-size: .9rem; outline: none; color: var(--b2b-text); }
.b2b-search__input::-webkit-search-cancel-button { display: none; }
.b2b-search__input::placeholder { color: #8C98A5; }
.b2b-search__kbd { position: absolute; right: .7rem; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 .4rem; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--b2b-line-strong), 0 1px 0 var(--b2b-line-strong); color: var(--b2b-muted); font-size: .72rem; transition: opacity .2s; }
.b2b-search__btn { position: absolute; right: .3rem; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--b2b-primary); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--b2b-spring); }
.b2b-search__btn svg { width: 18px; height: 18px; }
.b2b-search:focus-within .b2b-search__btn { opacity: 1; transform: none; }
.b2b-search:focus-within .b2b-search__kbd { opacity: 0; }
.b2b-icon-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--b2b-text); transition: background .2s, color .2s, transform .25s var(--b2b-ease); }
.b2b-icon-btn:hover, .b2b-icon-btn[aria-expanded="true"] { background: rgba(15, 27, 42, .05); color: var(--b2b-primary); }
.b2b-icon-btn:active { transform: scale(.92); }
.b2b-icon-btn svg { width: 21px; height: 21px; transition: transform .35s var(--b2b-spring); }
.b2b-icon-btn:hover svg { transform: translateY(-1px); }
.ecomm-bell:hover svg { animation: b2b-ring .7s ease; }
.b2b-avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--b2b-primary), #2B7BB8); color: #fff; font-weight: 600; font-size: .8rem; letter-spacing: .03em; margin-left: .25rem; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--b2b-primary-100); transition: transform .3s var(--b2b-spring), box-shadow .3s; }
.b2b-avatar:hover { transform: scale(1.06); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--b2b-accent); }
.b2b-dropdown { min-width: 250px; }
.b2b-dropdown__head { padding: .55rem .7rem .7rem; display: flex; flex-direction: column; font-size: .86rem; border-bottom: 1px solid var(--b2b-line); margin-bottom: .35rem; }
.b2b-dropdown__head span { color: var(--b2b-primary); font-weight: 500; font-size: .76rem; }
.b2b-cart-btn { display: inline-flex; align-items: center; gap: .6rem; border: 0; background: var(--b2b-text); padding: .45rem .9rem .45rem .7rem; border-radius: 999px; color: #fff; font-weight: 600; margin-left: .25rem; transition: background .25s, transform .25s var(--b2b-ease), box-shadow .25s; }
.b2b-cart-btn:hover { background: var(--b2b-primary); box-shadow: 0 8px 18px -8px rgba(27, 85, 133, .8); }
.b2b-cart-btn:active { transform: scale(.96); }
.b2b-cart-btn__icon { position: relative; display: inline-grid; }
.b2b-cart-btn__icon svg { width: 21px; height: 21px; }
.b2b-cart-btn__count { position: absolute; top: -8px; right: -10px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--b2b-accent); color: #fff; font-size: .66rem; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--b2b-text); font-variant-numeric: tabular-nums; }
.b2b-cart-btn:hover .b2b-cart-btn__count { box-shadow: 0 0 0 2px var(--b2b-primary); }
.b2b-cart-btn__count.is-bump { animation: b2b-bump .6s var(--b2b-spring); }
.b2b-cart-btn__total { font-size: .86rem; font-variant-numeric: tabular-nums; }

/* ---------- Menú lateral de familias ---------- */
.offcanvas { --bs-offcanvas-transition: transform .5s var(--b2b-ease); }
.offcanvas-backdrop { background: rgba(9, 18, 30, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: opacity .35s; }
.offcanvas-backdrop.show { opacity: 1; }
.b2b .b2b-menu { --bs-offcanvas-width: 360px; border-right: 0 !important; border-radius: 0 var(--b2b-radius-xl) var(--b2b-radius-xl) 0; }
.b2b-menu .offcanvas-header { border-bottom: 1px solid var(--b2b-line); padding: 1.1rem 1.4rem; }
.b2b-menu .offcanvas-body { padding: 1rem 1rem 2rem; display: flex; flex-direction: column; gap: .15rem; }
.b2b-menu__all { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: var(--b2b-radius-md); background: var(--b2b-dark-bg); color: #fff; font-weight: 600; text-decoration: none; margin-bottom: .6rem; transition: transform .3s var(--b2b-ease), box-shadow .3s; }
.b2b-menu__all:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(15, 43, 70, .8); }
.b2b-menu__all svg, .b2b-menu__link svg { width: 19px; height: 19px; }
.b2b-menu__label { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b2b-subtle); padding: 1rem .85rem .4rem; }
.b2b-menu__group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: .65rem .85rem; border-radius: var(--b2b-radius-sm); font-weight: 500; cursor: pointer; color: var(--b2b-text); transition: background .2s, color .2s; }
.b2b-menu__group summary::-webkit-details-marker { display: none; }
.b2b-menu__group summary:hover { background: var(--b2b-soft); }
.b2b-menu__group[open] summary { color: var(--b2b-primary); font-weight: 600; }
.b2b-menu__chev { width: 17px; height: 17px; transition: transform .35s var(--b2b-ease); }
.b2b-menu__group[open] .b2b-menu__chev { transform: rotate(180deg); }
.b2b-menu__group ul { list-style: none; margin: 0 0 .4rem .85rem; padding: 0 0 0 .75rem; border-left: 1px solid var(--b2b-line); }
.b2b-menu__group[open] ul { animation: b2b-fade-up .4s var(--b2b-ease) both; }
.b2b-menu__group li a { display: block; padding: .4rem .65rem; border-radius: 8px; color: var(--b2b-muted); font-size: .88rem; text-decoration: none; transition: background .2s, color .2s, transform .25s var(--b2b-ease); }
.b2b-menu__group li a:hover { color: var(--b2b-primary); background: var(--b2b-primary-50); transform: translateX(2px); }
.b2b-menu__link { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border-radius: var(--b2b-radius-sm); font-weight: 500; color: var(--b2b-text); text-decoration: none; transition: background .2s, color .2s; }
.b2b-menu__link:hover { background: var(--b2b-soft); color: var(--b2b-primary); }

/* ---------- Migas de pan ---------- */
.b2b .breadcrumb { --bs-breadcrumb-divider: '/'; font-size: .8rem; margin-bottom: 0; }
.b2b .breadcrumb-item a { color: var(--b2b-muted); text-decoration: none; transition: color .2s; }
.b2b .breadcrumb-item a:hover { color: var(--b2b-primary); }
.b2b .breadcrumb-item.active { color: var(--b2b-subtle); }
.b2b .breadcrumb-item + .breadcrumb-item::before { color: #C3CCD5; }

/* ---------- Secciones genéricas ---------- */
.b2b-section { margin-top: 4rem; }
.b2b-section--flush { margin-top: 2.5rem; }
.b2b-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.b2b-section__title { font-size: clamp(1.45rem, 2.2vw, 1.95rem) !important; font-weight: 600; letter-spacing: -.035em !important; margin: 0; }
.b2b-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .88rem; color: var(--b2b-text); text-decoration: none; transition: color .2s; }
.b2b-link:hover { color: var(--b2b-primary); }
.b2b-link .icon { transition: transform .35s var(--b2b-ease); }
.b2b-link:hover .icon { transform: translateX(3px); }
/* Compatibilidad con bloques antiguos (páginas de módulos) */
.b2b-block { background: var(--b2b-card); border-radius: var(--b2b-radius); box-shadow: var(--b2b-ring); padding: 1.75rem !important; margin-bottom: 1.25rem; }
.b2b-block__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.b2b-block__title { font-size: 1.2rem !important; font-weight: 600; margin: 0 0 1.25rem; }
.b2b-block__head .b2b-block__title { margin: 0; }

/* ---------- Hero de portada ---------- */
.b2b-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 2rem; min-height: 540px; margin-top: .25rem; padding: 3.75rem 3.5rem; border-radius: var(--b2b-radius-xl); color: #fff; background: var(--b2b-dark-bg); box-shadow: 0 30px 60px -30px rgba(10, 23, 38, .6); }
.b2b-hero::before, .b2b-cta::before, .b2b-auth__aside::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 40%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 70% 75% at 72% 40%, #000 25%, transparent 75%); }
.b2b-hero::after { content: ''; position: absolute; z-index: -1; width: 560px; height: 560px; right: -140px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 166, 203, .38), transparent 65%); animation: b2b-drift 16s ease-in-out infinite alternate; pointer-events: none; }
.b2b-hero__body { position: relative; z-index: 2; }
.b2b .b2b-hero__title { font-size: clamp(2.3rem, 4.3vw, 3.7rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; color: #fff; margin: 1.25rem 0 1.25rem; }
.b2b-hero__title span { background: linear-gradient(92deg, var(--b2b-accent-soft) 0%, #B6D4FF 55%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b2b-hero__lead { color: rgba(255, 255, 255, .7); font-size: 1.03rem; line-height: 1.65; max-width: 33rem; margin: 0; }
.b2b-hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.b2b-hero__actions .btn-light { --bs-btn-border-color: #fff; color: var(--b2b-ink); box-shadow: 0 10px 30px -10px rgba(127, 211, 234, .55); }
.b2b-hero__stats { display: flex; gap: 2.5rem; margin: 2.75rem 0 0; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.b2b-hero__stats dt { font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.b2b-hero__stats dd { margin: .1rem 0 0; font-size: .8rem; color: rgba(255, 255, 255, .55); }
.b2b-hero__visual { position: relative; height: 460px; }
.b2b-hero__tile { position: absolute; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .12); }
.b2b-hero__tile img { display: block; width: 100%; }
.b2b-hero__tile--main { z-index: 2; width: 300px; left: 50%; top: 50%; padding: 10px; translate: -50% -50%; rotate: -2deg; animation: b2b-in-pop 1s var(--b2b-ease) .25s both, b2b-float 7s ease-in-out 1.25s infinite; }
.b2b-hero__tile--back { z-index: 1; width: 210px; right: 0; top: 2%; rotate: 9deg; opacity: .96; animation: b2b-in-pop 1s var(--b2b-ease) .1s both, b2b-float 9s ease-in-out 1.1s infinite reverse; }
.b2b-hero__tile-media { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #F3F6F9; }
.b2b-hero__tile-info { padding: .85rem .5rem .4rem; color: var(--b2b-text); }
.b2b-hero__tile-info .b2b-mono { font-size: .72rem; color: var(--b2b-subtle); }
.b2b-hero__tile-info strong { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -.015em; margin: .15rem 0 .7rem; }
.b2b-hero__tile-row { display: flex; align-items: center; justify-content: space-between; }
.b2b-hero__tile-price { display: flex; flex-direction: column; font-size: 1.3rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.b2b-hero__tile-price small { font-size: .68rem; font-weight: 500; color: var(--b2b-muted); letter-spacing: 0; }
.b2b-hero__tile-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--b2b-primary); color: #fff; box-shadow: 0 10px 20px -8px rgba(27, 85, 133, .9); }
.b2b-hero__tile-btn svg { width: 20px; height: 20px; }
.b2b-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem; border-radius: 14px; background: rgba(255, 255, 255, .94); color: var(--b2b-text); font-size: .8rem; box-shadow: 0 24px 44px -16px rgba(0, 0, 0, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.b2b-float strong { font-weight: 600; }
.b2b-float small { display: block; font-size: .7rem; color: var(--b2b-muted); }
.b2b-float__dot { width: 8px; height: 8px; background: var(--b2b-ok); }
.b2b-float__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--b2b-primary-50); color: var(--b2b-primary); }
.b2b-float__icon svg { width: 19px; height: 19px; }
.b2b-float--stock { left: 0; top: 16%; animation: b2b-in-pop .9s var(--b2b-ease) .55s both, b2b-bob 6s ease-in-out 1.5s infinite; }
.b2b-float--order { left: 4%; bottom: 8%; animation: b2b-in-pop .9s var(--b2b-ease) .7s both, b2b-bob 7s ease-in-out 1.6s infinite reverse; }
.b2b-float--deal { right: 2%; bottom: 20%; flex-direction: column; align-items: flex-start; gap: 0; padding: .6rem .95rem; background: linear-gradient(135deg, var(--b2b-accent), #1F7FB0); color: #fff; animation: b2b-in-pop .9s var(--b2b-ease) .85s both, b2b-bob 5.5s ease-in-out 1.8s infinite; }
.b2b-float--deal strong { font-size: 1.4rem; letter-spacing: -.03em; line-height: 1.1; }
.b2b-float--deal small { color: rgba(255, 255, 255, .85); }
@media (max-width: 1199px) { .b2b-hero { padding: 3rem 2.5rem; } .b2b-hero__tile--main { width: 260px; } .b2b-hero__tile--back { width: 180px; } }
@media (max-width: 991px) {
    .b2b-hero { grid-template-columns: 1fr; padding: 2.5rem 1.75rem; min-height: 0; }
    .b2b-hero__visual { height: 380px; }
}
@media (max-width: 575px) {
    .b2b-hero { padding: 2rem 1.25rem; border-radius: var(--b2b-radius); }
    .b2b-hero__stats { gap: 1.5rem; }
    .b2b-hero__visual { height: 330px; }
    .b2b-hero__tile--back, .b2b-float--order { display: none; }
}

/* ---------- Promociones (bento) ---------- */
.b2b-bento { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, minmax(210px, auto)); gap: 1rem; }
.b2b-promo { position: relative; isolation: isolate; overflow: hidden; display: flex; border-radius: 20px; padding: 1.75rem; color: var(--b2b-text); text-decoration: none; transition: transform .6s var(--b2b-ease), box-shadow .6s var(--b2b-ease); }
.b2b-promo:hover { color: var(--b2b-text); transform: translateY(-4px); box-shadow: var(--b2b-shadow-hover); }
.b2b-promo--lg { grid-row: span 2; min-height: 440px; }
.b2b-promo--blue { background: linear-gradient(145deg, #EDF4FB 0%, #D5E6F5 100%); }
.b2b-promo--cyan { background: linear-gradient(145deg, #E8F7F4 0%, #CFEDE7 100%); }
.b2b-promo--amber { background: linear-gradient(145deg, #FEF4E6 0%, #FBE3C4 100%); }
.b2b-promo__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: 56%; }
.b2b-promo--lg .b2b-promo__body { max-width: 62%; }
.b2b-promo__kicker { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--b2b-text); padding: .3rem .65rem; background: rgba(255, 255, 255, .65); border-radius: 999px; backdrop-filter: blur(4px); }
.b2b-promo__title { font-size: 3.1rem; font-weight: 700; letter-spacing: -.055em; line-height: 1; margin: 1rem 0 .55rem; color: var(--b2b-primary); }
.b2b-promo--lg .b2b-promo__title { font-size: clamp(4rem, 7vw, 6rem); margin-top: 1.5rem; }
.b2b-promo--cyan .b2b-promo__title { color: #0E7468; }
.b2b-promo--amber .b2b-promo__title { color: #B4530A; }
.b2b-promo__text { font-size: .9rem; line-height: 1.5; color: #3B4958; max-width: 22rem; }
.b2b-promo--lg .b2b-promo__text { font-size: 1rem; }
.b2b-promo__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.25rem; font-weight: 600; font-size: .86rem; color: var(--b2b-text); }
.b2b-promo__cta .icon { transition: transform .4s var(--b2b-ease); }
.b2b-promo:hover .b2b-promo__cta .icon { transform: translateX(4px); }
.b2b-promo__img { position: absolute; z-index: 1; right: -3%; bottom: -6%; width: 50%; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); transition: transform .9s var(--b2b-ease); }
.b2b-promo--lg .b2b-promo__img { width: 64%; right: -4%; bottom: -22%; }
.b2b-promo:hover .b2b-promo__img { transform: translateY(-8px) scale(1.06) rotate(-2deg); }
@media (max-width: 991px) { .b2b-bento { grid-template-columns: 1fr; grid-template-rows: none; } .b2b-promo--lg { grid-row: auto; min-height: 320px; } }

/* ---------- Carruseles ---------- */
.b2b-carousel__nav { display: flex; align-items: center; gap: .45rem; }
.b2b-carousel__nav .b2b-link { margin-right: .6rem; }
.b2b-round-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--b2b-text); box-shadow: var(--b2b-ring), 0 1px 2px rgba(15, 27, 42, .05); transition: background .2s, color .2s, transform .3s var(--b2b-spring), box-shadow .2s; }
.b2b-round-btn:hover { background: var(--b2b-text); color: #fff; box-shadow: none; }
.b2b-round-btn:active { transform: scale(.9); }
.b2b-round-btn svg { width: 18px; height: 18px; }
.b2b .b2b-carousel.products-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 1.1rem) / 5); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .5rem .5rem 1.5rem; margin: -.5rem -.5rem -1rem; }
.b2b-carousel::-webkit-scrollbar { display: none; }
.b2b-carousel > * { scroll-snap-align: start; }
@media (max-width: 1199px) { .b2b .b2b-carousel.products-grid { grid-auto-columns: calc((100% - 3 * 1.1rem) / 4); } }
@media (max-width: 991px) { .b2b .b2b-carousel.products-grid { grid-auto-columns: calc((100% - 2 * 1.1rem) / 3); } }
@media (max-width: 575px) { .b2b .b2b-carousel.products-grid { grid-auto-columns: 74%; } }

/* ---------- Familias ---------- */
.b2b-families { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.b2b-family { display: flex; flex-direction: column; gap: .75rem; padding: .55rem .55rem .9rem; border-radius: var(--b2b-radius); background: #fff; box-shadow: var(--b2b-ring); text-decoration: none; color: var(--b2b-text); transition: transform .5s var(--b2b-ease), box-shadow .5s var(--b2b-ease), color .2s; }
.b2b-family:hover { color: var(--b2b-primary); transform: translateY(-4px); box-shadow: var(--b2b-shadow-hover); }
.b2b-family__media { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #F6F8FB, #ECF0F5); }
.b2b-family__media img { width: 88%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--b2b-ease), opacity .5s; }
.b2b-family:hover .b2b-family__media img { transform: scale(1.09) rotate(-2deg); }
.b2b-family__name { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: 0 .35rem; font-weight: 600; font-size: .86rem; line-height: 1.25; letter-spacing: -.01em; }
.b2b-family__arrow { flex: none; width: 16px; height: 16px; opacity: 0; transform: translate(-5px, 5px); transition: opacity .3s, transform .45s var(--b2b-ease); }
.b2b-family:hover .b2b-family__arrow { opacity: 1; transform: none; }
@media (max-width: 1199px) { .b2b-families { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .b2b-families { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .b2b-families { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Marcas (cinta infinita) ---------- */
.b2b-brands { text-align: center; }
.b2b .b2b-brands__title { font-size: .74rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b2b-subtle) !important; margin-bottom: 1.25rem; }
.b2b-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.b2b-marquee__track { display: flex; width: max-content; animation: b2b-marquee 36s linear infinite; }
.b2b-marquee:hover .b2b-marquee__track { animation-play-state: paused; }
.b2b-brand { display: flex; flex-direction: column; align-items: center; padding: .4rem 3rem; }
.b2b-brand__name { font-family: 'Teko', sans-serif; font-size: 2.2rem; font-weight: 600; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: #A3AEBA; transition: color .3s; }
.b2b-brand:hover .b2b-brand__name { color: var(--b2b-primary); }
.b2b-brand__desc { font-size: .72rem; color: var(--b2b-subtle); }

/* ---------- Bloque de cuenta (CTA) ---------- */
.b2b-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 3.25rem 3.5rem; border-radius: var(--b2b-radius-xl); color: #fff; background: var(--b2b-dark-bg); }
.b2b .b2b-cta__title { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; max-width: 36rem; margin: .4rem 0 .7rem; }
.b2b-cta__text { color: rgba(255, 255, 255, .68); max-width: 36rem; margin: 0; }
.b2b-cta__text strong { color: #fff; font-weight: 600; }
.b2b-cta__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 575px) { .b2b-cta { padding: 2rem 1.4rem; border-radius: var(--b2b-radius); } }

/* ---------- Tarjeta de producto ---------- */
.b2b .products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.b2b .products-grid > div { display: flex; flex-direction: column; }
.b2b .products-grid div:has(> .link-reset) { position: relative; display: flex; flex-direction: column; flex: 1; background: #fff; border-radius: var(--b2b-radius); padding: .55rem .55rem .85rem; box-shadow: var(--b2b-ring); transition: transform .5s var(--b2b-ease), box-shadow .5s var(--b2b-ease); }
.b2b .products-grid div:has(> .link-reset):hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(15, 27, 42, .04), var(--b2b-shadow-hover); }
.b2b .products-grid .link-reset { display: block; flex: 1; text-decoration: none; }
.b2b-card__media { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; margin-bottom: .8rem; border-radius: 12px; background: linear-gradient(180deg, #F6F8FB, #ECF0F5); }
.b2b-card__media img, .b2b-card__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--b2b-ease), opacity .5s; }
.b2b .products-grid div:hover > .link-reset .b2b-card__media img { transform: scale(1.07); }
.b2b-card__badge { position: absolute; left: .6rem; top: .6rem; padding: .18rem .5rem; border-radius: 999px; background: var(--b2b-sale); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 6px 14px -6px rgba(240, 77, 35, .8); }
.b2b-card__variants { position: absolute; right: .6rem; top: .6rem; padding: .18rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--b2b-text); font-size: .68rem; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(15, 27, 42, .08); }
.b2b-card__ref { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: 0 .3rem; font-family: var(--b2b-mono); font-size: .68rem; color: var(--b2b-subtle); margin-bottom: .3rem; }
.b2b-card__ref span { font-family: var(--b2b-font); color: var(--b2b-primary); background: var(--b2b-primary-50); padding: .08rem .45rem; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .6rem; }
.b2b-card__name { padding: 0 .3rem; font-weight: 600; font-size: .92rem; line-height: 1.3; letter-spacing: -.012em; color: var(--b2b-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; transition: color .2s; }
.b2b .products-grid div:hover > .link-reset .b2b-card__name { color: var(--b2b-primary); }
.b2b-card__footer { margin-top: .6rem; padding: 0 .3rem; }
.b2b-card__prices { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35rem; }
.b2b-card__from { font-size: .72rem; color: var(--b2b-muted); }
.b2b-card__price { display: contents; }
.b2b-card__price > div[data-applied-promotions-locale] { display: none; }
.b2b-card__price > span { font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; color: var(--b2b-text); font-variant-numeric: tabular-nums; }
.b2b-card__price > span:has(del) { font-size: .8rem; font-weight: 500; color: var(--b2b-subtle); letter-spacing: 0; }
.b2b-card__btn { display: flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; margin-top: .65rem; padding: .5rem; font-size: .86rem; }
.b2b-stock-text { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 500; margin-top: .1rem; }
.b2b-stock-text::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.b2b-stock-text--ok { color: var(--b2b-ok); }
.b2b-stock-text--low { color: var(--b2b-low); }
.b2b-stock-text--out { color: var(--b2b-out); }
/* Botones de compra del módulo Carrito dentro de la tarjeta: tono suave que se rellena al pasar por la tarjeta */
.b2b .products-grid .ecomm-buy.btn-primary { --bs-btn-bg: var(--b2b-primary-50); --bs-btn-color: var(--b2b-primary); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--b2b-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--b2b-primary); color: var(--b2b-primary); background-image: none; box-shadow: none; border-radius: var(--b2b-radius-sm); }
.b2b .products-grid div:has(> .link-reset):hover .ecomm-buy.btn-primary, .b2b .products-grid .ecomm-buy.btn-primary:hover { --bs-btn-bg: var(--b2b-primary); color: #fff; box-shadow: 0 8px 16px -8px rgba(27, 85, 133, .8); }

/* ---------- Listado ---------- */
body[data-route="sylius_shop_product_index"] .row.mt-5 { margin-top: 1.5rem !important; }
body[data-route="sylius_shop_product_index"] .col-lg-9 > .mb-4:first-child { text-align: left; }
body[data-route="sylius_shop_product_index"] .col-lg-9 > .mb-4:first-child h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.04em; margin-bottom: .4rem !important; }
body[data-route="sylius_shop_product_index"] .col-lg-9 > .mb-4:first-child > div { color: var(--b2b-muted); font-size: .95rem; max-width: 46rem; }
body[data-route="sylius_shop_product_index"] .col-lg-9 > .row.mb-5 { margin-bottom: 1rem !important; }
body[data-route="sylius_shop_product_index"] .col-lg-9 > .row.mb-5 .input-group { background: #fff; border-radius: 999px; box-shadow: var(--b2b-ring); transition: box-shadow .25s; }
body[data-route="sylius_shop_product_index"] .col-lg-9 > .row.mb-5 .input-group:focus-within { box-shadow: 0 0 0 1px var(--b2b-primary), 0 0 0 5px rgba(27, 85, 133, .1); }
body[data-route="sylius_shop_product_index"] .col-lg-9 > .row.mb-5 .input-group .form-control { border: 0; background: transparent; border-radius: 999px 0 0 999px !important; padding-left: 1.1rem; box-shadow: none; }
body[data-route="sylius_shop_product_index"] .input-group .btn { background: transparent; border: 0; color: var(--b2b-muted); border-radius: 999px !important; }
/* La X de limpiar ya la pone Sylius: fuera la que añade el navegador en los campos de búsqueda */
body[data-route="sylius_shop_product_index"] .input-group input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
body[data-route="sylius_shop_product_index"] .input-group .btn:hover { color: var(--b2b-primary); background: var(--b2b-primary-50); }
body[data-route="sylius_shop_product_index"] .col-auto.d-flex.gap-2 { align-items: center; }
body[data-route="sylius_shop_product_index"] .col-auto.d-flex.gap-2 .dropdown > .btn,
body[data-route="sylius_shop_product_index"] .col-auto.d-flex.gap-2 > div > .btn { background: #fff; border: 0; box-shadow: var(--b2b-ring); border-radius: 999px; padding: .5rem 1rem; font-weight: 500; font-size: .86rem; }
body[data-route="sylius_shop_product_index"] .col-auto.d-flex.gap-2 .dropdown > .btn:hover { box-shadow: 0 0 0 1px var(--b2b-line-strong), var(--b2b-shadow); }
body[data-route="sylius_shop_product_index"] .products-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.b2b-count { font-size: .85rem; color: var(--b2b-muted); margin-bottom: 1rem; }
.b2b-count strong { color: var(--b2b-text); font-weight: 600; }
.b2b-view-toggle { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; box-shadow: var(--b2b-ring); }
.b2b-view-toggle a { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 999px; color: var(--b2b-subtle); transition: background .25s, color .25s; }
.b2b-view-toggle a:hover { color: var(--b2b-text); }
.b2b-view-toggle a.is-active { background: var(--b2b-text); color: #fff; }
.b2b-view-toggle svg { width: 18px; height: 18px; }
/* Barra lateral fija con scroll propio: familias + filtros + ayuda se mueven juntos y nunca se solapan */
@media (min-width: 992px) {
    body[data-route="sylius_shop_product_index"] .b2b > .container .row > .col-lg-3 { position: sticky; top: 6.25rem; align-self: flex-start; max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 1rem; }
    body[data-route="sylius_shop_product_index"] .b2b > .container .row > .col-lg-3::-webkit-scrollbar { display: none; }
    body[data-route="sylius_shop_product_index"] .b2b > .container .row > .col-lg-3:hover { scrollbar-width: thin; }
}
.b2b-side { background: #fff; border-radius: var(--b2b-radius); box-shadow: var(--b2b-ring); padding: 1.1rem .9rem; margin-bottom: 1rem; }
.b2b-side__title { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; color: var(--b2b-text); padding: 0 .45rem .7rem; }
.b2b-side__group { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--b2b-subtle); padding: .7rem .45rem .4rem; border-top: 1px solid var(--b2b-line); }
.b2b-side__list, .b2b-side__sub { list-style: none; margin: 0; padding: 0; }
.b2b-side__link { display: flex; align-items: center; justify-content: space-between; padding: .5rem .55rem; border-radius: 10px; font-weight: 500; font-size: .88rem; color: var(--b2b-text); text-decoration: none; transition: background .2s, color .2s; }
.b2b-side__link:hover { color: var(--b2b-primary); background: var(--b2b-soft); }
.b2b-side__link.is-open { color: var(--b2b-primary); font-weight: 600; }
.b2b-side__link.is-active { background: var(--b2b-primary-50); color: var(--b2b-primary-600); font-weight: 600; }
.b2b-side__chev { width: 15px; height: 15px; opacity: .55; transition: transform .3s var(--b2b-ease); }
.b2b-side__sub { margin: .15rem 0 .4rem .55rem; padding-left: .6rem; border-left: 1px solid var(--b2b-line); }
.b2b-side__sublink { display: block; padding: .35rem .55rem; border-radius: 8px; font-size: .84rem; color: var(--b2b-muted); text-decoration: none; transition: color .2s, transform .25s var(--b2b-ease); }
.b2b-side__sublink:hover { color: var(--b2b-primary); transform: translateX(2px); }
.b2b-side__sublink.is-active { color: var(--b2b-primary-600); font-weight: 600; background: var(--b2b-primary-50); }
.b2b-side--help { display: flex; gap: .75rem; font-size: .82rem; color: var(--b2b-muted); background: linear-gradient(145deg, #fff, var(--b2b-primary-50)); }
.b2b-side--help strong { color: var(--b2b-text); display: block; margin-bottom: .2rem; font-weight: 600; }
.b2b-side--help p { margin: 0 0 .45rem; }
.b2b-side--help a { font-weight: 600; text-decoration: none; }
.b2b-side-help__icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #fff; color: var(--b2b-primary); box-shadow: var(--b2b-ring); }

/* Vista de lista (módulo CatalogView) */
.b2b-table-wrap { background: #fff; border-radius: var(--b2b-radius); box-shadow: var(--b2b-ring); overflow: auto; }
.b2b-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.b2b-table th { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--b2b-subtle); padding: .85rem .8rem; border-bottom: 1px solid var(--b2b-line); white-space: nowrap; background: #FAFBFC; }
.b2b-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--b2b-line); vertical-align: middle; transition: background .2s; }
.b2b-table tbody tr:hover td { background: #F8FAFC; }
.b2b-table tbody tr:last-child td { border-bottom: 0; }
.b2b-table__img img { width: 54px; height: 54px; object-fit: contain; border-radius: 10px; background: var(--b2b-soft); mix-blend-mode: multiply; transition: transform .5s var(--b2b-ease), opacity .4s; }
.b2b-table tbody tr:hover .b2b-table__img img { transform: scale(1.08); }
.b2b-table__code { font-family: var(--b2b-mono); font-weight: 600; white-space: nowrap; font-size: .8rem; }
.b2b-table__name { font-weight: 600; color: var(--b2b-text); text-decoration: none; transition: color .2s; }
.b2b-table__name:hover { color: var(--b2b-primary); }
.b2b-table__brand { font-size: .64rem; font-weight: 600; color: var(--b2b-primary); text-transform: uppercase; letter-spacing: .06em; }
.b2b-table__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.b2b-table__price small { color: var(--b2b-muted); margin-right: .2rem; }
.b2b-table__price del { color: var(--b2b-subtle); font-size: .78rem; margin-right: .3rem; }
.b2b-table__price strong { font-size: .95rem; font-weight: 700; }
.b2b-table .btn { white-space: nowrap; }

/* ---------- Ficha de producto ---------- */
@media (min-width: 992px) {
    body[data-route="sylius_shop_product_show"] .row.g-3.g-lg-5.mb-6 > .col-lg-7 { flex: 0 0 auto; width: 55%; }
    body[data-route="sylius_shop_product_show"] .row.g-3.g-lg-5.mb-6 > .order-lg-1 { flex: 0 0 auto; width: 45%; }
}
body[data-route="sylius_shop_product_show"] .row.g-3.g-lg-5.mb-6 { margin-top: .25rem; margin-bottom: 1.5rem !important; }
body[data-route="sylius_shop_product_show"] .spotlight-group { background: #fff; border-radius: 20px; box-shadow: var(--b2b-ring); padding: .75rem; margin: 0 0 1.25rem !important; }
body[data-route="sylius_shop_product_show"] .spotlight-group .col { padding-right: 0 !important; }
body[data-route="sylius_shop_product_show"] .spotlight-group a.bg-light { background: linear-gradient(180deg, #F6F8FB, #EBF0F5) !important; border-radius: 14px !important; overflow: hidden; }
body[data-route="sylius_shop_product_show"] #main-image { object-fit: contain !important; mix-blend-mode: multiply; view-transition-name: b2b-product-media; transition: transform .9s var(--b2b-ease), opacity .5s; }
body[data-route="sylius_shop_product_show"] .spotlight-group a.bg-light:hover #main-image { transform: scale(1.04); }
body[data-route="sylius_shop_product_show"] .order-lg-1 > .sticky-top { top: 6.25rem !important; z-index: 1; background: #fff; border-radius: 20px; box-shadow: var(--b2b-ring), var(--b2b-shadow); padding: 1.75rem !important; }
body[data-route="sylius_shop_product_show"] .order-lg-1 .fs-3 { font-size: 2.2rem !important; font-weight: 700; color: var(--b2b-text); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
body[data-route="sylius_shop_product_show"] .order-lg-1 .my-4 { margin-top: 1rem !important; margin-bottom: 0 !important; }
.b2b-pdp__head { margin-bottom: 1.1rem; }
.b2b .b2b-pdp__title { font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; line-height: 1.15; letter-spacing: -.035em; margin-bottom: .6rem; }
.b2b-pdp__short { color: var(--b2b-muted); margin-bottom: .9rem; font-size: .9rem; line-height: 1.55; }
.b2b-pdp__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem; font-size: .84rem; }
.b2b-pdp__meta strong { font-weight: 600; color: var(--b2b-text); }
.b2b-pdp__meta--muted { color: var(--b2b-muted); font-size: .78rem; margin-top: .3rem; }
.b2b-pdp__meta--muted strong { color: var(--b2b-muted); font-weight: 500; }
.b2b-pdp__price-note { display: block; font-size: .78rem; line-height: 1.5; color: var(--b2b-muted); background: var(--b2b-soft); border-radius: var(--b2b-radius-sm); padding: .6rem .8rem; margin: .35rem 0 .6rem; }
.b2b-pdp__price-note .icon { color: var(--b2b-primary); vertical-align: -3px; margin-right: .2rem; }
.b2b-help { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.1rem; padding: .9rem 1rem; background: var(--b2b-soft); border-radius: var(--b2b-radius-md); font-size: .84rem; }
.b2b-help .btn { flex: none; width: auto !important; padding: .45rem .9rem !important; font-size: .8rem !important; }
/* Formulario de compra: cantidad con selector + botón en una fila */
form[name="sylius_shop_add_to_cart"] { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: end; }
form[name="sylius_shop_add_to_cart"] > * { grid-column: 1 / -1; }
form[name="sylius_shop_add_to_cart"] > .mb-4:has(input[id$="_quantity"]) { grid-column: 1; margin-bottom: 0 !important; }
form[name="sylius_shop_add_to_cart"] > .mb-4:has(input[id$="_quantity"]) .mb-3 { margin-bottom: 0 !important; }
form[name="sylius_shop_add_to_cart"] > .mb-4:has(input[id$="_quantity"]) label { display: block; margin-bottom: .4rem; font-size: .78rem; color: var(--b2b-muted); }
form[name="sylius_shop_add_to_cart"] > .mb-3:has(#add-to-cart-button) { grid-column: 2; margin-bottom: 0 !important; }
#add-to-cart-button { width: 100%; height: 50px; font-size: .98rem; border-radius: var(--b2b-radius-md); }
.b2b-stepper { display: inline-flex; align-items: stretch; height: 50px; border-radius: var(--b2b-radius-md); background: #fff; box-shadow: 0 0 0 1px var(--b2b-line-strong); overflow: hidden; transition: box-shadow .2s; }
.b2b-stepper:focus-within { box-shadow: 0 0 0 1px var(--b2b-primary), 0 0 0 5px rgba(27, 85, 133, .1); }
.b2b-stepper button { width: 42px; border: 0; background: transparent; color: var(--b2b-text); font-size: 1.15rem; transition: background .2s, color .2s; }
.b2b-stepper button:hover { background: var(--b2b-soft); color: var(--b2b-primary); }
.b2b-stepper button:active { background: var(--b2b-primary-50); }
.b2b .b2b-stepper input.form-control { width: 56px; min-height: 0; border: 0; border-radius: 0; text-align: center; font-weight: 600; padding: 0; box-shadow: none; -moz-appearance: textfield; }
.b2b-stepper input::-webkit-outer-spin-button, .b2b-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Acordeón (Detalles / Atributos) */
.b2b .accordion { --bs-accordion-border-width: 0; --bs-accordion-btn-focus-box-shadow: none; background: #fff; border-radius: 20px; box-shadow: var(--b2b-ring); padding: .3rem 1.5rem; }
.b2b .accordion-item { background: transparent; border: 0 !important; border-bottom: 1px solid var(--b2b-line) !important; border-radius: 0 !important; }
.b2b .accordion-item:last-child { border-bottom: 0 !important; }
.b2b .accordion-button { font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em; padding: 1.1rem 0; background: transparent !important; color: var(--b2b-text) !important; box-shadow: none !important; }
.b2b .accordion-button::after { transition: transform .4s var(--b2b-ease); }
.b2b .accordion-body { padding: 0 0 1.25rem; color: #46525F; font-size: .92rem; line-height: 1.65; }
.b2b .accordion .table { margin-bottom: 0; font-size: .86rem; }
.b2b .accordion .table td { border-color: var(--b2b-line); padding: .55rem 0; }
.b2b .collapsing { transition: height .4s var(--b2b-ease); }
/* Tabla de variantes */
.b2b div.mb-3:has(> table.align-middle) { max-height: 400px; overflow: auto; border-radius: var(--b2b-radius-md); box-shadow: inset 0 0 0 1px var(--b2b-line); scrollbar-width: thin; }
.b2b div.mb-3:has(> table.align-middle) table { margin-bottom: 0; --bs-table-bg: transparent; }
.b2b div.mb-3:has(> table.align-middle) thead th { position: sticky; top: 0; z-index: 1; background: rgba(250, 251, 252, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--b2b-line); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--b2b-subtle); padding-top: .75rem; padding-bottom: .75rem; }
.b2b div.mb-3:has(> table.align-middle) td { border-color: var(--b2b-line); transition: background .2s, box-shadow .2s; cursor: pointer; }
.b2b div.mb-3:has(> table.align-middle) tbody tr:hover td { background: #F8FAFC; }
.b2b div.mb-3:has(> table.align-middle) td:first-child, .b2b div.mb-3:has(> table.align-middle) th:first-child { padding-left: .95rem; }
.b2b div.mb-3:has(> table.align-middle) tbody tr:last-child td { border-bottom: 0; }
.b2b table[class*="align-middle"] tbody tr.table-success { --bs-table-bg: var(--b2b-primary-50); --bs-table-color: var(--b2b-text); }
.b2b table[class*="align-middle"] tbody tr.table-success td:first-child { box-shadow: inset 3px 0 0 var(--b2b-primary); }
.b2b-variant__code { white-space: nowrap; font-family: var(--b2b-mono); font-weight: 600; font-size: .8rem; color: var(--b2b-text); }
.b2b-variant__opts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.b2b-variant__opts span { font-size: .7rem; padding: .08rem .45rem; border-radius: 999px; background: var(--b2b-soft); color: var(--b2b-muted); white-space: nowrap; }
.b2b-stock { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 500; }
.b2b-stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.b2b-stock--ok { color: var(--b2b-ok); }
.b2b-stock--low { color: var(--b2b-low); }
.b2b-stock--out { color: var(--b2b-muted); }

/* ---------- Ventajas + pie ---------- */
.b2b-features { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4.5rem; padding: 1.4rem 1.5rem; background: #fff; border-radius: var(--b2b-radius); box-shadow: var(--b2b-ring); }
.b2b-feature { display: flex; align-items: center; gap: .9rem; padding: .25rem 1.25rem; }
.b2b-feature:first-child { padding-left: .25rem; }
.b2b-feature + .b2b-feature { border-left: 1px solid var(--b2b-line); }
.b2b-feature__icon { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 13px; background: var(--b2b-primary-50); color: var(--b2b-primary); transition: transform .5s var(--b2b-spring); }
.b2b-feature:hover .b2b-feature__icon { transform: rotate(-8deg) scale(1.08); }
.b2b-feature strong { display: block; font-weight: 600; font-size: .9rem; letter-spacing: -.01em; }
.b2b-feature span { font-size: .78rem; color: var(--b2b-muted); }
@media (max-width: 991px) { .b2b-features { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; } .b2b-feature:nth-child(3) { border-left: 0; padding-left: .25rem; } }
@media (max-width: 575px) { .b2b-features { grid-template-columns: 1fr; } .b2b-feature { border-left: 0 !important; padding-left: .25rem; } }
.b2b-footer { position: relative; overflow: hidden; background: var(--b2b-ink); color: #9AA7B4; padding: 4rem 0 0; margin-top: 3rem; font-size: .86rem; }
.b2b-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(47, 166, 203, .7), transparent); }
.b2b-footer a { color: #9AA7B4; text-decoration: none; transition: color .2s; }
.b2b-footer a:hover { color: #fff; }
.b2b-footer__about { margin: 1rem 0 0; max-width: 18rem; font-size: .84rem; line-height: 1.65; color: #7F8C99; }
.b2b .b2b-footer__title { color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.b2b-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.b2b-footer__wordmark { margin-top: 3rem; font-family: 'Teko', sans-serif; font-weight: 600; font-size: clamp(5rem, 17vw, 15.5rem); line-height: .78; letter-spacing: .02em; text-align: center; white-space: nowrap; user-select: none; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b2b-footer__bottom { padding: 1.1rem 1rem; border-top: 1px solid rgba(255, 255, 255, .06); text-align: center; font-size: .75rem; color: #6C7987; }

/* ---------- Página del carrito ---------- */
body[data-route="sylius_shop_cart_summary"] .b2b h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); letter-spacing: -.04em; }
body[data-route="sylius_shop_cart_summary"] .table-responsive { background: #fff; border-radius: var(--b2b-radius); box-shadow: var(--b2b-ring); padding: .25rem 1.1rem; }
body[data-route="sylius_shop_cart_summary"] .table-responsive .table { margin-bottom: 0; --bs-table-bg: transparent; font-size: .9rem; }
body[data-route="sylius_shop_cart_summary"] .table-responsive thead th { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--b2b-subtle); border-bottom-color: var(--b2b-line); padding-top: 1rem; }
body[data-route="sylius_shop_cart_summary"] .table-responsive td { border-color: var(--b2b-line); font-variant-numeric: tabular-nums; }
body[data-route="sylius_shop_cart_summary"] .table-responsive tbody tr:last-child td { border-bottom: 0; }
body[data-route="sylius_shop_cart_summary"] .table-responsive input[type="number"] { max-width: 84px; min-height: 40px; text-align: center; font-weight: 600; border-radius: 10px; }
body[data-route="sylius_shop_cart_summary"] .table-responsive .mt-3 { margin-top: 0 !important; }
body[data-route="sylius_shop_cart_summary"] .table-responsive .btn-transparent { color: #A0AAB4; border-radius: 10px; }
body[data-route="sylius_shop_cart_summary"] .table-responsive .btn-transparent:hover { color: var(--b2b-out); background: #FEF2F2; }
body[data-route="sylius_shop_cart_summary"] .p-4.bg-light { background: #fff !important; border-radius: var(--b2b-radius) !important; box-shadow: var(--b2b-ring); padding: 1.4rem !important; }
body[data-route="sylius_shop_cart_summary"] .p-4.bg-light h3 { font-size: 1.05rem; margin-bottom: 1rem !important; }
body[data-route="sylius_shop_cart_summary"] .p-4.bg-light .table td { font-size: .88rem; padding: .35rem 0; font-variant-numeric: tabular-nums; }
body[data-route="sylius_shop_cart_summary"] .mb-4 > .p-4.bg-light { padding: 1rem !important; }
body[data-route="sylius_shop_cart_summary"] .d-grid .btn-primary { padding: .85rem 1rem; border-radius: var(--b2b-radius-md); }
body[data-route="sylius_shop_cart_summary"] .btn-light { font-weight: 500; color: var(--b2b-muted); }
.flex-shrink-0[style*="width: 6rem"] { width: 4.5rem !important; }
[style*="aspect-ratio: 3/4"] { aspect-ratio: 1 / 1 !important; background: linear-gradient(180deg, #F6F8FB, #ECF0F5) !important; border-radius: 12px !important; }
[style*="aspect-ratio: 3/4"] img { object-fit: contain !important; mix-blend-mode: multiply; }

/* ---------- Carrito lateral ---------- */
#offcanvasCart { --bs-offcanvas-width: 440px; border-left: 0 !important; background: #fff; border-radius: var(--b2b-radius-xl) 0 0 var(--b2b-radius-xl); box-shadow: -30px 0 60px -30px rgba(9, 18, 30, .4); }
#offcanvasCart .offcanvas-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--b2b-line); }
#offcanvasCart .offcanvas-title { font-weight: 600; font-size: 1.1rem !important; letter-spacing: -.02em; }
#offcanvasCart .offcanvas-body { padding: .5rem 1.5rem; }
#offcanvasCart .table { margin: 0; --bs-table-bg: transparent; }
.b2b-oc-item td { padding: .9rem 0; border-bottom: 1px solid var(--b2b-line) !important; vertical-align: top; }
.b2b-oc-item:last-child td { border-bottom: 0 !important; }
#offcanvasCart.show .b2b-oc-item, #offcanvasCart.showing .b2b-oc-item { animation: b2b-slide-in .55s var(--b2b-ease) both; }
#offcanvasCart .b2b-oc-item:nth-child(2) { animation-delay: .05s; }
#offcanvasCart .b2b-oc-item:nth-child(3) { animation-delay: .1s; }
#offcanvasCart .b2b-oc-item:nth-child(4) { animation-delay: .15s; }
#offcanvasCart .b2b-oc-item:nth-child(5) { animation-delay: .2s; }
#offcanvasCart .b2b-oc-item:nth-child(n+6) { animation-delay: .25s; }
.b2b-oc-item__thumb { width: 76px; }
.b2b-oc-item__thumb img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: linear-gradient(180deg, #F6F8FB, #ECF0F5); mix-blend-mode: multiply; }
.b2b-oc-item__info { padding-right: .75rem !important; }
.b2b-oc-item__name { display: block; font-weight: 600; font-size: .88rem; letter-spacing: -.01em; color: var(--b2b-text); text-decoration: none; line-height: 1.3; transition: color .2s; }
.b2b-oc-item__name:hover { color: var(--b2b-primary); }
.b2b-oc-item__code { display: block; font-family: var(--b2b-mono); font-size: .7rem; color: var(--b2b-subtle); margin-top: .2rem; }
.b2b-oc-item__qty { display: block; font-size: .78rem; color: var(--b2b-muted); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.b2b-oc-item__total { text-align: right; font-weight: 700; font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
#offcanvasCart .offcanvas-footer { padding: 0 .1rem; }
#offcanvasCart .offcanvas-footer > .d-flex { border-top: 1px solid var(--b2b-line); padding: 1.1rem 0 !important; }
#offcanvasCart .offcanvas-footer .h5 { font-size: 1.05rem; font-weight: 600; margin: 0; letter-spacing: -.02em; }
#offcanvasCart .offcanvas-footer .btn { padding: .75rem 1rem; border-radius: var(--b2b-radius-md); }
#offcanvasCart .p-3.pb-5 { padding: 0 1.5rem 1.5rem !important; }

/* ---------- Login y registro ---------- */
.b2b-auth { padding-top: 2rem; padding-bottom: 1rem; }
.b2b-auth__card { display: grid; grid-template-columns: 1.15fr .85fr; max-width: 1060px; margin: 0 auto; background: #fff; border-radius: var(--b2b-radius-xl); overflow: hidden; box-shadow: var(--b2b-ring), 0 30px 60px -30px rgba(15, 27, 42, .25); animation: b2b-fade-up .7s var(--b2b-ease) both; }
.b2b-auth__main { padding: 2.75rem 3rem; }
.b2b-auth__main .row { margin: 0; }
.b2b-auth__main .row > [class*="col-"] { width: 100%; margin: 0 !important; padding: 0 !important; flex: 0 0 100%; max-width: 100%; }
.b2b-auth__main .row.g-3 { --bs-gutter-x: 1rem; margin-left: -.5rem; margin-right: -.5rem; }
.b2b-auth__main .row.g-3 > [class*="col-md-6"] { padding: 0 .5rem !important; }
@media (min-width: 768px) { .b2b-auth__main .row.g-3 > .col-md-6 { flex: 0 0 50%; max-width: 50%; width: 50%; } }
.b2b-auth__main .py-lg-5, .b2b-auth__main .my-lg-5, .b2b-auth__main .mb-5 { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; }
.b2b-auth__main .d-flex.h-100 { height: auto !important; padding: 0 !important; }
.b2b-auth__main h1, .b2b-auth__title { font-size: 1.75rem !important; letter-spacing: -.035em; margin-bottom: .4rem !important; }
.b2b-auth__main h1 + div, .b2b-auth__main .h2 + div { color: var(--b2b-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.b2b-auth__main .h2.mb-5, .b2b-auth__main h1.mb-5 { margin-bottom: 1.5rem !important; }
.b2b-auth__main .btn-primary { width: 100%; padding: .8rem 1rem; margin-top: .5rem; border-radius: var(--b2b-radius-md); }
.b2b-auth__main a { font-weight: 600; }
.b2b-auth__section { padding: 1.25rem 0; border-top: 1px solid var(--b2b-line); }
.b2b-auth__section h2 { font-size: 1rem !important; margin-bottom: .9rem; }
.b2b-auth__main .ecomm-reg-company { padding: 1.25rem 0; margin: 0 !important; border: 0; border-top: 1px solid var(--b2b-line); border-radius: 0; background: transparent; }
.b2b-auth__main .ecomm-reg-company h2 { font-size: 1rem !important; margin-bottom: .75rem !important; }
.b2b-auth__main .mb-3 { margin-bottom: .9rem !important; }
.b2b-auth__aside { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .25rem; padding: 2.75rem; color: #fff; background: var(--b2b-dark-bg); }
.b2b-auth__kicker { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b2b-accent-soft); }
.b2b .b2b-auth__aside h2 { color: #fff; font-size: 1.6rem !important; letter-spacing: -.035em; margin: .4rem 0 .6rem; }
.b2b-auth__aside p { color: rgba(255, 255, 255, .72); font-size: .9rem; }
.b2b-auth__list { list-style: none; padding: 0; margin: .5rem 0 1.5rem; display: grid; gap: .7rem; font-size: .88rem; }
.b2b-auth__list li { display: flex; gap: .6rem; align-items: center; }
.b2b-auth__list .icon { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: var(--b2b-accent-soft); }
.b2b-auth__aside .btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--b2b-ink); border: 0; }
.b2b-auth__steps { list-style: none; counter-reset: step; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 1.2rem; }
.b2b-auth__steps li { counter-increment: step; position: relative; padding-left: 2.7rem; display: flex; flex-direction: column; font-size: .86rem; color: rgba(255, 255, 255, .72); }
.b2b-auth__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.95rem; height: 1.95rem; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: .85rem; }
.b2b-auth__steps strong { color: #fff; font-size: .95rem; font-weight: 600; }
@media (max-width: 991px) { .b2b-auth__card { grid-template-columns: 1fr; } .b2b-auth__main { padding: 2rem 1.5rem; } .b2b-auth__aside { padding: 2rem 1.5rem; } }
.ecomm-reg-note { display: flex; gap: .55rem; align-items: flex-start; font-size: .8rem; color: var(--b2b-primary-600); background: var(--b2b-primary-50); border-radius: var(--b2b-radius-sm); padding: .65rem .85rem; margin-bottom: 1rem; }
.ecomm-reg-note .icon { flex: none; margin-top: 2px; }
.ecomm-reg-thanks { max-width: 620px; margin: 3rem auto; text-align: center; background: #fff; border-radius: var(--b2b-radius-xl); box-shadow: var(--b2b-ring), var(--b2b-shadow); padding: 2.75rem 2rem; animation: b2b-fade-up .7s var(--b2b-ease) both; }
.ecomm-reg-thanks__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--b2b-primary-50); color: var(--b2b-primary); margin-bottom: 1rem; animation: b2b-in-pop .8s var(--b2b-spring) .2s both; }
.ecomm-reg-thanks__icon svg { width: 30px; height: 30px; }
.ecomm-reg-thanks h1 { font-size: 1.75rem; letter-spacing: -.035em; }
.ecomm-reg-thanks p { color: var(--b2b-muted); }

/* ---------- Checkout (estilo Shopify) ---------- */
body[data-route^="sylius_shop_checkout"] { background: #fff; }
body[data-route^="sylius_shop_checkout"] .bg-white.border-bottom { border-color: var(--b2b-line) !important; padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }
.b2b-co-secure { display: inline-flex; align-items: center; gap: .3rem; margin-left: 1rem; font-size: .78rem; color: var(--b2b-muted); vertical-align: middle; }
body[data-route^="sylius_shop_checkout"] .checkout-sidebar { background: #F7F8FA; border-left: 1px solid var(--b2b-line); padding-top: 2.5rem !important; }
body[data-route^="sylius_shop_checkout"] .checkout-sidebar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 50vw; background: #F7F8FA; }
body[data-route^="sylius_shop_checkout"] .checkout-sidebar .h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem !important; }
body[data-route^="sylius_shop_checkout"] .checkout-sidebar .table { --bs-table-bg: transparent; font-size: .88rem; font-variant-numeric: tabular-nums; }
body[data-route^="sylius_shop_checkout"] .checkout-sidebar .table td { border-color: var(--b2b-line); }
body[data-route^="sylius_shop_checkout"] .checkout-sidebar .table-borderless td { padding: .3rem 0; color: var(--b2b-muted); }
body[data-route^="sylius_shop_checkout"] .checkout-sidebar .table-borderless td:last-child { color: var(--b2b-text); font-weight: 600; }
body[data-route^="sylius_shop_checkout"] #sylius-shop-checkout-summary-order-total, body[data-route^="sylius_shop_checkout"] .checkout-sidebar .border-top.h5 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--b2b-text) !important; }
.b2b-co-item { padding: .6rem 0 !important; border: 0 !important; }
.b2b-co-item__row { display: flex; align-items: center; gap: .9rem; }
.b2b-co-item__thumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; background: #fff; box-shadow: var(--b2b-ring); }
.b2b-co-item__thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; mix-blend-mode: multiply; }
.b2b-co-item__qty { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #5B6573; color: #fff; font-size: .72rem; font-weight: 600; line-height: 22px; text-align: center; }
.b2b-co-item__info { display: flex; flex-direction: column; min-width: 0; }
.b2b-co-item__name { font-weight: 600; font-size: .86rem; line-height: 1.3; color: var(--b2b-text); }
.b2b-co-item__variant, .b2b-co-item__code { font-size: .74rem; color: var(--b2b-muted); }
.b2b-co-item__code { font-family: var(--b2b-mono); font-size: .7rem; }
body[data-route^="sylius_shop_checkout"] .checkout-sidebar table:first-of-type td:last-child { vertical-align: middle; font-weight: 600; border: 0; }
body[data-route^="sylius_shop_checkout"] .col.pt-4 { padding-top: 2rem !important; padding-right: 2.5rem; }
body[data-route^="sylius_shop_checkout"] h1 { font-size: 1.4rem; font-weight: 600 !important; letter-spacing: -.03em; }
body[data-route^="sylius_shop_checkout"] h2, body[data-route^="sylius_shop_checkout"] .h4 { font-size: 1.05rem !important; font-weight: 600; }
body[data-route^="sylius_shop_checkout"] .form-control, body[data-route^="sylius_shop_checkout"] .form-select { min-height: 48px; border: 1px solid #D6DCE3; border-radius: 10px; background: #fff; font-size: .9rem; }
body[data-route^="sylius_shop_checkout"] .form-control:focus, body[data-route^="sylius_shop_checkout"] .form-select:focus { border-color: var(--b2b-primary); box-shadow: 0 0 0 1px var(--b2b-primary), 0 0 0 5px rgba(27, 85, 133, .08); }
body[data-route^="sylius_shop_checkout"] .form-label, body[data-route^="sylius_shop_checkout"] label { font-size: .8rem; font-weight: 500; color: #4B5563; }
body[data-route^="sylius_shop_checkout"] .btn-primary { padding: .9rem 1.7rem; font-size: .95rem; border-radius: var(--b2b-radius-md); }
body[data-route^="sylius_shop_checkout"] .btn-light, body[data-route^="sylius_shop_checkout"] .btn-transparent { background: transparent; border: 0; color: var(--b2b-primary); padding-left: 0; box-shadow: none; }
body[data-route^="sylius_shop_checkout"] .card { border: 1px solid #D6DCE3; border-radius: 12px; box-shadow: none; }
body[data-route="sylius_shop_checkout_address"] .form-check { padding: .95rem 1rem .95rem 2.6rem; border: 1px solid #D6DCE3; border-radius: 12px; margin-bottom: .5rem; background: #fff; transition: border-color .2s, background .2s; }
body[data-route="sylius_shop_checkout_address"] .form-check:has(.form-check-input:checked) { border-color: var(--b2b-primary); background: var(--b2b-primary-50); }
body[data-route="sylius_shop_checkout_address"] .form-check-input { margin-left: -1.6rem; }
body[data-route^="sylius_shop_checkout_select"] .card.bg-body-tertiary { background: #fff !important; border: 1px solid #D6DCE3 !important; border-radius: 12px; transition: border-color .2s, background .2s, box-shadow .2s, transform .3s var(--b2b-ease); }
body[data-route^="sylius_shop_checkout_select"] .card.bg-body-tertiary:hover { border-color: #B4C0CC !important; }
body[data-route^="sylius_shop_checkout_select"] .card.bg-body-tertiary:has(input:checked) { border-color: var(--b2b-primary) !important; background: var(--b2b-primary-50) !important; box-shadow: 0 0 0 1px var(--b2b-primary); }
body[data-route^="sylius_shop_checkout_select"] .card.bg-body-tertiary .form-check { border: 0 !important; padding-top: 0; padding-bottom: 0; background: transparent !important; }
body[data-route^="sylius_shop_checkout_select"] .card.bg-body-tertiary label { cursor: pointer; }
body[data-route="sylius_shop_checkout_complete"] .card.bg-body-tertiary, body[data-route="sylius_shop_checkout_complete"] .bg-body-tertiary { background: #fff !important; border: 1px solid var(--b2b-line) !important; border-radius: 12px; }

/* ---------- Cuenta (Sylius + módulos) ---------- */
body[data-route^="sylius_shop_account"] .col-md-3 .h3, body[data-route^="ecomm_shop"] .col-md-3 .h3 { font-size: 1.6rem; letter-spacing: -.035em; }
body[data-route^="sylius_shop_account"] .col-md-3 .d-inline-flex.flex-column, body[data-route^="ecomm_shop"] .col-md-3 .d-inline-flex.flex-column { display: flex !important; gap: .15rem; }
body[data-route^="sylius_shop_account"] .col-md-3 a.link-reset, body[data-route^="ecomm_shop"] .col-md-3 a.link-reset { padding: .55rem .75rem !important; border-radius: 10px; font-weight: 500; font-size: .9rem; color: var(--b2b-muted); transition: background .2s, color .2s; }
body[data-route^="sylius_shop_account"] .col-md-3 a.link-reset:hover, body[data-route^="ecomm_shop"] .col-md-3 a.link-reset:hover { background: #fff; color: var(--b2b-text); box-shadow: var(--b2b-ring); }
body .col-md-3 a.link-reset.is-active { background: #fff; color: var(--b2b-primary) !important; font-weight: 600 !important; box-shadow: var(--b2b-ring), var(--b2b-shadow); }
.ecomm-panel, .ecomm-dash-card, .ecomm-kpi, .ecomm-tile, .ecomm-qo-box { border: 0 !important; box-shadow: var(--b2b-ring) !important; }
.ecomm-tile { transition: transform .5s var(--b2b-ease), box-shadow .5s var(--b2b-ease) !important; }
.ecomm-tile:hover { transform: translateY(-3px) !important; box-shadow: var(--b2b-shadow-hover) !important; }
.ecomm-kpi { transition: transform .5s var(--b2b-ease), box-shadow .5s var(--b2b-ease); }
.ecomm-kpi:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15, 27, 42, .04), var(--b2b-shadow-hover) !important; }
.ecomm-dash-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--b2b-dark-bg) !important; border-radius: 20px !important; box-shadow: none !important; }
.ecomm-dash-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 90% at 85% 30%, #000 20%, transparent 75%); }

/* ---------- Movimiento ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: b2b-vt-out .2s ease both; }
::view-transition-new(root) { animation: b2b-vt-in .45s var(--b2b-ease) both; }
::view-transition-group(b2b-product-media) { animation-duration: .55s; animation-timing-function: var(--b2b-ease); }
::view-transition-old(b2b-product-media), ::view-transition-new(b2b-product-media) { height: 100%; object-fit: contain; }
.b2b-enter { animation: b2b-fade-up .9s var(--b2b-ease) both; animation-delay: var(--b2b-d, 0ms); }
.b2b-r { opacity: 0; transform: translateY(22px); }
.b2b-r.is-in { opacity: 1; transform: none; transition: opacity .8s var(--b2b-ease) var(--b2b-d, 0ms), transform .8s var(--b2b-ease) var(--b2b-d, 0ms) !important; }
img.is-loading { opacity: 0; }
.b2b-card__media:has(img.is-loading), .b2b-family__media:has(img.is-loading) { background: linear-gradient(100deg, #ECF0F5 40%, #F8FAFC 50%, #ECF0F5 60%) 0 0 / 200% 100%; animation: b2b-shimmer 1.2s linear infinite; }

@keyframes b2b-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes b2b-slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes b2b-in-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes b2b-pop { from { opacity: 0; translate: 0 -6px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes b2b-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes b2b-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes b2b-drift { from { transform: translate(0, 0); } to { transform: translate(-80px, 60px); } }
@keyframes b2b-marquee { to { transform: translateX(-50%); } }
@keyframes b2b-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 209, 122, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 209, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 209, 122, 0); } }
@keyframes b2b-bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes b2b-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@keyframes b2b-shimmer { to { background-position: -200% 0; } }
@keyframes b2b-vt-out { to { opacity: 0; } }
@keyframes b2b-vt-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .b2b-r { opacity: 1; transform: none; }
}