/*! 

 * ═══════════════════════════════════════════════════════════════

 *  N-PARTS PREMIUM THEME CSS

 *  Replaces classic/theme.css entirely.

 *  Zero Bootstrap. Pure modern CSS.

 *  Version 3.0 — 2026-02-13

 * ═══════════════════════════════════════════════════════════════

 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* Material Icons */

@font-face {

  font-family: 'Material Icons';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');

}

.material-icons {

  font-family: 'Material Icons';

  font-weight: normal;

  font-style: normal;

  font-size: 24px;

  line-height: 1;

  letter-spacing: normal;

  text-transform: none;

  display: inline-block;

  white-space: nowrap;

  word-wrap: normal;

  direction: ltr;

  -webkit-font-feature-settings: 'liga';

  -webkit-font-smoothing: antialiased;

}



/* Material Icons in header - properly sized */

.header-nav .material-icons,

.np-topbar .material-icons { font-size: 14px }

.user-info .material-icons,

.blockcart .material-icons { font-size: 20px }

#search_widget .material-icons { font-size: 20px }



/* Hide material icon text for search widget icons */

#search_widget .material-icons.search { display: none }

#search_widget .material-icons.clear { display: none }





/* ━━━ CSS RESET + NORMALIZE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0

}



html {

    line-height: 1.15;

    -webkit-text-size-adjust: 100%;

    scroll-behavior: smooth

}



body {

    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-size: 14px;

    color: #2e2e3a;

    background: #f0f2f6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 700;

    line-height: 1.25;

    margin: 0 0 .5em

}



h1 {

    font-size: 2em

}



h2 {

    font-size: 1.5em

}



h3 {

    font-size: 1.17em

}



h4 {

    font-size: 1em

}



h5 {

    font-size: .83em

}



h6 {

    font-size: .67em

}



a {

    color: inherit;

    text-decoration: none;

    transition: color .2s, background .2s

}



img {

    max-width: 100%;

    height: auto;

    display: block

}



ul,

ol {

    list-style: none

}



button,

input,

select,

textarea {

    font: inherit;

    color: inherit;

    border: 0;

    outline: 0

}



button {

    cursor: pointer

}



table {

    border-collapse: collapse;

    width: 100%

}



hr {

    border: 0;

    border-top: 1px solid #e2e6ee;

    margin: 1em 0

}



/* ━━━ DESIGN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {

    --bg: #f0f2f6;

    --w: #fff;

    --dk: #1b2030;

    --dk2: #242a3d;

    --tx: #2e2e3a;

    --tx2: #7a7f96;

    --tx3: #b0b4c4;

    --bdr: #e2e6ee;

    --bdr2: #d1d5df;

    --red: #e53935;

    --red2: #c62828;

    --red3: #b71c1c;

    --or: #ff6d00;

    --or2: #e65100;

    --grn: #2ecc71;

    --grn2: #27ae60;

    --blue: #2196f3;

    --r: 8px;

    --r2: 12px;

    --sh: 0 2px 12px rgba(0, 0, 0, .05);

    --sh2: 0 4px 24px rgba(0, 0, 0, .08);

    --sh3: 0 8px 40px rgba(0, 0, 0, .12);

    --e: cubic-bezier(.25, .8, .25, 1);

}



/* ━━━ UTILITY CLASSES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.container,

.np-container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 24px;

    width: 100%

}



.clearfix::after {

    content: '';

    display: table;

    clear: both

}



.text-center {

    text-align: center

}



.text-right {

    text-align: right

}



.text-left {

    text-align: left

}



.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0

}



.hidden,

.d-none {

    display: none !important

}



.visible-xs,

.visible-sm,

.visible-md {

    display: none !important

}



@media(max-width:767px) {

    .visible-xs {

        display: block !important

    }



    .hidden-xs {

        display: none !important

    }

}



@media(min-width:768px) and (max-width:991px) {

    .visible-sm {

        display: block !important

    }



    .hidden-sm {

        display: none !important

    }

}



@media(min-width:992px) {

    .visible-md {

        display: block !important

    }



    .hidden-md {

        display: none !important

    }

}



.hidden-sm-down {

    display: block

}



.hidden-md-up {

    display: none

}



@media(max-width:768px) {

    .hidden-sm-down {

        display: none !important

    }



    .hidden-md-up {

        display: block !important

    }

}



/* ━━━ BOOTSTRAP GRID COMPAT (minimal) ━━━━━━━━━━━━━━━━━━━━━━━ */

.row {

    display: flex;

    flex-wrap: wrap;

    margin: 0;

    gap: 0

}



.col,

.col-xs-12,

.col-sm-12,

.col-md-12 {

    width: 100%;

    flex: 0 0 100%;

    max-width: 100%;

    padding: 0

}



.col-md-2 {

    flex: 0 0 16.66%;

    max-width: 16.66%

}



.col-md-3 {

    flex: 0 0 25%;

    max-width: 25%

}



.col-md-4 {

    flex: 0 0 33.33%;

    max-width: 33.33%

}



.col-md-5 {

    flex: 0 0 41.66%;

    max-width: 41.66%

}



.col-md-6 {

    flex: 0 0 50%;

    max-width: 50%

}



.col-md-7 {

    flex: 0 0 58.33%;

    max-width: 58.33%

}



.col-md-8 {

    flex: 0 0 66.66%;

    max-width: 66.66%

}



.col-md-9 {

    flex: 0 0 75%;

    max-width: 75%

}



.col-md-10 {

    flex: 0 0 83.33%;

    max-width: 83.33%

}



@media(max-width:768px) {



    [class*="col-md-"],

    [class*="col-sm-"] {

        flex: 0 0 100%;

        max-width: 100%

    }

}



/* position helper used by classic TPL */

.position-static {

    position: static !important

}



/* ━━━ FORMS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.form-group {

    margin-bottom: 16px

}



.form-group label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    color: var(--tx);

    margin-bottom: 6px

}



.form-control,

input[type="text"],

input[type="email"],

input[type="password"],

input[type="search"],

input[type="tel"],

input[type="number"],

textarea,

select {

    width: 100%;

    padding: 10px 14px;

    font-size: 13px;

    background: var(--w);

    border: 2px solid var(--bdr);

    border-radius: var(--r);

    transition: border-color .2s, box-shadow .2s;

}



.form-control:focus,

input:focus,

textarea:focus,

select:focus {

    border-color: var(--or);

    box-shadow: 0 0 0 3px rgba(255, 109, 0, .1);

    outline: 0;

}



textarea {

    resize: vertical;

    min-height: 100px

}



select {

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237a7f96' stroke-width='2'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 12px center;

    padding-right: 36px

}



/* ━━━ BUTTONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 24px;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

    border-radius: var(--r);

    transition: all .2s var(--e);

    border: 2px solid transparent;

    line-height: 1.4

}



.btn-primary,

.add-to-cart {

    background: var(--red);

    color: #fff;

    border-color: var(--red)

}



.btn-primary:hover,

.add-to-cart:hover {

    background: var(--red2);

    border-color: var(--red2);

    transform: translateY(-1px);

    box-shadow: 0 4px 16px rgba(229, 57, 53, .3)

}



.btn-secondary {

    background: var(--w);

    color: var(--tx);

    border-color: var(--bdr)

}



.btn-secondary:hover {

    border-color: var(--or);

    color: var(--or);

    background: rgba(255, 109, 0, .04)

}



.btn-sm {

    padding: 6px 14px;

    font-size: 11px

}



.btn-lg {

    padding: 14px 36px;

    font-size: 14px

}



/* ━━━ TOPBAR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.header-banner {

    display: none

}



.np-topbar,

.header-nav {

    background: var(--dk);

    padding: 7px 0;

    font-size: 12px

}



.np-topbar-inner {

    display: flex;

    justify-content: space-between;

    align-items: center

}



.np-topbar *,

.header-nav *,

.header-nav a,

.header-nav span {

    color: rgba(255, 255, 255, .55) !important;

    font-size: 12px

}



.np-topbar a:hover,

.header-nav a:hover {

    color: var(--or) !important

}



.np-topbar-left,

.np-topbar-right {

    display: flex;

    align-items: center;

    gap: 16px

}



/* header-nav rows/cols (from modules) */

.header-nav .container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 24px

}



.header-nav .row {

    display: flex;

    justify-content: space-between;

    align-items: center

}



.header-nav [class*="col-"] {

    flex: none;

    width: auto

}



/* ━━━ HEADER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

header#header {

    background: var(--w);

    box-shadow: var(--sh);

    position: sticky;

    top: 0;

    z-index: 999

}



.np-header,

.header-top {

    border-bottom: 1px solid var(--bdr);

    padding: 14px 0

}



.np-header .container,

.header-top .container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 24px

}



.np-header-inner,

.header-top .row {

    display: flex;

    align-items: center;

    gap: 20px

}



.header-top .row [class*="col-"] {

    flex: none;

    width: auto;

    padding: 0

}



.header-top .row [class*="col-md-2"] {

    flex-shrink: 0

}



.header-top .row [class*="col-md-10"],

.header-top .row [class*="col-md-5"],

.header-top .row [class*="col-md-7"] {

    flex: 1

}



/* Logo */

.np-logo,

.header-top [class*="col-md-2"] {

    flex-shrink: 0

}



.np-logo img,

.np-logo h1 img,

.logo img,

#_desktop_logo img,

.header-top [class*="col-md-2"] img {

    max-height: 48px !important;

    width: auto !important;

    object-fit: contain;

}



.np-logo h1,

#_desktop_logo h1 {

    margin: 0;

    padding: 0;

    line-height: 1;

    font-size: 0

}



/* Search */

#search_widget {

    flex: 1;

    max-width: 520px;

    position: relative

}



#search_widget form {

    position: relative;

    display: flex

}



#search_widget input[type="text"] {

    width: 100%;

    border: 2px solid var(--bdr);

    border-radius: var(--r);

    background: var(--bg);

    padding: 11px 50px 11px 18px;

    font-size: 13px;

    font-family: inherit;

    transition: all .2s;

}



#search_widget input:focus {

    border-color: var(--or);

    background: var(--w);

    box-shadow: 0 0 0 3px rgba(255, 109, 0, .1);

}



#search_widget button[type="submit"] {

    position: absolute;

    right: 0;

    top: 0;

    height: 100%;

    width: 44px;

    background: var(--or);

    border: 0;

    border-radius: 0 var(--r) var(--r) 0;

    color: #fff;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background .2s;

}



#search_widget button:hover {

    background: var(--or2)

}



/* User + Cart area */

.user-info,

.blockcart {

    font-size: 13px

}



.user-info a,

.blockcart a {

    color: var(--tx);

    font-weight: 500;

    white-space: nowrap;

    display: inline-flex;

    align-items: center;

    gap: 4px

}



.user-info a:hover,

.blockcart a:hover {

    color: var(--red)

}



