.header-main {
height: auto;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
background: #fff !important;
color: #1b1b1b !important;
position: relative;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
padding-top: 0;
padding-bottom: 1.5rem;
transition: padding 0.2s ease;
}
/* The oversized background-size is what makes the animation work: the gradient is painted into
a box 10x the bar, so moving background-position drifts through the colour stops instead of
just sliding a fixed image. */
#header .header-gradient-bar {
background: linear-gradient(217deg, #0067b4, #9a2632, #fcb040, #e10f0d, #0067b4, #9a2632, #fcb040, #e10f0d);
background-size: 1000% 1000%;
animation: headerGradientShift 150s ease infinite;
padding: 0.55rem 0;
transition: opacity 0.2s ease, padding 0.2s ease;
overflow: visible;
position: relative;
z-index: 200;
}
@keyframes headerGradientShift {
0% { background-position: 96% 0%; }
50% { background-position: 5% 100%; }
100% { background-position: 96% 0%; }
}
@media (prefers-reduced-motion: reduce) {
#header .header-gradient-bar {
animation: none;
}
}
#header .header-gradient-bar .header-gradient-inner {
display: flex;
align-items: center;
gap: 1.25rem;
}
#header .header-gradient-bar #desktop-menu {
border: 0;
box-shadow: none;
background: transparent;
flex: 0 0 auto;
z-index: 210;
align-self: center;
display: flex;
align-items: center;
padding: 0.35rem 1.25rem 0.35rem 0;
border-right: 1px solid rgba(255, 255, 255, 0.4);
}
#header .header-gradient-bar #desktop-menu .categories-dropdown {
position: relative;
}
#header .header-gradient-bar #desktop-menu #menu {
padding: 0;
}
#header .header-gradient-bar #desktop-menu .navbar-nav > .nav-item .nav-link {
color: #fff !important;
font-weight: 700;
padding: 0.5rem 0.85rem;
text-transform: none;
}
#header .header-gradient-bar #desktop-menu .navbar-nav > .nav-item .nav-link:hover,
#header .header-gradient-bar #desktop-menu .navbar-nav > .nav-item .nav-link:focus {
color: #fff !important;
background: rgba(255, 255, 255, 0.14);
border-radius: 999px;
}
#header .header-gradient-bar #desktop-menu .categories-dropdown .categories-flyout-menu {
z-index: 300;
left: 0;
right: auto;
margin: 0 !important;
margin-top: 0.5rem !important;
}
#header .header-gradient-bar #desktop-menu .nav-link.dropdown-toggle {
background: #111;
color: #fff !important;
border-radius: 999px;
padding: 0.45rem 0.9rem;
text-transform: uppercase !important;
letter-spacing: 0.04em;
}
#header .header-gradient-bar #desktop-menu .nav-item.show > .nav-link,
#header .header-gradient-bar #desktop-menu .nav-link.dropdown-toggle:hover,
#header .header-gradient-bar #desktop-menu .nav-link.dropdown-toggle:focus {
background: #111 !important;
color: #fff !important;
}
#header .header-gradient-bar #desktop-menu .navbar-nav > .nav-item .nav-link:hover {
background: #000;
}
.categories-flyout-panel {}
#desktop-menu .categories-dropdown .categories-flyout-panel {
height: 100%;
width: 100%;
}
.categories-flyout-panel {}
#desktop-menu .categories-dropdown .categories-flyout-item > a {
line-height: 1;
}
#desktop-menu .categories-dropdown .categories-flyout-list {
gap: 0;
}
#desktop-menu .categories-dropdown .categories-flyout-sublist {
left: 50%;
}
#desktop-menu .categories-dropdown .categories-flyout-sublist a {
font-size: 0.9rem;
}
#header .header-gradient-bar #desktop-menu .nav-link.dropdown-toggle:after,
#header .header-gradient-bar #desktop-menu .nav-link.dropdown-toggle:focus:after,
#header .header-gradient-bar #desktop-menu .nav-link.dropdown-toggle:hover:after {
color: #fff;
}
#header .header-gradient-bar #desktop-menu .navbar-nav > .nav-item .nav-link {
text-transform: none;
}
#header .header-gradient-bar .dummy-menu {
flex: 1 1 auto;
}
/* Wraps on desktop too: the item count is merchant-editable, so the bar has to grow to a second
row rather than squash or overflow. Centering keeps a short trailing row balanced instead of
leaving a wide gap on one side. */
#header .header-gradient-bar .dummy-menu {
margin: 0;
padding: 0.15rem 0.75rem;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem 0.75rem;
min-width: 0;
flex-wrap: wrap;
}
#header .header-gradient-bar .dummy-menu-item {
min-width: 0;
flex: 0 1 auto;
}
#header .header-gradient-bar .dummy-menu-link {
white-space: nowrap;
}
#header .header-gradient-bar .dummy-menu-item {
align-self: center;
line-height: 1;
position: relative;
}
#header .header-gradient-bar .dummy-menu-item {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
#header .header-gradient-bar .dummy-menu-item i {
font-size: 1.2rem;
color: #fff;
}
#header .header-gradient-bar .dummy-menu-item > a {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: inherit;
text-decoration: none;
padding: 0.55rem 0.9rem;
border-radius: 7px;
background: transparent;
line-height: 1;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* The animated gradient drifts through a light amber stop, where plain white loses contrast. */
#header .header-gradient-bar .dummy-menu-item,
#header .header-gradient-bar #desktop-menu .navbar-nav > .nav-item > .nav-link {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
#header .header-gradient-bar .dummy-menu-item > a:hover,
#header .header-gradient-bar .dummy-menu-item > a:focus {
text-shadow: none;
}
/* Dropdown panels sit on white, so cancel the inherited gradient-bar shadow. */
#header .header-gradient-bar .dummy-dropdown,
#header .header-gradient-bar .dummy-dropdown * {
text-shadow: none;
}
#header .header-gradient-bar .dummy-menu-item > a:hover,
#header .header-gradient-bar .dummy-menu-item > a:focus {
background: #111;
color: #fa9024;
text-decoration: none;
opacity: 1;
}
#header .header-gradient-bar .dummy-menu-item > a:hover i,
#header .header-gradient-bar .dummy-menu-item > a:focus i {
color: #fa9024;
}
.header-main a,
.header-main a:hover,
.header-main a:focus,
.header-main-block-icon > a,
.header-main-block-icon > button,
.header-utilities .header-search-btn,
#header .header-utilities [class*='icon-'] {
color: #1b1b1b !important;
}
#header .header-main-wrapper {
height: auto !important;
align-content: center;
}
.header-main-block-icon > a,
.header-main-block-icon > button {
border: 2px solid rgba(220, 0, 0, 0.25);
border-radius: 9999px;
padding: 6px 10px;
background: #fff;
}
.header-utilities .header-search-btn {
border: 2px solid rgba(220, 0, 0, 0.25);
border-radius: 9999px;
padding: 6px 10px;
background: #fff;
}
#wish i {
color: #dc0000;
}
.header-main-block-cart i {
color: #1aa34a;
}
.header-main-block-cart.cart-added > a,
.header-main-block-cart.cart-added > button {
box-shadow: 0 0 0 2px rgba(26, 163, 74, 0.25), 0 6px 14px rgba(26, 163, 74, 0.25);
border-color: rgba(26, 163, 74, 0.45);
}
.menu-cart-icon.cart-added i {
color: #1aa34a !important;
}
.header-main-block-cart.cart-added i {
color: #1aa34a !important;
}
.header-main-block-cart .ho-total-counter {
background: #a00017;
color: #fff;
border-color: #ffd4d8;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
/* Anchor the cart badge to a 43x43 icon box identical to the garage toggle so
both utility badges sit in the exact same spot. */
.header-main-block-cart .menu-cart-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
padding: 0;
}
.header-main .header-search input,
.header-main .header-search .form-control {
border-radius: 999px;
border: 1px solid #efefef;
background: #fff;
height: 38px;
}
.header-main .header-search .header-search-btn i {
color: #d71920;
}
.header-main .header-search .header-search-b2b #search-b2b {
display: flex;
align-items: center;
flex-direction: row;
gap: 0.5rem;
padding: 0;
margin: 0;
max-width: none;
}
.header-main .header-search .header-search-b2b #search-b2b input {
flex: 1 1 auto;
}
.header-main .header-search .header-search-b2b .header-search-submit {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 2px solid rgba(220, 0, 0, 0.25);
border-radius: 9999px;
padding: 6px 12px;
background: #fff;
color: #1b1b1b;
font-size: 0.85rem;
line-height: 1;
}
.header-main .btn-new-order {
color: #fff !important;
box-shadow: none;
}
.product-qty-control {
border: none;
padding: revert-layer;
}
.product-qty-control .qty-pill {
display: inline-flex;
align-items: stretch;
height: 48px;
border: 2px solid #0d0d0d;
background: #fff;
overflow: hidden;
border-radius: 0.5rem;
}
.qty-pill .btn-qty {
width: 48px;
border: 0;
background: transparent;
font-weight: 700;
font-size: 1.2rem;
color: #111;
height: 100%;
}
.qty-pill .btn-qty + .qty-value,
.qty-pill .qty-value + .btn-qty {
border-left: 1px solid #ececec;
}
@media (max-width: 991.98px) {
.product-qty-control .qty-pill {
display: flex;
width: 100%;
}
.qty-pill .qty-value { flex: 1 1 auto; text-align: center; }
.qty-pill .btn-qty { flex: 0 0 56px; }
}
.product-qty-control .qty-pill .qty-value {
height: 100%;
min-width: 64px;
text-align: center;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fdfdfd;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.password-toggle {
position: relative;
}
.password-toggle input.form-control {
padding-right: 3rem;
}
.btn-password-toggle {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: 0;
color: #979797;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.password-toggle.password-visible .btn-password-toggle {
color: #c20000;
}
.card-greeting {
position: relative;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.card-greeting span {
background: #fff;
color: #111;
font-weight: 700;
font-size: 1.2rem;
line-height: 2.1rem;
letter-spacing: 0.04em;
padding: 0.5rem 1.25rem 0.6rem;
border-radius: 12px;
box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}
.card-greeting::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, #dc0000, #fa9024);
border-radius: 999px;
opacity: 0.9;
}
#header .header-main-wrapper {
height: auto;
}
.account_login .account-wrap,
.account_register .account-wrap,
.account_forgotten .account-wrap,
.account_reset .account-wrap
{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
max-width: none;
}
/* Account pages redesign */
body.account_body .account-wrap {
max-width: 1800px;
padding: 2rem;
}
body.account_body .account-list-group {
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
body.account_body .account-list-group .list-group-item {
border: 0;
border-top: 1px solid #f2f2f2;
padding: 0.85rem 1.1rem;
font-size: 0.98rem;
display: flex;
align-items: center;
gap: 0.75rem;
background: #fff;
}
body.account_body .account-list-group .list-group-item:first-child {
border-top: 0;
}
body.account_body .account-list-group .list-group-item i {
color: #d71920;
font-size: 1.1rem;
width: 1.25rem;
}
body.account_body .account-list-group .list-group-item.active {
background: #fbeeee;
color: #c9191f;
font-weight: 700;
}
body.account_body .account-list-group .list-group-item.active:before {
background-color: #d71920;
width: 0.2rem;
}
body.account_body .account-list-group .list-group-item a {
color: inherit;
font-weight: 600;
}
body.account_body .card-account {
border-radius: 18px;
border: 0;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
background: #fff;
}
body.account_body .card-account .card-body {
padding: 2rem 2.25rem;
}
body.account_body .card-account h1,
body.account_body .card-account .h4 {
font-weight: 700;
color: #151515;
}
body.account_body .card-account .form-control,
body.account_body .card-account .form-select {
border-radius: 999px;
border: 1px solid #e4e4e4;
padding: 0.75rem 1rem;
}
body.account_body .card-account textarea.form-control {
border-radius: 0.5rem;
}
body.account_body .card-account .btn,
body.account_body .card-account .btn-primary {
border-radius: 999px;
padding: 0.65rem 1.5rem;
font-weight: 700;
}
body.account_body .card-account .btn-primary {
background: #000;
border-color: #000;
}
body.account_body .card-account .btn-primary:hover {
background: #1c1c1c;
border-color: #1c1c1c;
}
body.account_body .card-account .table {
font-size: 0.95rem;
}
body.account_balance .balance-card {
border-radius: 18px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
body.account_balance .balance-header {
display: flex;
gap: 0.75rem;
align-items: center;
margin-bottom: 1.5rem;
}
body.account_balance .balance-header-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: #f6f6f6;
display: flex;
align-items: center;
justify-content: center;
color: #d12128;
}
body.account_balance .balance-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
body.account_balance .balance-stat {
border: 1px solid #ececec;
border-radius: 14px;
padding: 1rem;
background: #fff;
}
body.account_balance .balance-stat .label {
display: block;
font-weight: 600;
font-size: 0.85rem;
color: #333;
margin-bottom: 0.4rem;
}
body.account_balance .balance-stat .value {
font-weight: 700;
font-size: 1.1rem;
}
body.account_balance .balance-stat .bar {
display: block;
height: 4px;
margin-top: 0.5rem;
border-radius: 999px;
background: #d12128;
}
body.account_balance .balance-filters {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
gap: 0.75rem;
align-items: end;
margin-bottom: 1rem;
}
body.account_balance .balance-filters label {
font-size: 0.75rem;
font-weight: 600;
color: #555;
margin-bottom: 0.35rem;
}
body.account_balance .balance-filters .input-with-icon {
position: relative;
}
body.account_balance .balance-filters .input-with-icon i {
position: absolute;
right: 0.65rem;
top: 50%;
transform: translateY(-50%);
color: #d12128;
}
body.account_balance .balance-filters .form-control,
body.account_balance .balance-filters .form-select {
border-radius: 999px;
padding-right: 1rem;
}
body.account_balance .balance-filters .btn-search {
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: #f5b5b5;
color: #d12128;
display: flex;
align-items: center;
justify-content: center;
background: #dd0201;
color: #fff;
font-weight: bold;
padding: 0;
}
body.account_balance .balance-table .table {
font-size: 0.85rem;
}
body.account_balance .balance-table thead th {
border-bottom: 1px solid #e5e5e5;
font-weight: 700;
color: #444;
}
body.account_balance .balance-table tbody tr {
border-radius: 8px;
}
body.account_balance .balance-table tbody td {
border-top: 1px solid #f0f0f0;
}
@media (max-width: 1200px) {
body.account_balance .balance-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.account_balance .balance-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
body.account_body .bg-account {
background: #fff;
}
@media (max-width: 991px) {
body.account_body .account-wrap {
padding: 1.5rem 1rem 2rem;
}
body.account_body .card-account .card-body {
padding: 1.5rem;
}
}
.b2b-register-hero {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.account_register .account-wrap.container-xxl,
.account_login .account-wrap.container-xxl {
max-width: none;
width: 100%;
height: 100%;
padding: 0;
}
body.account_login .b2b-register-hero,
body.account_register .b2b-register-hero {
padding: 0;
min-height: 0;
display: flex;
height: 100%;
height: 100vh;
}
/* Product page overrides */
body.product-product .product-detail-page,
body.product_product .product-detail-page {
margin-top: 1.5rem;
}
.product-gallery_container {
position: static;
top: auto;
}
#product-product #product-wrap {
height: auto;
}
.product-gallery_wrap {
height: 100%;
display: flex;
flex-direction: column;
}
#product-product .product-btn .btn#button-cart {
border-radius: 0.5rem;
background: #000;
}
#product-product .product-btn .btn.button_wishlist {
border-radius: 0.5rem;
}
.product-description li {
margin-bottom: 0.5rem;
list-style-type: disc;
list-style-position: inside;
}
.product-description ul {
margin-top: 1rem;
margin-bottom: 1rem;
}
.product-description iframe {
width: 100%;
border-radius: 0.5rem;
}
body.product-product .product-info_wrap,
body.product_product .product-info_wrap {
padding: 1.5rem 2.5rem !important;
}
/* Overrides placed at end to ensure priority */
.product-gallery_wrap {
position: static;
top: auto;
}
body.product-product .product-info_wrap,
body.product_product .product-info_wrap {
padding: 1.5rem 2.5rem !important;
}
.header-main-wrapper {
align-items: center;
gap: 1.25rem;
}
.header-main .btn-new-order {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
border-radius: 999px;
background: #27c24c;
color: #fff;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 6px 14px rgba(39, 194, 76, 0.3);
}
.header-main .btn-new-order:hover {
background: #20a140;
color: #fff;
}
.header-main .header-search .header-search-btn:not(.header-search-submit) {
width: 100%;
display: flex;
align-items: center;
gap: 0.65rem;
background: #f2f2f2;
border: 1px solid #e3e3e3;
border-radius: 999px;
padding: 0.55rem 1.1rem;
color: #555;
}
.header-main .header-search .header-search-btn i {
color: #999;
}
.header-main .header-search .header-search-btn .header-search-text {
display: none;
}
.header-main .header-search .header-search-b2b #search-b2b {
justify-content: flex-start;
flex: 1 1 auto;
gap: 0.65rem;
background: transparent;
border: 0;
padding: 0;
}
.header-main .header-search .header-search-b2b #search-b2b input {
flex: 1 1 auto;
min-width: 0;
background: #f2f2f2;
border: 1px solid #e3e3e3;
border-radius: 999px;
box-shadow: none;
padding: 0.55rem 1.1rem;
height: 38px;
color: #555;
}
.header-main .header-search .header-search-b2b #search-b2b input::placeholder {
color: rgba(0, 0, 0, 0.45);
}
.header-main .header-search .header-search-b2b .header-search-submit {
order: 2;
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: 0 0 auto;
width: auto;
border: 0;
background: #111;
padding: 0.35rem 0.8rem;
border-radius: 999px;
color: #fff;
margin-left: 0;
}
.header-main .header-search .header-search-b2b .header-search-submit i {
color: #fff;
font-size: 1rem;
}
.header-main .header-search .header-search-b2b .header-search-submit .header-search-text {
margin-left: 0.25rem;
}
.header-main .header-search .header-search-b2b .header-search-submit .header-search-text {
display: none;
}
.footer-wrap ul li a,
.footer-wrap .spacings ul li a {
color: #cbcbcb;
font-size: 13px;
}
.footer-wrap ul li a:hover,
.footer-wrap .spacings ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* Cart page layout */
.cart-page {
padding-bottom: 2.5rem;
}
/* Checkout page layout */
#checkout-checkout {
padding: 2.5rem 0 3rem;
}
#checkout-checkout .progress i {
top: 5px;
position: relative;
}
.checkout-wrap #content {
margin-top: 0;
}
.checkout_body .checkout-wrap {
overflow: clip;
}
#checkout-checkout .checkout-content,
#checkout-checkout .checkout-sidebar {
padding-left: 0;
padding-right: 0;
}
#checkout-checkout .checkout-content {
padding-right: 2rem;
}
#checkout-checkout .accordion-item {
border: 1px solid #efefef;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
margin-bottom: 1rem;
}
#checkout-checkout .accordion-button {
background: #f7f7f7;
color: #1a1a1a;
font-weight: 700;
}
#checkout-checkout .accordion-button:not(.collapsed) {
background: #ffe3dc;
color: #c81f1f;
box-shadow: none;
}
#checkout-checkout .accordion-button:focus {
border-color: transparent;
box-shadow: 0 0 0 0.2rem rgba(255, 77, 29, 0.2);
}
#checkout-checkout .accordion-body {
background: #fff;
}
#checkout-checkout .progress-container {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
}
#checkout-checkout .progress-container.container {
padding-left: 1.25rem;
padding-right: 1.25rem;
margin-left: 0;
margin-right: 0;
}
#checkout-checkout .progress-container .progress {
overflow: hidden;
}
#checkout-checkout .checkout-progress {
padding: 0 1rem;
height: 3px;
}
#checkout-checkout .checkout-progress .progress-bar {
background: linear-gradient(90deg, #e21b1b, #ff5a1a);
height: 3px;
}
#checkout-checkout .checkout-progress .progress-step {
position: absolute;
top: -0.6rem;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
font-weight: 600;
color: #1f1f1f;
white-space: nowrap;
}
#checkout-checkout .checkout-progress .step-start {
transform: translateX(0);
align-items: flex-start;
}
#checkout-checkout .checkout-progress .step-end {
transform: translateX(-100%);
align-items: flex-end;
}
#checkout-checkout .checkout-progress .inactive span {
color: #9b9b9b;
}
#checkout-checkout .checkout-progress .active span {
color: #1f1f1f;
}
#checkout-checkout .progress {
background: #f0f0f0;
}
#checkout-checkout .progress-bar {
background: linear-gradient(90deg, #e21b1b, #ff5a1a);
}
#checkout-checkout .progress .active i {
color: #e21b1b;
}
#checkout-checkout .progress .inactive i {
color: #dcdcdc;
}
.product-table td {
padding: 15px 12px !important;
vertical-align: middle !important;
border-bottom: 1px solid #f0f0f0 !important;
border-right: solid 1px rgba(0, 0, 0, 0.03);
}
#checkout-checkout #shipping-method .card-help,
#checkout-checkout #payment-method .card-help {
margin-bottom: 1rem;
color: #666;
}
#checkout-checkout #shipping-method .form-check,
#checkout-checkout #payment-method .form-check {
border: 0;
padding: 0.6rem 0 0.6rem 1.5rem;
margin: 0;
}
#checkout-checkout #shipping-method .form-check + .form-check,
#checkout-checkout #payment-method .form-check + .form-check {
border-top: 1px solid #ededed;
}
#checkout-checkout #shipping-method .form-check-input,
#checkout-checkout #payment-method .form-check-input {
margin-top: 0.45rem;
margin-left: -1.5rem;
}
#checkout-checkout #shipping-method .form-check-label,
#checkout-checkout #payment-method .form-check-label {
display: block;
width: 100%;
}
#checkout-checkout #shipping-method .form-check-label > i,
#checkout-checkout #payment-method .form-check-label > i {
display: none;
}
#checkout-checkout #shipping-method .form-check-label > div,
#checkout-checkout #payment-method .form-check-label > div {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 1rem;
}
#checkout-checkout #shipping-method .form-check-label > div p,
#checkout-checkout #payment-method .form-check-label > div p {
margin: 0;
color: #6b6b6b;
font-size: 0.9rem;
}
div#checkout-checkout .buttons {
margin-top: 1rem;
}
div#checkout-checkout .form-check {
margin-bottom: 0.5rem;
}
#checkout-checkout .checkout-section-heading {
font-weight: 700;
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #ededed;
}
#checkout-checkout .btn-primary,
#checkout-checkout .btn.btn-primary {
background: #ff4d1d;
border-color: #ff4d1d;
font-weight: 700;
border-radius: 999px;
}
#checkout-checkout .btn-primary:hover,
#checkout-checkout .btn.btn-primary:hover {
background: #e63b0c;
border-color: #e63b0c;
}
#checkout-checkout .btn-secondary,
#checkout-checkout .btn.btn-secondary {
background: #111;
border-color: #111;
border-radius: 999px;
font-weight: 700;
}
#checkout-checkout .btn-secondary:hover,
#checkout-checkout .btn.btn-secondary:hover {
background: #1f1f1f;
border-color: #1f1f1f;
}
#checkout-checkout #shipping-method .form-check-input,
#checkout-checkout #payment-method .form-check-input {
margin-top: 0;
}
#checkout-checkout .btn-primary,
#checkout-checkout .btn.btn-primary {
background: #dc0000;
border-color: #dc0000;
font-weight: 700;
border-radius: 999px;
border-radius: 0.5rem;
}
#checkout-checkout #payment-method.card.card-checkout {
background: #f5f5f5;
border-color: #e5e5e5;
opacity: 0.6;
}
#checkout-checkout #payment-method.card.card-checkout .quickcheckout-content {
pointer-events: auto;
}
#checkout-checkout .checkout-sidebar {
background: none;
padding: 0;
overflow: clip;
height: auto;
box-shadow: none;
display: block;
}
.checkout-wrap .checkout-sidebar:after {
display: none;
}
#checkout-checkout #mini_cart.card-cart {
background: #000;
padding: 1rem;
height: auto;
border-radius: 0.5rem;
position: sticky;
top: 150px;
}
/* ===== Collapsible cart preview (mobile checkout) =====
Preview button hidden on desktop; body always visible. */
#checkout-checkout #mini_cart .card-cart-preview { display: none; }
@media (max-width: 991.98px) {
/* === Mobile checkout header — branded gradient strip with logo, title, back link === */
.checkout_body .checkout_header {
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
border-bottom: 0;
position: relative;
}
.checkout_body .checkout_header .header-main { padding: 0; }
.checkout_body .checkout_header .container-xxl { padding: 0 18px; }
.checkout_body .checkout_header .header-main-wrapper { align-items: center; }
.checkout_body .checkout_header .header-logo {
flex-direction: row;
align-items: center;
gap: 14px;
padding: 10px 0;
}
.checkout_body .checkout_header #logo img { max-height: 36px; width: auto; }
.checkout_body .checkout_header .heading-title {
margin-left: auto;
padding-left: 14px;
border-left: 0;
font-size: .92rem;
flex: 1 1 auto;
text-align: right;
}
.checkout_body .checkout_header .heading-title h1 {
font-size: .85rem;
font-weight: 800;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: .03em;
color: #111;
margin: 0;
}
/* Slim accent bar under header in brand gradient. */
.checkout_body .checkout_header::after {
content: "";
display: block;
height: 3px;
background: linear-gradient(90deg, #d80117 0%, #ff6a00 100%);
}
/* Tighten outer paddings — there was a 2.5rem/3rem gap top and bottom on mobile too. */
#checkout-checkout { padding: .5rem 0 .8rem !important; }
.checkout_body main.checkout-wrap { padding-top: 0; padding-bottom: 0; margin-bottom: 0 !important; }
.checkout_body .checkout_header { margin-bottom: 0 !important; }
.quick-checkout #quickcheckoutconfirm { padding: 0 !important; }
#checkout-checkout .quickcheckoutleft > * { margin-bottom: .75rem !important; }
#checkout-checkout .card-checkout { margin-bottom: .75rem !important; }
#checkout-checkout #terms { margin-top: .25rem; }
/* The sidebar has a phantom 48px top gap from quick-checkout JS module padding;
overlay the quickcheckoutleft to the top. */
#checkout-checkout > .checkout-sidebar {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column;
}
#checkout-checkout .checkout-sidebar > .quickcheckoutleft {
margin-top: -48px !important;
margin-bottom: 0 !important;
padding: 0 !important;
position: relative;
z-index: 2;
}
/* Force the checkout parent to STACK (it's flex-row by default from checkout.css). */
.checkout_body #checkout-checkout,
#checkout-checkout {
flex-direction: column !important;
}
/* Both columns full width on mobile, sidebar (cart preview) shown FIRST. */
#checkout-checkout > .checkout-sidebar,
#checkout-checkout > .checkout-content {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}
#checkout-checkout > .checkout-sidebar { order: 0 !important; }
#checkout-checkout > .checkout-content { order: 1 !important; }
/* Make the sidebar inner column full-width on mobile (overrides .extra-width: 42%). */
#checkout-checkout .checkout-sidebar .quickcheckoutleft,
#checkout-checkout .checkout-sidebar .quickcheckoutleft.extra-width {
width: 100% !important;
float: none !important;
}
/* Cart card: not sticky, normal flow, sits above the form (it's already first in DOM). */
#checkout-checkout #mini_cart.card-cart {
position: static;
top: auto;
padding: 0;
border-radius: 12px;
overflow: hidden;
background: #fff;
margin-bottom: 1rem !important;
}
#checkout-checkout #mini_cart .card-cart-preview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
background: linear-gradient(90deg, #d80117 0%, #ff6a00 100%);
color: #fff;
border: 0;
padding: 12px 16px;
font-family: 'Commissioner', system-ui, sans-serif;
font-weight: 700;
text-align: left;
cursor: pointer;
border-radius: 12px;
}
#checkout-checkout #mini_cart .card-cart-preview__left,
#checkout-checkout #mini_cart .card-cart-preview__right {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
}
#checkout-checkout #mini_cart .card-cart-preview__icon { font-size: 1rem; }
#checkout-checkout #mini_cart .card-cart-preview__count { font-size: .85rem; }
#checkout-checkout #mini_cart .card-cart-preview__total {
font-size: 1.05rem;
font-weight: 800;
background: rgba(0, 0, 0, .18);
padding: 4px 10px;
border-radius: 999px;
}
#checkout-checkout #mini_cart .card-cart-preview__chev {
transition: transform .2s ease;
font-size: .8rem;
}
#checkout-checkout #mini_cart.is-open .card-cart-preview__chev { transform: rotate(180deg); }
/* Body collapsed by default; expand when .is-open is set on #mini_cart. */
#checkout-checkout #mini_cart .card-cart-body {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
background: #fff;
}
#checkout-checkout #mini_cart.is-open .card-cart-body {
max-height: 70vh;
overflow-y: auto;
border: 1px solid #ececec;
border-top: 0;
border-radius: 0 0 12px 12px;
margin-top: -12px;
padding-top: 16px;
}
/* Keep checkout-content visible — don't let sibling stacking hide it. */
#checkout-checkout .checkout-content { display: block !important; }
}
#checkout-checkout #mini_cart .card-header {
background: transparent;
color: #fff;
border: 1px solid #333;
margin-bottom: 1rem;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.5rem;
}
#checkout-checkout #mini_cart .card-header h3 {
margin: 0;
font-weight: 700;
}
#checkout-checkout #mini_cart .card-body {
background: transparent;
color: #fff;
max-height: 550px;
overflow: auto;
}
#checkout-checkout .card-cart .card-body .cart_item .cart_item-image img {
border-radius: 0.5rem;
overflow: hidden;
}
#checkout-checkout #mini_cart .cart_item {
background: #131313;
border-radius: 12px;
padding: 0.75rem;
margin: 0 0 0.75rem;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
#checkout-checkout #mini_cart .cart_item:last-child {
margin-bottom: 0;
}
#checkout-checkout #mini_cart .cart_item h4,
#checkout-checkout #mini_cart .cart_item div,
#checkout-checkout #mini_cart .cart_item-total {
color: #fff;
}
#checkout-checkout #mini_cart .cart_item-image {
display: flex;
align-items: center;
justify-content: center;
}
#account-address .account-address-card {
background: #fff;
border: 1px solid #e9edf3;
border-radius: 14px;
padding: 1.1rem 1.25rem 1.1rem 1.75rem;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
position: relative;
overflow: hidden;
}
#account-address .account-address-card:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 6px;
height: 100%;
background: linear-gradient(180deg, #dc0000, #fa9024);
}
#account-address .account-address-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff1f1;
color: #dc0000;
margin-bottom: 0.6rem;
box-shadow: 0 6px 16px rgba(220, 0, 0, 0.18);
}
#account-address .account-address-icon i {
font-size: 0.95rem;
}
#account-address .account-address-card:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
border-color: #f0c7c7;
}
#account-address .account-address-name {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.35rem;
letter-spacing: 0.01em;
}
#account-address .account-address-text {
margin: 0;
color: #334155;
line-height: 1.55;
white-space: pre-line;
}
#account-account .account-intro-cta {
margin-top: 0.75rem;
color: #6b7280;
font-size: 0.95rem;
}
#account-account .account-intro-link {
display: inline-block;
margin-left: 0.35rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #fff5f5;
color: #dc0000;
border: 1px solid #f5b7b7;
font-weight: 700;
text-decoration: none;
}
#account-account .account-intro-link:hover,
#account-account .account-intro-link:focus {
background: #dc0000;
color: #fff;
border-color: #dc0000;
}
.thankyou-wrap .thankyou-heading .heading-icon {
background: #1aa34a;
}
div#account-account .container-xxl.tw-py-16 {
padding: 0;
}
div#account-account .container-xxl.tw-py-16 {
padding-top: 0 !important;
}
#checkout-checkout #mini_cart .cart_item-badge {
background: #e21b1b;
color: #fff;
}
/* Keep the qty badge above the image and unclipped (quickcheckout + checkout) */
.card-cart .card-body .cart_item {
overflow: visible;
}
.card-cart .card-body .cart_item .cart_item-image .cart_item-badge {
z-index: 5;
}
#checkout-checkout #mini_cart .card-footer {
margin-top: 2rem;
background: rgba(255,255,255,0.1);
padding: 1rem;
border-radius: 1rem;
border-top: 0;
}
#checkout-checkout #mini_cart .cart_total {
border: none;
background: none;
padding: 0.4rem 0;
}
#checkout-checkout #mini_cart .cart_total + .cart_total {
border-top: solid 1px rgba(255,255,255,0.3);
padding: 1rem 0;
}
#checkout-checkout #mini_cart .cart_total-title {
color: #bdbdbd;
font-weight: 600;
}
#checkout-checkout #mini_cart .cart_total-text {
color: #fff;
font-weight: 800;
}
#checkout-checkout #mini_cart .cart_total.sum_total .cart_total-title,
#checkout-checkout #mini_cart .cart_total.sum_total .cart_total-text {
font-size: 1.05rem;
}
#checkout-checkout .checkout-sidebar .table,
#checkout-checkout .checkout-sidebar .list-group {
margin-bottom: 0;
}
#checkout-checkout .checkout-sidebar h4,
#checkout-checkout .checkout-sidebar h5 {
font-weight: 700;
}
@media (max-width: 991px) {
#checkout-checkout .checkout-sidebar,
#checkout-checkout .checkout-content {
padding-left: 0;
padding-right: 0;
}
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.cart-title {
font-size: 1.4rem;
font-weight: 800;
margin: 0 0 0.25rem;
}
.cart-subtitle {
margin: 0;
color: #8a8a8a;
}
.cart-actions {
display: flex;
gap: 0.75rem;
}
.btn-cart-secondary {
border: 1px solid #eee;
border-radius: 999px;
padding: 0.55rem 1.1rem;
background: #fff;
color: #111;
}
.btn-cart-primary {
border: 2px solid #ff4d1d;
border-radius: 999px;
padding: 0.55rem 1.4rem;
background: #fff;
color: #ff4d1d;
font-weight: 700;
}
.btn-cart-primary:hover {
background: #ff4d1d;
color: #fff;
}
.cart-totals .btn-cart-primary {
background: transparent;
color: #fff;
}
.cart-item.card {
border: 1px solid #ededed;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.cart-item-title a:hover {
color: #dc0000 !important;
}
.cart-item-actions {
display: inline-flex;
gap: 0.5rem;
}
.btn-cart-icon {
border: 0;
background: transparent;
color: #999;
}
.btn-cart-icon:hover {
color: #111;
}
.quantity-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #f6f6f6;
border-radius: 999px;
padding: 0.25rem 0.5rem;
}
.quantity-pill .form-control {
width: 48px;
border: 0;
background: transparent;
}
.quantity-pill .btn-qty {
border: 0;
background: transparent;
font-weight: 700;
}
.cart-item-total .label,
.cart-item-price .label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #9a9a9a;
}
.cart-item-total .value,
.cart-item-price .value {
font-weight: 700;
}
/* ---- Composition group (kit) in cart ---- */
.cart-item.cart-group {
position: relative;
border: 1px solid #f0d3d5;
border-left: 4px solid #c20613;
background: linear-gradient(180deg, #fff 0%, #fff7f7 100%);
padding-top: 1.6rem;
}
.cart-group__badge {
position: absolute;
top: -11px;
left: 18px;
display: inline-flex;
align-items: center;
gap: 6px;
background: #c20613;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 12px;
border-radius: 999px;
box-shadow: 0 4px 8px -3px rgba(194,6,19,0.45);
}
.cart-group__components {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed #e4c4c6;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.cart-group__component {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: #fff;
border: 1px solid #f0e3e3;
border-radius: 8px;
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cart-group__component:hover {
border-color: #c20613;
box-shadow: 0 4px 10px -6px rgba(194,6,19,0.4);
color: inherit;
text-decoration: none;
}
.cart-group__component-media {
position: relative;
flex: 0 0 40px;
width: 40px;
height: 40px;
border: 1px solid #eee;
border-radius: 6px;
background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cart-group__component-media img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.cart-group__component-qty {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: #c20613;
color: #fff;
font-size: 0.66rem;
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 2px 4px -1px rgba(194,6,19,0.5);
}
.cart-group__component-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.cart-group__component-name {
font-weight: 600;
font-size: 0.78rem;
color: #1a1a1a;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cart-group__component--outstock {
border: 1px solid #dc0000;
}
.cart-group__component--outstock .cart-group__component-name {
color: #dc0000;
}
.cart-group__component-meta {
font-size: 0.7rem;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 767px) {
.cart-group__components {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---- Composition tags in mini cart ---- */
.cart_item-settag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #c20613;
margin: 2px 0 4px;
}
.cart_item-settag--component {
color: #999;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.cart_item-setcount {
font-size: 0.7rem;
color: #888;
margin: 0 0 4px;
}
/* ---- Quickcheckout master/leader row ---- */
#checkout-checkout #mini_cart .cart_item--leader .cart_item-info h4 {
font-size: 0.78rem;
font-weight: 400;
line-height: 1.3;
margin: 0 0 2px;
}
#checkout-checkout #mini_cart .cart_item--leader .cart_item-settag {
color: #ff3b30;
}
#checkout-checkout #mini_cart .cart_item--leader .cart_item-setcount {
color: #bbb;
}
#checkout-checkout #mini_cart .cart_item--component {
padding-left: 14px;
border-left: 2px solid #f0d3d5;
}
.cart_mini-components {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
margin: 0 0 12px;
padding: 8px 0 0 14px;
border-left: 2px solid #f0d3d5;
}
.cart_mini-component {
position: relative;
display: block;
}
.cart_mini-component-media {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border: 1px solid #eee;
border-radius: 6px;
background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: border-color 0.15s ease;
}
.cart_mini-component:hover .cart_mini-component-media {
border-color: #c20613;
}
.cart_mini-component-media img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.cart_mini-component-qty {
position: absolute;
top: -5px;
right: -5px;
min-width: 16px;
height: 16px;
padding: 0 3px;
border-radius: 999px;
background: #c20613;
color: #fff;
font-size: 0.6rem;
font-weight: 700;
line-height: 16px;
text-align: center;
}
.cart-totals {
background: #0c0c0c;
color: #fff;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 16px 32px rgba(0,0,0,0.2);
}
.cart-totals h4 {
font-weight: 700;
}
.cart-totals .border-top {
border-color: rgba(255,255,255,0.15) !important;
}
.cart-totals .btn-cart-primary {
border-color: #ff4d1d;
color: #fff;
}
.cart-totals .btn-cart-primary:hover {
background: #ff4d1d;
}
#account-order .btn-danger {
background-color: #dc0000;
border-color: #dc0000;
}
#account-order .btn-danger:hover,
#account-order .btn-danger:focus {
background-color: #b90000;
border-color: #b90000;
}
.account-logo {
max-width: 300px;
margin: 0 auto 20px;
display: block;
}
.account-logo img {
width: 100%;
height: auto;
filter: brightness(0) invert(1);
}
.card-account #content h3 {
line-height: normal;
font-size: 1rem;
letter-spacing: 1px;
}
body.product-product .product-gallery-thumbs,
body.product_product .product-gallery-thumbs {
display: flex;
flex-direction: column;
gap: 12px;
}
.product-gallery_wrap {
padding-right: 1.5rem;
padding-left: 0;
}
body.product-product .product-thumb,
body.product_product .product-thumb {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ececec;
border-radius: 12px;
padding: 6px;
background: #fff;
}
.product-thumb {
width: 70px !important;
height: 70px !important;
}
.product-table .col-image {
padding: 0 !important;
align-items: center;
text-align: center !important;
vertical-align: middle !important;
}
.product-table .col-image img {
margin: 0 auto;
}
.product-table .col-availability {
white-space: normal;
}
.product-table .col-availability .badge {
display: inline-block;
white-space: normal;
word-break: break-word;
line-height: 1.25;
max-width: 100%;
}
body.product-product .product-gallery-main,
body.product_product .product-gallery-main {
border-radius: 16px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
padding: 0;
border: 1px solid #ececec;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
overflow:hidden;
}
body.product-product .product-gallery .row figure,
body.product_product .product-gallery .row figure {
margin: 0;
}
body.product-product .product-gallery .row figure:first-child,
body.product_product .product-gallery .row figure:first-child {
grid-column: 2 / 3;
grid-row: 1 / span 12;
border-radius: 16px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
}
body.product-product .product-gallery .row figure:not(:first-child),
body.product_product .product-gallery .row figure:not(:first-child) {
grid-column: 1 / 2;
}
body.product-product .product-gallery .row figure:not(:first-child) img,
body.product_product .product-gallery .row figure:not(:first-child) img {
border: 1px solid #ececec;
border-radius: 12px;
padding: 6px;
background: #fff;
}
body.product-product .product-info_wrap,
body.product_product .product-info_wrap {
background: #ffffff !important;
border-radius: 18px !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
}
body.product-product .product-info-header,
body.product_product .product-info-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
body.product-product .product-badge,
body.product_product .product-badge {
background: #111;
color: #fff;
border-radius: 999px;
padding: 0.25rem 0.75rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.05em;
}
body.product-product .product-wishlist,
body.product_product .product-wishlist {
border: 0;
background: transparent;
color: #888;
font-size: 1.1rem;
}
body.product-product .product-wishlist:hover,
body.product_product .product-wishlist:hover {
color: #c20000;
}
body.product-product .product-info_wrap h1,
body.product_product .product-info_wrap h1 {
font-size: 1.35rem;
font-weight: 800;
line-height: 1.35;
}
body.product-product .product-details li,
body.product_product .product-details li {
list-style: none;
display: inline-flex;
align-items: center;
padding: 0.35rem 0.7rem;
border-radius: 999px;
background: #f6f6f6;
font-size: 0.75rem;
font-weight: 600;
color: #555;
margin: 0 0.35rem 0.35rem 0;
}
body.product-product .product-stock i,
body.product_product .product-stock i {
margin-right: 0.35rem;
color: currentColor;
}
body.product-product .product-stock.text-warning,
body.product_product .product-stock.text-warning {
color: #b95a00 !important;
}
body.product-product .product-price,
body.product_product .product-price {
display: flex;
align-items: baseline;
gap: 12px;
margin: 1.2rem 0;
}
body.product-product .product-price .price-new,
body.product_product .product-price .price-new {
color: #12b200;
font-size: 2rem;
font-weight: 800;
}
body.product-product .product-price .price-old,
body.product_product .product-price .price-old {
color: #9e9e9e;
text-decoration: line-through;
}
/* B2B price pair: Retail + Wholesale (with eye-slash) — matches design */
body.product-product .price-pair,
body.product_product .price-pair {
display: flex;
flex-wrap: nowrap;
gap: 12px;
margin: 1.2rem 0;
align-items: stretch;
}
.price-pair .price-card {
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 14px 18px;
border: 1px solid #ececec;
border-radius: 12px;
background: #fff;
min-height: 88px;
gap: 4px;
}
.price-pair .price-card .price-tag {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: #8a8a8a;
}
.price-pair .price-card .price-subline {
font-size: 0.78rem;
color: #777;
margin-top: 2px;
}
.price-pair .price-card .price-subline strong {
color: #444;
font-weight: 700;
}
.price-pair .price-card .price-subline .price-old {
font-size: 0.75rem;
margin-right: 4px;
}
.price-pair .price-amount {
color: #d12128;
font-size: 1.8rem;
font-weight: 800;
line-height: 1.05;
}
.price-pair .price-amount--retail {
color: #12b200;
}
.price-pair .price-amount--sm {
font-size: 1.15rem;
}
.price-pair .price-old {
color: #9e9e9e;
text-decoration: line-through;
font-size: 0.85rem;
font-weight: 400;
margin-right: 6px;
}
/* Wholesale card: red border, header row with eye-slash toggle, expandable body */
.price-card--wholesale {
border-color: #d12128 !important;
border-width: 1.5px !important;
align-items: center !important;
text-align: center !important;
justify-content: center !important;
position: relative;
}
.price-card--wholesale .price-card-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
}
/* Eye toggle floats top-right so the label can stay centered */
.price-card--wholesale .price-eye-btn {
position: absolute;
top: 10px;
right: 10px;
}
.price-card--wholesale .price-tag {
color: #d12128 !important;
}
.price-card--wholesale .price-eye-btn {
border: 0;
background: transparent;
color: #d12128;
font-size: 1.25rem;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
border-radius: 8px;
transition: color 0.15s ease, background-color 0.15s ease;
}
.price-card--wholesale .price-eye-btn:hover,
.price-card--wholesale .price-eye-btn:focus {
color: #d12128;
background: #fbe7e8;
outline: none;
}
.price-card--wholesale .price-card-body {
margin-top: 8px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
gap: 2px;
}
.price-card--wholesale .price-card-body[hidden] {
display: none;
}
.price-card--wholesale .price-amount {
color: #d12128;
}
#product-product .price-pair span + span,
#product-product .price-card span + span {
margin-left: 0;
}
@media (max-width: 767px) {
body.product-product .price-pair,
body.product_product .price-pair {
flex-direction: column;
}
}
/* legacy compat (deprecated, kept harmless) */
body.product-product .product-price--b2b,
body.product_product .product-price--b2b {
display: flex;
align-items: stretch;
gap: 0;
margin: 1.2rem 0;
padding: 0;
border: 1px solid #ececec;
border-radius: 12px;
background: #fafafa;
max-width: 520px;
overflow: hidden;
}
.product-price--b2b .price-col {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: flex-start;
gap: 4px;
padding: 14px 16px;
}
.product-price--b2b .price-sep {
flex: 0 0 1px;
width: 1px;
align-self: stretch;
background: #e2e2e2;
}
.product-price--b2b .price-tag {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: #8a8a8a;
white-space: nowrap;
}
.product-price--b2b .price-amount {
color: #d12128;
font-size: 1.7rem;
font-weight: 800;
line-height: 1.05;
}
.product-price--b2b .price-old {
color: #9e9e9e;
text-decoration: line-through;
font-size: 0.85rem;
font-weight: 400;
}
/* cancel the global span+span left margin so columns stay centered */
#product-product .product-price--b2b span + span {
margin-left: 0;
}
/* B2B Χονδρική / Λιανική toggle */
body.product-product .price-toggle,
body.product_product .price-toggle {
display: inline-flex;
background: #f4f4f4;
border: 1px solid #ececec;
border-radius: 999px;
padding: 3px;
margin: 0 0 0.65rem;
gap: 2px;
}
.price-toggle .price-toggle-btn {
border: 0;
background: transparent;
color: #555;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
padding: 0.35rem 1rem;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.price-toggle .price-toggle-btn:hover {
color: #111;
}
.price-toggle .price-toggle-btn.active {
background: #111;
color: #fa9024;
}
/* Retail card (single column) — reuses .product-price--b2b shell */
body.product-product .product-price--retail,
body.product_product .product-price--retail {
display: flex;
align-items: stretch;
margin: 1.2rem 0;
padding: 0;
border: 1px solid #ececec;
border-radius: 12px;
background: #fafafa;
max-width: 520px;
overflow: hidden;
}
.product-price--retail .price-col {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
padding: 14px 16px;
}
.product-price--retail .price-tag {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: #8a8a8a;
white-space: nowrap;
}
.product-price--retail .price-amount {
color: #12b200;
font-size: 1.7rem;
font-weight: 800;
line-height: 1.05;
}
#product-product .product-price--retail span + span {
margin-left: 0;
}
/* Mobile: stack the two price columns vertically */
@media (max-width: 767px) {
body.product-product .product-price--b2b,
body.product_product .product-price--b2b {
flex-direction: column;
max-width: 100%;
width: 100%;
}
.product-price--b2b .price-sep {
width: 100%;
height: 1px;
align-self: stretch;
}
}
body.product-product .product-btn .btn-primary,
body.product_product .product-btn .btn-primary {
border-radius: 999px;
background: #111;
border-color: #111;
padding: 0.9rem 1.25rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
body.product-product .product-btn .btn-primary:hover,
body.product_product .product-btn .btn-primary:hover {
background: #000;
border-color: #000;
}
body.product-product .collection_tabs .nav-tabs,
body.product_product .collection_tabs .nav-tabs {
border-bottom: 0;
gap: 12px;
justify-content: center;
}
body.product-product .collection_tabs .nav-tabs .nav-link,
body.product_product .collection_tabs .nav-tabs .nav-link {
border-radius: 999px;
border: 1px solid #e7e7e7;
padding: 0.55rem 1.5rem;
font-weight: 700;
color: #333;
}
body.product-product .collection_tabs .nav-tabs .nav-link.active,
body.product_product .collection_tabs .nav-tabs .nav-link.active {
background: #c20000;
border-color: #c20000;
color: #fff;
}
.brand-filter-sidebar {
height: calc(100vh - 120px) !important;
}
.brand-list {
max-height: 100% !important;
overflow: auto !important;
}
.product-table .col-wishlist button, .product-table .col-buy button {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.product-table .col-wishlist button, .product-table .col-buy button {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.product-table th {
font-size: 9px !important;
overflow: visible !important;
text-overflow: unset !important;
white-space: normal !important;
vertical-align: middle !important;
}
.product-table .col-retail, .product-table .col-wholesale {
min-width: 80px !important;
width: 100px !important;
}
.product-table .price-old {
color: #9a9a9a;
font-weight: 400;
font-size: 0.85rem;
}
.product-table .price-wholesale {
color: #8b0000;
font-weight: 700;
}
#account-product-list .product-table .price.price-old {
color: #9a9a9a !important;
font-weight: 400 !important;
font-size: 0.85rem !important;
}
#account-product-list .product-table .price.price-wholesale {
color: #111 !important;
font-weight: 700 !important;
}
#account-product-list .product-table .price.price-wholesale.price-discounted {
color: #dc0000 !important;
}
.qty-pill {
height: 35px;
padding: 0 !important;
gap: 0 !important;
}
.qty-pill .btn-qty {
width: 30px;
height: 35px;
padding: 0;
padding: 0;
}
.qty-pill .qty-value {
height: 35px;
line-height: 35px;
width: 40px;
border-left: solid 1px rgba(0,0,0,0.1);
border-right: solid 1px rgba(0,0,0,0.1);
background: #f9f9f9;
}
.page-item .page-link {
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.brand-label {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.brand-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
flex-direction: column;
}
.brand-logo {
max-width: 72px;
max-height: 72px;
width: auto;
height: auto;
object-fit: contain;
}
.brand-label .brand-logo {
max-height: 50px !important;
}
.category-item.category-top {
background: #c20000 !important;
color: #fff;
border-radius: 6px;
padding: 4px 8px;
margin: 4px 0;
}
.category-item.category-top .category-name,
.category-item.category-top .category-toggle i {
color: #fff !important;
font-weight: bold;
}
.category-item.category-top .category-checkbox input[type="checkbox"]:checked + .category-name {
color: #fff !important;
}
.category-item.category-top.active .category-name,
.category-item.category-top .category-name:hover,
.category-item.category-top .category-name:focus {
color: #fff !important;
}
.category-name {
font-size: 0.78rem !important;
color: #dc0000 !important;
cursor: pointer !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
.brand-name {
display: block;
font-size: 0.85rem;
line-height: 1.2;
}
@media (max-width: 991px) {
body.product-product .product-gallery .row,
body.product_product .product-gallery .row {
grid-template-columns: 1fr !important;
}
body.product-product .product-gallery .row figure:first-child,
body.product_product .product-gallery .row figure:first-child {
grid-column: 1 / -1;
grid-row: auto;
}
}
/* Footer overrides */
footer {
background: #0b0b0b;
color: #fff;
}
footer .footer-wrap {
background: #0b0b0b;
padding-top: 2.5rem;
}
.footer-content {
color: #fff;
}
footer .footer-title {
color: #fff;
position: relative;
padding-bottom: 0.6rem;
margin-bottom: 1rem;
}
footer .footer-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 3px;
background: #c20000;
}
footer .footer-content a,
footer .footer-content li {
color: #d7d7d7;
}
footer .copyright {
background: #000;
padding: 1.5rem 0;
}
body.account_login,
body.account_register {
background: #c20000;
}
body.account_login #top,
body.account_login header,
body.account_login footer,
body.account_register #top,
body.account_register header,
body.account_register footer {
display: none !important;
}
body.account_login .b2b-register-hero,
body.account_register .b2b-register-hero {
min-height: 100vh;
background: linear-gradient(135deg, #c20000 0%, #c95b1a 100%);
padding: 3.5rem 2.5rem;
}
body.account_login .b2b-register-layout,
body.account_register .b2b-register-layout {
width: min(1200px, 95vw);
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 3rem;
align-items: center;
}
body.account_login .b2b-register-brand,
body.account_register .b2b-register-brand {
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
}
body.account_login .account-logo-placeholder,
body.account_register .account-logo-placeholder {
width: min(420px, 70vw);
aspect-ratio: 4 / 3;
border-radius: 12px;
border: 2px dashed rgba(255, 255, 255, 0.7);
position: relative;
}
body.account_login .account-logo-placeholder::after,
body.account_register .account-logo-placeholder::after {
content: 'LOGO';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.9);
font-weight: 700;
letter-spacing: 0.2em;
}
body.account_login .b2b-register-card,
body.account_register .b2b-register-card {
width: 100%;
}
body.account_login .card-account,
body.account_register .card-account {
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}
body.account_login .account-register-layout,
body.account_register .account-register-layout {
max-width: 100%;
}
body.account_login .account-tabs,
body.account_register .account-tabs {
border-bottom: 1px solid #e4e4e4;
}
body.account_login .account-tabs .col-6,
body.account_register .account-tabs .col-6 {
border-right: 1px solid #e4e4e4;
}
body.account_login .account-tabs .col-6:last-child,
body.account_register .account-tabs .col-6:last-child {
border-right: 0;
}
body.account_login .account-tabs h3,
body.account_register .account-tabs h3 {
text-transform: uppercase;
font-size: 0.95rem;
font-weight: 700;
color: #4b4b4b;
letter-spacing: 0.08em;
}
body.account_login .account-tabs a,
body.account_register .account-tabs a {
color: inherit;
text-decoration: none;
}
body.account_login .account-tabs .active h3,
body.account_register .account-tabs .active h3 {
color: #b30000;
}
body.account_login .account-tabs .active,
body.account_register .account-tabs .active {
position: relative;
}
body.account_login .account-tabs .active::after,
body.account_register .account-tabs .active::after {
content: '';
position: absolute;
left: 12%;
right: 12%;
bottom: -1px;
height: 4px;
background: #b30000;
}
body.account_login .account-register-form,
body.account_register .account-register-form {
max-width: 100% !important;
padding: 0 2.5rem;
}
body.account_login .account-section-title,
body.account_register .account-section-title {
color: #c20000;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85rem;
margin-bottom: 1rem;
}
body.account_login .account-section-head,
body.account_register .account-section-head {
margin-bottom: 1.2rem;
}
body.account_login .account-required-note,
body.account_register .account-required-note {
color: #7a7a7a;
font-size: 0.75rem;
}
body.account_login .account-field .form-control,
body.account_register .account-field .form-control {
border-radius: 999px;
padding: 0.75rem 1.25rem;
border-color: #dedede;
background: #fafafa;
}
body.account_login .account-field .form-control::placeholder,
body.account_register .account-field .form-control::placeholder {
color: #444;
font-weight: 600;
font-size: 0.75rem;
}
body.account_login .account-check,
body.account_register .account-check {
font-size: 0.85rem;
}
body.account_login .account-submit,
body.account_register .account-submit {
border-radius: 999px;
background: #111;
border-color: #111;
padding: 0.9rem 1.25rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
body.account_login .account-submit:hover,
body.account_register .account-submit:hover {
background: #000;
border-color: #000;
}
@media (max-width: 991px) {
body.account_login .b2b-register-hero,
body.account_register .b2b-register-hero {
padding: 2rem 1.25rem 2.5rem;
min-height: 100svh;
}
body.account_login .b2b-register-layout,
body.account_register .b2b-register-layout {
grid-template-columns: 1fr;
gap: 2rem;
align-items: flex-start;
}
body.account_login .b2b-register-brand,
body.account_register .b2b-register-brand {
order: 1;
min-height: auto;
}
body.account_login .b2b-register-card,
body.account_register .b2b-register-card {
order: 2;
}
body.account_login .account-register-form,
body.account_register .account-register-form {
max-height: 62svh;
overflow-y: auto;
padding-right: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
scrollbar-gutter: stable;
}
}
.header-main {
padding-top: 0;
padding-bottom: 1.5rem;
}
.header-main .btn-new-order {
color: #fff !important;
box-shadow: none;
}
.bannerhomeleft .banner-image {
height: 0;
position: relative;
overflow: hidden;
padding-bottom: 167px;
}
.contenttophome .container-xxl {
padding: 0;
}
.bannerhomeleft .banner-image img {
width: 100%;
position: absolute;
height: 100%;
object-fit: cover;
}
.bannerhomeleft {
margin-bottom: 20px;
}
.americathomebanners aside#column-left {
width: 100%;
}
.americathomebanners .column-wrapper {
max-width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.bannerhomeleft .banner-col.col-12.col-md-0 {
display: grid;
grid-template-columns: 50% 50%;
gap: 10px;
}
.bannerhomethree .banner-col.col-12.col-md-0 {
display: grid;
grid-template-columns: 33% 33% 33%;
gap: 10px;
}
.americathomebanners img {
width: 100%;
}
.americathomebanners .banner-col.col-12.col-md-0 {
padding: 0;
}
.americathomebanners .container-xxl.module-container {
padding: 0 12px;
}
.americathomebanners {
margin-top: 30px;
}
.threemainbanners .banner-image {
overflow: hidden;
}
.threemainbanners .banner-image:Hover img {
transition: all .3s ease-in;
}
.hometopbanners aside#column-right {
width: 100%;
}
.verticalbanners .banner-image img {
width: 100%;
}
.verticalbanners .banner-col.col-12.col-md-0 {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media(max-width: 768px){
.bannerhomeleft .banner-col.col-12.col-md-0 {
display: grid;
grid-template-columns: 1fr;
}
.bannerhomeleft .banner-image {
height: auto;
position: relative;
overflow: hidden;
padding-bottom: 0;
}
.bannerhomeleft .banner-image img {
position: relative;
}
}
div#common-home .container-xxl {
max-width: 1500px;
}
.slideshow-slide-wrapper {
border-radius: 0.5rem;
}
.banner-col .banner-item {
border-radius: 0.5rem;
overflow: hidden;
}
.bannerhomeleft .banner-image img {
position: relative;
width: 100%;
height: auto;
}
.slideshow-swiper {
position: relative;
}
.slideshow-swiper .swiper-pagination {
position: absolute;
bottom: 14px;
right: 16px;
left: auto;
width: auto;
padding: 6px 10px;
border-radius: 999px;
background: rgba(17, 17, 17, 0.55);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(6px);
}
.slideshow-swiper .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 4px !important;
background: rgba(255, 255, 255, 0.7);
opacity: 1;
}
.slideshow-swiper .swiper-pagination-bullet-active {
background: #ffffff;
transform: scale(1.15);
}
@media (max-width: 767.98px) {
.slideshow-swiper .swiper-pagination {
bottom: 10px;
right: 10px;
padding: 5px 8px;
}
}
.contact-hero {
margin: 2.5rem 0 1.5rem;
}
.contact-title {
font-weight: 700;
font-size: 2.2rem;
margin-bottom: 0.4rem;
}
.contact-subtitle {
color: #5a5a5a;
margin-bottom: 0;
}
.contact-card {
background: #ffffff;
border: 1px solid #f0e5dd;
border-radius: 18px;
padding: 22px;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
}
.contact-store {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.35rem;
}
.contact-address {
margin-bottom: 0.75rem;
color: #4b4b4b;
}
.contact-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-top: 18px;
}
.contact-label {
display: block;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #888;
margin-bottom: 4px;
}
.contact-value {
color: #1f1f1f;
margin-bottom: 10px;
}
.contact-form-title {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 14px;
}
.contact-form .form-control {
border-radius: 12px;
border-color: #e6d8cf;
padding: 10px 12px;
}
.contact-form .btn-primary {
border-radius: 999px;
padding: 10px 22px;
font-weight: 600;
}
.contact-map {
margin: 2rem 0 1rem;
border-radius: 18px;
overflow: hidden;
border: 1px solid #f0e5dd;
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
}
.contact-map iframe {
width: 100%;
height: 420px;
display: block;
}
@media (max-width: 767.98px) {
.contact-title {
font-size: 1.8rem;
}
.contact-card {
padding: 18px;
}
.contact-map iframe {
height: 300px;
}
}
.success-wrap {
margin: 2.5rem auto 3rem;
display: flex;
justify-content: center;
}
.success-card {
background: #ffffff;
border-radius: 24px;
padding: 48px 44px 40px;
border: 1px solid #f0f0f0;
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.09);
max-width: 560px;
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
}
.success-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, #18a34a, #34c76a);
}
.success-icon {
width: 84px;
height: 84px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(24, 163, 74, 0.10);
color: #18a34a;
font-size: 2rem;
margin: 0 auto 20px;
box-shadow: 0 0 0 8px rgba(24, 163, 74, 0.06);
animation: successPop 0.35s ease-out;
}
@keyframes successPop {
0% { transform: scale(0.4); opacity: 0; }
70% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
.success-title {
font-size: 1.75rem;
font-weight: 800;
color: #151515;
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.success-message {
color: #5a5a5a;
font-size: 0.95rem;
line-height: 1.6;
margin: 0 auto 1.75rem;
max-width: 440px;
}
.success-message p { margin-bottom: 0.6rem; }
.success-message p:last-child { margin-bottom: 0; }
.success-actions .btn {
border-radius: 999px;
padding: 12px 30px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
background: #111;
border-color: #111;
}
.success-actions .btn:hover { background: #e30613; border-color: #e30613; }
@media (max-width: 767.98px) {
.success-card {
padding: 34px 22px 28px;
border-radius: 20px;
}
.success-icon { width: 72px; height: 72px; font-size: 1.7rem; }
.success-title {
font-size: 1.45rem;
}
}
/* === PDP redesign: qty pill, add-to-cart, tabs === */
body.product-product .qty-pill,
body.product_product .qty-pill {
display: inline-flex;
align-items: center;
background: #f4f4f4;
border: 1px solid #ececec;
border-radius: 999px;
padding: 4px;
min-width: 220px;
justify-content: space-between;
gap: 8px;
}
body.product-product .qty-pill .btn-qty,
body.product_product .qty-pill .btn-qty {
border: 0;
background: #fff;
color: #111;
font-weight: 700;
width: 36px;
height: 36px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: background-color 0.15s ease, color 0.15s ease;
}
body.product-product .qty-pill .btn-qty:hover,
body.product_product .qty-pill .btn-qty:hover {
background: #111;
color: #fff;
}
body.product-product .qty-pill .qty-value,
body.product_product .qty-pill .qty-value {
font-size: 1.05rem;
font-weight: 700;
color: #111;
flex: 1;
text-align: center;
}
body.product-product .product-btn .btn#button-cart,
body.product_product .product-btn .btn#button-cart {
background: #111;
color: #fff;
border: 0;
border-radius: 999px;
padding: 0.95rem 1.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: background-color 0.2s ease;
}
body.product-product .product-btn .btn#button-cart:hover,
body.product_product .product-btn .btn#button-cart:hover {
background: #d12128;
}
body.product-product .product-btn .btn#button-cart i,
body.product_product .product-btn .btn#button-cart i {
font-size: 1.15rem;
}
body.product-product #product-tabs .nav-tabs,
body.product_product #product-tabs .nav-tabs {
border-bottom: 0;
justify-content: center;
gap: 10px;
margin-bottom: 1.5rem;
}
body.product-product #product-tabs .nav-tabs .nav-link,
body.product_product #product-tabs .nav-tabs .nav-link {
border: 1px solid #ececec;
background: #fff;
color: #555;
border-radius: 999px;
padding: 0.65rem 1.5rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
font-size: 0.85rem;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.product-product #product-tabs .nav-tabs .nav-link:hover,
body.product_product #product-tabs .nav-tabs .nav-link:hover {
color: #d12128;
border-color: #d12128;
}
body.product-product #product-tabs .nav-tabs .nav-link.active,
body.product_product #product-tabs .nav-tabs .nav-link.active {
background: #d12128;
color: #fff;
border-color: #d12128;
}
/* Home container widened to 1800px for the 9/3 above-row + the rest of the home blocks */
div#common-home .container-xxl {
max-width: 1800px;
}
/* Above-row 9/3 grid — full flex chain so inner widgets fill the row height */
.above-row {
align-items: stretch !important;
margin-bottom: 1.5rem !important;
}
.above-row__main,
.above-row__side {
display: flex !important;
flex-direction: column !important;
}
/* Wrappers between the col and the actual widget */
.above-row__main > .above-content,
.above-row__main .above-content > .container-xxl,
.above-row__side > .above-sidebar {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The actual widgets */
.above-row__main .car-search-hero,
.above-row__side .tire-search-widget {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
/* ============================================================
Tire Search compact widget — dark theme
============================================================ */
.tire-search-widget {
background: #111;
border: 1px solid #1f1f1f;
border-radius: 14px;
padding: 20px 24px 22px;
max-width: 420px;
width: 100%;
margin: 1.2rem auto;
color: #fff;
}
.tire-search-widget__diagram {
text-align: center;
margin: 0 0 14px;
}
.tire-search-widget__diagram svg {
width: 100%;
max-width: 100%;
height: auto;
display: inline-block;
}
.tire-search-widget__title {
color: #fff;
font-size: 1.15rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
margin: 0 0 6px;
text-align: center;
}
.tire-search-widget__sub {
color: #c8c8c8;
font-size: 0.82rem;
text-align: center;
margin: 0 0 16px;
line-height: 1.35;
}
.tire-search-widget__form {
display: flex;
flex-direction: column;
gap: 10px;
}
.tire-search-widget__field {
position: relative;
}
.tire-search-widget__select {
width: 100%;
background: #fff;
border: 1px solid #fff;
color: #111;
border-radius: 8px;
padding: 0.65rem 38px 0.65rem 14px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
outline: none !important;
box-shadow: none !important;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 10px 7px;
}
.tire-search-widget__select:focus,
.tire-search-widget__select:focus-visible,
.tire-search-widget__select:active {
outline: none !important;
box-shadow: none !important;
border-color: #fff !important;
}
.tire-search-widget__select:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.tire-search-widget__select option {
background: #fff;
color: #111;
}
.tire-search-widget__submit {
margin-top: 8px;
background: #dc0000;
color: #fff;
border: 0;
border-radius: 8px;
padding: 0.8rem 1rem;
font-weight: 800;
font-size: 0.92rem;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.15s ease;
width: 100%;
outline: none !important;
box-shadow: none !important;
}
.tire-search-widget__submit:hover,
.tire-search-widget__submit:focus,
.tire-search-widget__submit:focus-visible,
.tire-search-widget__submit:active {
background: #b30000;
outline: none !important;
box-shadow: none !important;
}
.tire-search-widget__submit i {
margin-right: 6px;
}
/* Sidebar (compact) header: mirror the vehicle-search box — icon + left title */
.tire-search-widget__head {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 12px;
}
.tire-search-widget__icon {
color: #dc0000;
font-size: 1.15rem;
}
.tire-search-widget__count {
margin-top: 12px;
font-size: 0.78rem;
color: #bdbdbd;
text-align: center;
}
.tire-search-widget__count strong {
color: #fff;
font-weight: 800;
}
/* Compact skin — no diagram, tighter, fits the category sidebar */
.tire-search-widget--compact {
padding: 16px 14px 14px;
max-width: 100%;
margin: 0 0 1rem;
border-radius: 10px;
}
.tire-search-widget--compact .tire-search-widget__head {
margin-bottom: 12px;
}
.tire-search-widget--compact .tire-search-widget__title {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: left;
line-height: 1.2;
margin: 0;
}
.tire-search-widget--compact .tire-search-widget__form {
gap: 8px;
}
.tire-search-widget--compact .tire-search-widget__submit {
padding: 0.7rem 1rem;
font-size: 0.85rem;
}
/* Compact selects — mirror the vehicle-search selects: numbered step badge, outline
chevron, grey border, regular (non-uppercase) text. Sidebar only; the home-hero
(full skin) tyre box keeps its own bold style. */
.tire-search-widget__step {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: #dc0000;
color: #fff;
font-size: 0.68rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.tire-search-widget--compact .tire-search-widget__select {
height: 40px;
padding: 0 30px 0 34px;
border: 1px solid #e3e3e3;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px;
}
.tire-search-widget--compact .tire-search-widget__select:focus,
.tire-search-widget--compact .tire-search-widget__select:focus-visible,
.tire-search-widget--compact .tire-search-widget__select:active {
border-color: #e3e3e3 !important;
}
.tire-search-widget--compact .tire-search-widget__select:disabled {
background-color: #f0f0f0;
color: #aaa;
opacity: 1;
}
/* Inside the Fancybox modal — slightly wider, still centered */
.fancybox--vehicle-search .tire-search-widget {
max-width: 420px;
margin: 0 auto;
}
/* Frame the modal: padded hero, rounded corners (the hero supplies its own radius). */
.fancybox--vehicle-search .fancybox__content {
padding: 0;
max-width: 96vw;
}
.fancybox--vehicle-search .container-xxl {
padding-left: 0;
padding-right: 0;
max-width: none;
}
.fancybox--vehicle-search .car-search-hero {
margin: 0;
padding: 44px 36px 40px;
border-radius: 18px;
}
/* Let the 3-up selects shrink so the desktop row never overflows the modal. */
.fancybox--vehicle-search .cs-select,
.fancybox--vehicle-search .cs-input {
min-width: 0;
}
/* Mobile only: the modal is narrow, so stack the fields into a single column. */
@media (max-width: 991px) {
.fancybox--vehicle-search .car-search-hero {
padding: 32px 18px 28px;
}
.fancybox--vehicle-search .car-search-hero .cs-fields {
grid-template-columns: 1fr;
}
}
/* ============================================================
Composition pair — product page (oc_product_to_composition)
============================================================ */
.composition-banner {
display: flex;
align-items: center;
gap: 12px;
background: #fdecee;
border: 1px solid #f5c6cb;
color: #5b0008;
border-radius: 12px;
padding: 12px 18px;
margin: 0 0 18px;
font-size: 0.95rem;
line-height: 1.45;
}
.composition-banner__icon {
color: #c20613;
font-size: 1.1rem;
flex: 0 0 auto;
}
.composition-banner__plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: #c20613;
color: #fff;
font-weight: 800;
font-size: 0.95rem;
line-height: 1;
vertical-align: middle;
margin: 0 4px;
}
.composition-pair {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #ececec;
display: flex;
flex-direction: column;
gap: 14px;
}
.composition-pair__item {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 54px 16px 16px;
border: 0;
border-radius: 16px;
background: #fdeade;
color: inherit;
text-decoration: none;
transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.composition-pair__item:hover {
box-shadow: 0 10px 22px -12px rgba(226,0,26,0.4);
transform: translateY(-1px);
color: inherit;
text-decoration: none;
}
.composition-pair__plus {
position: relative;
flex: 0 0 38px;
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: #e2001a;
color: #fff;
font-weight: 700;
font-size: 0.9rem;
line-height: 1;
box-shadow: none;
opacity: 1;
}
.composition-pair__media {
flex: 0 0 72px;
width: 72px;
height: 72px;
background: #fafafa;
border: 1px solid #eee;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.composition-pair__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.composition-pair__body {
flex: 1 1 auto;
min-width: 0;
}
.composition-pair__name {
font-weight: 700;
font-size: 1rem;
color: #1a1a1a;
margin-bottom: 4px;
line-height: 1.3;
}
.composition-pair__meta {
font-size: 0.82rem;
color: #666;
margin-bottom: 6px;
}
.composition-pair__code strong {
color: #e2001a;
font-weight: 800;
}
.composition-pair__price {
font-weight: 800;
font-size: 1.1rem;
color: #ee5a13;
}
/* Product-list "set contents" trigger + modal */
.composition-mini-btn {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
padding: 4px 9px;
border: 1px solid #f0c9cd;
border-radius: 999px;
background: #fdf0f1;
color: #c20613;
font-size: 0.7rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.composition-mini-btn:hover {
background: #c20613;
border-color: #c20613;
color: #fff;
}
.composition-mini-btn i {
font-size: 0.78rem;
}
.composition-mini-btn__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: #c20613;
color: #fff;
font-size: 0.66rem;
font-weight: 800;
}
.composition-mini-btn:hover .composition-mini-btn__count {
background: #fff;
color: #c20613;
}
/* The product-list ΕΙΚΟΝΑ column is 70px with overflow:hidden, so the full
"view set" label gets clipped. Make the trigger a compact icon + count pill. */
.product-table .col-image {
overflow: visible !important;
}
.product-table .composition-mini-btn {
margin: 6px auto 0;
padding: 3px 7px;
gap: 3px;
font-size: 0.62rem;
max-width: 100%;
}
.product-table .composition-mini-btn > span:not(.composition-mini-btn__count) {
display: none;
}
.product-table .composition-mini-btn__count {
min-width: 15px;
height: 15px;
font-size: 0.6rem;
}
.fancybox--composition .fancybox__content {
width: 640px;
max-width: 94vw;
padding: 0;
border-radius: 18px;
overflow: hidden;
}
.composition-modal {
background: #fff;
}
.composition-modal__head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
background: linear-gradient(135deg, #c20613 0%, #e23744 100%);
color: #fff;
}
.composition-modal__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
font-size: 1.05rem;
flex: 0 0 auto;
}
.composition-modal__title {
font-weight: 800;
font-size: 1.1rem;
line-height: 1.2;
}
.composition-modal__sub {
font-size: 0.82rem;
opacity: 0.9;
margin-top: 2px;
}
.composition-modal__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding: 20px 22px 24px;
max-height: 70vh;
overflow-y: auto;
}
.composition-modal__item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid #ececec;
border-radius: 12px;
background: #fff;
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.composition-modal__item:hover {
border-color: #c20613;
box-shadow: 0 6px 14px -8px rgba(0,0,0,0.18);
transform: translateY(-1px);
color: inherit;
text-decoration: none;
}
.composition-modal__media {
position: relative;
flex: 0 0 64px;
width: 64px;
height: 64px;
background: #fafafa;
border: 1px solid #eee;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.composition-modal__media img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.composition-modal__qty {
position: absolute;
bottom: -6px;
right: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 5px;
border-radius: 999px;
background: #1a1a1a;
color: #fff;
font-weight: 800;
font-size: 0.7rem;
border: 2px solid #fff;
}
.composition-modal__body {
flex: 1 1 auto;
min-width: 0;
}
.composition-modal__name {
font-weight: 700;
font-size: 0.88rem;
color: #1a1a1a;
line-height: 1.3;
margin-bottom: 3px;
}
.composition-modal__code {
font-size: 0.76rem;
color: #666;
}
.composition-modal__code strong {
color: #c20613;
}
.composition-modal__price {
margin-top: 4px;
font-weight: 800;
font-size: 0.95rem;
color: #1a1a1a;
}
@media (max-width: 575px) {
.composition-modal__grid {
grid-template-columns: 1fr;
}
}
/* Set container wrapping the components */
.composition-set {
margin-top: 22px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.composition-set__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.composition-set__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: #c20613;
color: #fff;
font-size: 0.95rem;
flex: 0 0 auto;
box-shadow: 0 4px 10px -3px rgba(194,6,19,0.5);
}
.composition-set__title {
font-weight: 800;
font-size: 1.05rem;
color: #1a1a1a;
letter-spacing: 0.01em;
}
.composition-set__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.composition-set .composition-pair__item {
padding: 16px 54px 16px 16px;
height: 100%;
}
/* Quantity badge on the component thumbnail */
.composition-pair__qty {
position: absolute;
top: -7px;
right: -7px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 5px;
border-radius: 999px;
background: #1a1a1a;
color: #fff;
font-weight: 800;
font-size: 0.7rem;
line-height: 1;
border: 2px solid #fdeade;
}
.composition-pair__media {
position: relative;
overflow: visible;
}
/* Chevron affordance pushing the user to the component page */
.composition-pair__go {
position: absolute;
top: auto;
bottom: 12px;
right: 12px;
transform: none;
width: 32px;
height: 32px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #e2001a;
color: #fff;
font-size: 0.85rem;
box-shadow: none;
transition: background 0.12s ease;
}
.composition-pair__item:hover .composition-pair__go {
color: #fff;
background: #c20613;
}
@media (max-width: 575px) {
.composition-banner {
font-size: 0.85rem;
padding: 10px 14px;
}
.composition-set {
padding: 0;
}
.composition-set__items {
grid-template-columns: 1fr;
}
.composition-set .composition-pair__item {
padding: 16px 52px 16px 16px;
}
}
/* ============================================================
Car Search hero module (extension/module/car_search)
============================================================ */
.car-search-hero {
position: relative;
background: #ececec url('../img/car-search-bg3.png') center center / cover no-repeat;
background-clip: padding-box;
color: #1a1a1a;
padding: 64px 0 56px;
border-radius: 18px;
margin: 1.5rem 0;
box-shadow: 0 18px 50px -18px rgba(0,0,0,0.18);
}
.car-search-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: linear-gradient(90deg, #b50000 0%, #ff1f1f 50%, #b50000 100%);
border-radius: 0 0 18px 18px;
z-index: 3;
pointer-events: none;
}
.car-search-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(238,238,238,0.78) 0%, rgba(238,238,238,0.55) 35%, rgba(238,238,238,0.15) 70%, rgba(238,238,238,0) 100%);
border-radius: 18px;
pointer-events: none;
}
.car-search-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.car-search-hero__title-wrap {
position: relative;
display: inline-block;
margin: 0 0 12px;
padding: 4px 28px;
}
.car-search-hero__title {
position: relative;
z-index: 1;
margin: 0;
font-size: 2.5rem;
font-weight: 900;
letter-spacing: 0.035em;
color: #1a1a1a;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.car-search-hero__title-accent {
color: #b30410;
}
.car-search-hero__sub {
color: #5a5a5a;
font-size: 1rem;
font-weight: 500;
margin: 0 0 26px;
text-shadow: 0 1px 2px rgba(80,80,80,0.35), 0 1px 0 rgba(255,255,255,0.5);
}
.car-search-hero__tabs {
display: inline-flex;
background: transparent;
border: 0;
border-radius: 999px;
padding: 0;
margin: 0 0 28px;
gap: 18px;
}
.car-search-hero .cs-tab {
border: 0;
background: transparent;
color: #1f1f1f;
padding: 0.78rem 1.95rem;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.car-search-hero .cs-tab i {
font-size: 1.05rem;
color: #1f1f1f;
transition: color 0.18s ease;
}
.car-search-hero .cs-tab.active i {
color: #fff;
}
.car-search-hero .cs-tab:not(.active) {
background: rgba(255,255,255,0.4);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.car-search-hero .cs-tab:not(.active):hover {
color: #b30410;
background: rgba(255,255,255,0.7);
}
.car-search-hero .cs-tab:not(.active):hover i {
color: #b30410;
}
.car-search-hero .cs-tab.active {
background: linear-gradient(180deg, #e30613 0%, #b30410 100%);
color: #fff;
box-shadow:
0 12px 22px -8px rgba(227,6,19,0.55),
0 2px 4px rgba(220,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.25);
}
.car-search-hero .cs-tab,
.car-search-hero .cs-tab:focus,
.car-search-hero .cs-tab:focus-visible,
.car-search-hero .cs-tab:active,
.car-search-hero .cs-submit,
.car-search-hero .cs-submit:focus,
.car-search-hero .cs-submit:focus-visible,
.car-search-hero .cs-submit:active {
outline: none !important;
}
.car-search-hero .cs-tab.active:focus,
.car-search-hero .cs-tab.active:focus-visible {
box-shadow: 0 8px 18px rgba(220,0,0,0.35) !important;
}
.car-search-hero .cs-tab:not(.active):hover {
color: #dc0000;
}
/* Panels */
.car-search-hero .cs-panel {
display: none;
width: 100%;
max-width: 1240px;
flex-direction: column;
align-items: center;
gap: 22px;
}
.car-search-hero .cs-panel.active {
display: flex;
}
.car-search-hero .cs-fields {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
width: 100%;
background: rgba(240,240,240,0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.55);
border-radius: 999px;
box-shadow:
0 10px 18px -12px rgba(0,0,0,0.25),
0 2px 4px -2px rgba(0,0,0,0.08);
padding: 4px;
}
.car-search-hero .cs-fields--single {
grid-template-columns: 1fr;
max-width: 640px;
margin: 0 auto;
}
.car-search-hero .cs-field {
position: relative;
display: flex;
align-items: center;
background: transparent;
border: 0;
border-radius: 0;
padding: 4px 4px 4px 14px;
transition: border-color 0.18s ease;
min-height: 50px;
box-shadow: none;
}
.car-search-hero .cs-fields > .cs-field + .cs-field {
border-left: 1px solid #b5b5b5;
}
.car-search-hero .cs-field,
.car-search-hero .cs-field:focus-within,
.car-search-hero .cs-select,
.car-search-hero .cs-select:focus,
.car-search-hero .cs-select:focus-visible,
.car-search-hero .cs-input,
.car-search-hero .cs-input:focus,
.car-search-hero .cs-input:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.car-search-hero .cs-field:focus-within {
border-color: #dc0000;
box-shadow:
0 6px 14px -8px rgba(0,0,0,0.12),
0 0 0 3px rgba(220,0,0,0.10) !important;
}
.car-search-hero .cs-step {
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 999px;
background: linear-gradient(180deg, #e30613 0%, #b30410 100%);
color: #fff;
font-size: 0.85rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.car-search-hero .cs-select,
.car-search-hero .cs-input {
flex: 1 1 auto;
background: transparent;
border: 0;
color: #1a1a1a;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 0.55rem 38px 0.55rem 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
outline: none;
text-align: left;
/* Caret arrow */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 10px 7px;
}
.car-search-hero .cs-input {
background-image: none;
cursor: text;
text-transform: none;
letter-spacing: normal;
font-weight: 500;
color: #1a1a1a;
}
.car-search-hero .cs-field--code {
padding: 4px 18px;
}
.car-search-hero .cs-field--code > i {
color: #777;
margin-right: 10px;
font-size: 1rem;
}
.car-search-hero .cs-select:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.car-search-hero .cs-select option {
background: #fff;
color: #1a1a1a;
}
.car-search-hero .cs-actions {
display: flex;
justify-content: center;
}
.car-search-hero .cs-submit {
background: linear-gradient(180deg, #e30613 0%, #b30410 100%);
color: #fff;
border: 0;
border-radius: 999px;
padding: 1rem 3.8rem;
font-weight: 800;
font-size: 1.02rem;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.car-search-hero .cs-submit i {
font-size: 1.08rem;
}
.car-search-hero .cs-submit:hover {
background: linear-gradient(180deg, #ff2e3a 0%, #b30410 100%);
color: #fff;
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.car-search-hero .cs-submit:active {
transform: translateY(0);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
}
.car-search-hero__count {
color: #1a1a1a;
font-size: 0.95rem;
font-weight: 700;
margin-top: 18px;
text-align: center;
display: inline-block;
background: rgba(255,255,255,0.28);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border-radius: 999px;
padding: 6px 18px;
}
.car-search-hero__count .cs-count-num {
font-weight: 800;
font-size: 1.05rem;
}
/* Mobile */
@media (max-width: 991px) {
/* Revert combined-pill look on mobile/tablet — each field becomes its own pill */
.car-search-hero .cs-fields {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.car-search-hero .cs-field {
background: rgba(240,240,240,0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.55);
border-radius: 999px;
min-height: 58px;
box-shadow:
0 10px 18px -12px rgba(0,0,0,0.25),
0 2px 4px -2px rgba(0,0,0,0.08);
}
/* Kill the dark vertical separator line that only makes sense in the combined desktop layout */
.car-search-hero .cs-fields > .cs-field + .cs-field {
border-left: 1px solid rgba(255,255,255,0.55);
}
.car-search-hero__title {
font-size: 1.7rem;
}
.car-search-hero__overlay {
background: linear-gradient(180deg, rgba(244,244,244,0.97) 0%, rgba(244,244,244,0.88) 70%, rgba(244,244,244,0.7) 100%);
}
}
@media (max-width: 575px) {
.car-search-hero {
padding: 36px 0 30px;
border-radius: 12px;
}
.car-search-hero .cs-fields {
grid-template-columns: 1fr;
}
.car-search-hero .cs-tab {
padding: 0.55rem 1.1rem;
font-size: 0.78rem;
}
.car-search-hero__title {
font-size: 1.4rem;
}
.car-search-hero__tabs {
gap: 8px;
}
}
/* ===== B2B product card — two-column price (Retail | Wholesale net) ===== */
.product-layout .product-block .product-block-price.product-block-price--pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
margin-top: 8px;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
align-items: stretch;
}
.product-block-price--pair .ppair-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px 6px;
text-align: center;
min-height: 56px;
}
.product-block-price--pair .ppair-col + .ppair-col {
border-left: 1px solid #ececec;
}
.product-block-price--pair .ppair-tag {
font-size: 0.62rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6b6b6b;
font-weight: 600;
line-height: 1.15;
margin-bottom: 2px;
}
.product-block-price--pair .ppair-tag small {
font-size: 0.85em;
font-weight: 500;
color: #8a8a8a;
text-transform: none;
letter-spacing: 0;
}
.product-block-price--pair .ppair-val {
font-size: 1rem;
font-weight: 700;
line-height: 1.1;
color: #111;
}
.product-block-price--pair .ppair-col--retail .ppair-val {
color: #2aa84b;
}
.product-block-price--pair .ppair-col--wholesale .ppair-val {
color: var(--bs-danger, #dc0000);
}
.product-block-price--pair .ppair-old {
color: #9a9a9a;
font-size: 0.75rem;
text-decoration: line-through;
font-weight: 400;
margin-bottom: 1px;
}
@media (max-width: 575.98px) {
.product-block-price--pair .ppair-tag { font-size: 0.55rem; }
.product-block-price--pair .ppair-val { font-size: 0.9rem; }
.product-block-price--pair .ppair-col { min-height: 50px; padding: 6px 4px; }
}
/* ===== B2B wholesale price toggle (fixed bottom-right) ===== */
.b2b-price-toggle {
position: fixed;
bottom: 18px;
right: 18px;
z-index: 1080;
background: #fff;
border: 1px solid #ececec;
border-radius: 999px;
padding: 8px 14px;
box-shadow: 0 10px 24px rgba(0,0,0,0.12);
font-family: 'Commissioner', system-ui, sans-serif;
user-select: none;
}
.b2b-price-toggle__label {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
cursor: pointer;
}
.b2b-price-toggle__text {
font-size: 0.78rem;
font-weight: 600;
color: #222;
letter-spacing: 0.01em;
}
.b2b-price-toggle__switch {
position: relative;
width: 38px;
height: 22px;
display: inline-block;
}
.b2b-price-toggle__switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.b2b-price-toggle__slider {
position: absolute;
inset: 0;
background: #c9c9c9;
border-radius: 999px;
transition: background 0.18s ease;
}
.b2b-price-toggle__slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
height: 18px;
width: 18px;
background: #fff;
border-radius: 50%;
transition: transform 0.18s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.b2b-price-toggle__switch input:checked + .b2b-price-toggle__slider {
background: #dc0000;
}
.b2b-price-toggle__switch input:checked + .b2b-price-toggle__slider::before {
transform: translateX(16px);
}
.b2b-price-toggle__switch input:focus-visible + .b2b-price-toggle__slider {
outline: 2px solid #dc0000;
outline-offset: 2px;
}
@media (max-width: 575.98px) {
.b2b-price-toggle {
bottom: 84px;
right: 12px;
padding: 6px 10px;
z-index: 1079;
}
.b2b-price-toggle__text { font-size: 0.7rem; }
/* Hide behind any open offcanvas (which sits at z=2000). */
body:has(.offcanvas.show) .b2b-price-toggle { z-index: 1 !important; }
}
/* ===== Inline B2B toggle (next to page title on account/product_list) ===== */
.page-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.page-header-row .main-content-title {
margin: 0;
}
.main-content-title-vehicle {
color: #9a9a9a;
font-weight: 400;
font-size: 0.8em;
}
.b2b-inline-toggle {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 1rem;
background: #fff;
border: 1.5px solid #dc0000;
border-radius: 999px;
color: #dc0000;
font-family: 'Commissioner', system-ui, sans-serif;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
line-height: 1;
}
.b2b-inline-toggle i { font-size: 1rem; }
.b2b-inline-toggle:hover {
background: #dc0000;
color: #fff;
box-shadow: 0 6px 14px rgba(220,0,0,0.22);
}
.b2b-inline-toggle.is-revealed {
background: #dc0000;
color: #fff;
}
.b2b-inline-toggle.is-revealed:hover {
background: #b30000;
border-color: #b30000;
}
.b2b-inline-toggle:focus-visible {
outline: 2px solid #dc0000;
outline-offset: 2px;
}
@media (max-width: 767.98px) {
.page-header-row {
flex-direction: column;
align-items: stretch;
}
.b2b-inline-toggle {
width: 100%;
justify-content: center;
}
}
/* ===== Hide-B2B-prices mode ===== */
/* Card 2-col price: drop the wholesale column, let retail span full width */
.hide-b2b-prices .product-block-price--pair {
grid-template-columns: 1fr !important;
}
.hide-b2b-prices .product-block-price--pair .ppair-col--wholesale {
display: none !important;
}
/* List-view card: drop the wholesale block, keep retail */
.hide-b2b-prices .plist-price--pair .plist-pp--wholesale {
display: none !important;
}
/* PDP wholesale card */
.hide-b2b-prices .price-card--wholesale {
display: none !important;
}
.hide-b2b-prices .price-pair {
justify-content: center;
}
.hide-b2b-prices .price-pair .price-card--retail {
max-width: 360px;
flex: 1 1 auto;
}
/* B2B internal listing (account/product_list table) */
.hide-b2b-prices .col-wholesale,
.hide-b2b-prices th.col-wholesale,
.hide-b2b-prices td.col-wholesale {
display: none !important;
}
/* Composition set-contents modal: per-component prices follow the wholesale switch
(Fancybox moves the modal under , so the descendant selector still matches) */
.hide-b2b-prices .composition-modal__price,
.hide-b2b-prices .composition-pair__price {
display: none !important;
}
/* ===== Product card chrome ===== */
.product-layout .product-block {
border: 0 !important;
background: #fff;
border-radius: 14px;
padding: 16px !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.product-layout .product-block:hover {
box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
transform: translateY(-2px);
}
.product-layout .product-block .product-block-image {
width: 100%;
}
.product-layout .product-block .product-block-image img,
.product-layout .product-block .product-thumbnail img {
aspect-ratio: 1 / 1;
object-fit: contain;
background: #fafafa;
border-radius: 10px;
width: 100%;
}
/* ===== Caption centered ===== */
.product-layout .product-block .product-block-caption {
text-align: center !important;
align-items: center !important;
}
/* ===== Brand (above title, red, uppercase) ===== */
.product-layout .product-block .product-block-brand {
margin: 4px 0 6px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.1;
color: #dc0000;
text-align: center;
}
.product-layout .product-block .product-block-brand a {
color: #dc0000;
text-decoration: none;
}
.product-layout .product-block .product-block-brand a:hover {
color: #b30000;
text-decoration: underline;
}
/* ===== Title & code typography ===== */
.product-layout .product-block .product-block-caption .product-block-title .product-name,
.product-layout .product-block .product-block-caption .product-block-title .product-name a {
font-size: 0.82rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #111;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.9em;
text-align: center;
}
.product-layout .product-block .product-block-code {
margin-top: 4px;
margin-bottom: 6px;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
text-align: center;
display: flex;
justify-content: center;
align-items: baseline;
gap: 6px;
}
.product-layout .product-block .product-block-code .product-code-label {
color: #8a8a8a;
font-weight: 600;
}
.product-layout .product-block .product-block-code .product-code {
color: #dc0000;
font-weight: 700;
letter-spacing: 0.03em;
}
/* ===== NEO / sale badge ===== */
.product-layout .product-block .product-label {
font-size: 0.62rem;
font-weight: 700;
padding: 0.28rem 0.55rem;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
background: #111;
color: #fff;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.product-layout .product-block .product-label-sale {
background: #d12128;
}
/* ===== Wishlist heart ===== */
.product-layout .product-wishlist {
color: #222 !important;
border-color: #e4e4e4 !important;
}
.product-layout .product-block.wished .product-wishlist i,
.product-layout .product-wishlist.in-wishlist {
color: var(--bs-danger, #dc0000) !important;
}
/* ===== Two-column price polish ===== */
.product-block-price--pair .ppair-tag {
min-height: 2.4em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.15;
}
.product-block-price--pair .ppair-tag small {
display: block;
margin-top: 1px;
}
.product-block-price--pair .ppair-val {
font-size: 1.1rem;
}
@media (max-width: 575.98px) {
.product-block-price--pair .ppair-val { font-size: 0.95rem; }
}
/* ===== Cart button — refined letter-spacing + icon spacing ===== */
.product-layout .product-block .product-block-actions .product-cart {
letter-spacing: 0.05em;
}
.product-layout .product-block .product-block-actions .product-cart .icon-shopping-bag {
margin-right: 0;
}
/* ===== Availability badge under cart button ===== */
.product-availability {
margin-top: 8px;
width: 100%;
text-align: center;
font-size: 0.72rem;
font-weight: 600;
padding: 0.4rem 0.6rem;
border-radius: 8px;
letter-spacing: 0.02em;
line-height: 1.2;
}
.product-availability--in {
background: #e8f7ec;
color: #1f7a3a;
border: 1px solid #c6ecd1;
}
.product-availability--low {
background: #fff4e6;
color: #b95a00;
border: 1px solid #ffd8a8;
}
.product-availability--out {
background: #fdecec;
color: #b30000;
border: 1px solid #f4c2c2;
}
/* ===== Spacing — mobile gets tighter padding ===== */
@media (max-width: 575.98px) {
.product-layout .product-block { padding: 12px !important; }
}
/* ===== Product card cart button — sticky to bottom via in-card flex ===== */
/* The card stack: .product-top (image) → .product-block-caption (title/code/price) → .product-block-actions (button).
Make .product-block-caption absorb the remaining space so .product-block-actions naturally sits at the bottom.
No swiper-level CSS — swipers handle slide heights themselves. */
.product-layout .product-block {
display: flex !important;
flex-direction: column !important;
}
.product-layout .product-block .product-block-caption {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
/* Price stays at its natural size; the space ABOVE actions is what flexes */
.product-layout .product-block .product-block-caption .product-block-price {
flex: 0 0 auto;
margin-top: auto;
}
.product-layout .product-block .product-block-actions {
flex: 0 0 auto;
margin-top: 12px;
width: 100%;
}
.product-layout .product-block .product-block-actions .product-cart {
width: 100%;
height: 48px;
padding: 0 1rem !important;
border-radius: 12px;
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
/* Friendly typography — no uppercase, no aggressive tracking, medium weight */
text-transform: none;
letter-spacing: 0;
font-weight: 600;
font-size: 0.95rem;
font-family: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
border: 1px solid #111;
box-shadow: 0 2px 6px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
position: relative;
overflow: hidden;
}
.product-layout .product-block .product-block-actions .product-cart .product-cart-text {
flex: 0 1 auto;
text-align: center;
}
.product-layout .product-block .product-block-actions .product-cart .icon-shopping-bag {
margin: 0;
font-size: 1.05rem;
line-height: 1;
}
.product-layout .product-block .product-block-actions .product-cart:hover {
background: linear-gradient(180deg, #dc0000 0%, #b30000 100%);
border-color: #b30000;
color: #fff;
box-shadow: 0 6px 16px rgba(220,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
transform: translateY(-1px);
}
.product-layout .product-block .product-block-actions .product-cart:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(220,0,0,0.22);
}
.product-layout .product-block .product-block-actions .product-cart:focus-visible {
outline: 2px solid #dc0000;
outline-offset: 2px;
}
@media (max-width: 575.98px) {
.product-layout .product-block .product-block-actions .product-cart {
height: 44px;
font-size: 0.78rem;
letter-spacing: 0.06em;
}
}
/* ============================================================
PRE-FOOTER MEGA-MENU — orange gradient categories block
============================================================ */
/* Wrapper only provides the rounded-top clip; each child carries its own gradient axis. */
.prefooter-block {
margin: 56px 0 0;
border-radius: 22px 22px 0 0;
overflow: hidden;
color: #fff;
font-family: 'Commissioner', system-ui, sans-serif;
}
.prefooter-block ~ footer,
.prefooter-block + footer,
footer.site-footer {
margin-top: 0 !important;
}
/* Orange section: VERTICAL gradient — bright orange at TOP, red at BOTTOM (↑ arrow). */
.prefooter-mega {
position: relative;
background: linear-gradient(180deg, #ff8a1f 0%, #e0380f 100%);
color: #fff;
padding: 48px 0;
}
/* Both the orange section and the strip use the standard page container so their content aligns */
.prefooter-mega > .container-xxl,
.prefooter-strip > .container-xxl {
position: relative;
}
/* 5-column grid for the categories */
.prefooter-mega__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0 48px;
padding-bottom: 48px;
}
.prefooter-mega__col {
min-width: 0;
}
/* Heading — uppercase, medium weight, full-width underline with clear gap below it */
.prefooter-mega__title {
margin: 0 0 28px;
padding-bottom: 14px;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
line-height: 1.15;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.prefooter-mega__title a {
color: inherit;
text-decoration: none;
}
.prefooter-mega__title a:hover { opacity: 0.92; }
.prefooter-mega__toggle {
display: none;
background: transparent;
border: 0;
color: #fff;
padding: 6px 4px;
cursor: pointer;
line-height: 1;
transition: transform .2s ease;
}
.prefooter-mega__toggle i { transition: transform .2s ease; }
/* Item list — 2 sub-columns, mixed-case, regular weight, generous vertical rhythm */
.prefooter-mega__list {
list-style: none;
padding: 0;
margin: 0;
column-count: 2;
column-gap: 20px;
}
.prefooter-mega__list li {
margin-bottom: 22px;
break-inside: avoid;
page-break-inside: avoid;
}
.prefooter-mega__list a {
color: #fff;
text-decoration: none;
font-size: 0.78rem;
font-weight: 400;
line-height: 1.25;
display: inline-block;
transition: opacity 0.15s ease;
opacity: 0.96;
}
.prefooter-mega__list a:hover {
opacity: 1;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ===== Standalone bottom 4-link strip — flat horizontal bar, gradient picks up where the orange ended ===== */
.prefooter-strip {
/* Strip: HORIZONTAL gradient — red at the LEFT, orange at the RIGHT (→ arrow).
Left edge (#e0380f) matches the orange section's bottom, so they connect at the bottom-left. */
background: linear-gradient(90deg, #e0380f 0%, #ff8a1f 100%);
color: #fff;
border-radius: 0;
margin: 0;
font-family: 'Commissioner', system-ui, sans-serif;
}
.prefooter-strip > .container-xxl {
padding-left: 0;
padding-right: 0;
}
.prefooter-strip__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.prefooter-strip__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 26px 32px;
color: #fff;
text-decoration: none;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
border-left: 1px solid rgba(255,255,255,0.18);
transition: background 0.18s ease;
}
.prefooter-strip__link:first-child { border-left: 0; }
.prefooter-strip__link:hover {
color: #fff;
background: rgba(255,255,255,0.08);
}
.prefooter-strip__link i {
font-size: 0.85rem;
opacity: 0.9;
}
/* Responsive */
@media (max-width: 1199.98px) {
.prefooter-mega { padding: 40px 32px; }
.prefooter-mega__grid { grid-template-columns: repeat(3, 1fr); gap: 32px 36px; }
}
@media (max-width: 991.98px) {
.prefooter-block { margin-top: 0; border-radius: 0; }
.prefooter-mega { border-radius: 0 !important; }
}
@media (max-width: 767.98px) {
.prefooter-mega { padding: 32px 22px; margin: 0; border-radius: 0; }
.prefooter-mega__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.prefooter-mega__title { font-size: 0.85rem; margin-bottom: 20px; }
.prefooter-mega__list a { font-size: 0.74rem; }
.prefooter-mega__list li { margin-bottom: 16px; }
.prefooter-strip__grid { grid-template-columns: 1fr; }
.prefooter-strip__link {
border-left: 0;
border-top: 1px solid rgba(255,255,255,0.18);
padding: 18px 22px;
font-size: 0.82rem;
}
}
@media (max-width: 991.98px) {
.prefooter-mega__grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.prefooter-mega__col { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.prefooter-mega__col:last-child { border-bottom: 0; }
.prefooter-mega__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 !important;
padding: 14px 4px !important;
border-bottom: 0 !important;
}
.prefooter-mega__title a { flex: 1; }
.prefooter-mega__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; }
.prefooter-mega__col.has-children .prefooter-mega__list {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: max-height .25s ease;
column-count: 1;
}
.prefooter-mega__col.has-children.is-open .prefooter-mega__list {
max-height: 2000px;
padding: 4px 4px 18px;
}
.prefooter-mega__col.is-open .prefooter-mega__toggle i { transform: rotate(180deg); }
}
@media (max-width: 479.98px) {
.prefooter-mega__list { column-count: 1; }
}
/* ============================================================
SITE FOOTER (black) — redesigned to match reference
============================================================ */
.site-footer {
background: #0a0a0a;
color: #fff;
font-family: 'Commissioner', system-ui, sans-serif;
padding: 56px 0 0;
}
.site-footer__top {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
gap: 40px;
padding-bottom: 40px;
}
.site-footer .footer-title {
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #fff;
margin: 0 0 22px;
padding-bottom: 10px;
position: relative;
}
.site-footer .footer-title::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 34px; height: 3px;
background: #dc0000;
border-radius: 2px;
}
.site-footer .footer-title--tight { margin-bottom: 12px; }
.site-footer .footer-title--social { margin-top: 28px; }
/* Links */
.site-footer .footer-links {
list-style: none;
margin: 0; padding: 0;
}
.site-footer .footer-links li { margin-bottom: 14px; }
.site-footer .footer-links a {
color: #cfcfcf;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.15s ease;
}
.site-footer .footer-links a:hover { color: #fff; }
/* Customer-service column */
.footer-address {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 14px;
line-height: 1.5;
}
.footer-address__pin { color: #fff; font-size: 1rem; margin-top: 2px; }
.footer-address__text { color: #d6d6d6; font-size: 0.9rem; font-weight: 600; }
.footer-map-btn {
display: inline-block;
background: #1c1c1c;
color: #fff;
border: 1px solid #2c2c2c;
border-radius: 10px;
padding: 9px 16px;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
margin-bottom: 22px;
}
.footer-map-btn:hover { background: #dc0000; border-color: #dc0000; color: #fff; }
.footer-contacts {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.footer-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #1c1c1c;
border: 1px solid #2c2c2c;
border-radius: 999px;
padding: 9px 16px;
color: #fff;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.footer-pill i { color: #dc0000; }
.footer-pill:hover { background: #2a2a2a; border-color: #3a3a3a; color: #fff; }
.footer-pill--email { margin-bottom: 22px; }
.footer-gemi { color: #8f8f8f; font-size: 0.85rem; }
/* Logout */
.footer-logout {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
background: #1c1c1c;
border: 1px solid #2c2c2c;
border-radius: 10px;
padding: 10px 18px;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
transition: background 0.15s ease;
}
.footer-logout i { color: #dc0000; }
.footer-logout:hover { background: #dc0000; color: #fff; }
.footer-logout:hover i { color: #fff; }
/* Brand column */
.footer-brand-logo { margin-bottom: 22px; }
.footer-brand-logo img {
max-height: 54px;
width: auto;
filter: brightness(0) invert(1);
}
.footer-news-desc {
color: #c4c4c4;
font-size: 0.88rem;
line-height: 1.55;
margin-bottom: 16px;
}
.footer-news-form {
display: flex;
align-items: stretch;
background: #161616;
border: 1px solid #2c2c2c;
border-radius: 999px;
padding: 5px 5px 5px 20px;
margin-bottom: 14px;
max-width: 360px;
}
.footer-news-input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: none;
color: #fff;
font-size: 0.85rem;
letter-spacing: 0.04em;
}
.footer-news-input::placeholder { color: #8a8a8a; letter-spacing: 0.06em; }
.footer-news-btn {
flex: 0 0 auto;
width: 42px; height: 42px;
border: 0;
border-radius: 50%;
background: #dc0000;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, transform 0.15s ease;
}
.footer-news-btn:hover { background: #b30000; transform: scale(1.05); }
.footer-news-agree {
display: flex;
align-items: flex-start;
gap: 8px;
color: #b6b6b6;
font-size: 0.78rem;
line-height: 1.4;
cursor: pointer;
max-width: 360px;
}
.footer-news-agree input { margin-top: 3px; accent-color: #dc0000; }
.footer-news-agree a { color: #fff; text-decoration: underline; }
/* Social */
.footer-social { display: flex; gap: 12px; }
.footer-social a {
width: 42px; height: 42px;
border-radius: 50%;
background: #1c1c1c;
border: 1px solid #2c2c2c;
color: #cfcfcf;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.footer-social a:hover { background: #dc0000; color: #fff; border-color: #dc0000; transform: translateY(-2px); }
/* Bottom bar */
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-top: 1px solid #1f1f1f;
padding: 22px 0 28px;
flex-wrap: wrap;
}
.site-footer__copy { color: #b6b6b6; font-size: 0.85rem; }
.site-footer__copy strong { color: #fff; }
.site-footer__pay {
display: flex;
align-items: center;
gap: 14px;
color: #e6e6e6;
font-size: 2rem;
line-height: 1;
}
.site-footer__pay-text {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #e6e6e6;
}
.site-footer__credit { color: #b6b6b6; font-size: 0.85rem; }
.site-footer__credit strong { color: #fff; }
/* Responsive */
@media (max-width: 991.98px) {
.site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 575.98px) {
.site-footer { padding-top: 36px; }
.site-footer__top { grid-template-columns: 1fr; gap: 28px; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
.site-footer__pay { font-size: 1.7rem; }
}
/* ============================================================
RETURN FORM — flat design (no glow), compact spacing
============================================================ */
body.account_body #account-return .card-account .card-body { padding: 0; }
#account-return .card-account { max-width: 820px; }
#account-return .return-form-inner { padding: 26px 30px 30px; }
#account-return .card-account-header { margin-bottom: 10px; }
#account-return .return-form-desc {
font-size: 0.9rem;
color: #666;
margin-bottom: 18px;
line-height: 1.4;
}
#account-return fieldset { border: 0; padding: 0; margin: 0 0 18px; }
#account-return legend {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
float: none;
font-size: 0.78rem !important;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #9a9a9a;
padding-bottom: 9px;
margin-bottom: 16px !important;
border-bottom: 1px solid #eee;
}
#account-return legend::before {
content: '';
width: 4px; height: 15px;
border-radius: 2px;
background: #e30613;
}
/* Compact field spacing */
#account-return .mb-3 { margin-bottom: 12px !important; }
#account-return .mb-4 { margin-bottom: 14px !important; }
#account-return .mb-5 { margin-bottom: 16px !important; }
#account-return .form-label { font-size: 0.8rem; font-weight: 700; color: #333; margin-bottom: 5px; }
#account-return .form-control,
#account-return .form-select {
border: 1px solid #e2e2e2;
border-radius: 10px;
padding: 9px 13px;
font-size: 0.88rem;
}
#account-return .form-control:focus,
#account-return .form-select:focus {
border-color: #e30613;
box-shadow: none; /* no glow */
outline: none;
}
#account-return textarea.form-control { line-height: 1.45; }
/* Reason radios + opened as tidy pill options */
#account-return .form-check { padding: 0; margin: 0 0 7px; min-height: auto; }
#account-return .form-check .form-check-input {
float: none;
margin: 0 8px 0 0;
accent-color: #e30613;
cursor: pointer;
}
#account-return .form-check-label { font-size: 0.86rem; color: #333; cursor: pointer; }
#account-return .form-check-inline { display: inline-flex; align-items: center; margin-right: 20px; }
/* Submit */
#account-return .btn-primary {
background: #111;
border: 0;
border-radius: 12px;
padding: 14px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.9rem;
transition: background 0.15s ease;
}
#account-return .btn-primary:hover { background: #e30613; }
/* ---- Picker ---- */
.return-picker {
border: 1px solid #ededed;
border-radius: 14px;
padding: 16px;
background: #fff;
}
.return-picker__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.return-picker__title {
display: inline-flex;
align-items: center;
gap: 9px;
font-weight: 800;
font-size: 0.95rem;
color: #141414;
}
.return-picker__title i { color: #e30613; font-size: 1.15rem; }
.return-picker__badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
background: #e30613;
color: #fff;
font-size: 0.76rem;
font-weight: 700;
}
.return-picker__badge i { font-size: 0.85rem; }
.return-picker .form-text { font-size: 0.78rem; color: #8a8a8a; }
/* Search */
.return-search { position: relative; }
.return-search__icon {
position: absolute;
left: 15px; top: 0; bottom: 0;
display: flex;
align-items: center;
line-height: 1;
color: #b3b3b3;
font-size: 0.95rem;
pointer-events: none;
}
#account-return .return-search__input {
height: 44px;
border-radius: 10px;
border: 1px solid #e6e6e6;
padding: 0 44px 0 40px;
font-size: 0.88rem;
background: #fff;
transition: border-color 0.15s ease;
}
#account-return .return-search__input:focus { border-color: #e30613; box-shadow: none; outline: none; }
.return-search__clear {
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
width: 30px; height: 30px;
border: 0;
border-radius: 8px;
background: #f2f2f2;
color: #888;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.return-search__clear:hover { background: #e30613; color: #fff; }
/* Scroll zone — preview ~3 rows, keep search filtering live */
.return-grid-scroll {
max-height: 500px;
overflow-y: auto;
padding: 2px 6px 2px 2px;
margin-right: -4px;
border: 1px solid #f0f0f0;
border-radius: 14px;
background: linear-gradient(#fff 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), #fff 70%) 0 100%,
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.08), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.08), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-size: 100% 22px, 100% 22px, 100% 8px, 100% 8px;
background-attachment: local, local, scroll, scroll;
scrollbar-width: thin;
scrollbar-color: #d0d0d0 transparent;
}
.return-grid-scroll::-webkit-scrollbar { width: 8px; }
.return-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.return-grid-scroll::-webkit-scrollbar-thumb { background: #d5d5d5; border-radius: 8px; border: 2px solid #fff; }
.return-grid-scroll::-webkit-scrollbar-thumb:hover { background: #b7b7b7; }
/* Selected-products preview (before comment) */
.return-preview {
border: 1.5px solid #f0d9db;
border-radius: 14px;
background: #fffafa;
padding: 12px 14px;
}
.return-preview__head {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
font-weight: 800;
color: #1b1b1b;
margin-bottom: 8px;
}
.return-preview__head i { color: #e30613; font-size: 0.95rem; }
.return-preview__count {
margin-left: auto;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 11px;
background: #e30613;
color: #fff;
font-size: 0.72rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}
.return-preview__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.return-preview__item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 10px;
background: #fff;
border: 1px solid #f0e2e3;
}
.return-preview__qty {
flex: 0 0 auto;
min-width: 30px;
padding: 2px 7px;
border-radius: 8px;
background: #111;
color: #fff;
font-size: 0.7rem;
font-weight: 800;
text-align: center;
}
.return-preview__name {
flex: 1 1 auto;
min-width: 0;
font-size: 0.78rem;
font-weight: 700;
color: #1b1b1b;
overflow-wrap: anywhere;
}
.return-preview__code {
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 8px;
background: #f4f4f4;
color: #555;
font-size: 0.68rem;
font-weight: 700;
}
/* Card grid */
.return-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
gap: 12px;
}
.return-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 8px;
border: 1.5px solid #ececec;
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.return-card:hover { border-color: #d9d9d9; background: #fbfbfb; }
.return-card.is-selected { border-color: #e30613; background: #fff; }
.return-card__check { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.return-card__tick {
position: absolute;
top: 8px; right: 8px;
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid #e0e0e0;
background: #fff;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
transition: background 0.12s ease, border-color 0.12s ease;
z-index: 1;
}
.return-card.is-selected .return-card__tick { background: #e30613; border-color: #e30613; }
.return-card__tick i { opacity: 0; transition: opacity 0.12s ease; }
.return-card.is-selected .return-card__tick i { opacity: 1; }
.return-card__media {
width: 100%; height: 88px;
border-radius: 9px;
background: #fafafa;
border: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #e30613;
font-size: 1.5rem;
}
.return-card__media img { width: 100%; height: 100%; object-fit: contain; }
.return-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.return-card__name {
font-weight: 700;
font-size: 0.78rem;
line-height: 1.3;
color: #1b1b1b;
overflow-wrap: anywhere;
}
.return-card__code {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
padding: 3px 8px;
border-radius: 5px;
background: #f4f4f4;
color: #333;
font-size: 0.72rem;
font-weight: 700;
}
.return-card__code i { color: #e30613; font-size: 0.72rem; }
.return-card__meta { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.return-card__meta span {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 4px 9px;
border-radius: 6px;
background: #faf2f2;
color: #8a3339;
font-size: 0.72rem;
font-weight: 400;
}
.return-card__meta span b { font-weight: 800; color: #b3000c; }
.return-card__meta span:last-child { background: #f4f4f4; color: #555; font-weight: 400; }
.return-card__meta i { color: #e30613; font-size: 0.76rem; }
.return-card__meta span:last-child i { color: #e30613; }
/* Quantity — only when selected */
.return-card__extra {
display: grid;
grid-template-rows: 0fr;
grid-template-columns: minmax(0, 1fr);
opacity: 0;
overflow: hidden;
transition: grid-template-rows 0.2s ease, opacity 0.2s ease;
}
.return-card__extra > * { min-height: 0; }
.return-card.is-selected .return-card__extra { grid-template-rows: 1fr; opacity: 1; }
.return-card__qty { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Invoice — always visible on every card */
.return-card__invoice {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 2px;
padding-top: 9px;
border-top: 1px dashed #ececec;
}
.return-card__qty-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.64rem;
font-weight: 700;
color: #7a7a7a;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.return-card__qty-label i { color: #e30613; }
.return-card__invoice .return-card__qty-label { font-size: 0.62rem; line-height: 1.25; }
.return-card__stepper {
display: flex;
align-items: center;
width: 100%;
border: 1px solid #e4e4e4;
border-radius: 8px;
overflow: hidden;
background: #fafafa;
}
.return-card__stepper button {
border: 0;
background: transparent;
width: 30px; height: 30px;
font-size: 0.72rem;
color: #444;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.return-card__stepper button:hover { background: #e30613; color: #fff; }
.return-card__qty-input {
flex: 1;
width: auto;
min-width: 0;
border: 0;
background: transparent;
text-align: center;
font-weight: 800;
font-size: 0.85rem;
outline: none;
-moz-appearance: textfield;
}
.return-card__qty-input::-webkit-outer-spin-button,
.return-card__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#account-return .return-card__invoice-input { width: 100%; border-radius: 8px; font-size: 0.74rem; padding: 6px 9px; height: auto; line-height: 1.3; }
#account-return .return-card__invoice-input::placeholder { font-size: 0.74rem; }
.return-card__invoice-input:focus { border-color: #e30613; box-shadow: none; outline: none; }
.return-picker__empty {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 13px 16px;
border: 1px dashed #dcdcdc;
border-radius: 10px;
color: #9a9a9a;
font-size: 0.83rem;
}
.return-picker__empty i { font-size: 1.15rem; color: #c4c4c4; }
@media (max-width: 767.98px) {
#account-return .card-account { max-width: 100%; }
#account-return #content .row { margin-left: 0; margin-right: 0; }
#account-return #content [class*="col-"] { padding-left: 0; padding-right: 0; }
}
@media (max-width: 575.98px) {
#account-return .return-form-inner { padding: 14px; }
.return-picker { padding: 12px; }
.return-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.return-card__media { height: 58px; }
#account-return .form-check-inline { display: flex; margin-right: 0; }
#account-return legend { font-size: 0.9rem; }
/* ~3 rows of 2-up cards; -webkit-overflow-scrolling for momentum */
.return-grid-scroll { max-height: 62vh; padding: 2px 4px 2px 2px; -webkit-overflow-scrolling: touch; }
.return-preview { padding: 10px 11px; }
.return-preview__item { padding: 6px 8px; gap: 6px; }
.return-preview__name { font-size: 0.74rem; }
.return-preview__code { font-size: 0.64rem; }
}
/* ============================================================
PARTNER NETWORK (store locator) — Leaflet
============================================================ */
.partners-hero {
background: linear-gradient(90deg, #111 0%, #1c1c1c 100%);
color: #fff;
padding: 22px 0;
text-align: center;
}
.partners-hero h1 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.partners-wrap { padding: 24px 0 40px; }
.partners-grid {
display: grid; grid-template-columns: 400px 1fr; gap: 0;
border: 1px solid #e7e7e7; border-radius: 14px; overflow: hidden; background: #fff;
box-shadow: 0 8px 26px rgba(0,0,0,0.05);
}
.partners-left { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #eee; }
.partners-search { display: flex; flex-wrap: wrap; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid #f0f0f0; align-items: center; }
.partners-search .form-control { flex: 1 1 170px; border-radius: 999px; height: 46px; border: 1px solid #e2e2e2; padding: 0 18px; }
.partners-search .form-select { flex: 0 0 128px; border-radius: 999px; height: 46px; border: 1px solid #e2e2e2; }
.partners-search__btn { flex: 0 0 auto; height: 46px; padding: 0 26px; border-radius: 999px; background: #111; color: #fff; font-weight: 700; border: 0; }
.partners-search__btn:hover { background: #e30613; color: #fff; }
.partners-search__clear { flex: 0 0 auto; align-self: center; height: auto; padding: 0; margin-left: 6px; background: none; border: 0; color: #aaa; font-size: 0.78rem; text-decoration: underline; cursor: pointer; }
.partners-search__clear:hover { color: #e30613; }
.partners-list { flex: 1 1 auto; max-height: 624px; overflow-y: auto; padding: 14px 18px 18px; }
.partners-list::-webkit-scrollbar { width: 8px; }
.partners-list::-webkit-scrollbar-track { background: #f3f3f3; }
.partners-list::-webkit-scrollbar-thumb { background: #e30613; border-radius: 8px; }
.partner-card { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 16px; background: #fff; margin-bottom: 6px; transition: background 0.12s ease, box-shadow 0.12s ease; }
.partner-card:nth-child(odd) { background: #fdebeb; }
.partner-card:hover, .partner-card.is-active { background: #fbdada; box-shadow: 0 4px 12px rgba(227,6,19,0.08); }
.partner-card__num { flex: 0 0 30px; text-align: center; font-size: 1.6rem; font-weight: 800; color: #111; line-height: 1; }
.partner-card__body { flex: 1 1 auto; min-width: 0; }
.partner-card__name { font-weight: 800; color: #e30613; font-size: 1rem; line-height: 1.2; }
.partner-card__addr { font-size: 0.84rem; color: #555; line-height: 1.35; margin-top: 4px; }
.partner-card__phone { font-size: 0.82rem; margin-top: 4px; }
.partner-card__phone a { color: #111; text-decoration: none; font-weight: 600; }
.partner-card__dist { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; color: #e30613; white-space: nowrap; }
.partners-empty { padding: 30px; text-align: center; color: #999; }
.partners-map-wrap { min-height: 680px; }
#partners-map { width: 100%; height: 100%; min-height: 680px; z-index: 1; }
.ps-pin { background: none; border: 0; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.3)); }
.ps-popup__name { font-weight: 800; color: #e30613; margin-bottom: 4px; }
.ps-popup__addr { font-size: 0.82rem; color: #444; margin-bottom: 6px; }
.ps-dir { display: inline-block; margin-top: 6px; background: #111; color: #fff !important; padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; text-decoration: none; }
.ps-dir:hover { background: #e30613; }
@media (max-width: 991.98px) {
.partners-grid { grid-template-columns: 1fr; }
.partners-left { border-right: 0; border-bottom: 1px solid #eee; }
.partners-list { max-height: 52vh; }
.partners-map-wrap, #partners-map { min-height: 58vh; height: 58vh; }
}
@media (max-width: 575.98px) {
.partners-hero { padding: 16px 0; }
.partners-hero h1 { font-size: 1.05rem; }
.partners-wrap { padding: 14px 0 28px; }
.partners-grid { border-radius: 10px; }
.partners-search { padding: 16px 16px 12px; gap: 10px; }
.partners-search .form-control { flex: 1 1 100%; height: 44px; }
.partners-search .form-select { flex: 1 1 0; height: 44px; }
.partners-search__btn { flex: 1 1 0; height: 44px; padding: 0 14px; white-space: nowrap; }
.partners-list { max-height: 46vh; padding: 12px 12px 14px; }
.partner-card { padding: 13px 14px; gap: 12px; border-radius: 14px; }
.partner-card__num { flex-basis: 22px; font-size: 1.3rem; }
.partner-card__name { font-size: 0.92rem; }
.partner-card__addr { font-size: 0.8rem; }
.partners-map-wrap, #partners-map { min-height: 62vh; height: 62vh; }
}
/* ============================================================
MANUFACTURERS (ΚΑΤΑΣΚΕΥΑΣΤΕΣ) — brand cards
============================================================ */
/* Manufacturer product-list header with brand logo */
.brand-head { display: flex; align-items: center; gap: 16px; }
.brand-head__logo {
flex: 0 0 auto; width: 78px; height: 78px; border-radius: 16px;
background: #fff; border: 1px solid #eee; box-shadow: 0 6px 16px rgba(0,0,0,0.07);
display: inline-flex; align-items: center; justify-content: center; padding: 9px;
}
.brand-head__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brands-hero {
background: linear-gradient(90deg, #111 0%, #1c1c1c 100%);
color: #fff; padding: 22px 0; text-align: center;
}
.brands-hero h1 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.brands-wrap { padding: 36px 0 50px; }
.brands-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.brand-card {
background: var(--bc, #1c2b33); color: var(--tc, #fff);
border-radius: 16px; padding: 26px 22px 24px;
min-height: 320px; display: flex; flex-direction: column;
text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.brand-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,0.22); color: var(--tc, #fff); }
.brand-card__logo { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; height: 64px; max-width: 100%; background: #fff; border-radius: 12px; padding: 8px 16px; box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.brand-card__logo img { max-width: 150px; max-height: 46px; object-fit: contain; }
.brand-card__name { margin-top: 22px; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.15; }
.brand-card--nologo { justify-content: flex-start; }
.brand-card--nologo .brand-card__name { margin-top: 6px; font-size: 1.6rem; }
.brand-card__text { margin-top: 12px; font-size: 0.92rem; line-height: 1.4; opacity: 0.92; }
.brand-card__link { margin-top: auto; padding-top: 22px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1199.98px) { .brands-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991.98px) { .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .brand-card { min-height: 290px; padding: 22px 18px; } }
@media (max-width: 767.98px) { .brands-grid { grid-template-columns: repeat(2, 1fr); } .brand-card__name { font-size: 1rem; } }
@media (max-width: 459.98px) { .brands-grid { grid-template-columns: 1fr; } .brand-card { min-height: 0; } }
/* Homepage brands carousel (module ho_brands) */
.brands-home { background: #000; padding: 54px 0 46px; }
.brands-home__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.brands-home__title { color: #fff; font-weight: 800; font-size: 1.9rem; letter-spacing: 0.01em; margin: 0; text-transform: uppercase; }
.brands-home__subtitle { color: #9a9a9a; font-size: 1rem; margin-top: 6px; }
.brands-home__all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; color: #fff; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 12px 24px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.brands-home__all:hover { background: #fff; color: #000; }
.brands-home__slider { overflow: hidden; }
.brands-home .swiper-slide { height: auto; }
.brands-home .brand-card { height: 100%; min-height: 0; }
.brands-home__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.brands-home .swiper-pagination { position: static; width: auto; text-align: left; display: flex; gap: 8px; align-items: center; }
.brands-home .swiper-pagination-bullet { width: 22px; height: 4px; border-radius: 2px; background: #4a4a4a; opacity: 1; margin: 0 !important; transition: background 0.15s ease, width 0.15s ease; }
.brands-home .swiper-pagination-bullet-active { background: #e30613; width: 30px; }
.brands-home__arrows { display: flex; gap: 12px; }
.brands-home__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.55); background: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease; }
.brands-home__arrow:hover { background: #fff; color: #000; }
.brands-home__arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
@media (max-width: 767.98px) {
.brands-home { padding: 36px 0 30px; }
.brands-home__head { flex-direction: column; }
.brands-home__title { font-size: 1.4rem; }
.brands-home__all { padding: 10px 18px; }
}
/* Pagination — circular buttons, orange-gradient active (match design) */
.pagination-wrap nav ul.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
margin: 0;
}
.pagination-wrap .page-item { margin: 0; }
.pagination-wrap .page-item .page-link,
.pagination-wrap .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 8px;
margin: 0;
border-radius: 999px;
border: 1px solid #e6e6e6;
background: #fff;
color: #555;
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
box-shadow: none;
transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pagination-wrap .page-link:hover {
border-color: #ff5a00;
color: #ff5a00;
background: #fff;
}
.pagination-wrap .page-item.active .page-link {
background: linear-gradient(135deg, #ff7a00 0%, #ff4d00 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 10px rgba(255, 90, 0, .30);
}
.pagination-wrap .page-item.disabled .page-link {
opacity: .45;
pointer-events: none;
}
/* ===== Category page head — vehicle context heading + conditional image ===== */
.cathead {
display: flex;
align-items: center;
gap: 36px;
padding: 18px 0 22px;
}
.cathead__img {
flex: 0 0 120px;
max-width: 120px;
border-radius: 12px;
overflow: hidden;
background: transparent;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cathead__img img {
width: 100%;
height: auto;
max-height: 120px;
display: block;
object-fit: contain;
}
.cathead__body {
flex: 1 1 auto;
min-width: 0;
}
.cathead__vehicle {
color: #d80117;
font-weight: 800;
font-size: 1.85rem;
letter-spacing: .01em;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 4px;
}
.cathead__title {
margin: 0 0 14px;
color: #111;
font-weight: 800;
font-size: 1.25rem;
letter-spacing: .02em;
text-transform: uppercase;
line-height: 1.2;
}
.cathead__tagline {
color: #111;
font-weight: 700;
font-size: 1rem;
margin-bottom: 10px;
}
.cathead__desc {
color: #555;
font-size: .95rem;
line-height: 1.65;
}
.cathead__desc p { margin: 0 0 .6rem; }
.cathead__content-top { margin-top: 6px; }
@media (max-width: 767.98px) {
.cathead { gap: 14px; padding: 12px 0; }
.cathead__img { flex: 0 0 72px; max-width: 72px; }
.cathead__img img { max-height: 72px; }
.cathead__vehicle { font-size: 1.4rem; }
.cathead__title { font-size: 1.05rem; }
}
/* ===== ho_product_tabs — dark left rail (title + vertical pill tabs) + right carousel ===== */
.ptabs-module {
margin-top: 3rem;
background-color: #0f0f10;
background-image: url('../img/ptabs-bg.png');
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.ptabs-module { margin-top: 6rem; }
}
/* Retina variant — same composition, double resolution. */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ptabs-module {
background-image: url('../img/ptabs-bg@2x.png');
}
}
.ptabs-module > .module-row {
position: relative;
z-index: 1;
}
.ptabs-grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 48px;
align-items: start;
}
.ptabs-aside {
padding: 16px 0 20px;
min-width: 0;
}
.ptabs-title {
margin: 0 0 14px;
color: #fff;
font-weight: 800;
font-size: 1.85rem;
line-height: 1.1;
letter-spacing: .01em;
text-transform: uppercase;
position: relative;
padding-top: 18px;
}
.ptabs-title::before {
content: "";
position: absolute;
top: 0;
left: -8px;
width: 92px;
height: 14px;
background: radial-gradient(ellipse at center, #d80117 0%, rgba(216, 1, 23, .65) 50%, transparent 75%);
transform: rotate(-12deg) skewX(-15deg);
pointer-events: none;
opacity: .9;
}
.ptabs-title-text { display: inline; }
.ptabs-title-logo { display: inline-block; margin-right: 8px; vertical-align: middle; }
.ptabs-title-logo img { max-height: 28px; width: auto; }
.ptabs-subtitle {
margin: 0 0 28px;
color: rgba(255, 255, 255, .82);
font-size: .95rem;
font-weight: 500;
line-height: 1.5;
}
/* Vertical pill tabs */
.ptabs-nav.nav.nav-tabs {
border: 0;
gap: 12px;
}
.ptabs-nav .nav-item { width: 100%; }
.ptabs-nav .ptabs-tab {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 22px;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 999px;
background: transparent;
color: #fff;
font-weight: 700;
font-size: .92rem;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.ptabs-nav .ptabs-tab:hover {
border-color: rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .06);
color: #fff;
}
.ptabs-nav .ptabs-tab.active {
background: #d80117;
border-color: #d80117;
color: #fff;
box-shadow: 0 4px 14px rgba(216, 1, 23, .35);
}
.ptabs-tab__label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ptabs-tab__chev {
flex: 0 0 auto;
font-size: .85rem;
opacity: .85;
}
/* Right side — product carousel container */
.ptabs-main {
min-width: 0;
}
.ptabs-main .tab-pane > .product-tabs-tab-wrapper { padding: 0; }
.ptabs-module .swiper-button-next,
.ptabs-module .swiper-button-prev {
color: #fff;
background: rgba(0, 0, 0, .55);
border-radius: 50%;
width: 44px;
height: 44px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.ptabs-module .swiper-button-next::after,
.ptabs-module .swiper-button-prev::after { font-size: 16px; font-weight: 800; }
.ptabs-module .swiper-pagination-bullet {
background: rgba(255, 255, 255, .35);
opacity: 1;
width: 20px;
height: 4px;
border-radius: 4px;
transition: background .15s ease, width .15s ease;
}
.ptabs-module .swiper-pagination-bullet-active {
background: #fff;
width: 28px;
}
.ptabs-module .pagination-static { margin-top: 14px; text-align: center; }
/* Tablet/mobile — stack vertically, centered title, horizontally scrolling tab pills.
The pill style on mobile inverts: active tab = white fill with red text (per spec). */
@media (max-width: 991.98px) {
.ptabs-module {
background-position: center top;
background-size: 100% auto;
}
.ptabs-grid {
grid-template-columns: 1fr;
gap: 18px;
padding-top: 36px;
padding-bottom: 8px;
}
.ptabs-aside {
padding: 4px 0 0;
text-align: center;
}
.ptabs-title {
font-size: 1.4rem;
padding-top: 14px;
text-align: center;
}
.ptabs-title::before {
left: 50%;
transform: translateX(-50%) rotate(-12deg) skewX(-15deg);
width: 120px;
}
.ptabs-subtitle {
margin-bottom: 16px;
text-align: center;
}
.ptabs-nav.nav.nav-tabs {
flex-direction: row !important;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
padding: 2px 4px 10px;
margin: 0 -12px;
scroll-snap-type: x proximity;
scroll-padding-left: 12px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.ptabs-nav.nav.nav-tabs::-webkit-scrollbar { display: none; }
.ptabs-nav .nav-item:first-child { margin-left: 16px; }
.ptabs-nav .nav-item:last-child { margin-right: 16px; }
.ptabs-nav .nav-item { width: auto; flex: 0 0 auto; scroll-snap-align: start; }
.ptabs-nav .ptabs-tab {
padding: 10px 20px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .03em;
white-space: nowrap;
background: transparent;
border: 1.5px solid #fff;
color: #fff;
}
.ptabs-nav .ptabs-tab.active {
background: #fff;
border-color: #fff;
color: #d80117;
box-shadow: none;
}
.ptabs-tab__chev { display: none; }
}
/* ===== Desktop orange-bar tabs — dropdown panel under each vehicle-type tab =====
Only ever attached inside .header-gradient-bar which is itself d-none d-lg-block,
so the mobile mega menu is completely untouched by anything below. */
#header .header-gradient-bar .dummy-menu-item.has-dropdown .dummy-menu-caret {
font-size: .7rem;
opacity: .85;
margin-left: .25rem;
transition: transform .18s ease;
}
#header .header-gradient-bar .dummy-menu-item.has-dropdown:hover .dummy-menu-caret,
#header .header-gradient-bar .dummy-menu-item.has-dropdown:focus-within .dummy-menu-caret {
transform: rotate(180deg);
}
#header .header-gradient-bar .dummy-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 560px;
max-width: 90vw;
max-height: min(560px, calc(100vh - 200px));
display: flex;
flex-direction: column;
background: #fff;
color: #111;
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
padding: 18px;
/* The visible gap must stay smaller than the .has-dropdown::after bridge below, otherwise
the cursor crosses dead space on its way down and :hover drops. */
margin-top: 16px;
z-index: 1050;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .14s ease, transform .14s ease, visibility .14s linear;
pointer-events: none;
overflow: hidden;
}
/* Invisible bridge — sits directly under the tab and connects it to the panel,
so the hover area stays continuous as the cursor moves down. */
#header .header-gradient-bar .dummy-menu-item.has-dropdown::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 22px;
z-index: 1049;
pointer-events: none;
}
#header .header-gradient-bar .dummy-menu-item.has-dropdown:hover::after,
#header .header-gradient-bar .dummy-menu-item.has-dropdown:focus-within::after {
pointer-events: auto;
}
#header .header-gradient-bar .dummy-menu-item.has-dropdown:hover .dummy-dropdown,
#header .header-gradient-bar .dummy-menu-item.has-dropdown:focus-within .dummy-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Tabs near the right edge — anchor the panel to the right instead of left to avoid clipping. */
#header .header-gradient-bar .dummy-menu-item.has-dropdown:nth-last-child(-n+2) .dummy-dropdown {
left: auto;
right: 0;
}
/* Top filter pills (ΝΕΕΣ ΑΦΙΞΕΙΣ / ΠΡΟΣΦΟΡΕΣ) */
#header .header-gradient-bar .dummy-dropdown__pills {
display: flex;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #eee;
}
#header .header-gradient-bar .dummy-pill {
padding: 8px 14px;
border-radius: 999px;
border: 1.5px solid #111;
background: #fff;
color: #111;
font-weight: 700;
font-size: .78rem;
letter-spacing: .02em;
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
#header .header-gradient-bar .dummy-pill.is-active,
#header .header-gradient-bar .dummy-pill:hover {
background: #111;
color: #fff;
text-decoration: none;
}
/* The ΠΡΟΣΦΟΡΕΣ pill is outlined red, not black, to differentiate */
#header .header-gradient-bar .dummy-pill + .dummy-pill {
border-color: #d80117;
color: #d80117;
}
#header .header-gradient-bar .dummy-pill + .dummy-pill:hover {
background: #d80117;
color: #fff;
}
/* 2-column grid of category pills with chevron-right.
The panel itself is capped; the grid scrolls inside so the pills row stays pinned. */
#header .header-gradient-bar .dummy-dropdown__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: #d80117 #f2f2f2;
}
#header .header-gradient-bar .dummy-dropdown__grid::-webkit-scrollbar { width: 6px; }
#header .header-gradient-bar .dummy-dropdown__grid::-webkit-scrollbar-track { background: #f2f2f2; border-radius: 999px; }
#header .header-gradient-bar .dummy-dropdown__grid::-webkit-scrollbar-thumb { background: #d80117; border-radius: 999px; }
#header .header-gradient-bar .dummy-cat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 16px;
border-radius: 22px;
border: 1px solid #d6d6d6;
background: #fff;
color: #111;
font-weight: 700;
font-size: .75rem;
letter-spacing: .02em;
text-transform: uppercase;
text-decoration: none;
transition: border-color .12s ease, color .12s ease, background .12s ease;
min-width: 0;
}
#header .header-gradient-bar .dummy-cat:hover {
border-color: #d80117;
color: #d80117;
}
#header .header-gradient-bar .dummy-cat__name {
flex: 1 1 auto;
min-width: 0;
line-height: 1.2;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
#header .header-gradient-bar .dummy-cat__chev {
flex: 0 0 auto;
font-size: .7rem;
color: #d80117;
}
/* ===== PDP "more products" carousel — red→orange gradient, vertical pill tabs + carousel.
Same layout logic as .ptabs-module but with inverted colors (light pills + red active).
FULL-BLEED bg even though it lives inside a .container-xxl ancestor — uses the
negative-half-vw trick so the colored band extends to the viewport edges while the
inner grid stays contained. */
.pdp-more {
background: linear-gradient(90deg, #d80117 0%, #ff6a00 100%);
color: #fff;
padding: 48px 0;
margin-top: 48px !important;
margin-bottom: 0 !important;
/* Full bleed: override any inherited max-width / box-sizing constraints from the
deeply-nested col-12 parent. The element is forced to 100vw and recentered. */
position: relative !important;
width: 100vw !important;
max-width: none !important;
min-width: 100vw !important;
box-sizing: border-box !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
left: 0 !important;
transform: none !important;
overflow: hidden;
border-radius: 0;
}
/* Prevent horizontal scroll caused by 100vw vs scrollbar discrepancy. */
body.product-product,
body.product_product { overflow-x: clip; }
/* Mobile-wide horizontal-overflow guard — some legacy modules (banner-col negative
margins, etc.) push a few px past the viewport on phones; clip them silently. */
@media (max-width: 991.98px) {
html, body { overflow-x: clip; }
}
.pdp-more__grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 36px;
align-items: start;
}
.pdp-more__aside {
padding: 0;
align-self: center;
}
.pdp-more__title {
margin: 0 0 22px;
color: #fff;
font-weight: 800;
font-size: 1.7rem;
line-height: 1.1;
letter-spacing: .01em;
text-transform: uppercase;
}
.pdp-more__nav.nav.nav-tabs {
border: 0;
gap: 10px;
}
.pdp-more__nav .nav-item { width: 100%; }
.pdp-more__nav .pdp-more__tab {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 22px;
border: 2.5px solid #fff !important;
border-radius: 999px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: #fff !important;
font-weight: 800;
font-size: .85rem;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left;
transition: background .15s ease, color .15s ease;
}
.pdp-more__nav .pdp-more__tab .pdp-more__tab-label { color: #fff !important; }
.pdp-more__nav .pdp-more__tab .pdp-more__tab-chev { color: #fff !important; }
.pdp-more__nav .pdp-more__tab:hover {
background: rgba(255, 255, 255, .12);
color: #fff !important;
}
.pdp-more__nav .pdp-more__tab.active {
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
border-color: #fff !important;
color: #d80117 !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.pdp-more__nav .pdp-more__tab.active .pdp-more__tab-chev,
.pdp-more__nav .pdp-more__tab.active .pdp-more__tab-label { color: #d80117 !important; }
.pdp-more__tab-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pdp-more__tab-chev {
flex: 0 0 auto;
font-size: .8rem;
opacity: .9;
}
.pdp-more__main { min-width: 0; }
.pdp-more__main .product-container { padding: 0; background: transparent; }
/* White card with prominent SOLID WHITE border for each product slide — matches design. */
.pdp-more .swiper-slide,
.pdp-more .swiper-slide .product-block.product-card,
.pdp-more .swiper-slide .product-block,
.pdp-more .swiper-slide .product-thumb,
.pdp-more .swiper-slide .plist-card {
background: #fff !important;
border-radius: 16px !important;
overflow: hidden;
}
.pdp-more .swiper-slide .product-block.product-card,
.pdp-more .swiper-slide > .product-block {
border: 3px solid #fff !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, .22) !important;
height: 100%;
}
.pdp-more .swiper-slide { height: auto; background: transparent !important; }
/* Reduce aside to give more room to the carousel — design has the aside compact. */
.pdp-more__grid {
grid-template-columns: 240px 1fr;
gap: 28px;
}
/* (active tab styles consolidated above) */
.pdp-more .swiper-button-next,
.pdp-more .swiper-button-prev {
color: #d80117;
background: #fff;
border-radius: 50%;
width: 44px;
height: 44px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.pdp-more .swiper-button-next::after,
.pdp-more .swiper-button-prev::after { font-size: 16px; font-weight: 800; }
@media (max-width: 991.98px) {
.pdp-more__grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 18px;
}
.pdp-more__aside,
.pdp-more__main { min-width: 0 !important; max-width: 100%; }
.pdp-more__title { font-size: 1.3rem; text-align: center; }
.pdp-more__nav.nav.nav-tabs {
flex-direction: row !important;
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
padding-bottom: 4px;
justify-content: flex-start !important;
scrollbar-width: none;
max-width: 100%;
scroll-padding-left: 0;
}
.pdp-more__nav.nav.nav-tabs > :first-child { margin-left: 0; }
.pdp-more__nav.nav.nav-tabs::-webkit-scrollbar { display: none; }
.pdp-more__nav .nav-item { width: auto; flex: 0 0 auto; }
.pdp-more__nav .pdp-more__tab { padding: 10px 16px; font-size: .76rem; white-space: nowrap; }
.pdp-more__tab-chev { display: none; }
}
/* ===== PDP description / specs — visible white card with the pills + content =====
No more full-bleed (white-on-white made the card invisible). The section is now a
contained white card with rounded corners, sitting on the page's light-gray bg, and
the text inside is left-aligned and fills the card. */
.pdp-info-wrap {
margin: 36px 0 0;
padding: 32px 36px 40px;
background: #fff;
border-radius: 18px;
box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
position: relative;
}
.pdp-info-tabs { margin: 0; width: 100%; }
.pdp-info-tabs__content { margin: 0; width: 100%; }
.pdp-info-pane { text-align: left; }
.pdp-info-tabs__nav {
display: flex;
justify-content: center;
gap: 14px;
border: 0;
margin-bottom: 24px;
flex-wrap: wrap;
}
.pdp-info-tab {
padding: 12px 28px;
border-radius: 999px;
border: 1.5px solid #d80117;
background: #fff;
color: #d80117;
font-weight: 800;
font-size: .92rem;
letter-spacing: .04em;
text-transform: uppercase;
transition: background .14s ease, color .14s ease, transform .12s ease;
}
.pdp-info-tab:hover {
background: rgba(216, 1, 23, .08);
color: #d80117;
}
.pdp-info-tab.active {
background: #d80117;
color: #fff;
box-shadow: 0 6px 18px rgba(216, 1, 23, .28);
}
.pdp-info-pane {
color: #333;
line-height: 1.7;
font-size: .95rem;
/* Description in DB is plain text with \n separators — render line breaks. HTML tags still work. */
white-space: pre-line;
}
.pdp-info-pane * { white-space: normal; }
.pdp-info-pane p,
.pdp-info-pane li { margin-bottom: .6rem; }
.pdp-specs-table th,
.pdp-specs-table td { vertical-align: top; }
/* ===== PDP composition addon panel — peach card with red icon + big + button =====
Restyle only — keeps existing twig structure (.composition-set wraps .composition-pair__item links). */
.composition-set {
margin-top: 18px;
padding: 0;
background: transparent;
border: 0;
}
.composition-set__head { display: none; }
.composition-set__items { display: flex; flex-direction: column; gap: 12px; }
.composition-set .composition-pair__item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: linear-gradient(135deg, #fff6f1 0%, #ffeee4 100%);
border: 1px solid #ffdfcc;
border-radius: 16px;
text-decoration: none;
color: #111;
box-shadow: none;
transition: border-color .18s ease, transform .16s ease;
position: relative;
overflow: hidden;
}
.composition-set .composition-pair__item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #d80117 0%, #ff5a14 100%);
opacity: 0;
transition: opacity .18s ease;
}
.composition-set .composition-pair__item:hover {
border-color: #ff9d66;
color: #111;
text-decoration: none;
transform: translateY(-2px);
}
.composition-set .composition-pair__item:hover::before { opacity: 1; }
.composition-set .composition-pair__plus {
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #e30f24 0%, #b8000f 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
box-shadow: none;
}
.composition-set .composition-pair__plus .composition-pair__qty {
margin-left: 4px;
font-size: .72rem;
font-weight: 700;
}
.composition-set .composition-pair__body {
flex: 1 1 auto;
min-width: 0;
}
.composition-set .composition-pair__name {
font-weight: 800;
font-size: .86rem;
color: #1a1a1a;
text-transform: uppercase;
line-height: 1.3;
letter-spacing: .01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 4px;
}
.composition-set .composition-pair__meta {
font-size: .76rem;
color: #6a6a6a;
margin-bottom: 6px;
}
.composition-set .composition-pair__code strong { color: #d80117; font-weight: 800; }
.composition-set .composition-pair__price {
display: inline-block;
color: #d80117;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -.01em;
}
.composition-set .composition-pair__go {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #ff7a3c 0%, #ff5a14 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
box-shadow: none;
transition: transform .16s ease, background .16s ease;
}
.composition-set .composition-pair__item:hover .composition-pair__go {
background: linear-gradient(135deg, #e30f24 0%, #b8000f 100%);
transform: scale(1.08);
}
/* ===== Mobile sticky footer action bar — 4 items, red→orange gradient.
Mobile only (max-width: 991.98px) to leave desktop/mega menu intact.
z-index 1080 — Bootstrap offcanvas (mega menu) sits at 1090 (override below)
so the menu always appears OVER the action bar when opened. ===== */
.m-action-bar {
display: none;
}
/* Mobile mega menu / offcanvas must overlay the sticky action bar. */
@media (max-width: 991.98px) {
.offcanvas { z-index: 2000 !important; }
.offcanvas-backdrop { z-index: 1999 !important; }
/* Make sure the floating action bar AND its drop-up stay BELOW any offcanvas. */
.m-action-bar,
.m-action-bar__dropup { z-index: 1080 !important; }
.offcanvas.show ~ * .m-action-bar,
body:has(.offcanvas.show) .m-action-bar { z-index: 1 !important; }
}
@media (max-width: 991.98px) {
/* Move the action-bar gutter from onto the footer itself so the dark footer
paints the area behind the floating action bar — no white sliver at the bottom. */
body.has-m-action-bar { padding-bottom: 0; }
body.has-m-action-bar .site-footer { padding-bottom: 84px; }
.m-action-bar {
display: flex;
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 1080;
align-items: stretch;
justify-content: space-around;
background: linear-gradient(90deg, #d80117 0%, #ff6a00 100%);
border-radius: 10px;
padding: 10px 8px;
box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}
.m-action-bar__item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: .72rem;
letter-spacing: .02em;
padding: 4px 0;
position: relative;
transition: transform .12s ease;
}
.m-action-bar__item:hover,
.m-action-bar__item:active { color: #fff; transform: translateY(-1px); }
.m-action-bar__icon { font-size: 1.35rem; line-height: 1; }
.m-action-bar__label { line-height: 1; }
.m-action-bar__badge {
position: absolute;
top: -6px;
right: -8px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #fff;
color: #d80117;
font-size: .65rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.m-action-bar__btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: #fff !important;
text-decoration: none;
width: 100%;
}
.m-action-bar__icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Drop-up panel for the Garage item — anchored above the action bar. */
.m-action-bar__dropup.garage-dropdown {
position: fixed !important;
top: auto !important;
bottom: 92px !important;
left: 12px !important;
right: 12px !important;
width: auto !important;
max-width: none !important;
background: #fff !important;
color: #222;
border: 0 !important;
border-radius: 18px !important;
box-shadow: 0 16px 44px rgba(0, 0, 0, .28) !important;
padding: 0 !important;
z-index: 1086 !important;
max-height: 65vh;
overflow: hidden;
animation: m-dropup-in .18s ease-out;
}
.m-action-bar__dropup.garage-dropdown::before {
content: "";
position: absolute;
bottom: -8px;
top: auto;
left: 50%;
right: auto;
margin-left: -8px;
width: 14px;
height: 14px;
background: #fff;
border: 0;
border-right: 1px solid rgba(0, 0, 0, .04);
border-bottom: 1px solid rgba(0, 0, 0, .04);
transform: rotate(45deg);
box-shadow: 4px 4px 8px rgba(0, 0, 0, .04);
}
@keyframes m-dropup-in {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.m-action-bar__dropup .garage-dropdown__head {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 14px 18px 12px !important;
background: linear-gradient(90deg, #d80117 0%, #ff6a00 100%);
color: #fff;
margin: 0 !important;
border: 0 !important;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.m-action-bar__dropup .garage-dropdown__title {
font-weight: 800;
color: #fff !important;
font-size: .95rem;
letter-spacing: .02em;
text-transform: uppercase;
}
.m-action-bar__dropup .garage-clear {
background: rgba(255, 255, 255, .2);
border: 0;
color: #fff !important;
font-size: .72rem;
font-weight: 700;
cursor: pointer;
padding: 5px 10px;
border-radius: 999px;
transition: background .15s;
}
.m-action-bar__dropup .garage-clear:hover { background: rgba(255, 255, 255, .35); }
.m-action-bar__dropup .garage-list,
.m-action-bar__dropup .garage-empty { padding: 6px 12px; }
.m-action-bar__dropup .garage-list {
list-style: none;
margin: 0;
max-height: calc(65vh - 60px);
overflow-y: auto;
}
.m-action-bar__dropup .garage-item { margin: 0; padding: 0; }
.m-action-bar__dropup .garage-item__link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 10px;
color: #222;
text-decoration: none;
border-bottom: 1px solid #f3f3f3;
font-size: .9rem;
font-weight: 600;
line-height: 1.3;
transition: background .12s;
}
.m-action-bar__dropup .garage-item__link:hover,
.m-action-bar__dropup .garage-item__link:active { background: #fff5ef; color: #d80117; }
.m-action-bar__dropup .garage-item:last-child .garage-item__link { border-bottom: 0; }
.m-action-bar__dropup .garage-item__link i {
color: #d80117;
font-size: 1.05rem;
width: 32px;
height: 32px;
flex: 0 0 32px;
background: #ffeee2;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.m-action-bar__dropup .garage-empty {
text-align: center;
color: #888;
font-size: .85rem;
padding: 24px 14px;
}
}
/* Mini cart (offcanvas) — placeholder when a product has no thumbnail, plus a few
small fixes so items always render the action layout regardless of image. */
#offcanvasCart .cart_item-image {
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f8;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 1 / 1;
}
#offcanvasCart .cart_item-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.cart_item-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #c8c8c8;
font-size: 1.4rem;
}
/* Cart page (checkout/cart) — square media slot with fallback placeholder. */
.cart-item .cart-item-media {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1 / 1;
background: #f7f7f7;
border-radius: 10px;
overflow: hidden;
text-decoration: none;
}
.cart-item .cart-item-media img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.cart-item-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #c8c8c8;
font-size: 1.6rem;
}
/* ===== Mobile cart page polish (route=checkout/cart) ===== */
@media (max-width: 767.98px) {
/* Header: title row on top, action buttons side-by-side fill width. */
.cart-header {
flex-direction: column;
align-items: stretch;
gap: .9rem;
margin-bottom: 1rem;
}
.cart-intro { text-align: left; }
.cart-title { font-size: 1.35rem; margin: 0; }
.cart-subtitle { display: none; }
.cart-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .6rem;
}
.cart-actions .btn-cart-secondary,
.cart-actions .btn-cart-primary {
width: 100%;
height: 44px;
padding: 0 .8rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
font-size: .85rem;
font-weight: 700;
white-space: nowrap;
}
/* === Item card: rebuilt as a 2-row layout on mobile ===
Top row: [small image] [name + remove]
Bottom row: [qty stepper] [totals right-aligned] (spans full width) */
.cart-item.card { padding: .85rem 1rem !important; border-radius: 12px; }
/* Outer .row → flex wrap so col-3+col-9 stay top, then we expand col-9's inner mt-2 row */
.cart-item > .row { flex-wrap: wrap; align-items: flex-start; }
.cart-item .row > .col-3 {
flex: 0 0 88px;
width: 88px;
max-width: 88px;
padding-right: 12px;
padding-left: 0;
}
.cart-item .row > .col-9 {
flex: 1 1 calc(100% - 88px);
max-width: calc(100% - 88px);
padding-left: 0;
padding-right: 0;
}
.cart-item .cart-item-media {
aspect-ratio: 1 / 1;
width: 76px;
height: 76px;
border-radius: 10px;
background: #f7f7f7;
display: flex;
align-items: center;
justify-content: center;
}
.cart-item .cart-item-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-item-placeholder { font-size: 1.6rem; color: #c8c8c8; }
.cart-item-title { font-size: .92rem; line-height: 1.3; margin-bottom: 2px !important; }
.cart-item-title a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 600;
}
.cart-item-info .text-muted.small { font-size: .72rem; margin-top: 2px; }
.cart-item .cart-item-actions { gap: 0; flex-shrink: 0; }
.cart-item .cart-item-actions .btn-cart-icon { padding: 0 6px; font-size: .95rem; line-height: 1; }
/* The bottom row breaks out of col-9 to span the full card width. */
.cart-item .col-9 > .row.mt-2 {
width: calc(100% + 88px);
max-width: calc(100% + 88px);
margin: .8rem 0 0 -88px !important;
padding-top: .7rem;
border-top: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.cart-item .col-9 > .row.mt-2 > .col-6 {
flex: 0 0 auto;
width: auto;
max-width: none;
padding: 0;
}
.cart-item .col-9 > .row.mt-2 > .col-6:first-child { flex: 0 0 auto; }
.cart-item .col-9 > .row.mt-2 > .col-6.text-end { text-align: right; }
/* Quantity pill — compact, not full width. */
.cart-item .quantity-pill {
display: inline-flex;
align-items: stretch;
gap: 0;
background: #fff;
border: 1.5px solid #e3e3e3;
border-radius: 10px;
padding: 0;
overflow: hidden;
height: 38px;
width: auto;
}
.cart-item .quantity-pill .btn-qty {
width: 36px;
height: 100%;
padding: 0;
font-size: 1.05rem;
line-height: 1;
color: #111;
background: transparent;
}
.cart-item .quantity-pill .form-control {
width: 40px;
height: 100%;
padding: 0;
font-size: .92rem;
font-weight: 700;
text-align: center;
background: transparent;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
border-radius: 0;
}
/* Totals: inline labels, prominent value. */
.cart-item-total,
.cart-item-price { line-height: 1.1; }
.cart-item-total { display: flex; flex-direction: column; align-items: flex-end; }
.cart-item-price { margin-top: 4px; display: flex; flex-direction: column; align-items: flex-end; }
.cart-item-total .label,
.cart-item-price .label {
font-size: .58rem;
letter-spacing: .04em;
margin: 0 0 1px;
color: #9a9a9a;
}
.cart-item-total .value { font-size: 1.05rem; font-weight: 800; color: #c20613; }
.cart-item-price .value { font-size: .8rem; color: #6a6a6a; font-weight: 600; }
}
/* ===== Mobile header — match design: orange burger, single cart icon (red, b2b only),
peach search bar, magnifier on left. The heart/user/garage icons live in the
sticky footer .m-action-bar on mobile, so we hide their duplicates from the top
bar to avoid clutter. b2b/b2c rule preserved: the cart only renders when
{% if can_purchase %} in the twig, so b2c users still see no cart anywhere. ===== */
@media (max-width: 991.98px) {
/* Burger — orange→red gradient CIRCLE, white 3-line hamburger inside. */
.m_header-main .m_header-trigger .btn.btn-m_trigger,
.m_header-main .btn.btn-m_trigger {
background: linear-gradient(135deg, #ff6a00 0%, #d80117 100%) !important;
border: 0 !important;
border-radius: 999px !important;
width: 46px !important;
height: 46px !important;
padding: 0 !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
box-shadow: 0 6px 16px rgba(216, 1, 23, .25);
}
.m_header-main .btn.btn-m_trigger span {
display: block !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 22px !important;
height: 2px !important;
background: #fff !important;
border-radius: 2px !important;
margin: 0 !important;
}
/* Right-side icons — keep ONLY the cart (b2b purchase right); hide the rest on
mobile because they're now in the sticky footer .m-action-bar. */
.m_header-icons > a:not(.menu-cart-icon),
.m_header-icons > .m_header-block-garage {
display: none !important;
}
/* Cart pill — light peach bg, red cart icon, matches the design. The icon is
fa-bag-shopping in the twig (kept intact for desktop); we swap it to a cart
glyph on mobile only via the unicode override below. */
.m_header-icons > a.menu-cart-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
border-radius: 999px !important;
background: #ffeee2 !important;
background-image: none !important;
border: 1px solid #ffd9c2 !important;
color: #d80117 !important;
box-shadow: 0 4px 12px rgba(216, 1, 23, .12);
position: relative;
}
.m_header-icons > a.menu-cart-icon i {
color: #d80117 !important;
font-size: 1.2rem;
}
/* Swap the bag-shopping glyph for a cart-shopping glyph on mobile (FA Pro \f07a). */
.m_header-icons > a.menu-cart-icon i.fa-bag-shopping::before {
content: "\f07a";
}
.m_header-icons > a.menu-cart-icon { position: relative !important; }
.m_header-icons > a.menu-cart-icon .menu-cart-icon__badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: #d80117;
color: #fff !important;
font-size: .68rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
/* Search bar — peach pill spanning the full row, magnifier left, mic right (decorative). */
.m_header-icons .header-search-b2b {
width: 100%;
margin-top: 14px;
}
.m_header-main .m_header-icons #search-b2b,
.m_header-icons #search-b2b {
position: relative !important;
background: #ffeee2 !important;
border: 1px solid #ffd9c2 !important;
border-radius: 999px !important;
padding: 4px 50px 4px 18px !important;
box-shadow: none !important;
}
/* Decorative left magnifier removed — one magnifier only, on the right (= submit btn). */
.m_header-main .m_header-icons #search-b2b::before,
.m_header-icons #search-b2b::before { content: none !important; display: none !important; }
.m_header-icons #search-b2b input {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 10px 6px;
font-size: .92rem;
color: #333;
}
.m_header-icons #search-b2b input::placeholder { color: #aa6b56; }
.m_header-icons #search-b2b .header-search-btn,
.m_header-icons #search-b2b .header-search-submit,
.m_header-icons #search-b2b button.header-search-submit {
background: transparent !important;
border: 0 !important;
color: #d80117 !important;
padding: 0 14px !important;
font-size: 1.05rem !important;
line-height: 1;
position: absolute !important;
right: 6px;
top: 50%;
transform: translateY(-50%);
box-shadow: none !important;
}
.m_header-icons #search-b2b .header-search-btn i,
.m_header-icons #search-b2b .header-search-submit i,
.m_header-icons #search-b2b button i,
.m_header-icons #search-b2b button i.fa-magnifying-glass {
color: #d80117 !important;
font-size: 1.1rem !important;
}
.m_header-icons #search-b2b .header-search-text { display: none !important; }
/* The mobile header row needs to wrap so the search bar drops to its own line. */
.m_header-main .header-main-wrapper {
flex-wrap: wrap;
align-items: center;
row-gap: 0;
}
.m_header-icons {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.m_header-icons .header-search-b2b { flex-basis: 100%; }
}
/* ============================================================
GUEST-ONLY "Συνεργαζόμενα Καταστήματα" button (replaces CTA)
+ store-locator modal
============================================================ */
/* Card grid: match the black .product-cart CTA exactly */
.product-layout .product-block .product-block-actions .product-partner-store {
width: 100%;
height: 48px;
padding: 0 0.85rem;
border-radius: 12px;
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
font-size: 0.82rem;
line-height: 1.1;
font-family: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
border: 1px solid #111;
box-shadow: 0 2px 6px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.product-layout .product-block .product-block-actions .product-partner-store i { font-size: 1rem; line-height: 1; }
.product-layout .product-block .product-block-actions .product-partner-store:hover {
background: linear-gradient(180deg, #dc0000 0%, #b30000 100%);
border-color: #b30000;
color: #fff;
box-shadow: 0 6px 16px rgba(220,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
transform: translateY(-1px);
}
.product-layout .product-block .product-block-actions .product-partner-store:focus-visible { outline: 2px solid #dc0000; outline-offset: 2px; }
@media (max-width: 575.98px) {
.product-layout .product-block .product-block-actions .product-partner-store { height: 44px; font-size: 0.72rem; }
}
/* List row: reuse .plist-add box, black instead of red, allow long label */
.plist-add.plist-partner-store {
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
border: 1px solid #111;
color: #fff;
gap: 0.5rem;
font-size: 0.8rem;
line-height: 1.1;
text-align: center;
}
.plist-add.plist-partner-store i { font-size: 0.95rem; }
.plist-add.plist-partner-store:hover {
background: linear-gradient(180deg, #dc0000 0%, #b30000 100%);
border-color: #b30000;
color: #fff;
}
/* PDP: full-width black button inside the .product-btn grid */
.product-btn .product-partner-store--pdp {
width: 100%;
height: 48px;
border-radius: 10px;
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-weight: 600;
border: 1px solid #111;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.product-btn .product-partner-store--pdp i { font-size: 1.05rem; }
.product-btn .product-partner-store--pdp:hover {
background: linear-gradient(180deg, #dc0000 0%, #b30000 100%);
border-color: #b30000;
color: #fff;
transform: translateY(-1px);
}
/* Store-locator modal */
.psm-dialog { position: relative; max-width: 1400px; width: 96vw; margin: 1.5rem auto; }
.psm-modal .modal-content { position: relative; border: 0; border-radius: 16px; overflow: hidden; padding: 0 !important; }
.psm-modal .modal-body { padding: 0; }
.psm-modal .modal-header { background: #111; color: #fff; border-bottom: 0; border-radius: 0; padding: 20px 64px 20px 24px; justify-content: flex-start; }
.psm-modal .modal-title { font-weight: 700; display: inline-flex; align-items: center; gap: 10px; line-height: 1.3; margin: 0; }
/* Clean close button, its own wrapper, top-right corner: black-opacity bg, white X */
.psm-close-wrap { position: absolute; top: 12px; right: 12px; z-index: 30; }
.psm-close {
width: 40px; height: 40px; border-radius: 50%;
background: rgba(0,0,0,0.55); color: #fff; border: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.15rem; cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.psm-close:hover { background: rgba(0,0,0,0.8); transform: scale(1.06); }
.psm-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.psm-locator { display: grid; grid-template-columns: 380px 1fr; height: 78vh; max-height: 78vh; overflow: hidden; }
.psm-left { display: flex; flex-direction: column; border-right: 1px solid #eee; min-height: 0; overflow: hidden; }
.psm-search { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid #f0f0f0; flex: 0 0 auto; }
.psm-search #psm-address { grid-column: 1 / -1; }
/* List scrolls within the fixed-height panel so it never stretches the map */
.psm-list { scrollbar-width: thin; scrollbar-color: #e30613 #f2f2f2; }
.psm-list::-webkit-scrollbar { width: 9px; }
.psm-list::-webkit-scrollbar-track { background: #f2f2f2; border-radius: 8px; }
.psm-list::-webkit-scrollbar-thumb { background: #e30613; border-radius: 8px; border: 2px solid #f2f2f2; }
.psm-list::-webkit-scrollbar-thumb:hover { background: #b30000; }
.psm-search__btn { background: #e30613; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 600; }
.psm-search__btn:hover { background: #b30000; }
.psm-search__clear { background: transparent; border: 0; color: #666; text-decoration: underline; font-size: 0.85rem; }
.psm-list { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; min-height: 0; }
.psm-empty { padding: 24px; text-align: center; color: #888; }
.psm-map-wrap { min-height: 78vh; }
#psm-map { width: 100%; height: 100%; min-height: 78vh; z-index: 1; }
@media (max-width: 767.98px) {
.psm-modal .modal-header { padding: 22px 60px 18px 18px; }
.psm-modal .modal-title { font-size: 1.05rem; }
.psm-close-wrap { top: 14px; right: 14px; }
.psm-locator { grid-template-columns: 1fr; min-height: 0; }
.psm-left { border-right: 0; border-bottom: 1px solid #eee; max-height: 42vh; }
.psm-map-wrap, #psm-map { min-height: 46vh; height: 46vh; }
}
/* Product special note — highlighted notice above product info */
.product-special-note {
display: block;
margin: 0 0 1rem;
padding: .75rem 1rem;
border-radius: 8px;
background: #fff3cd;
color: #000;
font-weight: 700;
line-height: 1.45;
border: 1px solid rgba(0, 0, 0, .06);
}
.product-card-note {
display: block;
margin: .35rem 0 .5rem;
padding: .3rem .55rem;
border-radius: 6px;
background: #fff3cd;
color: #000;
font-weight: 700;
font-size: .78rem;
line-height: 1.3;
border: 1px solid rgba(0, 0, 0, .06);
}
/* ============================================================
"B2B" crossover button — shown to retail visitors only
============================================================ */
.btn-to-b2b {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
padding: 0.55rem 1.15rem;
margin-left: 0.75rem;
border-radius: 999px;
background: #E62128;
color: #fff !important;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
white-space: nowrap;
box-shadow: none;
text-shadow: none;
transition: background 0.2s ease-in-out;
}
/* `.header-main a` forces #1b1b1b !important on every link in the header, and beats
a bare `.btn-to-b2b`. The id prefix is what makes the white stick. */
#header a.btn-to-b2b,
#header a.btn-to-b2b:link,
#header a.btn-to-b2b:visited,
#header a.btn-to-b2b:hover,
#header a.btn-to-b2b:focus,
#header a.btn-to-b2b:active {
color: #fff !important;
}
#header a.btn-to-b2b:hover,
#header a.btn-to-b2b:focus {
background: #b5171d;
}
/* Mobile header packs the icons tightly — smaller pill. */
.btn-to-b2b--sm {
padding: 0.4rem 0.7rem;
margin-left: 0.5rem;
font-size: 0.8rem;
}