.cart-products-count {

    background: var(--red);

    color: #fff;

    border-radius: 50%;

    font-weight: 700;

    font-size: 10px;

    min-width: 18px;

    height: 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 4px

}



.header-top-right {

    display: flex;

    align-items: center;

    gap: 16px;

    justify-content: flex-end;

    flex: 1

}



/* Main menu */

#_desktop_top_menu,

.displayNavFullWidth {

    background: var(--w);

    border-bottom: 1px solid var(--bdr)

}



#_desktop_top_menu .container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 24px

}



.top-menu {

    display: flex;

    gap: 2px;

    list-style: none;

    margin: 0;

    padding: 0;

    flex-wrap: wrap

}



.top-menu>li>a {

    display: block;

    padding: 10px 16px;

    font-size: 13px;

    font-weight: 600;

    color: var(--tx);

    text-transform: uppercase;

    letter-spacing: .5px;

    border-radius: var(--r);

    transition: all .2s;

}



.top-menu>li>a:hover {

    background: var(--bg);

    color: var(--red)

}



.top-menu .sub-menu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 220px;

    background: var(--w);

    border-radius: var(--r);

    box-shadow: var(--sh2);

    z-index: 100;

    padding: 8px 0

}



.top-menu li {

    position: relative

}



.top-menu li:hover>.sub-menu {

    display: block

}



.top-menu .sub-menu a {

    display: block;

    padding: 8px 20px;

    font-size: 13px;

    font-weight: 500;

    color: var(--tx);

    text-transform: none

}



.top-menu .sub-menu a:hover {

    background: var(--bg);

    color: var(--red)

}



.top-menu[data-depth="1"] {

    display: flex

}



/* Mobile menu */

#mobile_top_menu_wrapper {

    display: none

}



@media(max-width:768px) {

    #mobile_top_menu_wrapper.expanded {

        display: block;

        background: var(--w);

        padding: 20px 0;

        border-bottom: 1px solid var(--bdr)

    }



    .hidden-sm-down {

        display: none !important

    }



    .hidden-md-up {

        display: block !important

    }

}



/* ━━━ WRAPPER / MAIN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#wrapper {

    padding: 0;

    background: transparent

}



#wrapper>.container {

    max-width: 100%;

    padding: 0;

    margin: 0

}



#wrapper>.container>.row {

    display: contents

}



/* Non-homepage pages: proper grid with sidebar */

#wrapper .np-page-grid {

    display: grid;

    grid-template-columns: 260px 1fr;

    gap: 24px;

    max-width: 1280px;

    margin: 0 auto;

    padding: 20px 24px 40px

}



/* Homepage: full-width, no sidebar */

.np-content-fw,

.np-home {

    width: 100%;

    padding: 0;

    margin: 0;

    max-width: 100%

}



.page-home .np-container,

.np-hero .np-container,

.np-hero .container,

.np-trust .np-container,

.np-trust .container,

.np-section .np-container,

.np-section .container,

.np-brands-sec .np-container,

.np-brands-sec .container,

.np-why .np-container,

.np-why .container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 24px

}



/* Content wrapper when using classic's row/col system */

#content-wrapper {

    width: 100%;

    padding: 0

}



.page-home #content-wrapper {

    max-width: 100%;

    padding: 0

}



.page-home #content {

    padding: 0;

    margin: 0;

    max-width: 100%

}



.page-home .page-content {

    padding: 0

}



/* Sidebar */

.np-sidebar,

#left-column {

    background: var(--w);

    border-radius: var(--r2);

    box-shadow: var(--sh);

    padding: 20px;

    height: fit-content;

    position: sticky;

    top: 80px

}



#left-column .block-categories,

#left-column .facet {

    margin-bottom: 16px

}



#left-column .block-categories .category-sub-menu li a {

    display: block;

    padding: 6px 0;

    font-size: 13px;

    color: var(--tx);

    border-bottom: 1px solid var(--bdr)

}



#left-column .block-categories .category-sub-menu li a:hover {

    color: var(--red)

}



/* Breadcrumb */

.breadcrumb {

    background: transparent;

    padding: 12px 24px;

    margin: 0;

    font-size: 12px;

    max-width: 1280px;

    margin: 0 auto

}



.breadcrumb ol {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap

}



.breadcrumb li+li::before {

    content: "›";

    color: var(--tx2);

    margin-right: 6px;

    font-size: 14px

}



.breadcrumb a {

    color: var(--tx2);

    font-weight: 500

}



.breadcrumb a:hover {

    color: var(--red)

}



/* ━━━ N-PARTS HERO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.np-hero {

    background: linear-gradient(135deg, var(--dk) 0%, var(--dk2) 100%);

    padding: 75px 0 85px;

    position: relative;

    overflow: hidden;

}



.np-hero::before {

    content: '';

    position: absolute;

    right: -5%;

    top: 0;

    width: 55%;

    height: 100%;

    background: var(--or);

    opacity: .12;

    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%);

}



.np-hero::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--red), var(--or), var(--red));

}



.np-hero .np-container,

.np-hero .container {

    position: relative;

    z-index: 2

}



.np-hero-inner {

    max-width: 580px

}



.np-hero-tag {

    display: inline-block;

    background: rgba(255, 109, 0, .18);

    color: var(--or);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    padding: 7px 16px;

    border-radius: 4px;

    margin: 0 0 22px;

}



.np-hero h1 {

    font-weight: 800;

    font-size: 48px;

    line-height: 1.06;

    color: #fff;

    margin: 0 0 20px

}



.np-hero h1 em {

    font-style: normal;

    color: var(--or)

}



.np-hero-sub {

    color: rgba(255, 255, 255, .48);

    font-size: 14px;

    line-height: 1.8;

    margin: 0 0 34px

}



.np-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 36px;

    font-weight: 700;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;

    border-radius: 5px;

    transition: all .25s var(--e);

    cursor: pointer;

    border: 0;

}



.np-btn-primary {

    background: var(--red);

    color: #fff

}



.np-btn-primary:hover {

    background: var(--red2);

    box-shadow: 0 6px 24px rgba(229, 57, 53, .35);

    transform: translateY(-2px);

    color: #fff

}



.np-btn-ghost {

    border: 2px solid rgba(255, 255, 255, .18);

    color: #fff;

    background: transparent;

    padding: 12px 34px

}



.np-btn-ghost:hover {

    border-color: var(--or);

    color: var(--or)

}



.np-hero-btns {

    display: flex;

    gap: 14px;

    flex-wrap: wrap

}



/* ━━━ TRUST BAR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.np-trust {

    background: var(--w);

    border-bottom: 1px solid var(--bdr);

    padding: 24px 0

}



.np-trust-row {

    display: flex;

    gap: 12px

}



.np-trust-item {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

    padding: 8px 0

}



.np-ti {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border-radius: var(--r);

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 109, 0, .08);

    color: var(--or);

}



.np-trust-item strong {

    display: block;

    font-size: 13px;

    font-weight: 700;

    color: var(--dk);

    line-height: 1.3

}



.np-trust-item span {

    display: block;

    font-size: 11px;

    color: var(--tx2);

    line-height: 1.4

}



/* ━━━ SECTION BASE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.np-section {

    padding: 56px 0

}



.np-head {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 30px

}



.np-head h2 {

    font-weight: 800;

    font-size: 26px;

    color: var(--dk);

    margin: 0 0 4px

}



.np-head p {

    color: var(--tx2);

    font-size: 14px;

    margin: 0

}



.np-link {

    font-size: 12px;

    font-weight: 700;

    color: var(--red);

    text-transform: uppercase;

    letter-spacing: .5px

}



.np-link:hover {

    color: var(--red2)

}



/* ━━━ CATEGORIES GRID ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.np-grid-8 {

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 12px

}



.np-card {

    background: var(--w);

    border-radius: var(--r2);

    padding: 28px 12px 24px;

    text-align: center;

    border: 1px solid var(--bdr);

    transition: all .25s var(--e);

    display: flex;

    flex-direction: column;

    align-items: center;

}



.np-card:hover {

    border-color: var(--or);

    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);

    transform: translateY(-4px)

}



.np-card svg {

    margin-bottom: 14px

}



.np-card h3 {

    font-size: 13px;

    font-weight: 700;

    color: var(--dk);

    margin: 0 0 4px

}



.np-card span {

    font-size: 10px;

    color: var(--tx2);

    line-height: 1.3

}



/* ━━━ BRANDS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.np-brands-sec {

    padding-bottom: 56px

}



.np-brands-banner {

    background: linear-gradient(135deg, var(--dk), var(--dk2));

    border-radius: var(--r2);

    padding: 44px 48px;

    margin-bottom: 14px;

    position: relative;

    overflow: hidden;

}



.np-brands-banner::after {

    content: '';

    position: absolute;

    right: 0;

    top: 0;

    width: 45%;

    height: 100%;

    background: url('/img/brands-bg.jpg') center/cover no-repeat;

    opacity: .15;

    mix-blend-mode: luminosity;

}



.np-brands-text {

    position: relative;

    z-index: 2;

    max-width: 55%

}



.np-brands-text h2 {

    font-weight: 800;

    font-size: 26px;

    color: #fff;

    margin: 0 0 10px

}



.np-brands-text p {

    font-size: 13px;

    color: rgba(255, 255, 255, .48);

    margin: 0 0 18px;

    line-height: 1.7

}



.np-link-w {

    font-size: 12px;

    font-weight: 700;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 1px

}



.np-link-w:hover {

    color: var(--or)

}



.np-brands-logos {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    background: var(--w);

    border-radius: var(--r2);

    overflow: hidden;

    box-shadow: var(--sh);

}



.np-bl {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 26px 12px;

    border-right: 1px solid var(--bdr);

    font-size: 14px;

    font-weight: 700;

    color: var(--tx3);

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: all .3s;

    cursor: default;

}



.np-bl:last-child {

    border-right: 0

}



.np-bl:hover {

    background: #f8fafe;

    color: var(--dk)

}



/* ━━━ WHY US ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.np-why {

    background: linear-gradient(135deg, var(--dk), var(--dk2));

    padding: 68px 0

}



.np-why-cols {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 56px;

    align-items: center

}



.np-why-text h2 {

    font-weight: 800;

    font-size: 30px;

    color: #fff;

    margin: 0 0 18px

}



.np-why-text h2 em {

    font-style: normal;

    color: var(--or)

}



.np-why-text p {

    color: rgba(255, 255, 255, .44);

    font-size: 14px;

    line-height: 1.85;

    margin: 0 0 14px

}



.np-why-nums {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px

}



.np-num {

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: var(--r2);

    text-align: center;

    padding: 26px 12px;

    transition: background .25s;

}



.np-num:hover {

    background: rgba(255, 255, 255, .08)

}



.np-num b {

    display: block;

    font-size: 36px;

    font-weight: 800;

    color: var(--or);

    line-height: 1

}



.np-num span {

    display: block;

    margin-top: 6px;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: rgba(255, 255, 255, .35);

    font-weight: 500

}



/* ━━━ PRODUCT CARDS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.products {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: 16px

}



.product-miniature {

    background: var(--w);

    border-radius: var(--r2);

    box-shadow: var(--sh);

    border: 1px solid var(--bdr);

    overflow: hidden;

    transition: all .3s var(--e);

}



.product-miniature:hover {

    transform: translateY(-4px);

    box-shadow: var(--sh2)

}



.product-miniature .thumbnail-container {

    overflow: hidden;

    position: relative

}



.product-miniature .thumbnail-container img {

    transition: transform .5s;

    width: 100%

}



.product-miniature:hover .thumbnail-container img {

    transform: scale(1.05)

}



.product-miniature .product-description {

    padding: 14px

}



.product-miniature .product-title {

    margin: 0 0 6px

}



.product-miniature .product-title a {

    font-weight: 600;

    font-size: 14px;

    color: var(--tx);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden

}



.product-miniature .product-title a:hover {

    color: var(--red)

}



.product-miniature .price,

.product-price-and-shipping .price {

    font-weight: 800;

    font-size: 20px;

    color: var(--red)

}



.product-miniature .regular-price {

    font-size: 13px;

    color: var(--tx2);

    text-decoration: line-through;

    margin-right: 8px

}



.product-flag {

    display: inline-block;

    padding: 3px 10px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

    border-radius: 4px;

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 2

}



.product-flag.discount {

    background: var(--red);

    color: #fff

}



.product-flag.new {

    background: var(--grn);

    color: #fff

}



.product-flag.on-sale {

    background: var(--or);

    color: #fff

}



/* Product list view */

.product-miniature .product-actions {

    padding: 0 14px 14px

}



.product-miniature .add-to-cart {

    width: 100%;

    padding: 10px;

    font-size: 12px

}



/* ━━━ PRODUCT PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.product-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    max-width: 1280px;

    margin: 0 auto;

    padding: 20px 24px

}



.product-information .product-title {

    font-weight: 700;

    font-size: 24px;

    color: var(--dk);

    margin-bottom: 12px

}



.product-information .current-price {

    margin: 12px 0

}



.product-information .current-price .price {

    font-weight: 800;

    font-size: 34px;

    color: var(--red)

}



.product-information .tax-shipping-delivery-label {

    font-size: 12px;

    color: var(--tx2)

}



.product-information .product-quantity {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 16px 0

}



.product-information .qty input {

    width: 60px;

    text-align: center;

    border: 2px solid var(--bdr);

    border-radius: var(--r);

    padding: 8px

}



.product-information .add-to-cart {

    padding: 12px 36px;

    font-size: 13px

}



/* Product tabs */

.product-tabs {

    margin-top: 30px;

    max-width: 1280px;

    margin-left: auto;

    margin-right: auto;

    padding: 0 24px

}



.product-tabs .nav-tabs {

    display: flex;

    gap: 0;

    border-bottom: 2px solid var(--bdr);

    margin-bottom: 20px

}



.product-tabs .nav-tabs .nav-link {

    padding: 12px 20px;

    font-weight: 600;

    font-size: 14px;

    color: var(--tx2);

    border: 0;

    border-bottom: 3px solid transparent;

    margin-bottom: -2px;

    transition: all .2s;

    background: transparent

}



.product-tabs .nav-tabs .nav-link.active,

.product-tabs .nav-tabs .nav-link:hover {

    color: var(--red);

    border-bottom-color: var(--red)

}



.product-tabs .tab-content {

    padding: 0

}



.tab-pane {

    display: none

}



.tab-pane.active {

    display: block

}



/* Product images */

.product-cover {

    border-radius: var(--r2);

    overflow: hidden;

    background: var(--w);

    box-shadow: var(--sh)

}



.product-cover img {

    width: 100%;

    height: auto;

    display: block

}



.product-images {

    display: flex;

    gap: 8px;

    margin-top: 12px;

    flex-wrap: wrap

}



.product-images img {

    width: 70px;

    height: 70px;

    object-fit: cover;

    border-radius: var(--r);

    border: 2px solid var(--bdr);

    cursor: pointer;

    transition: border-color .2s

}



.product-images img:hover,

.product-images img.selected {

    border-color: var(--or)

}



/* ━━━ CATEGORY PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#category .products {

    padding: 0

}



.block-category {

    background: var(--w);

    border-radius: var(--r2);

    padding: 20px;

    margin-bottom: 20px;

    box-shadow: var(--sh)

}



.block-category h1 {

    font-size: 22px;

    font-weight: 800;

    color: var(--dk)

}



.block-category #category-description {

    font-size: 13px;

    color: var(--tx2);

    line-height: 1.7;

    margin-top: 8px

}



.sort-by {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px

}



.sort-by .select-title {

    font-size: 13px;

    font-weight: 600;

    color: var(--tx)

}



/* Facets / filters */

#search_filters .facet {

    background: var(--w);

    border-radius: var(--r);

    padding: 14px;

    margin-bottom: 10px;

    border: 1px solid var(--bdr)

}



#search_filters .facet .facet-title {

    font-size: 13px;

    font-weight: 700;

    color: var(--dk);

    margin-bottom: 10px;

    text-transform: uppercase;

    letter-spacing: .5px

}



#search_filters .facet .facet-label {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 4px 0;

    font-size: 13px;

    color: var(--tx)

}



#search_filters .custom-checkbox input[type="checkbox"] {

    width: 16px;

    height: 16px;

    accent-color: var(--or)

}



/* ━━━ FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.np-footer-main,

.footer-container {

    background: var(--dk);

    padding: 30px 0 0;

    border-top: 0

}



.np-footer-main *,

.footer-container * {

    color: rgba(255, 255, 255, .5)

}



.np-footer {

    background: var(--dk);

    padding: 30px 0 0;

    font-size: 13px

}



.np-footer-grid,

.footer-container .row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 30px

}



.np-footer h4,

.np-footer .h4,

#footer h4,

#footer .h4,

.footer-container h4 {

    color: #fff !important;

    font-weight: 700;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 16px

}



.np-footer a,

#footer a,

.footer-container a {

    color: rgba(255, 255, 255, .4);

    font-size: 13px;

    display: block;

    padding: 3px 0

}



.np-footer a:hover,

#footer a:hover,

.footer-container a:hover {

    color: var(--or)

}



.np-footer ul,

#footer ul,

.footer-container ul {

    list-style: none;

    padding: 0;

    margin: 0

}



.np-footer-bottom,

.footer-after {

    border-top: 1px solid rgba(255, 255, 255, .06);

    margin-top: 30px;

    padding: 16px 0;

    text-align: center

}



.np-copyright {

    color: rgba(255, 255, 255, .25);

    font-size: 12px;

    margin: 10px 0 0

}



#footer {

    background: var(--dk);

    padding-top: 40px

}



#footer .container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 24px

}



#footer .row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 30px

}



/* Newsletter */

.block_newsletter {

    background: rgba(255, 255, 255, .03);

    border-radius: var(--r);

    padding: 20px;

    margin-bottom: 20px

}



.block_newsletter p {

    color: rgba(255, 255, 255, .4);

    font-size: 12px;

    margin-bottom: 10px

}



.block_newsletter form {

    display: flex

}



.block_newsletter input[type="email"] {

    flex: 1;

    border: 1px solid rgba(255, 255, 255, .08);

    background: rgba(255, 255, 255, .04);

    color: #fff;

    padding: 10px 14px;

    font-size: 13px;

    border-radius: var(--r) 0 0 var(--r)

}



.block_newsletter input[type="submit"],

.block_newsletter button[type="submit"] {

    background: var(--or);

    color: #fff;

    padding: 10px 20px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 12px;

    border: 0;

    border-radius: 0 var(--r) var(--r) 0;

    transition: background .2s

}



.block_newsletter input[type="submit"]:hover,

.block_newsletter button:hover {

    background: var(--or2)

}



/* ━━━ CHECKOUT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#checkout section.checkout-step {

    background: var(--w);

    border-radius: var(--r2);

    box-shadow: var(--sh);

    border: 1px solid var(--bdr);

    margin-bottom: 14px;

    padding: 20px

}



#checkout .checkout-step .step-title {

    font-weight: 700;

    font-size: 18px;

    color: var(--dk);

    margin-bottom: 16px

}



.card {

    border-radius: var(--r2);

    border: 1px solid var(--bdr);

    box-shadow: var(--sh);

    background: var(--w);

    overflow: hidden

}



.card-header {

    background: var(--bg);

    padding: 14px 20px;

    border-bottom: 1px solid var(--bdr);

    font-weight: 700;

    font-size: 14px

}



.card-body {

    padding: 20px

}



.card-footer {

    background: var(--bg);

    padding: 14px 20px;

    border-top: 1px solid var(--bdr)

}



/* Cart */

.cart-grid {

    display: grid;

    grid-template-columns: 1fr 340px;

    gap: 20px;

    max-width: 1280px;

    margin: 0 auto;

    padding: 20px 24px

}



.cart-overview .cart-item {

    display: flex;

    gap: 16px;

    padding: 16px 0;

    border-bottom: 1px solid var(--bdr)

}



.cart-overview .cart-item img {

    width: 80px;

    height: 80px;

    object-fit: cover;

    border-radius: var(--r)

}



/* ━━━ ALERTS / NOTIFICATIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.alert {

    padding: 14px 20px;

    border-radius: var(--r);

    margin-bottom: 16px;

    font-size: 13px;

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 10px

}



.alert-success {

    background: #e8f5e9;

    color: #2e7d32;

    border: 1px solid #c8e6c9

}



.alert-danger,

.alert-error {

    background: #ffebee;

    color: #c62828;

    border: 1px solid #ffcdd2

}



.alert-warning {

    background: #fff3e0;

    color: #e65100;

    border: 1px solid #ffe0b2

}



.alert-info {

    background: #e3f2fd;

    color: #1565c0;

    border: 1px solid #bbdefb

}



.notifications-container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 24px

}



/* ━━━ PAGINATION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pagination {

    display: flex;

    justify-content: center;

    gap: 4px;

    margin: 30px 0

}



.pagination .page-item .page-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border-radius: var(--r);

    font-weight: 600;

    font-size: 13px;

    border: 1px solid var(--bdr);

    color: var(--tx);

    transition: all .2s

}



.pagination .page-item .page-link:hover {

    border-color: var(--or);

    color: var(--or)

}



.pagination .page-item.active .page-link {

    background: var(--red);

    border-color: var(--red);

    color: #fff

}



.pagination .page-item.disabled .page-link {

    opacity: .4;

    pointer-events: none

}



/* ━━━ MODALS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.modal-backdrop {

    background: rgba(0, 0, 0, .5)

}



.modal-dialog {

    max-width: 500px;

    margin: 60px auto;

    padding: 0 16px

}



.modal-content {

    background: var(--w);

    border-radius: var(--r2);

    box-shadow: var(--sh3);

    overflow: hidden

}



.modal-header {

    padding: 16px 20px;

    border-bottom: 1px solid var(--bdr);

    display: flex;

    justify-content: space-between;

    align-items: center

}



.modal-header .close,

.modal-header .btn-close {

    font-size: 24px;

    color: var(--tx2);

    cursor: pointer;

    background: none;

    border: 0

}



.modal-body {

    padding: 20px

}



.modal-footer {

    padding: 16px 20px;

    border-top: 1px solid var(--bdr);

    display: flex;

    gap: 8px;

    justify-content: flex-end

}



/* ━━━ TABLES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.table {

    width: 100%;

    margin-bottom: 1rem

}



.table th {

    background: var(--bg);

    padding: 10px 14px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

    color: var(--tx2);

    text-align: left;

    border-bottom: 2px solid var(--bdr)

}



.table td {

    padding: 10px 14px;

    border-bottom: 1px solid var(--bdr);

    font-size: 13px

}



/* ━━━ ACCOUNT PAGES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#my-account .links a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

    background: var(--w);

    border-radius: var(--r);

    border: 1px solid var(--bdr);

    margin-bottom: 8px;

    font-weight: 600;

    font-size: 14px;

    transition: all .2s

}



#my-account .links a:hover {

    border-color: var(--or);

    box-shadow: var(--sh)

}



/* ━━━ KILL OLD LEFTOVERS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.nparts-hero,

.nparts-trust,

.nparts-categories,

.nparts-info,

.nparts-brands,

.nparts-brands-featured,

.brands-featured {

    display: none !important

}



/* ━━━ MODULE OVERRIDES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* blockreassurance */

.blockreassurance {

    background: var(--w);

    padding: 16px 0

}



/* ps_socialfollow */

.block-social {

    display: flex;

    gap: 8px

}



.block-social li a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .06);

    transition: background .2s

}



.block-social li a:hover {

    background: rgba(255, 255, 255, .12)

}



/* ━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media(max-width:1100px) {

    .np-grid-8 {

        grid-template-columns: repeat(4, 1fr)

    }



    .np-brands-logos {

        grid-template-columns: repeat(4, 1fr)

    }



    .np-why-cols {

        grid-template-columns: 1fr 1fr

    }



    .cart-grid {

        grid-template-columns: 1fr

    }

}



@media(max-width:768px) {

    .np-page-grid {

        grid-template-columns: 1fr !important

    }



    .np-hero {

        padding: 48px 0 56px

    }



    .np-hero h1 {

        font-size: 32px

    }



    .np-trust-row {

        flex-wrap: wrap

    }



    .np-trust-item {

        flex: 0 0 48%

    }



    .np-grid-8 {

        grid-template-columns: repeat(2, 1fr)

    }



    .np-why-cols {

        grid-template-columns: 1fr;

        gap: 30px

    }



    .np-brands-text {

        max-width: 100%

    }



    .np-brands-banner::after {

        display: none

    }



    .np-brands-logos {

        grid-template-columns: repeat(3, 1fr)

    }



    .np-head {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px

    }



    .np-header-inner,

    .header-top .row {

        flex-wrap: wrap

    }



    .products {

        grid-template-columns: repeat(2, 1fr)

    }



    .product-container {

        grid-template-columns: 1fr;

        gap: 20px

    }



    #footer .row {

        grid-template-columns: 1fr 1fr

    }

}



@media(max-width:480px) {

    .np-hero h1 {

        font-size: 26px

    }



    .np-grid-8 {

        grid-template-columns: repeat(2, 1fr)

    }



    .np-brands-logos {

        grid-template-columns: repeat(2, 1fr)

    }



    .np-trust-item {

        flex: 0 0 100%

    }



    .products {

        grid-template-columns: 1fr

    }



    #footer .row {

        grid-template-columns: 1fr

    }



    .cart-grid {

        grid-template-columns: 1fr

    }



    .product-tabs .nav-tabs {

        flex-direction: column

    }

}



/* ━━━ SCROLLBAR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

::-webkit-scrollbar {

    width: 5px

}



::-webkit-scrollbar-track {

    background: var(--bg)

}



::-webkit-scrollbar-thumb {

    background: var(--or);

    border-radius: 3px

}



/* ━━━ PRINT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media print {



    .np-topbar,

    .header-nav,

    #header,

    .np-hero,

    .np-trust,

    .np-why,

    #footer,

    .np-footer {

        display: none

    }



    body {

        background: #fff;

        color: #000

    }

}



/* ================================================================

   BOOTSTRAP GRID COMPATIBILITY

   Required for PrestaShop Classic theme templates

   ================================================================ */



/* --- Flexbox Grid System --- */

[class*="col-"] { position: relative; width: 100%; min-height: 1px; padding: 0 15px }



.col-xs-12 { flex: 0 0 100%; max-width: 100% }

.col-xs-6 { flex: 0 0 50%; max-width: 50% }

.col-xs-4 { flex: 0 0 33.333%; max-width: 33.333% }

.col-xs-3 { flex: 0 0 25%; max-width: 25% }



@media (min-width: 576px) {

  .col-sm-12 { flex: 0 0 100%; max-width: 100% }

  .col-sm-6 { flex: 0 0 50%; max-width: 50% }

  .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333% }

}



@media (min-width: 768px) {

  .col-md-12 { flex: 0 0 100%; max-width: 100% }

  .col-md-9 { flex: 0 0 75%; max-width: 75% }

  .col-md-8 { flex: 0 0 66.667%; max-width: 66.667% }

  .col-md-7 { flex: 0 0 58.333%; max-width: 58.333% }

  .col-md-6 { flex: 0 0 50%; max-width: 50% }

  .col-md-5 { flex: 0 0 41.667%; max-width: 41.667% }

  .col-md-4 { flex: 0 0 33.333%; max-width: 33.333% }

  .col-md-3 { flex: 0 0 25%; max-width: 25% }

}



@media (min-width: 992px) {

  .col-lg-12 { flex: 0 0 100%; max-width: 100% }

  .col-lg-8 { flex: 0 0 66.667%; max-width: 66.667% }

  .col-lg-6 { flex: 0 0 50%; max-width: 50% }

  .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333% }

  .col-lg-3 { flex: 0 0 25%; max-width: 25% }

}



/* --- Float utilities --- */

.float-xs-right { float: right !important }

.float-xs-left { float: left !important }



/* --- Bootstrap Buttons --- */

.btn {

  display: inline-block;

  font-weight: 600;

  text-align: center;

  white-space: nowrap;

  vertical-align: middle;

  cursor: pointer;

  border: 1px solid transparent;

  padding: 10px 24px;

  font-size: 14px;

  line-height: 1.5;

  border-radius: var(--r, 8px);

  transition: all .2s;

  text-decoration: none

}

.btn-primary {

  background: var(--or, #ff6d00);

  color: #fff;

  border-color: var(--or, #ff6d00)

}

.btn-primary:hover {

  background: var(--or2, #e65100);

  border-color: var(--or2, #e65100)

}

.btn-secondary {

  background: #6c757d;

  color: #fff;

  border-color: #6c757d

}

.btn-unstyle, .btn-unstyle:hover {

  background: transparent;

  border: none;

  padding: 0;

  cursor: pointer;

  color: inherit

}



/* --- Collapse / Show-Hide --- */

.collapse:not(.show) { display: none }

@media (min-width: 768px) {

  .collapse { display: block !important }

}



/* --- Dropdown --- */

.dropdown { position: relative }

.dropdown-menu {

  position: absolute;

  top: 100%;

  left: 0;

  z-index: 1000;

  display: none;

  min-width: 160px;

  padding: 8px 0;

  background: var(--w, #fff);

  border: 1px solid var(--bdr, #e2e6ee);

  border-radius: var(--r, 8px);

  box-shadow: var(--sh2, 0 4px 24px rgba(0,0,0,.08))

}

.dropdown-menu.show, 

.dropdown-item {

  display: block;

  width: 100%;

  padding: 6px 16px;

  clear: both;

  white-space: nowrap;

  color: var(--tx, #2e2e3a);

  text-decoration: none

}

.dropdown-item:hover { background: var(--bg, #f0f2f6) }



/* --- Typography Helpers --- */

.h3 { font-size: 1.17em; font-weight: 700; margin: 0 0 12px }

.h4 { font-size: 1em; font-weight: 700; margin: 0 0 10px }

.text-uppercase { text-transform: uppercase }

.text-primary { color: var(--or, #ff6d00) !important }

.img-responsive, .img-fluid { max-width: 100%; height: auto; display: block }

.position-static { position: static !important }



/* --- Navbar Toggler (footer collapse icons) --- */

.navbar-toggler {

  padding: 0;

  background: transparent;

  border: 0;

  cursor: pointer

}

.collapse-icons .remove { display: none }

.collapse-icons .add { display: inline-block }

[aria-expanded="true"] .collapse-icons .remove { display: inline-block }

[aria-expanded="true"] .collapse-icons .add { display: none }



/* --- Modal Styles --- */

.modal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0 }

.modal.show { display: block }

.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background: #000 }

.modal-backdrop.fade { opacity: 0 }

.modal-backdrop.in { opacity: .5 }

.modal-dialog { position: relative; max-width: 500px; margin: 30px auto; pointer-events: none }

.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 60px) }

.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: #fff; border-radius: var(--r2, 12px); box-shadow: var(--sh3, 0 8px 40px rgba(0,0,0,.12)); outline: 0 }

.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bdr, #e2e6ee) }

.modal-title { margin: 0; font-size: 1.2em }

.modal-body { position: relative; flex: 1 1 auto; padding: 16px 20px }

.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--bdr, #e2e6ee) }

.close { background: transparent; border: 0; font-size: 24px; font-weight: 700; cursor: pointer; padding: 0; color: var(--tx2, #7a7f96) }



/* --- Newsletter Section Fix --- */

.block_newsletter { padding: 30px 0 }

.block_newsletter .row { display: flex; flex-wrap: wrap; align-items: center }

.block_newsletter p#block-newsletter-label {

  font-size: 16px;

  font-weight: 600;

  color: var(--w, #fff);

  margin: 0

}

.block_newsletter form .input-wrapper {

  display: inline-block;

  width: calc(100% - 130px);

  margin-right: 10px

}

.block_newsletter form input[type="email"] {

  width: 100%;

  padding: 10px 16px;

  border-radius: var(--r, 8px);

  border: 1px solid rgba(255,255,255,.3);

  background: rgba(255,255,255,.15);

  color: #fff;

  font-size: 14px

}

.block_newsletter form input[type="email"]::placeholder { color: rgba(255,255,255,.6) }

.block_newsletter form input[type="email"]:focus { background: rgba(255,255,255,.25); border-color: var(--or, #ff6d00) }

.block_newsletter form input[type="submit"] {

  padding: 10px 24px;

  border-radius: var(--r, 8px);

  background: var(--or, #ff6d00);

  color: #fff;

  font-weight: 600;

  border: 0;

  cursor: pointer

}

.block_newsletter form input[type="submit"]:hover { background: var(--or2, #e65100) }

.block_newsletter .col-xs-12 > p { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 8px }



/* --- Footer Links Fix (ps_linklist) --- */

#footer .np-footer-grid .links { padding: 0 }

#footer .np-footer-grid .links .h3,

#footer .np-footer-grid .links p.h3 {

  font-size: 15px;

  font-weight: 700;

  color: var(--w, #fff);

  text-transform: uppercase;

  letter-spacing: .5px;

  margin-bottom: 16px

}

#footer .np-footer-grid .links ul { list-style: none; padding: 0; margin: 0 }

#footer .np-footer-grid .links ul li { margin-bottom: 8px }

#footer .np-footer-grid .links ul li a {

  color: rgba(255,255,255,.6);

  font-size: 13px;

  transition: color .2s

}

#footer .np-footer-grid .links ul li a:hover { color: var(--or, #ff6d00) }



/* Fix the linklist row inside footer */

#footer .col-md-6.links > .row { display: flex; flex-wrap: wrap }



/* Footer contact block */

#footer .block-contact .block-contact-title {

  font-size: 15px;

  font-weight: 700;

  color: var(--w, #fff);

  text-transform: uppercase;

  letter-spacing: .5px;

  margin-bottom: 16px

}

#footer .block-contact #contact-infos {

  color: rgba(255,255,255,.6);

  font-size: 13px;

  line-height: 1.8

}

#footer .block-contact #contact-infos a { color: var(--or, #ff6d00) }



/* My account block in footer */

#footer #block_myaccount_infos .myaccount-title a {

  font-size: 15px;

  font-weight: 700;

  color: var(--w, #fff);

  text-transform: uppercase;

  letter-spacing: .5px

}

#footer .account-list li { margin-bottom: 8px }

#footer .account-list li a {

  color: rgba(255,255,255,.6);

  font-size: 13px

}

#footer .account-list li a:hover { color: var(--or, #ff6d00) }



/* --- Search Widget Overrides (over ps_searchbar.css) --- */

#search_widget { position: relative !important; width: 100% !important }

#search_widget form {

  display: flex !important;

  align-items: center !important;

  background: var(--bg, #f0f2f6) !important;

  border-radius: 100px !important;

  padding: 0 16px !important;

  border: 2px solid transparent !important;

  transition: border-color .2s !important

}

#search_widget form:focus-within { border-color: var(--or, #ff6d00) !important }

#search_widget input[type="text"] {

  flex: 1 !important;

  background: transparent !important;

  border: none !important;

  padding: 10px 12px !important;

  font-size: 14px !important;

  color: var(--tx, #2e2e3a) !important;

  outline: none !important;

  min-width: 200px !important

}

#search_widget .material-icons.search {

  display: inline-block !important;

  color: var(--tx2, #7a7f96) !important;

  font-size: 20px !important

}

#search_widget .material-icons.clear { display: none !important }

#search_widget button { display: none }



/* --- Logo Size Control --- */

#_desktop_logo img, .np-logo img {

  max-height: 55px !important;

  width: auto !important

}



/* --- Currency/Language Selectors in Topbar --- */

.currency-selector, .language-selector-wrapper {

  display: inline-block;

  position: relative

}

.currency-selector .expand-more,

.language-selector-wrapper .expand-more { font-size: 13px }

.currency-selector .dropdown-menu,

.language-selector-wrapper .dropdown-menu {

  min-width: 120px;

  right: 0;

  left: auto

}

#currency-selector-label { display: none }



/* --- User Info & Cart in Topbar --- */

.user-info a { display: flex; align-items: center; gap: 6px; font-size: 13px }

.blockcart .header { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer }

.cart-products-count { font-size: 12px; font-weight: 700 }



/* ================================================================

   END BOOTSTRAP COMPAT

   ================================================================ */





/* ================================================================

   FIX v5 — TARGETED LAYOUT FIXES

   ================================================================ */



/* --- FIX 1: NEWSLETTER SECTION (completely broken) --- */

.np-footer-main {

  background: var(--dk, #1b2030);

  padding: 0 !important

}

.np-footer-main > .np-container { padding: 0 24px }



/* Newsletter block: horizontal layout */

.block_newsletter {

  background: var(--dk2, #242a3d) !important;

  padding: 35px 40px !important;

  border-radius: var(--r2, 12px) !important;

  margin: 30px 0 !important;

  max-width: 100% !important;

  flex: 0 0 100% !important;

  width: 100% !important

}

.block_newsletter > .row {

  display: flex !important;

  flex-wrap: nowrap !important;

  align-items: center !important;

  gap: 30px !important

}

.block_newsletter p#block-newsletter-label {

  flex: 0 0 auto !important;

  max-width: 280px !important;

  font-size: 18px !important;

  font-weight: 600 !important;

  color: #fff !important;

  line-height: 1.4 !important;

  margin: 0 !important;

  padding: 0 !important

}

.block_newsletter > .row > div[class*="col-md-7"] {

  flex: 1 1 auto !important;

  max-width: none !important;

  padding: 0 !important

}

.block_newsletter form > .row {

  display: block !important

}

.block_newsletter form > .row > .col-xs-12:first-child {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 0 !important;

  max-width: 100% !important;

  flex: none !important

}

.block_newsletter form .input-wrapper {

  flex: 1 !important;

  display: block !important;

  width: auto !important;

  margin: 0 !important

}

.block_newsletter form input[type="email"] {

  width: 100% !important;

  padding: 12px 20px !important;

  border-radius: 100px !important;

  border: 2px solid rgba(255,255,255,.15) !important;

  background: rgba(255,255,255,.08) !important;

  color: #fff !important;

  font-size: 14px !important;

  outline: none !important;

  transition: border-color .2s !important

}

.block_newsletter form input[type="email"]:focus {

  border-color: var(--or, #ff6d00) !important;

  background: rgba(255,255,255,.12) !important

}

.block_newsletter form input[type="email"]::placeholder {

  color: rgba(255,255,255,.4) !important

}

/* Subscribe button - show only one */

.block_newsletter form input[type="submit"] {

  padding: 12px 28px !important;

  border-radius: 100px !important;

  background: var(--or, #ff6d00) !important;

  color: #fff !important;

  font-weight: 600 !important;

  font-size: 14px !important;

  border: 0 !important;

  cursor: pointer !important;

  white-space: nowrap !important;

  transition: background .2s !important;

  flex-shrink: 0 !important

}

.block_newsletter form input[type="submit"]:hover {

  background: var(--or2, #e65100) !important

}

/* Hide the mobile "Tak" button on desktop */

.block_newsletter form input.hidden-sm-up {

  display: none !important

}

/* Disclaimer text */

.block_newsletter form > .row > .col-xs-12:nth-child(2) {

  padding: 8px 0 0 !important;

  max-width: 100% !important;

  flex: none !important

}

.block_newsletter form > .row > .col-xs-12:nth-child(2) p {

  font-size: 12px !important;

  color: rgba(255,255,255,.35) !important;

  margin: 0 !important;

  line-height: 1.5 !important

}



/* --- FIX 2: FOOTER GRID (proper 4-column layout) --- */

.np-footer {

  background: var(--dk, #1b2030) !important;

  padding: 50px 0 30px !important

}

.np-footer-grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr 1fr 1fr !important;

  gap: 30px !important;

  align-items: start !important

}

/* Remove the ps_linklist wrapper nesting */

.np-footer-grid > .col-md-6.links {

  display: contents !important

}

.np-footer-grid > .col-md-6.links > .row {

  display: contents !important

}

/* Each footer column wrapper */

.np-footer-grid .col-md-6.wrapper,

.np-footer-grid .col-md-3.wrapper,

.np-footer-grid .col-md-3.links.wrapper,

.np-footer-grid #block_myaccount_infos,

.np-footer-grid .block-contact {

  padding: 0 !important;

  max-width: 100% !important;

  flex: none !important

}



/* Footer column headers */

.np-footer .h3,

.np-footer p.h3,

.np-footer .h4 {

  font-size: 13px !important;

  font-weight: 700 !important;

  color: #fff !important;

  text-transform: uppercase !important;

  letter-spacing: 1.5px !important;

  margin-bottom: 20px !important

}

.np-footer .myaccount-title a {

  font-size: 13px !important;

  font-weight: 700 !important;

  color: #fff !important;

  text-transform: uppercase !important;

  letter-spacing: 1.5px !important

}



/* Footer links */

.np-footer ul {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important

}

.np-footer ul li {

  margin-bottom: 10px !important

}

.np-footer ul li a {

  color: rgba(255,255,255,.55) !important;

  font-size: 13px !important;

  line-height: 1.6 !important;

  transition: color .2s, padding-left .2s !important

}

.np-footer ul li a:hover {

  color: var(--or, #ff6d00) !important;

  padding-left: 4px !important

}



/* Contact info in footer */

.np-footer .block-contact .block-contact-title {

  font-size: 13px !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  letter-spacing: 1.5px !important;

  margin-bottom: 20px !important

}

.np-footer .block-contact #contact-infos {

  display: block !important;

  color: rgba(255,255,255,.55) !important;

  font-size: 13px !important;

  line-height: 2 !important

}

.np-footer .block-contact #contact-infos a {

  color: var(--or, #ff6d00) !important

}

.np-footer .block-contact #contact-infos a:hover {

  text-decoration: underline !important

}



/* Footer bottom bar */

.np-footer-bottom {

  border-top: 1px solid rgba(255,255,255,.08) !important;

  padding: 20px 0 !important;

  margin-top: 40px !important;

  text-align: center !important;

  color: rgba(255,255,255,.3) !important;

  font-size: 13px !important

}



/* Hide mobile toggle buttons on desktop */

@media (min-width: 768px) {

  .np-footer .title.hidden-md-up,

  .np-footer .hidden-md-up { display: none !important }

  .np-footer .hidden-sm-down { display: block !important }

  .np-footer .collapse { display: block !important }

}



/* --- FIX 3: BRANDS SECTION (ghost English text) --- */

/* The brands banner has background image with English text - hide it */

.np-brands-banner {

  background-image: none !important;

  background: linear-gradient(135deg, var(--dk, #1b2030) 0%, var(--dk2, #242a3d) 100%) !important;

  border-radius: var(--r2, 12px) !important;

  padding: 50px 40px !important;

  position: relative !important;

  overflow: hidden !important

}

.np-brands-banner::after {

  content: "";

  position: absolute;

  right: -40px;

  top: -40px;

  width: 250px;

  height: 250px;

  border-radius: 50%;

  background: rgba(255,109,0,.08);

  pointer-events: none

}

.np-brands-text h2 {

  color: #fff !important;

  font-size: 28px !important;

  margin-bottom: 10px !important

}

.np-brands-text p {

  color: rgba(255,255,255,.6) !important;

  font-size: 15px !important;

  margin-bottom: 20px !important

}

.np-link-w {

  color: #fff !important;

  font-weight: 600 !important;

  font-size: 14px !important;

  text-transform: uppercase !important;

  letter-spacing: 1px !important;

  border-bottom: 2px solid var(--or, #ff6d00) !important;

  padding-bottom: 2px !important;

  transition: color .2s !important

}

.np-link-w:hover { color: var(--or, #ff6d00) !important }



/* Brand logos row */

.np-brands-logos {

  display: grid !important;

  grid-template-columns: repeat(7, 1fr) !important;

  gap: 0 !important;

  margin-top: 25px !important;

  background: var(--w, #fff) !important;

  border-radius: var(--r2, 12px) !important;

  overflow: hidden !important;

  box-shadow: var(--sh, 0 2px 12px rgba(0,0,0,.05)) !important

}

.np-bl {

  padding: 22px 10px !important;

  text-align: center !important;

  border-right: 1px solid var(--bdr, #e2e6ee) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: background .2s !important

}

.np-bl:last-child { border-right: none !important }

.np-bl:hover { background: var(--bg, #f0f2f6) !important }

.np-bl b {

  font-size: 13px !important;

  letter-spacing: 2px !important;

  color: var(--tx, #2e2e3a) !important;

  font-weight: 700 !important

}



/* --- FIX 4: SEARCH BAR refinement --- */

#search_widget {

  flex: 1 !important;

  max-width: 500px !important

}



/* --- FIX 5: Mobile responsive footer --- */

@media (max-width: 767px) {

  .np-footer-grid {

    grid-template-columns: 1fr 1fr !important;

    gap: 25px !important

  }

  .block_newsletter > .row {

    flex-wrap: wrap !important

  }

  .block_newsletter p#block-newsletter-label {

    max-width: 100% !important;

    margin-bottom: 15px !important

  }

  .np-brands-logos {

    grid-template-columns: repeat(4, 1fr) !important

  }

}

@media (max-width: 480px) {

  .np-footer-grid {

    grid-template-columns: 1fr !important

  }

  .np-brands-logos {

    grid-template-columns: repeat(3, 1fr) !important

  }

  .block_newsletter {

    padding: 25px 20px !important

  }

}



/* ================================================================

   END FIX v5

   ================================================================ */



/* Hidden responsive classes */







/* CMS page styling */

.np-cms-page { max-width: 800px; margin: 0 auto; padding: 20px 0 }

.np-cms-page h2 { font-size: 28px; font-weight: 700; margin-bottom: 20px }

.np-cms-page h3 { font-size: 20px; font-weight: 600; margin: 25px 0 12px }

.np-cms-page p { line-height: 1.8; margin-bottom: 12px }

.np-cms-page ul { padding-left: 24px; margin-bottom: 16px }

.np-cms-page ul li { line-height: 2; list-style-type: disc }







/* ================================================================

   DROPDOWN + RESPONSIVE SYSTEM v8b

   ================================================================ */



/* Responsive visibility for non-dropdown elements only */

@media (min-width: 768px) {

  span.hidden-sm-down,

  button.hidden-sm-down,

  div.hidden-sm-down,

  label.hidden-sm-down {

    display: inline-block !important

  }

  .hidden-md-up { display: none !important }

}

@media (max-width: 767px) {

  span.hidden-sm-down,

  button.hidden-sm-down,

  div.hidden-sm-down,

  label.hidden-sm-down {

    display: none !important

  }

  .hidden-md-up { display: inline-block !important }

}



/* DROPDOWN MENUS: always hidden by default, even if hidden-sm-down is present */

ul.dropdown-menu,

.dropdown-menu {

  display: none !important;

  position: absolute !important;

  z-index: 9999 !important;

  top: 100% !important;

  left: 0 !important;

  min-width: 130px !important;

  padding: 6px 0 !important;

  margin: 2px 0 0 !important;

  list-style: none !important

}



/* Override: hidden-sm-down on dropdown-menu must stay hidden */

ul.dropdown-menu.hidden-sm-down,

.dropdown-menu.hidden-sm-down {

  display: none !important

}



/* SHOW only with our custom toggle class */

ul.dropdown-menu.nparts-open,

.dropdown-menu.nparts-open {

  display: block !important

}



/* Dark theme for topbar */

.np-topbar .dropdown-menu {

  background: #1b2030 !important;

  border: 1px solid rgba(255,255,255,.12) !important;

  border-radius: 8px !important;

  box-shadow: 0 8px 32px rgba(0,0,0,.35) !important

}

.np-topbar .dropdown-menu a,

.np-topbar .dropdown-menu .dropdown-item {

  display: block !important;

  color: rgba(255,255,255,.7) !important;

  padding: 8px 18px !important;

  font-size: 13px !important;

  text-decoration: none !important;

  white-space: nowrap !important;

  transition: all .15s !important

}

.np-topbar .dropdown-menu a:hover {

  background: rgba(255,255,255,.08) !important;

  color: #ff6d00 !important

}

.np-topbar .dropdown-menu .current a {

  color: #ff6d00 !important;

  font-weight: 600 !important

}

.np-topbar .dropdown-menu li {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important

}



/* CMS styles */

.np-cms-page { max-width: 800px; margin: 0 auto; padding: 20px 0 }

.np-cms-page h2 { font-size: 28px; font-weight: 700; margin-bottom: 20px }

.np-cms-page h3 { font-size: 20px; font-weight: 600; margin: 25px 0 12px }

.np-cms-page p { line-height: 1.8; margin-bottom: 12px }

.np-cms-page ul { padding-left: 24px; margin-bottom: 16px }

.np-cms-page ul li { line-height: 2; list-style-type: disc }



/* ================================================================

   END v8b

   ================================================================ */



/* v9: Hide text menu bar — use homepage tiles instead */

#_desktop_top_menu,

.top-menu,

#top-menu,

.menu.hidden-sm-down,

.js-top-menu-bottom,

[id*="top_menu"],

.ps-mainmenu,

#header .header-nav-bottom {

  display: none !important

}



/* ================================================================

   PRODUCT PAGE: Shipping widget + countdown v11

   ================================================================ */

.np-shipping-widget {

  margin: 20px 0;

  padding: 0;

  border: 1px solid #e2e6ee;

  border-radius: 12px;

  overflow: hidden;

  font-family: "Poppins", sans-serif;

}

.np-shipping-header {

  background: linear-gradient(135deg, #1b2030 0%, #242a3d 100%);

  color: #fff;

  padding: 14px 18px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 600;

  font-size: 14px;

}

.np-shipping-header .np-ship-icon {

  font-size: 20px;

}

.np-shipping-countdown {

  background: linear-gradient(135deg, #e53935, #ff6d00);

  color: #fff;

  padding: 10px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 13px;

}

.np-shipping-countdown .np-countdown-timer {

  font-weight: 700;

  font-size: 16px;

  font-variant-numeric: tabular-nums;

  letter-spacing: 0.5px;

}

.np-shipping-countdown .np-countdown-label {

  font-weight: 500;

}

.np-shipping-countdown.np-expired {

  background: #78909c;

}

.np-shipping-list {

  padding: 0;

  margin: 0;

  list-style: none;

}

.np-shipping-list li {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 18px;

  border-bottom: 1px solid #f0f2f6;

  font-size: 13px;

  color: #2e2e3a;

  transition: background .15s;

}

.np-shipping-list li:last-child { border-bottom: none }

.np-shipping-list li:hover { background: #f8f9fc }

.np-shipping-list .np-carrier-name {

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: 8px;

}

.np-shipping-list .np-carrier-time {

  color: #7a7f96;

  font-size: 12px;

}

.np-shipping-list .np-carrier-price {

  font-weight: 700;

  color: #e53935;

  font-size: 14px;

  white-space: nowrap;

}

.np-shipping-international {

  background: #f8f9fc;

  padding: 10px 18px;

  font-size: 12px;

  color: #7a7f96;

  border-top: 1px solid #e2e6ee;

}

.np-shipping-international strong {

  color: #2e2e3a;

}



/* Cookie banner */

.np-cookie-banner {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 10000;

  background: #1b2030;

  color: rgba(255,255,255,.85);

  padding: 18px 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  font-size: 13px;

  line-height: 1.5;

  box-shadow: 0 -4px 20px rgba(0,0,0,.3);

  font-family: "Poppins", sans-serif;

}

.np-cookie-banner a {

  color: #ff6d00;

  text-decoration: underline;

}

.np-cookie-btns {

  display: flex;

  gap: 10px;

  flex-shrink: 0;

}

.np-cookie-accept {

  background: #ff6d00;

  color: #fff;

  border: none;

  padding: 10px 24px;

  border-radius: 8px;

  font-weight: 600;

  font-size: 13px;

  cursor: pointer;

  transition: background .2s;

}

.np-cookie-accept:hover { background: #e65100 }

.np-cookie-reject {

  background: transparent;

  color: rgba(255,255,255,.7);

  border: 1px solid rgba(255,255,255,.3);

  padding: 10px 24px;

  border-radius: 8px;

  font-weight: 500;

  font-size: 13px;

  cursor: pointer;

  transition: all .2s;

}

.np-cookie-reject:hover {

  background: rgba(255,255,255,.1);

  color: #fff;

}

@media (max-width: 767px) {

  .np-cookie-banner { flex-direction: column; text-align: center }

  .np-cookie-btns { width: 100%; justify-content: center }

}



/* ================================================================

   END v11

   ================================================================ */



/* WhatsApp floating button */

.np-whatsapp{position:fixed;bottom:24px;right:24px;z-index:9998;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);cursor:pointer;transition:transform .2s,box-shadow .2s;text-decoration:none}

.np-whatsapp:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.5)}

.np-whatsapp svg{width:32px;height:32px;fill:#fff}

.np-whatsapp-tooltip{position:absolute;right:70px;top:50%;transform:translateY(-50%);background:#1b2030;color:#fff;padding:8px 14px;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;font-family:"Poppins",sans-serif}

.np-whatsapp:hover .np-whatsapp-tooltip{opacity:1}

@media(max-width:767px){.np-whatsapp{bottom:16px;right:16px;width:54px;height:54px}.np-whatsapp svg{width:28px;height:28px}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CART & CHECKOUT — N-PARTS PREMIUM
   Added 2026-02-20
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Overall cart page wrapper ─────────────────────────────── */
#main {
    padding: 24px 0 48px
}

.page-cart #main,
.page-order #main {
    padding: 24px 16px 48px
}

/* ── Grid layout ───────────────────────────────────────────── */
.cart-grid.row {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}

.cart-grid-body {
    min-width: 0
}

.cart-grid-right {
    min-width: 0
}

@media(max-width:1024px) {
    .cart-grid.row {
        grid-template-columns: 1fr
    }

    .cart-grid-right {
        order: -1
    }
}

/* ── Card (white box) ──────────────────────────────────────── */
.card {
    background: var(--w);
    border-radius: var(--r2);
    box-shadow: var(--sh);
    overflow: hidden;
    border: 1px solid var(--bdr);
}

.card-block {
    padding: 20px 24px;
}

.card-block+.card-block {
    border-top: 1px solid var(--bdr)
}

.separator {
    border: 0;
    border-top: 1px solid var(--bdr);
    margin: 0
}

/* ── Cart title ────────────────────────────────────────────── */
.cart-container .card-block .h1 {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--tx);
    margin: 0;
}

/* ── Cart item list ────────────────────────────────────────── */
.cart-items {
    margin: 0;
    padding: 0;
    list-style: none
}

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--bdr);
    transition: background .15s;
}

.cart-item:last-child {
    border-bottom: 0
}

.cart-item:hover {
    background: #fafbfc
}

/* Product image in cart */
.cart-item .product-image {
    width: 100px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--r);
    border: 1px solid var(--bdr);
    padding: 4px;
    background: var(--w);
}

/* Product info */
.product-line-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-line-info .label {
    font-size: 12px;
    color: var(--tx2);
    font-weight: 500;
}

.product-line-info .value {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
}

.product-line-info a.product-name__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.3;
}

.product-line-info a.product-name__title:hover {
    color: var(--red)
}

/* Price */
.price {
    font-weight: 700;
    color: var(--tx);
    font-size: 15px
}

.regular-price {
    text-decoration: line-through;
    color: var(--tx3);
    font-size: 12px;
    font-weight: 400;
}

.discount {
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 6px;
}

/* Quantity input */
.product-quantity {
    display: flex;
    align-items: center;
    gap: 6px;
}

.js-cart-line-product-quantity.input-group input,
.product-quantity input {
    width: 60px;
    text-align: center;
    padding: 7px 8px;
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    font-weight: 600;
    background: var(--bg);
}

.product-quantity .input-group-btn button {
    background: var(--w);
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: var(--tx2);
    transition: all .2s;
}

.product-quantity .input-group-btn button:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(229, 57, 53, .05);
}

/* Remove product */
.remove-from-cart,
.cart-item .remove-from-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: var(--tx3);
    transition: all .2s;
    border: 2px solid transparent;
}

.remove-from-cart:hover {
    background: rgba(229, 57, 53, .08);
    color: var(--red);
    border-color: rgba(229, 57, 53, .15);
}

/* ── Cart summary (right panel) ────────────────────────────── */
.cart-summary {
    position: sticky;
    top: 90px
}

.cart-summary .card-block {
    padding: 20px 20px
}

/* Summary lines */
.cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13px;
}

.cart-summary-line .label {
    color: var(--tx2);
    font-weight: 500;
}

.cart-summary-line .value {
    font-weight: 600;
    color: var(--tx);
}

/* Shipping line */
#cart-subtotal-shipping .value {
    color: var(--grn);
    font-weight: 700;
}

/* Total line */
.cart-total {
    border-top: 2px solid var(--bdr);
    padding-top: 12px !important;
    margin-top: 6px;
}

.cart-total .label {
    font-size: 14px;
    font-weight: 700;
    color: var(--tx);
}

.cart-total .value {
    font-size: 18px;
    font-weight: 800;
    color: var(--red);
}

/* Checkout button */
.checkout.card-block {
    padding: 16px 20px 20px;
}

.checkout .btn-primary {
    width: 100%;
    padding: 14px 24px;
    font-size: 14px;
    border-radius: var(--r);
    background: var(--red);
    border-color: var(--red);
    justify-content: center;
    animation: pulse-btn 2.5s infinite;
}

.checkout .btn-primary:not(.disabled):hover {
    background: var(--red2);
    border-color: var(--red2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229, 57, 53, .35);
    animation: none;
}

.checkout .btn-primary.disabled {
    opacity: .45;
    cursor: not-allowed;
    animation: none
}

@keyframes pulse-btn {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(229, 57, 53, .3)
    }

    50% {
        box-shadow: 0 0 0 8px rgba(229, 57, 53, 0)
    }
}

/* Continue shopping link */
a.label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx2);
    padding: 10px 0;
    transition: color .2s;
}

a.label:hover {
    color: var(--red)
}

a.label .material-icons {
    font-size: 18px
}

/* Empty cart */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

span.no-items {
    display: block;
    text-align: center;
    padding: 40px 24px;
    color: var(--tx2);
    font-size: 14px;
}

/* ── Voucher section ───────────────────────────────────────── */
.cart-voucher .card-block {
    padding: 16px 20px
}

#coupon-code {
    font-size: 13px
}

.promo-code {
    display: flex;
    gap: 8px;
}

.promo-code input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    font-size: 13px;
}

.promo-code button {
    padding: 8px 16px;
    background: var(--tx);
    color: #fff;
    border-radius: var(--r);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: 0;
    transition: background .2s;
    white-space: nowrap;
}

.promo-code button:hover {
    background: var(--red)
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CHECKOUT PAGE STEPS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Checkout layout */
#checkout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 48px
}

.checkout-process.checkout-methods-items {
    list-style: none;
    margin: 0;
    padding: 0
}

/* Checkout steps nav header (step numbers) */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bdr);
    color: var(--tx2);
    font-weight: 700;
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
    transition: all .3s;
}

.checkout-step.-current .step-number,
.checkout-step.-reachable.checkout-step.-current .step-number {
    background: var(--red);
    color: #fff;
}

.checkout-step.-reachable:not(.-current) .step-number {
    background: var(--grn);
    color: #fff;
}

/* Step header */
.step-title {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding: 18px 24px;
    cursor: pointer;
    background: var(--w);
    border-radius: var(--r2) var(--r2) 0 0;
    border-bottom: 1px solid var(--bdr);
    user-select: none;
}

.checkout-step:not(.-current) .step-title {
    border-radius: var(--r2);
    border-bottom: 0;
}

/* Checkout step cards */
.checkout-step {
    background: var(--w);
    border-radius: var(--r2);
    border: 1px solid var(--bdr);
    margin-bottom: 12px;
    box-shadow: var(--sh);
    overflow: hidden;
}

.checkout-step.-current {
    border-color: rgba(229, 57, 53, .25);
    box-shadow: 0 0 0 3px rgba(229, 57, 53, .08), var(--sh);
}

/* Step content padding */
.step-content {
    padding: 24px
}

/* Delivery & payment options */
.delivery-options,
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.delivery-option,
.payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    cursor: pointer;
    transition: all .2s;
    background: var(--bg);
}

.delivery-option:hover,
.payment-option:hover {
    border-color: var(--or);
    background: rgba(255, 109, 0, .03);
}

.delivery-option input[type="radio"],
.payment-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--red);
    flex-shrink: 0;
}

.delivery-option label,
.payment-option label {
    flex: 1;
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.carrier-delay {
    color: var(--tx2);
    font-size: 12px;
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

.carrier-price {
    font-weight: 700;
    color: var(--red);
    white-space: nowrap;
    font-size: 14px;
}

/* Highlight selected delivery/payment  */
.delivery-option:has(input:checked),
.payment-option:has(input:checked) {
    border-color: var(--red);
    background: rgba(229, 57, 53, .03);
}

/* Payment logos */
.payment-option img {
    height: 24px;
    object-fit: contain
}

/* COD badge */
.carrier-name:contains("Pobranie"),
.payment-definition:contains("pobranie"),
.payment-definition:contains("Pobranie") {
    /* textual match not supported in CSS — use generic badge for COD module */
}

.js-payment-option-form[data-module-name="ps_cashondelivery"] .payment-option label::after {
    content: "💰 gotówka";
    font-size: 10px;
    background: var(--grn);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 700;
}

/* Continue button in steps */
.continue {
    margin-top: 16px
}

/* ── Checkout cart summary sidebar ─────────────────────────── */
#js-checkout-summary {
    position: sticky;
    top: 90px
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ORDER CONFIRMATION PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-order-confirmation #main {
    text-align: center;
    padding: 48px 16px
}

.confirmation-message {
    background: rgba(46, 204, 113, .08);
    border: 2px solid var(--grn);
    border-radius: var(--r2);
    padding: 32px;
    margin-bottom: 24px;
    display: inline-block;
    max-width: 600px;
}

.confirmation-message .material-icons {
    font-size: 48px;
    color: var(--grn);
    display: block;
    margin-bottom: 12px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CART MOBILE RESPONSIVENESS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px) {
    .cart-item {
        grid-template-columns: 70px 1fr;
        grid-template-rows: auto auto;
    }

    .cart-item>*:last-child {
        grid-column: 1 / -1
    }

    .cart-container .card-block .h1 {
        font-size: 1.1em
    }

    .cart-total .value {
        font-size: 15px
    }
}

/* ── PrestaShop Bootstrap compat: col-lg-8 / col-lg-4 ──────── */
.col-lg-8 {
    flex: none;
    width: 100%
}

.col-lg-4 {
    flex: none;
    width: 100%
}

@media(min-width:1025px) {

    /* These are handled by .cart-grid CSS grid above */
    .cart-grid-body.col-lg-8 {
        width: 100%
    }

    .cart-grid-right.col-lg-4 {
        width: 100%
    }
}

/* ── float-xs-right (used in checkout buttons) ─────────────── */
.float-xs-right {
    float: right
}

/* ── Bootstrap alert compat ────────────────────────────────── */
.alert {
    border-radius: var(--r);
    padding: 12px 16px;
    font-size: 13px;
    border: 1px solid transparent;
    margin-bottom: 12px;
}

.alert-warning {
    background: #fff8e1;
    border-color: #ffe082;
    color: #795548
}

.alert-success {
    background: rgba(46, 204, 113, .08);
    border-color: var(--grn);
    color: #1b5e20
}

.alert-danger {
    background: rgba(229, 57, 53, .07);
    border-color: var(--red);
    color: var(--red2)
}

.alert-info {
    background: rgba(33, 150, 243, .07);
    border-color: var(--blue);
    color: #0d47a1
}/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CHECKOUT STEPS — complete rewrite of broken grid layout
   Added 2026-02-20
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Checkout wrapper ───────────────────────────────────────── */
#checkout-process,
.checkout-process {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Step sections ──────────────────────────────────────────── */
.checkout-step {
    background: var(--w);
    border: 1px solid var(--bdr);
    border-radius: var(--r2);
    box-shadow: var(--sh);
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
}

.checkout-step.-current {
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(255, 109, 0, .1), var(--sh);
}

.checkout-step.-complete {
    border-color: var(--grn)
}

/* ── Step header (title) ────────────────────────────────────── */
.checkout-step .step-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tx);
}

.checkout-step.-current .step-title {
    border-bottom-color: var(--bdr)
}

.checkout-step:not(.-current) .step-title {
    color: var(--tx2)
}

.step-edit {
    font-size: 12px;
    font-weight: 500;
    color: var(--or);
    display: flex;
    align-items: center;
    gap: 4px;
}

.step-edit .material-icons {
    font-size: 16px
}

.checkout-step:not(.-reachable) .step-edit {
    display: none
}

/* ── Step content area ──────────────────────────────────────── */
.checkout-step .content {
    padding: 20px;
    display: none;
}

.checkout-step.-current .content {
    display: block
}

/* ── Custom radio (generic) ─────────────────────────────────── */
.custom-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.custom-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--red);
    cursor: pointer;
}

.custom-radio>span {
    display: none
}

/* hide old PS custom radio dot */

/* ── Custom checkbox ────────────────────────────────────────── */
.custom-checkbox,
.np-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 8px 0;
    font-size: 13px;
}

.custom-checkbox input[type="checkbox"],
.np-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--red);
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 1px;
}

.custom-checkbox>span,
.np-checkbox>span {
    display: none
}

.custom-checkbox label,
.np-checkbox label {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.4
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   N-PARTS DELIVERY OPTIONS (np- prefix = our custom classes)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.np-delivery-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.np-delivery-option {
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    cursor: pointer;
}

.np-delivery-option:hover {
    border-color: var(--or)
}

.np-delivery-option.is-selected {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(229, 57, 53, .08);
    background: rgba(229, 57, 53, .02);
}

.np-delivery-option-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    width: 100%;
    margin: 0;
}

.np-delivery-radio {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.np-delivery-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--red);
    cursor: pointer;
}

.np-radio-dot {
    display: none
}

.np-carrier-logo {
    flex-shrink: 0;
    width: 48px;
    display: flex;
    align-items: center;
}

.np-carrier-logo img {
    max-width: 48px;
    max-height: 32px;
    object-fit: contain;
}

.np-carrier-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.np-carrier-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--tx);
}

.np-carrier-delay {
    font-size: 12px;
    color: var(--tx2);
    display: block;
}

.np-carrier-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--red);
    white-space: nowrap;
    flex-shrink: 0;
}

/* COD (pobranie) carriers — green price badge */
.np-delivery-option:has(.np-carrier-name) .np-carrier-price {
    color: var(--red)
}

/* Comment field */
.np-comment-field {
    margin-top: 16px;
    margin-bottom: 12px;
}

.np-comment-field label {
    font-size: 13px;
    color: var(--tx2);
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

.np-comment-field textarea {
    width: 100%;
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    padding: 10px 14px;
    font-size: 13px;
    resize: vertical;
    min-height: 80px;
}

.np-comment-field textarea:focus {
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(255, 109, 0, .1);
    outline: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAYMENT OPTIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .2s;
    background: var(--w);
}

.payment-option:hover {
    border-color: var(--or)
}

.payment-option:has(input:checked) {
    border-color: var(--red);
    background: rgba(229, 57, 53, .02);
}

.payment-option .custom-radio {
    flex-shrink: 0
}

.payment-option label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--tx);
}

.payment-option label img {
    max-height: 28px;
    object-fit: contain;
}

.payment-option .float-xs-left {
    float: none
}

/* Payment additional info */
.additional-information {
    padding: 12px 16px;
    background: var(--bg);
    border-radius: var(--r);
    margin-top: 8px
}

.definition-list {
    font-size: 13px
}

/* Conditions to approve */
#conditions-to-approve {
    padding: 12px 0;
    border-top: 1px solid var(--bdr);
    margin: 16px 0;
}

#conditions-to-approve ul {
    list-style: none;
    padding: 0
}

#conditions-to-approve li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
}

.condition-label label {
    margin: 0;
    cursor: pointer;
    line-height: 1.5
}

/* Place order button */
#payment-confirmation .btn-primary {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 15px 24px;
    font-size: 15px;
    border-radius: var(--r);
    animation: pulse-btn 2.5s infinite;
}

#payment-confirmation .btn-primary:not(.disabled):hover {
    animation: none
}

#payment-confirmation .btn-primary.disabled,
#payment-confirmation .btn-primary[disabled] {
    opacity: .45;
    cursor: not-allowed;
    animation: none
}

/* Continue / DALEJ buttons */
.continue.btn-primary {
    padding: 12px 32px;
    font-size: 13px;
    margin-top: 16px;
}

/* Hide broken old delivery option grids */
.delivery-option>.col-sm-1,
.delivery-option-2>.row {
    display: flex !important;
    flex-wrap: wrap
}

.col-sm-1 {
    width: 30px;
    flex: none
}

.col-sm-5 {
    flex: 1
}

.col-sm-4 {
    flex: 1
}

.col-sm-3 {
    flex: none;
    white-space: nowrap
}

.col-xs-9,
.col-sm-11 {
    flex: 1
}

/* ── Checkout layout (2-column with cart summary) ───────────── */
#checkout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

#checkout-process-content {
    min-width: 0
}

#js-checkout-summary {
    position: sticky;
    top: 90px
}

#js-checkout-summary .card {
    background: var(--w);
    border: 1px solid var(--bdr);
    border-radius: var(--r2);
    box-shadow: var(--sh)
}

@media(max-width:900px) {
    #checkout {
        grid-template-columns: 1fr
    }

    #js-checkout-summary {
        position: static
    }
}

/* ── Col-sm compat for OLD templates still used ─────────────── */
.col-sm-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%
}

.col-sm-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%
}

.col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%
}

.col-sm-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%
}

.col-sm-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%
}

.col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%
}

.col-sm-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%
}

.col-sm-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%
}

.col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%
}

.col-sm-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%
}

.col-sm-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%
}

.col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%
}

.col-xs-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%
}

.col-xs-9 {
    flex: 0 0 75%;
    max-width: 75%
}

.col-xs-12 {
    flex: 0 0 100%;
    max-width: 100%
}

@media(max-width:575px) {
    [class*="col-sm-"] {
        flex: 0 0 100%;
        max-width: 100%
    }
}

/* ── float-xs-left / right ──────────────────────────────────── */
.float-xs-left {
    float: left
}

.float-xs-right {
    float: right
}

/* ── Carrier logo in OLD tpl ────────────────────────────────── */
.carrier-logo img {
    max-width: 60px;
    max-height: 40px;
    object-fit: contain
}

.carrier-name {
    font-weight: 700;
    font-size: 14px
}

.carrier-delay {
    font-size: 12px;
    color: var(--tx2)
}

.carrier-price {
    font-weight: 800;
    color: var(--red);
    font-size: 14px
}

/* delivery-option card for OLD tpl */
.delivery-option {
    display: flex;
    align-items: center;
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    margin-bottom: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .2s;
}

.delivery-option:hover {
    border-color: var(--or)
}

.delivery-option-2 {
    width: 100%
}

/* ── Order summary inside step ──────────────────────────────── */
.order-options {
    padding: 12px 0 4px
}

.order-options label {
    font-size: 13px;
    font-weight: 500;
    color: var(--tx2)
}

#delivery_message {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 14px;
    font-size: 13px;
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    resize: vertical;
    min-height: 80px;
}

#delivery_message:focus {
    border-color: var(--or);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 109, 0, .1);
}

/* ── ps-hidden (JS controlled) ──────────────────────────────── */
.ps-hidden {
    display: none !important
}

.ps-hidden-by-js {
    display: none
}

.ps-shown-by-js {
    display: inline-block
}/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PICKUP POINT WIDGETS (InPost Paczkomat + Orlen Paczka)
   Added 2026-02-20
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Pickup widget below carrier option card */
.np-pickup-widget {
    padding: 14px 16px;
    border-top: 1px dashed var(--bdr);
    background: #f8f9fc;
    transition: all .3s;
}

.np-pickup-widget.np-hidden {
    display: none
}

.np-pickup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 10px;
}

.np-pickup-header .material-icons {
    font-size: 18px;
    color: var(--or);
}

/* Selected point display */
.np-selected-point {
    background: var(--w);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    min-height: 42px;
    display: flex;
    align-items: center;
}

.np-selected-point .np-no-point {
    color: var(--tx3);
    font-style: italic
}

.np-selected-point strong {
    color: var(--tx);
    display: block;
    margin-bottom: 2px
}

.np-selected-point span {
    color: var(--tx2);
    font-size: 12px
}

/* Pick point button */
.np-pick-point-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--dk);
    color: #fff;
    border-radius: var(--r);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 0;
    cursor: pointer;
    transition: all .2s;
}

.np-pick-point-btn:hover {
    background: var(--or);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 109, 0, .3);
}

.np-pick-point-btn .material-icons {
    font-size: 16px
}

.np-orlen-btn {
    background: #c8102e
}

/* Orlen brand red */
.np-orlen-btn:hover {
    background: #a00d24
}

/* ── Fullscreen modal ───────────────────────────────────────── */
.np-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.np-modal[style*="flex"] {
    display: flex !important
}

.np-modal-inner {
    background: var(--w);
    border-radius: var(--r2);
    width: 100%;
    max-width: 860px;
    height: 85vh;
    max-height: 680px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh3);
}

.np-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: var(--w);
    border: 1px solid var(--bdr);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tx);
    box-shadow: var(--sh);
    transition: all .2s;
}

.np-modal-close:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red)
}

.np-modal-close .material-icons {
    font-size: 20px
}

.np-modal-title {
    padding: 16px 50px 0 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--tx);
}

/* Orlen search bar */
#np-orlen-search {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bdr);
}

#np-orlen-city {
    flex: 1;
    padding: 9px 14px;
    border: 2px solid var(--bdr);
    border-radius: var(--r);
    font-size: 13px;
}

#np-orlen-city:focus {
    border-color: var(--or);
    outline: 0
}

#np-orlen-search button {
    padding: 9px 18px;
    background: var(--c8102e, #c8102e);
    color: #fff;
    border: 0;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #c8102e;
}

#np-orlen-search button:hover {
    background: #a00d24
}

/* Map containers */
#np-inpost-map-container,
#np-orlen-map-container {
    flex: 1;
    min-height: 400px;
    width: 100%;
    overflow: hidden;
}

#np-inpost-map-container inpost-geowidget {
    width: 100%;
    height: 100%;
    display: block;
}

/* InPost geowidget overrides */
.inpost-geowidget {
    border: 0 !important
}

/* Orlen results */
#np-orlen-results {
    padding: 8px 20px;
    font-size: 13px
}

@media(max-width:600px) {
    .np-modal-inner {
        height: 95vh;
        max-height: none;
        border-radius: var(--r)
    }
}