/**
* Ruppert – ThemeVolty megamenu (header layer 3 + desktop dropdown only).
* Figma reference: cream bar, teal serif nav, coral promo, mega panel #FDF8F0.
*/
/* -------------------------------------------------------------------------- */
/* Layer 3 – bar */
/* -------------------------------------------------------------------------- */
@font-face {
font-family: 'TT-Commons-Pro-Regular';
src: url('../fonts/tt-common/TT_Commons_Pro_Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Commons-Pro-Medium';
src: url('../fonts/tt-common/TT_Commons_Pro_Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Commons-Pro-Bold';
src: url('../fonts/tt-common/TT_Commons_Pro_Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Commons-Pro-Demibold';
src: url('../fonts/tt-common/TT_Commons_Pro_DemiBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Rationalist-demibold';
src: url('../fonts/tt-rationalist/TT-Rationalist-DemiBold-BF66bdc80b46a61.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Rationalist-regular';
src: url('../fonts/tt-rationalist/TT-Rationalist-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Rationalist-Medium-italic';
src: url('../fonts/tt-rationalist/TT-Rationalist-Medium-Italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Rationalist-Medium';
src: url('../fonts/tt-rationalist/TT-Rationalist-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Commons-Pro-DemiBold-Italic';
src: url('../fonts/tt-common/TT_Commons_Pro_DemiBold_Italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Listing pagination – brand teal (override Bootstrap / theme.css) */
.page-category #products .products__pagination .pagination,
.page-search #products .products__pagination .pagination ,
.page-manufacturer #products .products__pagination .pagination{
--bs-pagination-color: #01454a;
--bs-pagination-hover-color: #01454a;
--bs-pagination-focus-color: #01454a;
--bs-pagination-active-color: #01454a;
--bs-pagination-disabled-color: #8aa3a6;
--bs-link-color: #01454a;
--bs-link-hover-color: #01454a;
}
.page-category #products .products__pagination .pagination__number,
.page-category #products .products__pagination .pagination .page-link,
.page-category #products .products__pagination .pagination .page-item.active .page-link,
.page-category #products .products__pagination .pagination .page-item.disabled .page-link,
.page-search #products .products__pagination .pagination__number,
.page-manufacturer #products .products__pagination .pagination__number,
.page-search #products .products__pagination .pagination .page-link,
.page-search #products .products__pagination .pagination .page-item.active .page-link,
.page-search #products .products__pagination .pagination .page-item.disabled .page-link {
color: #01454a !important;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
}
.page-category #products .products__pagination .pagination .page-link:hover,
.page-category #products .products__pagination .pagination .page-link:focus,
.page-search #products .products__pagination .pagination .page-link:hover,
.page-manufacturer #products .products__pagination .pagination .page-link:hover,
.page-search #products .products__pagination .pagination .page-link:focus {
color: #01454a !important;
background-color: transparent;
box-shadow: none;
}
.page-category #products .products__pagination .pagination .page-item.active .page-link,
.page-search #products .products__pagination .pagination .page-item.active .page-link ,
.page-manufacturer #products .products__pagination .pagination .page-item.active .page-link{
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-weight: 500;
}
.page-category #products .products__pagination .pagination .page-item.disabled .page-link,
.page-search #products .products__pagination .pagination .page-item.disabled .page-link ,
.page-manufacturer #products .products__pagination .pagination .page-item.disabled .page-link{
color: #8aa3a6 !important;
opacity: 1;
}
.page-category #products .products__pagination .pagination .material-icons,
.page-search #products .products__pagination .pagination .material-icons ,
.page-manufacturer #products .products__pagination .pagination .material-icons{
color: #01454a;
font-size: 22px;
}
.page-category #products .products__pagination .pagination__container,
.page-search #products .products__pagination .pagination__container ,
.page-manufacturer #products .products__pagination .pagination__container{
color: #01454a;
}
#header .header-nav.ruppert-mm {
background-color: #fdf8f0;
border-bottom: 1px solid rgba(0, 61, 61, 0.08);
}
/* ===== 1) TOP BAR – LANG SWITCHER ===== */
.ruppert-header-top,
.ruppert-topbar {
background-color: #004f4b;
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
font-size: 12px;
}
.ruppert-topbar.d-none.d-md-flex {
display: flex !important;
}
.ruppert-topbar__inner {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 32px;
gap: 24px;
}
.ruppert-topbar__left {
margin-right: auto;
font-size: 12px;
opacity: 0.85;
}
.ruppert-topbar__right {
display: inline-flex;
align-items: center;
gap: 20px;
}
.ps-mainmenu__tree-item-wrapper{
height:73px;
}
.ruppert-topbar a,
.ruppert-topbar .header-block__action-btn {
color: #ffffff;
text-decoration: none;
}
.ruppert-topbar .ps-languageselector .form-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border: 0;
padding: 0;
color: #ffffff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
}
.ruppert-topbar .ps-languageselector .form-select::-ms-expand {
display: none;
}
/* ===== 2) MIDDLE ROW – LOGO / SEARCH / ICONS ===== */
.ruppert-header-middle {
background-color: #f9f1e4;
border-bottom: 1px solid #e4dccd;
padding-block: 14px;
}
.ruppert-header-middle__inner {
display: grid;
grid-template-columns: auto minmax(320px, 620px) auto;
align-items: center;
gap: 24px;
}
.ruppert-header-middle__logo img {
max-height: 40px;
width: auto;
}
.ruppert-header-middle__search {
display: flex;
justify-content: center;
min-width: 0;
}
.ruppert-header-middle__search #_desktop_ps_searchbar {
display: flex !important;
width: 100%;
max-width: 620px;
margin: 0 !important;
}
.ruppert-header-middle__search .ps-searchbar {
width: 100%;
margin: 0;
}
.ruppert-header-middle__search .ps-searchbar__input {
height: 44px;
border-radius: 999px;
border: 1px solid #d5cdc0;
padding-left: 44px;
padding-right: 44px;
font-size: 14px;
color: #3a3a3a;
background-color: #ffffff;
}
.ruppert-header-middle__search .ps-searchbar__magnifier {
left: 16px;
color: #6c757d;
}
.ruppert-header-middle__search .ps-searchbar__clear {
right: 16px;
}
.ruppert-header-middle__actions {
display: inline-flex;
align-items: center;
gap: 24px;
}
.ruppert-header-action__btn {
display: inline-flex;
align-items: center;
gap: 6px;
color: #004f4b;
font-size: 13px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: color .2s ease;
}
.ruppert-header-action__btn .material-icons {
font-size: 20px;
}
.ruppert-header-action__btn:hover,
.ruppert-header-action__btn:focus-visible {
color: #e65a3a;
}
@media (max-width: 767.98px) {
.ruppert-header-middle__inner {
display: flex;
justify-content: space-between;
}
.ruppert-header-middle__search {
display: none;
}
}
/* ===== 3) BOTTOM ROW – MAIN MENU ===== */
.ruppert-nav-bar {
background-color: #f9f1e4;
border-bottom: 2px solid #004f4b;
}
.ruppert-nav-bar .ps-mainmenu--desktop {
width: 100%;
}
.ruppert-nav-bar .ps-mainmenu__desktop {
display: block !important;
}
.ruppert-nav-bar .ps-mainmenu__tree {
display: flex;
align-items: center;
gap: 28px;
margin: 0;
padding-block: 0;
flex-wrap: nowrap;
overflow-x: auto;
}
.ruppert-nav-bar .ps-mainmenu__tree-link {
padding-block: 16px;
color: #004f4b;
font-size: 14px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
letter-spacing: 0.02em;
}
.ruppert-nav-bar .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link,
.ruppert-nav-bar .ps-mainmenu__tree-link:hover,
.ruppert-nav-bar .ps-mainmenu__tree-link:focus-visible {
color: #e65a3a;
}
.ruppert-nav-bar .ps-mainmenu__tree-item:first-child .ps-mainmenu__tree-link {
color: #e65a3a;
}
/* -------------------------------------------------------------------------- */
/* Nav breakpoint: hamburger until 1300px */
/* -------------------------------------------------------------------------- */
@media (max-width: 1299.98px) {
#header .ruppert-header-main__inner {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
min-width: 0;
}
#header .ruppert-header-main__logo {
flex: 0 1 auto;
min-width: 0;
margin-right: 0 !important;
}
#header .ruppert-header-main__search {
flex: 0 0 auto !important;
min-width: 0;
width: auto !important;
max-width: none !important;
margin-left: auto !important;
}
#header .ruppert-header-main__search #_desktop_ps_searchbar {
display: none !important;
}
#header .ruppert-header-main__search .ps-searchbar--mobile {
display: inline-flex !important;
}
#header .ruppert-mm-mobile-bar {
display: flex !important;
flex: 0 0 auto !important;
flex-shrink: 0 !important;
align-items: center;
min-width: 2.5rem;
order: 20;
width: auto;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
#header .ruppert-mm-mobile-bar .tvmobile-sliderbar-btn {
margin: 0;
}
#header .ruppert-mm-mobile-bar__link {
width: 2.5rem;
height: 2.5rem;
border-radius: 0;
border: 0;
color: #01454a;
background: transparent;
padding: 0;
}
#header .ruppert-mm-mobile-bar__link:focus-visible {
outline: 2px solid #01454a;
outline-offset: 2px;
}
#header .ruppert-mm-mobile-bar__icon {
display: block;
width: 1.25rem;
height: 2px;
background: currentColor;
box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}
#header .header-nav.ruppert-mm #tvdesktop-megamenu {
display: none !important;
}
#header .header-nav.ruppert-mm > .container-md {
padding-top: 0;
padding-bottom: 0;
min-height: 0;
}
#header .header-nav.ruppert-mm {
border: 0;
background: transparent;
}
.ps-imageslider__cta {
margin-right: 10px !important;
}
}
@media (min-width: 1300px) {
#header .ruppert-mm-mobile-bar {
display: none !important;
}
/* Figma desktop header: logo | centered search | account actions (shop-test) */
#header .ruppert-header-main__inner {
display: grid !important;
grid-template-columns: auto minmax(48px, 1fr) minmax(360px, 576px) minmax(48px, 1fr) auto !important;
grid-template-areas: "logo pad-l search pad-r actions" !important;
align-items: center !important;
gap: 0 20px !important;
min-height: 96px !important;
padding: 16px 40px !important;
}
#header .ruppert-header-main__inner:not(:has(.ruppert-header-main__actions)) {
grid-template-columns: auto minmax(48px, 1fr) minmax(360px, 576px) minmax(48px, 1fr) !important;
grid-template-areas: "logo pad-l search pad-r" !important;
}
#header .ruppert-header-main__logo {
grid-area: logo !important;
}
#header .ruppert-header-main__search {
grid-area: search !important;
justify-self: center !important;
width: 100% !important;
max-width: 576px !important;
}
#header .ruppert-header-main__actions {
grid-area: actions !important;
justify-self: end !important;
display: inline-flex !important;
align-items: center !important;
gap: 20px !important;
white-space: nowrap !important;
}
#header .ruppert-header-main__inner > .ruppert-mm-mobile-bar,
#header .ruppert-header-main__inner > .ruppert-header-main__mobile-icon,
#header .ruppert-header-main__inner > #_mobile_ps_customersignin,
#header .ruppert-header-main__inner > #_ruppert_mobile_wishlist,
#header .ruppert-header-main__inner > #_mobile_ps_shoppingcart {
display: none !important;
}
}
/* Small laptop: account actions beside hamburger (992px–1299px) */
@media (min-width: 992px) and (max-width: 1299.98px) {
#header .ruppert-header-main__inner {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 12px !important;
min-height: 78px !important;
padding: 12px 24px !important;
}
#header .ruppert-header-main__logo {
flex: 0 0 auto !important;
min-width: 0;
}
#header .ruppert-header-main__search {
flex: 1 1 auto !important;
min-width: 0;
max-width: 520px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#header .ruppert-header-main__actions {
flex: 0 0 auto !important;
order: 3 !important;
margin-left: 0 !important;
display: inline-flex !important;
}
#header .ruppert-mm-mobile-bar {
flex: 0 0 auto !important;
order: 4 !important;
}
#header .ruppert-header-main__inner > .ruppert-header-main__mobile-icon,
#header .ruppert-header-main__inner > #_mobile_ps_customersignin,
#header .ruppert-header-main__inner > #_ruppert_mobile_wishlist,
#header .ruppert-header-main__inner > #_mobile_ps_shoppingcart {
display: none !important;
}
}
/* -------------------------------------------------------------------------- */
/* Desktop layout: left-aligned top links + correct dropdown anchor */
/* -------------------------------------------------------------------------- */
@media (min-width: 1300px) {
#header .header-nav.ruppert-mm > .container,
#header .header-nav.ruppert-mm > .container-md {
position: relative;
}
.service-image{
height:592px;
}
@media (max-width: 991.98px) {
/* Hausmarken mobile/tablet hard override (uses custom BO classes) */
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background):not(.hauserman-section):not(.hauserman-row2),
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background):not(.hauserman-section):not(.hauserman-row2) {
display: block !important;
width: 100% !important;
margin: 0.65rem 0 0 !important;
padding: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background):not(.hauserman-section):not(.hauserman-row2) > .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background):not(.hauserman-section):not(.hauserman-row2) > .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background):not(.hauserman-section):not(.hauserman-row2) > [class*="col-"],
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background):not(.hauserman-section):not(.hauserman-row2) > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 0 10px !important;
display: block !important;
flex: none !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background):not(.hauserman-section):not(.hauserman-row2) .ul-column,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background):not(.hauserman-section):not(.hauserman-row2) .ul-column {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background) li.menu-item:has(.html-block img),
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background) li.menu-item:has(.html-block img) {
width: 100% !important;
height: auto !important;
min-height: 100px !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 10px !important;
border: 1px solid rgba(0, 61, 61, 0.12) !important;
background: #fff !important;
overflow: hidden !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background) li.menu-item:has(.html-block img)::after,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background) li.menu-item:has(.html-block img)::after,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background) li.menu-item:has(.html-block img) > a:not(.ruppert-mm-html-block-link),
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background) li.menu-item:has(.html-block img) > a:not(.ruppert-mm-html-block-link) {
display: none !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background) li.menu-item:has(.html-block img) .html-block,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background) li.menu-item:has(.html-block img) .html-block {
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
overflow: visible !important;
border-radius: inherit !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background) p.logo-background,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background) p.kogo-background,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background) .html-block p,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background) .html-block p {
margin: 0 !important;
width: 100% !important;
min-height: 90px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.logo-background) li.menu-item:has(.html-block img) img,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row:has(.kogo-background) li.menu-item:has(.html-block img) img {
position: static !important;
inset: auto !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 130px !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center !important;
transform: none !important;
border-radius: 0 !important;
}
}
/* DropdownCB must be the header container — not ul.menu-content (module default). */
#header .header-nav.ruppert-mm #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content {
position: static;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 0.25rem 1.5rem;
width: 100%;
max-width: 100%;
text-align: left;
}
#header .header-nav.ruppert-mm .container_tv_megamenu {
display: block;
width: 100%;
max-width: 100%;
text-align: left;
padding: 16px 24px 0px;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal {
width: 100%;
text-align: left;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 {
float: none;
display: inline-flex;
align-items: center;
position: static;
flex: 0 0 auto;
}
/* Full-width mega panel under the bar, inside the same container as the logo row. */
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown.ruppert-mm-dropdown {
left: 0 !important;
right: 0 !important;
top: 100%;
width: auto;
min-width: 0 !important;
max-width: none;
margin: 0;
box-sizing: border-box;
transform-origin: top center;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown.tv-sub-left,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown.tv-sub-center {
left: 0 !important;
right: 0 !important;
margin-left: 0;
margin-right: 0;
}
}
/* -------------------------------------------------------------------------- */
/* Top-level links (Figma: bold serif teal; first item coral “Promo”) */
/* -------------------------------------------------------------------------- */
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a {
font-family: TT-Rationalist-demibold !important;
font-weight:600;
font-size: 16px;
color : #40807E;
}
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-header > a {
font-family: TT-Rationalist-demibold !important;
font-weight:600;
font-size: 14px;
}
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-line > a {
font-family: TT-Commons-Pro-Regular !important;
font-weight:400;
font-size: 14px;
line-height : 100%;
line-spacing: 0%;
}
@media (min-width: 1300px) {
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a {
letter-spacing: 0.02em;
line-height: 1.25;
padding: 1rem 0.75rem !important;
text-transform: none;
text-decoration: none;
text-shadow: none;
white-space: nowrap;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a:hover,
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a:focus-visible {
opacity: 0.85;
}
/* Active top-level item pill (default: teal) */
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1.active > a,
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1.current > a,
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1.ruppert-mm-sub-open > a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.62rem 1.25rem !important;
border-radius: 12px;
background: #01454a;
color: #fcf6ed !important;
opacity: 1;
}
/* Promo (Figma): first top-level item after the hidden mobile title, or class promo / menu-promo in megamenu BO. */
#header .header-nav.ruppert-mm .menu-content > li.level-1.promo > a,
#header .header-nav.ruppert-mm .menu-content > li.level-1.menu-promo > a,
#header .header-nav.ruppert-mm .menu-content > li.tvmega-menu-title + li.level-1 > a {
color: #e07a5f;
}
/* Active promo item uses coral pill */
#header .header-nav.ruppert-mm .menu-content > li.level-1.promo.active > a,
#header .header-nav.ruppert-mm .menu-content > li.level-1.promo.current > a,
#header .header-nav.ruppert-mm .menu-content > li.level-1.promo.ruppert-mm-sub-open > a,
#header .header-nav.ruppert-mm .menu-content > li.level-1.menu-promo.active > a,
#header .header-nav.ruppert-mm .menu-content > li.level-1.menu-promo.current > a,
#header .header-nav.ruppert-mm .menu-content > li.level-1.menu-promo.ruppert-mm-sub-open > a,
#header .header-nav.ruppert-mm .menu-content > li.tvmega-menu-title + li.level-1.active > a,
#header .header-nav.ruppert-mm .menu-content > li.tvmega-menu-title + li.level-1.current > a,
#header .header-nav.ruppert-mm .menu-content > li.tvmega-menu-title + li.level-1.ruppert-mm-sub-open > a {
background: #f07855;
color: #fcf6ed !important;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1.parent > a::after {
color: #003d3d;
font-size: 1.125rem;
top: 0.125rem;
display:none;
}
}
/* -------------------------------------------------------------------------- */
/* Dropdown panel */
/* -------------------------------------------------------------------------- */
@media (min-width: 1300px) {
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown.ruppert-mm-dropdown,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown {
background: #FCF6ED;
border: none;
border-bottom: 1px solid rgba(0, 61, 61, 0.12);
border-radius: 0;
box-shadow: 0 0.5rem 1.5rem rgba(0, 61, 61, 0.08);
padding: 32px 40px;
overflow-x: hidden;
}
/* Masthead (Figma: category title + full-width divider) */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown .ruppert-mm-masthead {
padding: 0 0 0.875rem;
margin: 0 0 1.25rem;
border-bottom: 1px solid rgba(0, 61, 61, 0.15);
max-width: 100%;
background: transparent;
border-top: none;
border-left: none;
border-right: none;
}
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown .ruppert-mm-masthead__title {
font-family: TT-Commons-Pro-Medium !important;
font-weight: 500;
margin: 0;
padding: 0;
font-size: 14px !important;
line-height: 100%;
text-transform: uppercase;
color: #01454A !important;
line-spacing:0%;
}
/* Remove BO-only duplicate masthead rows (single full-width header, no links) */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown > .tv-menu-row.row:first-child:has(> .tv-menu-col:only-child):has(
> .tv-menu-col > .ul-column > li.menu-item.item-header:only-child
) {
display: none !important;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
/* Row # “empty” in BO still renders a bare .tv-menu-row */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown > .tv-menu-row.row:not(:has(.tv-menu-col)) {
display: none !important;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal .menu-dropdown .tv-menu-row.row {
--ruppert-mm-gap: clamp(14px, 1.85vw, 26px);
margin-left: 0 !important;
margin-right: 0 !important;
--bs-gutter-x: var(--ruppert-mm-gap);
row-gap: 1rem;
align-items: flex-start;
}
/* Link columns row(s): tighter Bootstrap gutter alignment with Figma */
#header .header-nav.ruppert-mm .tv-menu-horizontal .menu-dropdown:not(.ruppert-mm-dropdown) .tv-menu-row.row > [class*="col-"],
#header .header-nav.ruppert-mm .tv-menu-horizontal .menu-dropdown.ruppert-mm-dropdown .tv-menu-row.row > [class*="col-"] {
padding-left: calc(var(--ruppert-mm-gap) * 0.5);
padding-right: calc(var(--ruppert-mm-gap) * 0.5);
}
/*
* Image/card strip — ThemeVolty uses col-xs-12 (= width 100% each) so rows stack.
* Bootstrap .row>* also implies width 100%; we neutralize gutters and use gap.
*/
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.row.ruppert-mm-card-strip:not(.hauserman-row2),
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) {
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch !important;
gap: clamp(12px, 1.65vw, 22px) !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0.25rem !important;
padding-top: 1.625rem !important;
padding-left: 0 !important;
padding-right: 0 !important;
/* border-top: 1px solid rgba(0, 61, 61, 0.12); */
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
}
#header .header-nav.ruppert-mm
.tv-menu-horizontal li.level-1 > .tv-sub-menu
.tv-menu-row.row > .tv-menu-col,
#header .header-nav.ruppert-mm
.tv-menu-horizontal li.level-1 > .tv-sub-menu
.tv-menu-row.row > [class*="col-"] {
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Respect Bootstrap column widths */
#header .header-nav.ruppert-mm
.ruppert-mm-card-strip > .col-sm-2 {
flex: 0 0 16.666666% !important;
max-width: 16.666666% !important;
width: 16.666666% !important;
}
/* Large image column */
#header .header-nav.ruppert-mm
.ruppert-mm-card-strip > .col-sm-6 {
flex: 1 1 auto !important;
max-width: calc(50% - 40px) !important;
width: calc(50% - 40px) !important;
}
/* col-sm-3 */
#header .header-nav.ruppert-mm
.ruppert-mm-card-strip > .col-sm-3 {
flex: 0 0 260px !important;
max-width: 260px !important;
width: 260px !important;
min-width: 260px !important;
}
/* col-sm-4 */
#header .header-nav.ruppert-mm
.ruppert-mm-card-strip > .col-sm-4 {
flex: 0 0 340px !important;
max-width: 340px !important;
width: 340px !important;
min-width: 340px !important;
}
/* 2-column menu list */
#header .header-nav.ruppert-mm
.spirit-column .ul-column {
column-count: 2;
column-gap: 32px;
}
/* Keep header full width */
#header .header-nav.ruppert-mm
.spirit-column .item-header {
column-span: all;
break-inside: avoid;
}
/* Prevent item breaking */
#header .header-nav.ruppert-mm
.spirit-column .item-line {
break-inside: avoid;
margin-bottom: 6px;
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) > .tv-menu-col .ul-column,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) > .tv-menu-col .ul-column {
padding: 0;
margin: 0;
list-style: none;
height: 100%;
}
/* Image card tiles — fill frame edge-to-edge (no gray pillarboxing from max-width:100%/height:auto) */
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img),
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img) {
position: relative;
isolation: isolate;
overflow: hidden;
margin: 0;
padding: 0 !important;
border-radius: 10px !important;
width: 100%;
aspect-ratio: 16 / 10;
min-height: 128px;
max-height: 128px;
background-color: #003d3d;
list-style: none;
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img)::after,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img)::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
/* Legibility only near top; avoids muddy gray cast over whole photo */
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.38) 0%,
rgba(0, 0, 0, 0.08) 45%,
transparent 72%
);
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) .html-block,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img) .html-block {
padding: 0 !important;
margin: 0 !important;
display: block;
line-height: 0;
position: absolute;
inset: 0;
overflow: hidden !important;
border-radius: inherit;
}
/* BO often wraps ![]()
in — resets width:auto / centers image and exposes “gray” sides */
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) .html-block p,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img) .html-block p,
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) .html-block figure,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img) .html-block figure {
margin: 0 !important;
padding: 0 !important;
border: none;
height: 100%;
width: 100%;
display: contents;
line-height: 0;
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) img,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img) img {
position: absolute !important;
inset: 0 !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
display: block;
vertical-align: bottom;
border-radius: 0 !important;
object-fit: cover !important;
object-position: center center;
transform: none !important;
}
/* Label on imagery: ThemeVolty renders before .html-block in HTML-type items */
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img) > a {
position: absolute;
left: 12px;
top: 12px;
z-index: 2;
max-width: 50%;
color: #fff !important;
font-family:
TT-Commons-Pro-Medium !important;
font-size: 14px;
font-weight: 500;
line-height: 100% !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: auto;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
text-transform: none;
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a:hover,
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a:focus-visible,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img) > a:hover,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip:not(.hauserman-row2) li.menu-item:has(.html-block img) > a:focus-visible {
color: #fdf8f0 !important;
}
/*
* Figma teal promo pill (card 1): first column without an image-only HTML block —
* add promo copy as first column HTML/text in mega menu BO, or omit for image-only grids.
*/
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img)
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column,
#header
.header-nav.ruppert-mm
.tv-menu-horizontal
li.level-1
> .tv-sub-menu
.tv-menu-row.ruppert-mm-card-strip
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column {
height: 100%;
}
/* #header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img)
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column
> li.menu-item:first-child
> a,
#header
.header-nav.ruppert-mm
.tv-menu-horizontal
li.level-1
> .tv-sub-menu
.tv-menu-row.ruppert-mm-card-strip
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column
> li.menu-item:first-child
> a {
box-sizing: border-box;
display: flex !important;
align-items: center !important;
min-height: 10.5rem;
padding: clamp(14px, 1.75vw, 22px) !important;
background-color: #003d3d !important;
color: #fff !important;
border-radius: 10px !important;
font-family:
TT-Commons-Pro-Medium,
system-ui,
-apple-system,
sans-serif !important;
font-size: clamp(14px, 1.08vw, 16px);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: none;
align-self: stretch;
line-height: 1.35 !important;
text-decoration: none !important;
} */
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img)
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column
> li.menu-item:first-child
> a:hover,
#header
.header-nav.ruppert-mm
.tv-menu-horizontal
li.level-1
> .tv-sub-menu
.tv-menu-row.ruppert-mm-card-strip
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column
> li.menu-item:first-child
> a:hover {
filter: brightness(1.06);
color: #fff !important;
}
/*
* Wein & Schaumwein card row (Figma): promo + 4 region cards, 24px gaps, full inner width.
* Scoped via .ruppert-mm-card-strip--wine (5 columns in BO last row).
*/
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip--wine {
gap: 24px !important;
justify-content: flex-start;
width: 100%;
max-width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
#header .header-nav.ruppert-mm .ruppert-mm-card-strip--wine > .tv-menu-col,
#header .header-nav.ruppert-mm .ruppert-mm-card-strip--wine > [class*="col-"] {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
#header .header-nav.ruppert-mm .ruppert-mm-card-strip--wine li.menu-item:has(.html-block img) {
aspect-ratio: 16 / 10;
min-height: 128px;
max-height: none;
width: 100%;
}
#header .header-nav.ruppert-mm .ruppert-mm-card-strip--wine > .tv-menu-col:first-child:not(:has(li .html-block img)) ul.ul-column {
height: 100%;
}
#header .header-nav.ruppert-mm .ruppert-mm-card-strip--wine > .tv-menu-col:first-child:not(:has(li .html-block img)) ul.ul-column > li.menu-item:first-child > a {
box-sizing: border-box;
display: flex !important;
align-items: center !important;
justify-content: flex-start;
width: 100%;
min-height: 128px;
height: 100%;
padding: 1rem 1.25rem !important;
background-color: #003d3d !important;
color: #fff !important;
border-radius: 10px !important;
font-family: TT-Commons-Pro-Medium, system-ui, -apple-system, sans-serif !important;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
line-height: 1.35 !important;
text-decoration: none !important;
}
/* Section title rows — skip card row labels (often item-header + html-block image) */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown ul li.item-header:not(:has(.html-block img)) > a {
display: block;
text-align: left !important;
line-height: 1.3;
color: #F07855 !important;
margin: 0 0 0.625rem;
padding: 0 !important;
border: none !important;
}
/* Link lists */
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-line > a {
text-align: left !important;
color: #01454A;
padding: 0.35rem 0 !important;
}
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-line > a:hover,
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown ul li.item-header:not(:has(.html-block img)) > a:hover {
color: #F07855 !important;
}
#header .header-nav.ruppert-mm .menu-dropdown ul li.menu-item.current > a,
#header .header-nav.ruppert-mm .menu-dropdown ul li.menu-item.ruppert-mm-route-active > a {
color: #F07855 !important;
}
/* Remove default ThemeVolty bullets in this theme */
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-line.tvmega-menu-link a::before {
display: none !important;
}
#header .header-nav.ruppert-mm .container_tv_megamenu .tv-sub-menu {
padding: 0;
}
/* Non-card megamenu HTML blocks (if used in link rows) */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown .tv-menu-row.row:not(:last-of-type) .html-block:not(:has(img)) {
padding-top: 0.25rem;
}
}
/* -------------------------------------------------------------------------- */
/* Mobile: leave module behaviour; soften title bar only */
/* -------------------------------------------------------------------------- */
@media (max-width: 991px) {
#header .header-nav.ruppert-mm #tvmobile-megamenu .tv-menu-horizontal ul li.level-1 > a,
#header .header-nav.ruppert-mm #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 > a {
color: #003d3d;
}
#tvmobile-megamenu .tvmega-menu-link img {
width: 90vw;
max-width: 100%;
}
#header .offcanvas-header .btn-close{
font-family: 'TT-Commons-Pro-Regular', sans-serif;
color: #40807E;
}
}
/* RUPPERT HEADER REVAMP (migrated from ruppert-custom.css) */
/* ============================================
RUPPERT THEME - Header Revamp (Figma aligned)
============================================ */
/* ThemeVolty injected legacy headers — never show on Ruppert */
#header .tvcmsdesktop-top-header-wrapper,
#header .tvheader-mobile-layout,
#header .header-bottom,
#header .ruppert-header-main ~ .ruppert-header-main,
#header .ruppert-header-top ~ .ruppert-header-top {
display: none !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.tvcmstheme-control,
.tvcmstheme-layout {
display: none !important;
pointer-events: none !important;
}
/* Row 1 - Top bar */
.ruppert-header-top {
background-color: #01454a;
color: #ffffff;
height:36px;
}
.ruppert-header-top__inner {
/* min-height: 26px; */
display: flex;
justify-content: flex-end;
align-items: center;
padding-right : 32px;
}
.ruppert-header-top__right {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.ruppert-header-top a {
color: #ffffff;
text-decoration: none;
}
.ruppert-header-top #_desktop_ps_languageselector {
display: flex;
align-items: center;
}
.ruppert-language-switcher {
display: inline-flex;
align-items: center;
gap: 0;
}
.ruppert-language-switcher__link {
display: inline-flex;
align-items: center;
font-size: 0;
line-height: 1;
letter-spacing: 0.04em;
color: #ffffff;
text-transform: uppercase;
padding: 0 6px;
opacity: 0.88;
}
/* Render ISO code from data attribute so browser auto-translate cannot rewrite DE/FR labels */
.ruppert-language-switcher__link::before {
content: attr(data-iso-code);
font-size: 11px;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ruppert-language-switcher__link:first-child {
padding-left: 0;
}
.ruppert-language-switcher__link:last-child {
padding-right: 0;
}
.ruppert-language-switcher__link + .ruppert-language-switcher__link {
border-left: 1px solid rgba(255, 255, 255, 0.45);
}
.ruppert-language-switcher__link.is-current,
.ruppert-language-switcher__link:hover,
.ruppert-language-switcher__link:focus {
opacity: 1;
}
/* Row 2 - Main header */
.ruppert-header-main {
background-color: #ffffff;
/* border-bottom: 1px solid #dce3e5; */
}
.ruppert-header-main__inner {
min-height: 78px;
display: grid;
grid-template-columns: auto minmax(320px, 560px) auto;
align-items: center;
gap: 18px;
padding: 16px 40px 16px 40px;
}
.ruppert-header-main__logo .logo {
display: inline-flex;
}
.ruppert-header-main__logo img {
max-height: 46px;
width: 174px;
}
.ruppert-header-main__search {
width: 100%;
max-width: 576px;
justify-self: center;
}
.ruppert-header-main__search #_desktop_ps_searchbar {
display: flex !important;
width: 100%;
}
.ruppert-header-main__search .ps-searchbar,
.ruppert-header-main__search .ps-searchbar__form {
width: 100%;
}
.ruppert-header-main__search .ps-searchbar__form {
position: relative;
}
.ruppert-header-main__search .ps-searchbar__magnifier {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #01454a;
font-size: 20px;
}
.ruppert-header-main__search .ps-searchbar__input.form-control {
height: 42px;
border: 1px solid #40807E;
border-radius: 6px;
padding: 9px 40px 9px 14px;
font-size: 13px;
color: #2e3e40;
box-shadow: none;
background-color: #ffffff;
}
.ruppert-header-main__search .ps-searchbar__input.form-control:focus {
border-color: #01454a;
}
.ruppert-header-main__search .ps-searchbar__clear {
right: 40px;
}
.ruppert-header-main__search .ps-searchbar--mobile {
display: none !important;
}
.ruppert-header-main__actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
}
.ruppert-header-action .ruppert-header-action__btn,
.ruppert-header-action .header-block__action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
color: #01454a;
text-decoration: none;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.ruppert-header-action .material-icons,
.ruppert-header-action .header-block__icon {
font-size: 18px;
line-height: 1;
color: #01454a;
}
.ruppert-header-action .ruppert-header-action__btn:hover,
.ruppert-header-action .header-block__action-btn:hover {
color: #0b676f;
}
.ruppert-header-action--cart #_desktop_ps_shoppingcart,
.ruppert-header-action--cart .ps-shoppingcart,
.ruppert-header-action--cart .header-block {
display: inline-flex;
align-items: center;
}
.ruppert-header-action--cart .header-block__title {
display: inline-flex !important;
font-size: 14px;
font-weight: 500;
}
.ruppert-header-action--cart .header-block__badge {
margin-left: 6px;
}
/* Row 3 - Main navigation */
.ruppert-header-nav {
background-color: #FCF6ED;
/* border-bottom: 1px solid #dce3e5; */
}
.ruppert-header-nav .ps-mainmenu--desktop {
display: block;
width: 100%;
}
.ruppert-header-nav .ps-mainmenu__desktop {
display: block !important;
}
.ruppert-header-nav .ps-mainmenu__tree {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: nowrap;
overflow-x: auto;
padding: 0;
margin: 0;
}
.ruppert-header-nav .ps-mainmenu__tree-link {
display: inline-flex;
align-items: center;
padding: 14px 0;
color: #40807E;
font-size: 16px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
font-family: 'TT-Rationalist-demibold' !important;
}
.ruppert-header-nav .ps-mainmenu__tree-item:first-child .ps-mainmenu__tree-link {
color: #d94a4a;
}
.ruppert-header-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link,
.ruppert-header-nav .ps-mainmenu__tree-link:hover,
.ruppert-header-nav .ps-mainmenu__tree-link:focus {
color: #0d747c;
}
.NEU-section,
.NEU-section .ul-column,
.NEU-section .tvmega-menu-link,
.NEU-section a {
height: 50px !important;
min-height: auto !important;
max-height: 100px !important;
background-color: #01454A !important;
color: #FCF6ED !important;
padding: 0 10px !important;
align-items: center !important;
display: flex !important;
border-radius: 8px !important;
font-size : 14px !important;
font-weight: 500 !important;
line-height: 100% !important;
font-family: 'TT-Rationalist-Medium' !important;
}
/* Responsive behavior */
@media (max-width: 1199.98px) {
.ruppert-header-main__inner {
grid-template-columns: auto minmax(240px, 1fr) auto;
gap: 12px;
}
.ruppert-header-main__actions {
gap: 14px;
}
.ruppert-header-nav .ps-mainmenu__tree {
gap: 20px;
}
}
@media (max-width: 991.98px) {
.ruppert-header-main__inner {
display: flex;
flex-wrap: nowrap;
min-height: 64px;
gap: 12px;
row-gap: 0;
padding: 10px 16px;
align-items: center;
justify-content: space-between;
}
.ruppert-header-main__logo {
margin-right: 0;
flex: 0 1 auto;
min-width: 0;
}
.ruppert-header-main__search {
flex: 0 0 auto;
width: auto;
max-width: none;
margin-left: auto;
}
.ruppert-header-main__search #_desktop_ps_searchbar {
display: none !important;
}
.ruppert-header-main__search .ps-searchbar--mobile {
display: inline-flex !important;
}
.ruppert-header-main__actions {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu__desktop {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu__mobile-toggle {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 48px;
}
}
/* Keep account/wishlist/cart only inside off-canvas on mobile */
@media (max-width: 767.98px) {
#header #_mobile_ps_customersignin,
#header #_ruppert_mobile_wishlist,
#header #_mobile_ps_shoppingcart {
display: none !important;
}
}
@media (max-width: 767.98px) {
.ruppert-header-top {
display: none;
}
.ruppert-header-main__logo img {
max-height: 38px;
}
.ps-shoppingcart{
display: none !important;
}
}
/* RUPPERT FINAL HEADER OVERRIDES */
.ruppert-header-top {
background: #01454a !important;
color: #fff !important;
}
.ruppert-header-top__inner {
min-height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.ruppert-header-top__right {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.ruppert-header-top .ps-currencyselector,
.ruppert-header-top .ps-customersignin,
.ruppert-header-top .ps-shoppingcart,
.ruppert-header-top .ps-contactinfo {
display: none !important;
}
#header #_mobile_ps_customersignin .header-block__action-btn, #header #_ruppert_mobile_wishlist .header-block__action-btn {
display: none !important;
}
.ruppert-header-top .ruppert-language-switcher {
display: inline-flex !important;
}
.ruppert-header-top .ruppert-language-switcher__link {
color: #fff !important;
font-size: 0 !important;
font-family: 'TT-Commons-Pro-Regular' !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
line-height: 1 !important;
opacity: .85;
padding: 0 6px !important;
}
.ruppert-header-top .ruppert-language-switcher__link + .ruppert-language-switcher__link {
border-left: 1px solid rgba(255,255,255,.45);
}
.ruppert-header-top .ruppert-language-switcher__link::before {
font-size: 12px !important;
}
.ruppert-header-top .ruppert-language-switcher__link.is-current {
opacity: 1;
}
.ruppert-header-main {
background: #FCF6ED !important;
/* border-bottom: 1px solid #d7dfdf !important; */
}
.ruppert-header-main__inner {
min-height: 96px !important;
align-items: center !important;
gap: 20px !important;
}
.ruppert-header-main__logo img {
max-height: 64px !important;
width: 150px !important;
}
.ruppert-header-main__search {
width: 100% !important;
max-width: 520px !important;
justify-self: center !important;
}
.ruppert-header-main__search #_desktop_ps_searchbar {
display: flex !important;
width: 100% !important;
}
.ruppert-header-main__search .ps-searchbar,
.ruppert-header-main__search .ps-searchbar__form {
width: 100% !important;
}
.ruppert-header-main__search .ps-searchbar__magnifier {
right: 10px !important;
left: auto !important;
color: #0f5257 !important;
}
.ruppert-header-main__search .ps-searchbar__input,
.ruppert-header-main__search .ps-searchbar__input.form-control {
height: 42px !important;
border: 1px solid #40807E !important;
border-radius: 6px !important;
background: #fff !important;
padding: 8px 34px 8px 12px !important;
font-size: 16px !important;
}
.ruppert-header-main__actions {
display: inline-flex !important;
align-items: center !important;
gap: 20px !important;
}
.ruppert-header-main__actions .ruppert-header-action__btn,
.ruppert-header-main__actions .header-block__action-btn {
color: #0f5257 !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-family: 'TT-Commons-Pro-Regular' !important;
}
.ruppert-header-main__actions .material-icons,
.ruppert-header-main__actions .header-block__icon {
font-size: 17px !important;
}
@media (min-width: 992px) {
.ruppert-header-action--wishlist .header-block__action-btn,
.ruppert-header-action--cart .header-block__action-btn,
.ruppert-header-action--wishlist .ruppert-header-action__btn {
position: relative;
}
.ruppert-header-main__actions .header-block__badge,
.ruppert-header-main__actions .js-wishlist-count-badge {
position: absolute !important;
top: -3px !important;
right: 71px !important;
margin-left: 0 !important;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #f07855 !important;
color: #fff !important;
font-size: 11px !important;
line-height: 18px !important;
text-align: center;
}
}
.ruppert-header-nav {
background: #FCF6ED !important;
/* border-bottom: 1px solid #d7dfdf !important; */
}
.ps-sharebuttons {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu__desktop {
display: block !important;
}
.ruppert-header-nav .ps-mainmenu__tree {
display: flex !important;
align-items: center !important;
gap: 28px !important;
padding: 0 !important;
margin: 0 !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
}
.ruppert-header-nav .ps-mainmenu__tree-link {
color: #40807E !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 12px 0 !important;
font-family: 'TT-Rationalist-demibold' !important;
}
.ruppert-header-nav .ps-mainmenu__tree-item:first-child .ps-mainmenu__tree-link {
color: #de6c63 !important;
}
.ruppert-header-nav .ps-mainmenu__tree-link:hover,
.ruppert-header-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link {
color: #0f5257 !important;
}
/* Mobile megamenu slot: hidden until hamburger opens */
#tvmobile-megamenu.ruppert-mm-closed {
display: none !important;
}
@media (max-width: 991.98px) {
.ruppert-header-top {
display: none !important;
}
.ruppert-header-main__inner {
min-height: 64px !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
row-gap: 0 !important;
padding: 10px 16px !important;
}
.ruppert-header-main__logo {
margin-right: 0 !important;
flex: 0 1 auto !important;
min-width: 0;
}
.ruppert-header-main__search {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin-left: auto !important;
}
.ruppert-header-main__search #_desktop_ps_searchbar {
display: none !important;
}
.ruppert-header-main__search .ps-searchbar--mobile {
display: inline-flex !important;
}
.ruppert-header-main__actions {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu__desktop {
display: none !important;
}
/* Megamenu SSR lives in #tvdesktop-megamenu; below 1300px use hamburger overlay. */
#header .header-nav.ruppert-mm #tvdesktop-megamenu {
display: none !important;
}
/* ThemeVolty mobile menu trigger (in main header row on mobile). */
.ruppert-mm-mobile-bar {
flex: 0 0 auto;
width: auto;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.ruppert-mm-mobile-bar .tvmobile-sliderbar-btn {
margin: 0;
}
.ruppert-mm-mobile-bar__link {
width: 2.5rem;
height: 2.5rem;
border-radius: 0;
border: 0;
color: #01454a;
background: transparent;
padding: 0;
}
.ruppert-mm-mobile-bar__link:focus-visible {
outline: 2px solid #01454a;
outline-offset: 2px;
}
.ruppert-mm-mobile-bar__icon {
display: block;
width: 1.25rem;
height: 2px;
background: currentColor;
box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}
#header .ruppert-header-main {
border-bottom: 1px solid rgba(0, 61, 61, 0.1);
background-color: #fcf6ed;
}
#header .header-nav.ruppert-mm > .container-md {
padding-top: 0;
padding-bottom: 0;
min-height: 0;
}
#header .header-nav.ruppert-mm {
border: 0;
background: transparent;
}
#header .ruppert-header-main__search .header-block__action-btn,
#header .ruppert-header-main__search .ps-searchbar--mobile .header-block__action-btn {
width: 2.5rem;
height: 2.5rem;
padding: 0;
color: #01454a;
background: transparent;
border: 0;
border-radius: 0;
}
#header .ruppert-header-main__search .header-block__icon {
font-size: 1.5rem;
color: #01454a;
}
/* Cart / wishlist badges: reset desktop pixel hacks when blocks appear in mobile drawer or clones */
#header .ruppert-header-action__btn,
#header .ruppert-header-action .header-block__action-btn,
#header .header-block {
position: relative;
}
#header .header-block__badge,
#header .ruppert-header-main .js-wishlist-count-badge {
position: absolute !important;
top: -0.25rem !important;
right: -0.2rem !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: none !important;
min-width: 1.125rem;
min-height: 1.125rem;
padding: 0 4px;
font-size: 0.65rem;
line-height: 1.125rem;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #f07855 !important;
color: #fff !important;
z-index: 3;
}
#header .ruppert-header-main .js-wishlist-count-badge:empty {
display: none !important;
}
/* Bootstrap mobile menu / search offcanvas: keep close control usable above TV layers */
#header .offcanvas,
#mobileMenu,
#searchCanvas {
z-index: 1055;
}
#header .offcanvas-header .btn-close,
#header .offcanvas-header [data-bs-dismiss="offcanvas"] {
z-index: 2;
position: relative;
pointer-events: auto;
color: #40807E !important;;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
}
.header-block__action-btn[href]:focus, .header-block__action-btn[href]:hover{
color: #40807E !important;;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
}
.offcanvas-backdrop.show {
z-index: 1050;
}
/* Account / wishlist / cart live in off-canvas drawer (Figma), not in the header row */
#header .ruppert-header-main__mobile-icon--drawer-only {
display: none !important;
}
}
/* Megamenu drawer overlay — same UX as mobile/tablet up to 1300px */
@media (max-width: 1299.98px) {
#header .header-nav.ruppert-mm #tvdesktop-megamenu {
display: none !important;
}
/* ThemeVolty megamenu mobile: injected close row (Figma: "Menü" + X) */
#tvmobile-megamenu .ruppert-mm-mobile-closebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 0.15rem 0.85rem;
position: sticky;
top: 0;
z-index: 5;
background: #fdf8f0;
border-bottom: 1px solid rgba(0, 61, 61, 0.12);
flex-shrink: 0;
}
#tvmobile-megamenu .ruppert-mm-mobile-closebar__title {
margin: 0;
padding: 0;
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Commons-Pro-Medium', system-ui, sans-serif;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.2;
}
#tvmobile-megamenu .ruppert-mm-mobile-closebar .ruppert-mm-mobile-close {
width: 2.5rem;
height: 2.5rem;
padding: 0;
margin: 0;
margin-left: auto;
border: 0;
border-radius: 50%;
background: transparent;
color: #01454a;
font-size: 1.75rem;
font-weight: 400;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#tvmobile-megamenu .ruppert-mm-mobile-closebar .ruppert-mm-mobile-close:hover,
#tvmobile-megamenu .ruppert-mm-mobile-closebar .ruppert-mm-mobile-close:focus-visible {
opacity: 0.75;
}
#tvmobile-megamenu .container_tv_megamenu {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem;
}
/* Drawer footer: Anmelden / Wunschliste / Warenkorb */
#tvmobile-megamenu .ruppert-mm-mobile-actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0.85rem 0 0.25rem;
margin-top: auto;
flex-shrink: 0;
border-top: 1px solid rgba(0, 61, 61, 0.12);
background: #fdf8f0;
position: sticky;
bottom: 0;
z-index: 4;
}
#tvmobile-megamenu .ruppert-mm-mobile-action {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 2.75rem;
padding: 0.65rem 1rem;
border-radius: 8px;
font-family: 'TT-Commons-Pro-Medium', 'TT-Commons-Pro-Regular', system-ui, sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none !important;
position: relative;
}
#tvmobile-megamenu .ruppert-mm-mobile-action--outline {
border: 1px solid #01454a;
background: #fdf8f0;
color: #01454a !important;
}
#tvmobile-megamenu .ruppert-mm-mobile-action--primary {
border: 1px solid #01454a;
background: #01454a;
color: #fff !important;
}
#tvmobile-megamenu .ruppert-mm-mobile-action__icon {
width: 18px;
height: 18px;
object-fit: contain;
flex-shrink: 0;
}
#tvmobile-megamenu .ruppert-mm-mobile-action__badge {
position: absolute;
top: -0.35rem;
right: 0.65rem;
min-width: 1.125rem;
min-height: 1.125rem;
padding: 0 4px;
border-radius: 999px;
background: #f07855;
color: #fff;
font-size: 0.65rem;
line-height: 1.125rem;
text-align: center;
}
#tvmobile-megamenu .ruppert-mm-mobile-action__badge:empty,
#tvmobile-megamenu .ruppert-mm-mobile-action__badge.d-none {
display: none !important;
}
/* Hide empty-cart badge on mobile (avoids duplicate “0” next to live cart widget) */
#header .header-block.inactive .header-block__badge {
display: none !important;
}
/* TV megamenu overlay: controlled by body.ruppert-mm-panel-open + ruppert-header-mobile.js */
body.ruppert-mm-panel-open {
overflow: hidden;
}
body.ruppert-mm-panel-open #tvmobile-megamenu {
display: flex !important;
flex-direction: column;
position: fixed;
inset: 0;
z-index: 1060;
background: #fdf8f0;
overflow: hidden;
padding: max(0.5rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
box-sizing: border-box;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .container_tv_megamenu {
max-height: none;
}
/* Mobile submenu: hide duplicate masthead title row */
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-masthead {
display: none !important;
}
/* Level-1 list styling (Figma dotted separators) */
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 {
border-bottom: 1px dashed rgba(11, 138, 209, 0.45);
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 > a {
font-family: 'TT-Rationalist-demibold', system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #01454a !important;
padding: 0.85rem 3rem 0.85rem 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-content > li.level-1.promo > a,
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-content > li.level-1.menu-promo > a,
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-content > li.tvmega-menu-title + li.level-1 > a {
color: #de6c63 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu li.tvmega-menu-title {
display: none !important;
}
/* Submenu category headings */
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown .item-header > a:not(.ruppert-mm-html-block-link) {
color: #de6c63 !important;
font-family: 'TT-Rationalist-demibold', system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 700;
text-transform: none;
padding: 0.5rem 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown .item-line > a {
font-size: 0.9rem;
color: #1a1a1a !important;
padding: 0.25rem 0 0.25rem 0.85rem !important;
border-left: 2px solid rgba(0, 61, 61, 0.2);
}
/* Image cards: 2×2 grid inside off-canvas (Figma) */
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row.ruppert-mm-card-strip,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.row:has(> .tv-menu-col li .html-block img) {
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0.75rem 0 0 !important;
padding: 0 !important;
flex-flow: unset !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip > .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip > [class*="col-"],
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row:has(> .tv-menu-col li .html-block img) > .tv-menu-col {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip li.menu-item:has(.html-block img),
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) {
position: relative;
isolation: isolate;
overflow: hidden;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 3;
min-height: 0;
max-height: none;
height: 175px;
border-radius: 10px !important;
background-color: #003d3d;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip li.menu-item:has(.html-block img)::after,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img)::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.12) 50%,
transparent 75%
);
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip li.menu-item:has(.html-block img) .html-block,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) .html-block {
position: absolute;
inset: 0;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border-radius: inherit;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip:not(.hauserman-section):not(.hauserman-row2) li.menu-item:has(.html-block img) img,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row:not(.hauserman-section):not(.hauserman-row2):has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center;
border-radius: 0 !important;
margin: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip li.menu-item:has(.html-block img) > a:not(.ruppert-mm-html-block-link),
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a:not(.ruppert-mm-html-block-link) {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: calc(100% - 1rem);
max-width: 100%;
text-align: center;
color: #fff !important;
font-family: 'TT-Commons-Pro-Medium', system-ui, sans-serif !important;
font-size: 0.95rem;
font-weight: 600;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
text-decoration: none !important;
padding: 0 !important;
pointer-events: auto;
margin-left: 20px !important;
}
/* Image-only HTML blocks with a real link — full-card tap target */
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip li.menu-item:has(.html-block img) > a.ruppert-mm-html-block-link,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a.ruppert-mm-html-block-link {
position: absolute !important;
inset: 0 !important;
left: 0 !important;
top: 0 !important;
transform: none !important;
z-index: 2;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
text-shadow: none !important;
pointer-events: auto;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip li.menu-item:has(.html-block img) > a.ruppert-mm-html-block-link .html-block,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a.ruppert-mm-html-block-link .html-block {
position: absolute !important;
inset: 0 !important;
width: 100% ;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
/* Hausmarken: dedicated mobile/tablet logo cards (no crop, no dark overlay) */
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 25px !important;
margin: 0.65rem 0 0 !important;
padding: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section > .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 > .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section > [class*="col-"],
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 > [class*="col-"] {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
flex: none !important;
display: block !important;
}
/* First large Weihenstephan card spans full width */
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section > .col-sm-4 {
grid-column: 1 / -1;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section .ul-column,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 .ul-column {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 25px !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img),
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img) {
height: 360px !important;
min-height: 360px !important;
max-height: 360px !important;
aspect-ratio: auto !important;
background: #fff !important;
/* border: 1px solid rgba(0, 61, 61, 0.1) !important; */
border-radius: 10px !important;
overflow: hidden !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section > .col-sm-4 li.menu-item:has(.html-block img) {
height: 360px !important;
min-height: 160px !important;
max-height: 360px !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img)::after,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img)::after {
display: none !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img) .html-block,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img) .html-block {
position: static !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 10px !important;
border-radius: inherit !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img) .html-block p,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img) .html-block p {
margin: 0 !important;
width: 70% ;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img) img,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img) img {
position: static !important;
inset: auto !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 0 !important;
transform: none !important;
}
/* Mobile overlay: expand chevron + tap target (ThemeVolty .icon-drop-mobile) */
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent {
position: relative;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > a {
padding-right: 3rem;
pointer-events: auto;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > .icon-drop-mobile {
display: block !important;
position: absolute;
right: 16px;
/* Keep arrow aligned to the parent row, even when submenu expands */
top: 1.5rem;
transform: none;
z-index: 3;
width: 2.25rem;
height: 2.25rem;
margin: 0;
padding: 0;
border: none;
border-radius: 6px;
background: unset;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > .icon-drop-mobile::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 0.45rem;
height: 0.45rem;
margin: 0;
border-right: 2px solid #01454a;
border-bottom: 2px solid #01454a;
transform: translate(-50%, -65%) rotate(45deg);
pointer-events: none;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > .icon-drop-mobile.opened::after,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.ruppert-mm-sub-open > .icon-drop-mobile::after {
transform: translate(-50%, -35%) rotate(-135deg);
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal .menu-dropdown {
display: none !important;
position: relative;
z-index: 1;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.ruppert-mm-sub-open > .tv-sub-menu.menu-dropdown {
background: #fdf8f0;
display: block !important;
}
.ruppert-mm-backdrop {
position: fixed;
inset: 0;
z-index: 1055;
background: none;
cursor: pointer;
display: none;
}
body.ruppert-mm-panel-open .ruppert-mm-backdrop {
display: block;
}
.ps-imageslider__promo {
margin-right: 10px !important;
}
}
@media (max-width: 991.98px) {
.ruppert-mm-backdrop {
position: fixed;
inset: 0;
z-index: 1055;
background: none;
cursor: pointer;
display: none;
}
.footer--ruppert .ruppert-footer__bottom-primary{
align-items: center;
}
.ruppert-footer__legal-list {
justify-content: center !important;
}
.footer--ruppert .footer-block__title{
margin-block-end: 10px !important;
}
}
/* RUPPERT FALLBACK: FORCE 3-ROW HEADER ON Hummingbird hook layout */
.header-top {
background: #01454a !important;
}
.header-top__left,
.header-top__right #_desktop_ps_customersignin,
.header-top__right #_desktop_ps_shoppingcart,
.header-top__right #_desktop_ps_currencyselector {
display: none !important;
}
.header-top__right {
display: flex !important;
justify-content: flex-end !important;
}
.header-top__right #_desktop_ps_languageselector {
display: inline-flex !important;
}
.header-bottom {
background: #f4f2ec !important;
border-bottom: 1px solid #d7dfdf !important;
}
.header-bottom__row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
row-gap: 10px !important;
}
.header-bottom__row > .header-bottom__logo {
order: 1;
}
.header-bottom__row > #_desktop_ps_searchbar,
.header-bottom__row > .ps-searchbar {
order: 2;
flex: 1 1 380px;
max-width: 520px;
margin-left: auto !important;
margin-right: auto !important;
}
.header-bottom__row > #_desktop_ps_customersignin,
.header-bottom__row > #_desktop_ps_shoppingcart,
.header-bottom__row > .ps-customersignin,
.header-bottom__row > .ps-shoppingcart {
order: 3;
}
/* If menu is injected into displayTop, force it to row 3 */
.header-bottom__row > .ps-mainmenu,
.header-bottom__row > .ps-mainmenu--desktop,
.header-bottom__row > nav.ps-mainmenu__desktop,
.header-bottom__row .ps-mainmenu--desktop {
order: 4 !important;
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
margin-top: 8px !important;
background: #f4f2ec !important;
border-top: 1px solid #d7dfdf !important;
}
.header-bottom__row .ps-mainmenu__desktop {
display: block !important;
}
.header-bottom__row .ps-mainmenu__tree {
display: flex !important;
align-items: center !important;
gap: 28px !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
.header-bottom__row .ps-mainmenu__tree-link {
color: #40807E !important;
font-size: 12px !important;
font-weight: 500 !important;
padding: 12px 0 !important;
white-space: nowrap !important;
}
@media (max-width: 991.98px) {
.header-top {
display: none !important;
}
.header-bottom__row > .ps-mainmenu,
.header-bottom__row > .ps-mainmenu--desktop,
.header-bottom__row > nav.ps-mainmenu__desktop,
.header-bottom__row .ps-mainmenu--desktop,
.header-bottom__row .ps-mainmenu__desktop {
display: none !important;
}
}
/* Header action icons (Figma exports in themes/ruppert/assets/img/header/) */
.ruppert-header-action__icon,
#_desktop_ps_shoppingcart .header-block__icon.ruppert-header-action__icon {
width: 20px;
height: 20px;
object-fit: contain;
display: block;
flex-shrink: 0;
margin-right: 5px;
}
.ruppert-header-action__btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Ruppert mega menu layout to match Figma columns */
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu {
border-top: 1px solid #0b8ad1;
background: #FCF6ED;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__row {
display: block;
margin: 0;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__main-header {
padding: 14px 22px 10px;
border-bottom: 1px solid #cfd8d8;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__main-title {
display: inline-block;
font-size: 14px;
line-height: 1.1;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.01em;
color: #1f5e63;
text-decoration: none;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
width: 100%;
max-width: 100%;
padding: 18px 22px 18px;
display: grid;
grid-template-columns: repeat(6, minmax(140px, 1fr));
gap: 26px;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items,
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items.active,
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items.not-active {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__section-title {
display: block;
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
color: #de6c63;
text-decoration: none;
font-family: 'TT-Rationalist-demibold' !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items ul,
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items li {
list-style: none;
margin: 0;
padding: 0;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item {
display: block;
padding: 0;
margin: 0 0 5px;
font-size: 14px;
line-height: 1.35;
color: #01454A;
text-decoration: none;
font-weight: 400;
font-family: 'TT-Commons-Pro-Regular' !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item__group-main-item {
font-weight: 500;
margin-bottom: 6px;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media {
display: grid;
grid-template-columns: 1.05fr repeat(4, 1fr);
gap: 8px;
padding: 6px 22px 18px;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media-feature {
min-height: 62px;
border-radius: 6px;
background: #005764;
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
padding: 0 16px;
font-size: 14px;
font-weight: 500;
font-family: 'TT-Commons-Pro-Medium' !important;
height: 62px;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media-card {
position: relative;
display: block;
min-height: 62px;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: #fff;
background: #9aa;
font-family: 'TT-Commons-Pro-Medium' !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media-card img {
width: 100%;
height: 100%;
min-height: 62px;
object-fit: cover;
display: block;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media-card span {
position: absolute;
top: 8px;
left: 10px;
font-size: 11px;
line-height: 1;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
font-family: 'TT-Commons-Pro-Medium' !important;
font-size: 14px !important;
font-weight: 500 !important;
}
/* Ruppert homepage carousel revamp (ps_imageslider only) */
.ps-imageslider #ps_imageslider {
overflow: hidden;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figure {
position: relative;
margin: 0;
min-height: 560px;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figure > img {
width: 100%;
height: 75vh;
object-fit: cover;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figcaption {
position: absolute;
inset: 0;
padding: 18px 36px 34px;
background: linear-gradient(180deg, rgba(4, 43, 50, 0) 62%, rgba(210, 241, 242, 0.52) 100%);
color: #fff;
display: flex !important;
flex-direction: column;
justify-content: space-between;
text-align: initial;
pointer-events: none;
z-index: 3;
}
.ps-imageslider__promo {
position: relative;
width: 400px;
margin-left: auto;
min-height: 210px;
top:50px;
pointer-events: none;
margin-right : 70px;
}
.ps-imageslider__promo-chip {
width: fit-content;
background: #cceff0;
color: #01454a;
border-radius: 8px;
transform: rotate(7deg);
font-family: 'TT-Rationalist-demibold' !important;
}
.ps-imageslider__promo-chip--main {
font-size: 36px;
line-height: 1;
padding: 5px 10px 5px;
position: absolute;
right: 116px;
top: 0;
z-index:1000;
font-family: 'TT-Rationalist-demibold' !important;
font-weight: 600 !important;
}
.ps-imageslider__promo-chip--sub {
font-size: 24px;
line-height: 1;
padding: 10px 18px 8px;
position: absolute;
right: 86px;
top: 43px;
z-index:1000;
font-family: 'TT-Commons-Pro-Medium' !important;
font-weight: 500 !important;
}
.ps-imageslider__promo-badge {
width: 220px;
height: 220px;
border-radius: 50%;
background: #F07855;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
line-height: 1.25;
font-weight: 600;
padding: 26px;
position: absolute;
right: 0;
top: 30px;
transform: rotate(7deg);
}
.ps-imageslider__bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
position: relative;
z-index: 6;
pointer-events: auto;
bottom: 40px;
position: absolute;
width:96%;
}
.ps-imageslider__brand-wrap {
display: inline-flex;
align-items: center;
gap: 14px;
}
.ps-imageslider__brand-icon {
width: 58px;
height: 58px;
border-radius: 50%;
background: #01454a;
display: inline-block;
position: relative;
}
.ps-imageslider__brand-icon::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 28px;
height: 28px;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M8.5 8.5v11M13.8 8.5v11M19.1 8.5v11M6.5 8.5h15M6.5 19.5h15M10.2 8.5l1-3h5.6l1 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ps-imageslider__brand {
color: #01454a;
font-size: 50px;
line-height: 1;
font-family: 'TT-Rationalist-Medium' !important;
font-weight: 400 !important;
}
.ps-imageslider__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: #01454a;
color: #FCF6ED;
border-radius: 12px;
padding: 16px 32px;
font-size: 24px;
line-height: 1;
font-family: 'TT-Rationalist-Medium-italic' !important;
white-space: nowrap;
font-weight: 500 !important;
text-decoration: none;
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 7;
}
.ps-imageslider #ps_imageslider .carousel-control-prev,
.ps-imageslider #ps_imageslider .carousel-control-next,
.ps-imageslider #ps_imageslider .carousel-indicators {
z-index: 2;
}
a.ps-imageslider__cta:hover,
a.ps-imageslider__cta:focus-visible {
background: #013a3e;
color: #FCF6ED;
text-decoration: none;
}
.ps-imageslider__cta-arrow {
font-size: 16px;
line-height: 1;
color: #FCF6ED;
}
/* Featured promotions section (homepage) */
.ps-featuredproducts {
background: #01454a;
padding: 64px 80px 34px;
}
.ps-featuredproducts .module-products.container {
max-width: 100%;
}
.ps-featuredproducts__header {
text-align: center;
margin-bottom: 26px;
}
.ps-featuredproducts .section-title {
color: #fff;
margin-bottom: 16px;
font-size: 36px;
line-height: 40px;
font-family: 'TT-Rationalist-Medium' !important;
font-weight: 500 !important;
}
.ps-featuredproducts__subtitle {
margin: 0 auto;
color: #d6ecee;
max-width: 760px;
font-size: 16px;
line-height: 1.45;
font-weight:400;
font-family: 'TT-Commons-Pro-Regular' !important;
margin-bottom : 50px;
}
.ps-featuredproducts .products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.ps-featuredproducts .product-miniature__inner {
background: #ffffff;
border-radius: 14px;
overflow: hidden;
}
.ps-featuredproducts .product-miniature__top,
.ps-featuredproducts .product-miniature__image-container,
.ps-featuredproducts .product-miniature__image-link {
margin: 0 !important;
padding: 0 !important;
}
.ps-featuredproducts .product-miniature__top {
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
}
.ps-featuredproducts .product-miniature__promo-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
width: clamp(52px, 22%, 70px);
pointer-events: none;
}
.ps-featuredproducts .product-miniature__promo-badge img {
display: block;
width: 100%;
height: auto;
}
.ps-featuredproducts .product-miniature__image-link picture {
display: block;
width: 100%;
height: 100%;
}
.ps-featuredproducts .product-miniature__image {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.ps-featuredproducts .product-miniature__bottom {
padding: 24px 24px 18px;
gap: 12px;
}
.ps-featuredproducts .product-miniature__title {
color: #01454a;
font-size: 20px;
font-weight: 600;
line-height: 28px;
font-family: 'TT-Rationalist-demibold' !important;
margin-bottom : 10px;
}
.ps-featuredproducts .product-miniature__desc {
color: #6a8f93;
font-size: 14px;
line-height: 1.3;
font-family: 'TT-Commons-Pro-Regular' !important;
font-weight: 400;
margin-bottom : 15px;
}
.ps-featuredproducts .product-miniature__regular-price {
color: #8aa3a6;
font-size: 14px;
}
.ps-featuredproducts .product-miniature__price {
color: #144f55;
font-size: 20px;
line-height: 1;
font-family: 'TT-Rationalist-demibold' !important;
}
.ps-featuredproducts .product-miniature .product-flags {
top: 10px;
right: 10px;
left: auto;
width: auto;
padding: 0;
}
.ps-featuredproducts .product-flags .badge:not(.discount) {
display: none;
}
.ps-featuredproducts .product-flags .badge.discount {
display: none;
}
.ps-featuredproducts .product-miniature__form {
display: grid;
grid-template-columns: 125px 1fr;
gap: 8px;
}
.ps-featuredproducts .quantity-button {
border: 1px solid #d8e3e5;
border-radius: 8px;
overflow: hidden;
}
.ps-featuredproducts .quantity-button input,
.ps-featuredproducts .quantity-button button {
min-height: 42px;
background: #f5f8f9;
}
.ps-featuredproducts .product-miniature__add.btn {
border: 0;
border-radius: 8px;
background: #F07855;
min-height: 42px;
}
.ps-featuredproducts .product-miniature__add .material-icons {
color: #fff;
}
.module-products{
background-color: #01454A !important;
}
.ps-featuredproducts .module-products__buttons {
margin-top: 50px;
margin-bottom: 50px;
}
.ps-featuredproducts__footer-btn {
background: #F07855;
color: #fff;
border: 0;
border-radius: 12px;
padding: 12px 30px;
font-size: 24px;
line-height: 1;
font-family: 'TT-Rationalist-Medium-italic' !important;
font-weight: 500;
}
/* Featured products: responsive grid (avoids 4 narrow columns on tablet / phone) */
@media (max-width: 1199.98px) {
.ps-featuredproducts .products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ps-featuredproducts .product-miniature {
min-width: 0;
}
.ps-featuredproducts .module-products.container {
max-width: 100%;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.ps-featuredproducts .section-title {
font-size: clamp(1.5rem, 4.2vw, 2rem);
line-height: 1.15;
}
.ps-featuredproducts__subtitle {
font-size: 15px;
padding-inline: 10px;
}
.ps-featuredproducts .product-miniature__bottom {
padding: 18px 16px 14px;
}
.ps-featuredproducts .product-miniature__title {
font-size: clamp(1rem, 2.6vw, 1.125rem);
line-height: 1.3;
}
.ps-featuredproducts .product-miniature__price {
font-size: clamp(1.05rem, 2.8vw, 1.2rem);
}
.ps-featuredproducts .product-miniature__promo-badge {
width: clamp(48px, 20vw, 58px);
top: 8px;
left: 8px;
}
}
@media (max-width: 575.98px) {
.ps-featuredproducts {
padding: 28px 0 26px;
}
.ps-featuredproducts__header {
margin-bottom: 18px;
}
.ps-featuredproducts .products {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
max-width: 400px;
margin-inline: auto;
}
.ps-featuredproducts .product-miniature__bottom {
padding: 16px 18px 14px;
}
.ps-featuredproducts .product-miniature__title {
font-size: 1.125rem;
}
.ps-featuredproducts .product-miniature__desc {
font-size: 13px;
}
.ps-featuredproducts .product-miniature__form {
grid-template-columns: 1fr;
gap: 10px;
}
.ps-featuredproducts .product-miniature__promo-badge {
width: 52px;
top: 8px;
left: 8px;
}
.ps-featuredproducts__footer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: clamp(1rem, 4.2vw, 1.2rem);
padding: 14px 18px;
white-space: normal;
text-align: center;
}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
.ps-featuredproducts .products {
gap: 16px;
}
.ps-featuredproducts .module-products.container {
max-width: 100%;
}
}
.service-section{
max-width:100%;
margin:auto;
padding:130px 180px 250px;
background:#F5F1EB;
position : relative;
}
@media (max-width: 1399.98px) {
.service-section {
padding: 150px 100px 250px;
}
.service-card {
padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 7vw, 4rem);
}
.service-title {
font-size: clamp(1.5rem, 3vw, 2rem);
}
}
@media (max-width: 1199.98px) {
.service-section {
padding-top: clamp(2.5rem, 7vw, 5rem);
padding-bottom: clamp(3rem, 9vw, 7rem);
}
.service-card {
padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem);
}
.service-card h3 {
font-size: clamp(1.5rem, 3.2vw, 2rem);
}
.service-card p {
font-size: clamp(1rem, 2.2vw, 1.15rem);
line-height: 1.45;
}
.service-row {
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.image-left .service-image {
grid-column: 1 / 6;
}
.image-left .service-card {
grid-column: 6 / 13;
}
.image-right .service-card {
grid-column: 1 / 8;
}
.image-right .service-image {
grid-column: 8 / 13;
}
}
.service-title{
font-size:36px;
margin-bottom:30px;
color:#00454A;
font-family: 'TT-Rationalist-demibold' !important;
font-weight:600 !important;
}
.service-row{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:20px;
margin-bottom:20px;
}
.service-image{
max-height:592px;
}
.service-image img{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block;}
/* ROW TYPE 1 */
/* IMAGE LEFT + CARD RIGHT */
.image-left .service-image{
grid-column:1/5;
}
.image-left .service-card{
grid-column:5/13;
}
/* ROW TYPE 2 */
/* CARD LEFT + IMAGE RIGHT */
.image-right .service-card{
grid-column:1/9;
}
.image-right .service-image{
grid-column:9/13;
}
.service-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:8px;
display:block;
z-index: 100;
position: relative;
}
.service-card{
background:#BED8D5;
border-radius:8px;
padding:70px 140px;
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
z-index : 1000;
}
.service-card h3{
font-size:40px;
color:#00454A;
margin-bottom:20px;
font-family: 'TT-Rationalist-Medium' !important;
font-weight:500 !important;
line-height:100%;
letter-spacing:0;
}
.service-card p{
font-size:20px;
color:#00454A;
font-family: 'TT-Commons-Pro-Medium' !important;
font-weight:500 !important;
line-height:30px;
letter-spacing:0;
}
.service-btn{
margin-top:30px;
background:#004E57;
color:white !important;
text-decoration:none;
padding:16px 28px;
border-radius:8px;
width:fit-content;
margin-left: auto;
font-family: 'TT-Rationalist-Medium-italic' !important;
font-size:24px;
}
.service-icon{
position:absolute;
left:-75px;
top:50%;
transform:translateY(-50%);
width:129px;
height:129px;
background:#F5F1EB;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.service-icon img{
width:70px;
}
.icon-right{
left:auto;
right:-75px;
}
.opening-hours-box{
position:static;
bottom:40px;
left:60px;
width:80%;
background:#f7f2eb;
border-radius:12px;
padding:30px;
box-sizing:border-box;
z-index:10;
margin-top : 20px;
}
.hours-title{
font-family:'TT-Rationalist-Medium-italic' !important;
font-size:16px;
margin-bottom:30px;
font-weight:500 !important;
line-height:100%;
letter-spacing:0;
color : #01454A;
}
.hours-row{
display:flex;
justify-content:space-between;
margin-bottom:18px;
font-size:14px;
font-family: 'TT-Commons-Pro-Regular' !important;
font-weight:400 !important;
line-height:100%;
letter-spacing:0;
color : #01454A;
}
.hours-location{
margin-top:0px;
font-size:14px;
font-family: 'TT-Commons-Pro-Regular' !important;
font-weight:400 !important;
line-height:100%;
letter-spacing:0;
color : #01454A;
}
.bg-img{
width: 100%;
position: absolute;
bottom: -84px;
left: 0px;
z-index: 99;
}
@media (max-width: 991.98px) {
.service-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.bg-img{
display: none;
}
/* Reset desktop column spans so stacked layout does not overflow */
.image-left .service-image,
.image-left .service-card,
.image-right .service-card,
.image-right .service-image {
grid-column: 1 / -1;
max-width: 100%;
}
.image-right .service-image {
order: -1;
}
.service-image {
max-height: min(380px, 58vh);
}
.service-card {
padding: clamp(1.25rem, 5vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
}
.service-card h3 {
font-size: clamp(1.35rem, 5vw, 1.85rem);
}
.service-card p {
font-size: clamp(0.95rem, 3.5vw, 1.1rem);
line-height: 1.45;
}
.service-btn {
margin-left: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: clamp(1rem, 3.5vw, 1.25rem);
padding: 0.85rem 1.25rem;
}
.service-icon {
position: relative;
left: auto;
right: auto;
top: -21%;
transform: none;
margin: -2.5rem auto 1rem;
width: clamp(88px, 22vw, 112px);
height: clamp(88px, 22vw, 112px);
}
.service-icon img {
width: 50px;
height: 50px;
}
.icon-right {
left: auto;
right: auto;
transform: none;
}
.opening-hours-box {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding: 1.25rem;
box-sizing: border-box;
}
.service-title {
font-size: clamp(1.35rem, 4.5vw, 1.75rem);
margin-bottom: 1.25rem;
}
.ps-featuredproducts {
padding: 50px 30px 34px;
}
}
.promo-newsletter-section {
position: relative;
font-family: 'Montserrat', sans-serif; /* Example font */
/* top:-70px; */
}
.promo-top-row {
background-color: #BED8D5; /* Light blue/green top */
padding: 60px 150px 100px 150px;
height: 283px;
z-index: 100;
position: relative;
}
.newsletter-bottom-row {
background-color: #4a817e; /* Darker teal bottom */
padding: 80px 0 60px 0;
color: #ffffff;
position: relative;
}
.promo-card-wrapper {
display: flex;
justify-content: center;
margin-bottom: -150px; /* Overlap into the dark section */
margin-top: 30px;
z-index: 10;
}
.promo-card {
background: #fff;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
width: 90%;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.promo-badge {
position: absolute;
top: -57px;
left: 50%;
transform: translateX(-50%);
background: #fff;
border-radius: 50%;
padding: 10px;
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
}
.promo-badge img {
max-width: 90%;
}
.promo-badge__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.promo-card h3 {
color: #00454A;
font-size: 24px;
font-weight: 600;
margin-top: 30px;
font-family: 'TT-Rationalist-Demibold' !important;
line-height: 100%;
letter-spacing: 0;
}
.newsletter-bottom-row h2 {
font-size: 36px;
margin-bottom: 20px;
font-family: 'TT-Rationalist-Demibold' !important;
font-weight: 600 !important;
line-height: 100%;
letter-spacing: 0;
color: #FCF6ED;
}
.newsletter-bottom-row p {
font-size: 22px;
font-family: 'TT-Commons-Pro-Medium' !important;
font-weight: 500 !important;
line-height: 32px;
letter-spacing: 0;
color: #FCF6ED;
margin-bottom: 50px;
}
.newsletter-btn {
background-color: #00454A;
border: none;
border-radius: 12px;
padding: 16px 32px;
text-transform: none;
font-family: 'TT-Rationalist-Medium-italic' !important;
font-size: 24px;
font-weight: 500 !important;
line-height: 100%;
letter-spacing: 0;
color: #FCF6ED;
cursor: pointer;
}
/* Zoho newsletter form (promo section) */
.newsletter-bottom-row .zoho-newsletter-form {
position: relative;
z-index: 2;
max-width: 28rem;
margin: 0 auto;
text-align: left;
}
.newsletter-bottom-row .zoho-newsletter-form__form {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}
.newsletter-bottom-row .zoho-newsletter-form__field input[type="email"],
.newsletter-bottom-row .zoho-newsletter-form__field input[type="text"] {
width: 100%;
box-sizing: border-box;
border: none;
border-radius: 10px;
padding: 0.9rem 1rem;
font-size: 1rem;
line-height: 1.25;
font-family: 'TT-Commons-Pro-Medium', sans-serif !important;
color: #01454a;
background: #fcf6ed;
}
.newsletter-bottom-row .zoho-newsletter-form__field input::placeholder {
color: rgba(1, 69, 74, 0.55);
}
.newsletter-bottom-row .zoho-newsletter-form__field input:focus {
outline: 2px solid #fcf6ed;
outline-offset: 2px;
}
.newsletter-bottom-row .zoho-newsletter-form__submit {
margin-top: 0.25rem;
}
.newsletter-bottom-row #zcWebOptin.newsletter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 3.25rem;
}
.newsletter-bottom-row #zcWebOptin.newsletter-btn:hover {
background-color: #013a3e;
color: #fcf6ed;
}
.newsletter-bottom-row .zoho-newsletter-form__error {
display: none;
margin: 0;
padding: 0.65rem 0.85rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
color: #b42318;
font-size: 0.9rem;
line-height: 1.35;
}
.newsletter-bottom-row .zoho-newsletter-form__success {
display: none;
margin-bottom: 0.75rem;
padding: 0.65rem 0.85rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
border: 2px solid #c2e19a;
}
.newsletter-bottom-row .zoho-newsletter-form--submitted .zoho-newsletter-form__success {
display: block;
}
/* Zoho popup chrome – hide only in homepage promo row (inline success there) */
.newsletter-bottom-row #zcOptinOverLay,
.newsletter-bottom-row #zcOptinSuccessPopup,
.newsletter-bottom-row #closeSuccess {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
#module-ruppertnewsletter-subscribe #Zc_SignupSuccess {
display: none !important;
}
#module-ruppertnewsletter-subscribe #zcOptinOverLay {
z-index: 10050 !important;
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(31, 57, 55, 0.55) !important;
opacity: 1 !important;
}
body.ruppert-zc-modal-open {
overflow: hidden;
}
body.ruppert-zc-modal-open .ruppert-newsletter-subscribe .zc_newsletter_card {
visibility: hidden !important;
}
#module-ruppertnewsletter-subscribe #zcOptinSuccessPopup,
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup {
z-index: 10051 !important;
position: fixed !important;
width: min(92vw, 420px) !important;
max-width: 420px !important;
padding: 40px 36px 36px !important;
background: #ffffff !important;
border: none !important;
border-radius: 18px !important;
box-shadow: 0 16px 48px rgba(20, 50, 48, 0.22) !important;
text-align: center !important;
font-family: -apple-system, "Helvetica Neue", Arial, sans-serif !important;
opacity: 1 !important;
overflow: visible !important;
}
#module-ruppertnewsletter-subscribe #zcOptinSuccessPopup.ruppert-zc-success-popup--visible,
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup.ruppert-zc-success-popup--visible {
display: block !important;
}
#module-ruppertnewsletter-subscribe #closeSuccess,
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__close {
position: absolute !important;
top: -12px !important;
right: -12px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
border: 2px solid #ffffff !important;
border-radius: 50% !important;
background: #2b3a39 !important;
color: #ffffff !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: auto !important;
cursor: pointer !important;
z-index: 10052 !important;
line-height: 1 !important;
}
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__close-icon {
display: block;
font-size: 20px;
font-weight: 400;
line-height: 1;
margin-top: -1px;
}
#module-ruppertnewsletter-subscribe #closeSuccess img,
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__close img {
display: none !important;
}
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__panel,
.ruppert-zc-success-popup__panel {
margin: 0;
padding: 0;
}
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__panel hr,
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__panel b,
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__panel strong,
.ruppert-zc-success-popup__panel hr,
.ruppert-zc-success-popup__panel b,
.ruppert-zc-success-popup__panel strong {
display: none !important;
}
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__icon,
.ruppert-zc-success-popup__icon {
width: 52px;
height: 52px;
margin: 0 auto 20px;
border-radius: 50%;
background: #e1f5ee;
color: #0f6e56;
font-size: 24px;
font-weight: 700;
line-height: 52px;
}
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__title,
.ruppert-zc-success-popup__title {
margin: 0 0 12px;
font-size: 17px;
font-weight: 600;
line-height: 1.35;
color: #1f3937;
}
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup__text,
.ruppert-zc-success-popup__text {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: #5c6463;
}
@media (max-width: 540px) {
#module-ruppertnewsletter-subscribe .ruppert-zc-success-popup,
.ruppert-zc-success-popup {
width: calc(100vw - 32px);
padding: 32px 24px 28px;
border-radius: 14px;
}
}
.newsletter-bottom-row .zoho-newsletter-form__success-msg {
color: #01454a !important;
font-family: 'TT-Commons-Pro-Medium', sans-serif !important;
font-size: 0.95rem !important;
}
.newsletter-bottom-row .zoho-newsletter-form__legal {
margin: 1rem 0 0;
font-size: 0.8rem;
line-height: 1.4;
color: rgba(252, 246, 237, 0.9);
text-align: center;
}
.newsletter-bottom-row .zoho-newsletter-form__legal-link {
color: #fcf6ed;
text-decoration: underline;
}
.newsletter-bottom-row .zoho-newsletter-form__legal-link:hover {
color: #fff;
}
.promo-circle {
position: absolute;
right: 6%;
top: -50px;
background: #F07855; /* Orange circle */
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(15deg);
font-weight: 700;
font-size: 21.6px;
line-height: 28px;
color: #FCF6ED;
font-family: 'TT-Commons-Pro-Bold' !important;
letter-spacing: 0;
z-index: 100;
}
/* Promo + newsletter: tablet & mobile — stack cards, drop overlap / absolute badge */
@media (max-width: 1199.98px) {
.promo-newsletter-section {
top: 0;
overflow-x: clip;
}
.service-card{
padding:70px 70px;
}
.promo-top-row {
height: auto;
min-height: 0;
padding: clamp(4rem, 5vw, 3rem) clamp(1rem, 6vw, 1.5rem) clamp(2.5rem, 7vw, 4rem);
}
.promo-newsletter-section .promo-top-row .row > [class*='col-'] {
flex: 0 0 100%;
max-width: 100%;
}
.promo-card-wrapper {
margin-bottom: 0;
margin-top: 0.75rem;
z-index: 1;
}
.promo-card-wrapper:first-child {
margin-top: 0;
}
.promo-card {
width: 100%;
max-width: 560px;
margin-inline: auto;
padding: clamp(2.75rem, 6vw, 3.25rem) clamp(1.25rem, 4vw, 1.75rem) clamp(1.5rem, 4vw, 2rem);
}
.promo-newsletter-section .promo-top-row .row {
row-gap: 4.5rem;
}
.promo-badge {
width: 112px;
height: 112px;
top: -50px;
}
.promo-card h3 {
font-size: clamp(1.05rem, 2.8vw, 1.35rem);
line-height: 1.3;
margin-top: 1.25rem;
}
.newsletter-bottom-row {
padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 3.5rem);
}
.newsletter-bottom-row .container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.newsletter-bottom-row h2 {
font-size: clamp(1.5rem, 4vw, 2rem);
line-height: 1.2;
}
.newsletter-bottom-row p {
font-size: clamp(1rem, 2.5vw, 1.2rem);
line-height: 1.45;
margin-bottom: 1.5rem;
max-width: 38rem;
margin-left: auto;
margin-right: auto;
}
.newsletter-btn {
font-size: clamp(1rem, 2.6vw, 1.15rem);
padding: 0.875rem 1.35rem;
white-space: normal;
max-width: 100%;
}
.promo-circle {
position: relative;
right: auto;
top: auto;
left: auto;
transform: rotate(12deg);
margin: 1.75rem auto 0;
width: clamp(148px, 38vw, 190px);
height: clamp(148px, 38vw, 190px);
font-size: clamp(0.9rem, 2.3vw, 1.05rem);
line-height: 1.25;
z-index: 2;
}
}
@media (max-width: 575.98px) {
.promo-badge {
width: 96px;
height: 96px;
top: -44px;
padding: 8px;
}
.promo-card h3 {
font-size: 1.05rem;
}
.newsletter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
max-width: min(22rem, 100%);
}
.promo-circle span {
display: block;
text-align: center;
padding: 0 0.35rem;
}
.service-section{
padding: 50px 23px;
}
.service-card{
padding: 30px 30px;
}
.service-icon{
top: -15%;
}
.ps-featuredproducts {
padding: 28px 23px 26px;
}
.module-products.container {
padding-left:0px !important;
padding-right:0px !important;
}
.service-image img{
width: 384px;
height: 380px;
}
}
/* -------------------------------------------------------------------------- */
/* Ruppert footer (Figma-aligned) */
/* -------------------------------------------------------------------------- */
.footer--ruppert.footer__main {
--ruppert-footer-bg: #003d3d;
--ruppert-footer-card: #0a5555;
--ruppert-footer-accent: #1ba8d9;
--ruppert-footer-text: #ffffff;
--ruppert-footer-muted: rgba(255, 255, 255, 0.82);
background: var(--ruppert-footer-bg);
color: var(--ruppert-footer-text);
padding: 63px 80px;
}
.footer--ruppert .footer__main-top.ruppert-footer__columns {
--bs-gutter-x: 1.75rem;
--bs-gutter-y: 1.5rem;
margin-top: 100px;
align-items: flex-start;
}
.footer--ruppert .ruppert-footer__brand {
padding-bottom: 0.25rem;
}
.footer--ruppert .ruppert-footer__logo-link img {
filter: brightness(0) invert(1);
max-height: 65px;
width: 150px;
}
.footer--ruppert .ruppert-footer__tagline {
font-family: 'TT-Rationalist-Medium-italic', Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 1rem;
color: var(--ruppert-footer-muted);
margin-top: 18px;
}
.footer--ruppert .ruppert-footer__social .ruppert-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: none;
color: var(--ruppert-footer-bg);
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.footer--ruppert .ruppert-footer__social .ruppert-footer__social-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
color: var(--ruppert-footer-bg);
}
.footer--ruppert .ruppert-footer__social .ruppert-footer__social-link svg,
.footer--ruppert .ruppert-footer__social .ruppert-footer__social-link .ruppert-footer__social-icon {
display: block;
width: 24px;
height: 24px;
object-fit: contain;
}
.footer--ruppert .footer-block {
margin-block-end: 0;
margin-top:0px;
}
/* Ensure footer contact module remains visible (header has global ps-contactinfo hide) */
.footer--ruppert .ps-contactinfo.ruppert-footer__contact {
display: block !important;
}
.footer--ruppert .footer-block__title,
.footer--ruppert .ruppert-footer__contact-title {
font-family: 'TT-Rationalist-Demibold';
font-weight: 600;
font-size: 20px;
color: #FCF6ED;
line-height: 100%;
letter-spacing: 0;
margin-block-end: 1.25rem;
}
.footer--ruppert .ps-customeraccountlinks .footer-block__title {
margin-block-end: 1.25rem;
}
.footer--ruppert .footer-block__list a {
font-family: 'TT-Commons-Pro-Medium';
font-size: 14px;
color: #FCF6ED;
font-weight: 400 !important;
line-height: 100%;
letter-spacing: 0;
padding-block: 10px;
}
.footer--ruppert .footer-block__list a:hover {
color: #ffffff;
text-decoration: underline;
}
.footer--ruppert .ruppert-footer__contact-cards {
display: flex;
flex-direction: column;
gap: 1.25rem;
height: 100%;
}
.footer--ruppert .ruppert-footer__contact:not(.ruppert-footer__contact--dual) .ruppert-footer__contact-card {
margin-top: -28px;
}
.footer--ruppert .ruppert-footer__contact-card {
background: var(--ruppert-footer-card);
border-radius: 16px;
padding: 1.5rem 1.25rem 1.35rem;
height: auto;
min-width: 0;
}
@media (min-width: 992px) {
.footer--ruppert .ruppert-footer__contact--dual .ruppert-footer__contact-cards {
flex-direction: row;
align-items: stretch;
gap: 1.25rem;
margin-top: -28px;
}
.footer--ruppert .ruppert-footer__contact--dual .ruppert-footer__contact-card {
flex: 1 1 0;
min-width: 0;
margin-top: 0;
height: 100%;
}
}
.footer--ruppert .ruppert-footer__contact-body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer--ruppert .ruppert-footer__contact-row {
display: flex;
gap: 0.65rem;
align-items: flex-start;
font-family: 'TT-Commons-Pro-Medium', system-ui, sans-serif;
font-size: 0.9375rem;
line-height: 1.45;
}
.footer--ruppert .ruppert-footer__contact-icon {
flex-shrink: 0;
line-height: 1;
}
.footer--ruppert .ruppert-footer__contact-icon .material-icons {
font-size: 1.25rem;
color: var(--ruppert-footer-text);
}
.footer--ruppert .ruppert-footer__contact-address,
.footer--ruppert .ruppert-footer__contact-row a {
font-family: 'TT-Commons-Pro-Medium';
font-size: 14px;
color: #FCF6ED;
font-weight: 400 !important;
line-height: 17px;
letter-spacing: 0;
padding-block: 10px;
margin-bottom: 3px;
padding: 5px 0px 0px;
}
.footer--ruppert .ruppert-footer__contact-row a:hover {
text-decoration: underline;
}
.footer--ruppert .ruppert-footer__bottom {
margin-top: 2.5rem;
padding-top: 1.75rem;
padding-bottom: 1.75rem;
border-bottom: none;
}
.footer--ruppert .ruppert-footer__bottom-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: stretch;
text-align: left;
}
@media (min-width: 768px) {
.footer--ruppert .ruppert-footer__bottom-inner {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
}
}
.footer--ruppert .ruppert-footer__bottom-primary {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
}
.footer--ruppert .ruppert-footer__copyright {
font-family: 'TT-Rationalist-Medium-italic', Georgia, 'Times New Roman', serif;
font-size: 16px;
color: #fcf6ed;
line-height: 1.2;
letter-spacing: 0;
font-weight: 500 !important;
}
.footer--ruppert .ruppert-footer__credit {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.35rem 0.5rem;
font-family: 'TT-Commons-Pro-Medium', system-ui, sans-serif;
font-size: 14px;
line-height: 1.3;
color: #fcf6ed;
left: 43px;
position: relative;
}
.footer--ruppert .ruppert-footer__credit-lead {
white-space: nowrap;
font-family: 'TT-Commons-Pro-Regular';
font-size: 10px;
color :#FCF6ED;
line-height: 100%;
letter-spacing: 0;
}
.footer--ruppert .ruppert-footer__credit-agency {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: inherit;
text-decoration: none;
}
.footer--ruppert .ruppert-footer__credit-agency:hover,
.footer--ruppert .ruppert-footer__credit-agency:focus-visible {
color: #fff;
text-decoration: none;
}
.footer--ruppert .ruppert-footer__credit-branding {
display: block;
width: auto;
height: 16px;
max-height: 16px;
flex-shrink: 0;
object-fit: contain;
}
.footer--ruppert .ruppert-footer__credit-brand {
font-family: 'TT-Commons-Pro-Demibold';
font-size: 10px;
font-weight: 600;
letter-spacing: 0%;
line-height: 100%;
text-transform: uppercase;
color: #fff;
}
.footer--ruppert .ruppert-footer__legal {
flex-shrink: 0;
}
.footer--ruppert .ruppert-footer__legal-list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer--ruppert .ruppert-footer__legal-list {
justify-content: flex-end;
gap: 2.5rem;
}
}
.footer--ruppert .ruppert-footer__legal-list a {
font-family: 'TT-Commons-Pro-Regular', system-ui, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 100%;
color: #fcf6ed;
text-decoration: none;
white-space: nowrap;
}
.footer--ruppert .ruppert-footer__legal-list a:hover,
.footer--ruppert .ruppert-footer__legal-list a:focus-visible {
color: #fff;
text-decoration: underline;
}
/* CMS pages (Impressum, AGB, Datenschutz) – match listing / PDP cream shell */
.page-cms {
background-color: #fcf6ed;
}
.page-cms #wrapper,
.page-cms #content-wrapper,
.page-cms .columns-container,
.page-cms .center-column {
background-color: #fcf6ed;
}
.page-cms .ruppert-cms-page {
background-color: #fcf6ed;
padding: 56px 80px 80px;
}
.page-cms .ruppert-cms-page__inner {
max-width: 100%;
margin: 0 auto;
}
.page-cms .ruppert-cms-page__card .breadcrumb__wrapper {
margin: 0 0 20px;
padding: 0;
background: transparent;
}
.page-cms .ruppert-cms-page__card .breadcrumb__wrapper .container {
max-width: 100%;
padding: 0;
}
#module-ruppertnewsletter-subscribe .ruppert-newsletter-subscribe__content {
max-width: 480px;
margin: 0 auto;
}
#module-ruppertnewsletter-subscribe .ruppert-newsletter-subscribe__content .breadcrumb__wrapper {
margin: 0 0 16px;
padding: 0;
background: transparent;
}
#module-ruppertnewsletter-subscribe .ruppert-newsletter-subscribe__content .breadcrumb__wrapper .container {
max-width: 100%;
padding: 0;
}
.page-cms .ruppert-cms-page__header {
margin-bottom: 24px;
}
.page-cms .ruppert-cms-page__title {
margin: 0;
font-family: 'TT-Rationalist-Demibold', Georgia, 'Times New Roman', serif;
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 600;
line-height: 1.2;
color: #01454a;
}
.page-cms .ruppert-cms-page__card,
.page-cms .ruppert-cms-legal-page {
padding: 48px 64px;
border-radius: 18px;
background-color: #ffffff;
color: #1a1a1a;
}
.page-cms .ruppert-cms-page__card {
box-shadow: 0 1px 0 rgba(1, 69, 74, 0.06);
}
.ruppert-cms-legal {
font-family: 'TT-Commons-Pro-Regular', system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #1a1a1a;
}
.ruppert-cms-legal h2,
.ruppert-cms-legal h3,
.ruppert-cms-legal h4 {
font-family: 'TT-Rationalist-Medium-italic', Georgia, 'Times New Roman', serif;
color: #003d3d;
font-size: 20px;
line-height: 1.2;
font-weight: 500;
margin-top: 1.75rem;
margin-bottom: 0.75rem;
}
.ruppert-cms-legal p,
.ruppert-cms-legal ul,
.ruppert-cms-legal ol {
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.65;
color: #4A5565;
margin-bottom: 0px;
}
.ruppert-cms-legal__placeholder {
color: rgba(0, 61, 61, 0.65);
font-style: italic;
}
.ruppert-cms-legal__block + .ruppert-cms-legal__block {
margin-top: 2rem;
}
.ruppert-cms-legal a {
color: #003d3d;
text-decoration: underline;
text-underline-offset: 2px;
}
.ruppert-cms-legal a:hover,
.ruppert-cms-legal a:focus-visible {
color: #01454a;
}
.ruppert-cms-legal--termly {
width: 100%;
}
.ruppert-cms-legal__termly-frame {
display: block;
width: 100%;
min-height: 75vh;
border: 0;
background: transparent;
}
@media (max-width: 991.98px) {
.page-cms .ruppert-cms-page {
padding: 32px 16px 48px;
}
.page-cms .ruppert-cms-page__card,
.page-cms .ruppert-cms-legal-page {
padding: 32px 24px;
border-radius: 14px;
}
}
@media (max-width: 575.98px) {
.page-cms .ruppert-cms-page {
padding: 24px 16px 40px;
}
.page-cms .ruppert-cms-page__card,
.page-cms .ruppert-cms-legal-page {
padding: 24px 20px;
}
}
.footer--ruppert .footer-block__title--toggle .material-icons {
color: var(--ruppert-footer-text);
}
.footer--ruppert .footer-block__title--toggle .stretched-link {
color: inherit;
}
@media (max-width: 991.98px) {
.footer--ruppert.footer__main {
padding: clamp(2rem, 5vw, 2.75rem) max(16px, env(safe-area-inset-left)) 2.25rem
max(16px, env(safe-area-inset-right));
}
.footer--ruppert .ruppert-footer__columns {
margin-top: 1.5rem;
}
.footer--ruppert .ruppert-footer__contact-card,
.footer--ruppert .ruppert-footer__contact--dual .ruppert-footer__contact-card:first-child {
margin-top: 0;
height: auto;
max-width: 100%;
}
.footer--ruppert .ruppert-footer__contact--dual .ruppert-footer__contact-cards {
flex-direction: column;
margin-top: 0;
}
.footer--ruppert .ruppert-footer__contact-cards {
gap: 1rem;
}
.footer--ruppert .footer__main-top.ruppert-footer__columns {
--bs-gutter-y: 1.35rem;
}
.footer--ruppert .ruppert-footer__brand.row {
text-align: center;
}
.footer--ruppert .ruppert-footer__brand .d-flex.flex-wrap {
justify-content: center;
}
.footer--ruppert .ruppert-footer__brand .text-lg-end {
text-align: center !important;
}
.footer--ruppert .ruppert-footer__bottom {
margin-top: 2rem;
padding-top: 1.25rem;
}
.footer--ruppert .ruppert-footer__copyright,
.footer--ruppert .ruppert-footer__credit {
text-align: left;
left:auto !important;
}
.footer--ruppert .ruppert-footer__credit-lead {
white-space: normal;
}
.footer--ruppert .ruppert-footer__bottom-primary {
align-items: center !important;
}
.footer--ruppert .footer-block__list{
margin-block-end: 16px !important;
}
.logo-background{
width:70% !important
}
.page-search #products, .page-category #products, .page-manufacturer #products{
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* -------------------------------------------------------------------------- */
/* Ruppert header: 1300px–1399px (megamenu wrap + main row fit) */
/* Above 1400px keeps single-line nav; below, wrap links instead of overflow */
/* -------------------------------------------------------------------------- */
@media (min-width: 1300px) and (max-width: 1399.98px) {
#header .header-nav.ruppert-mm {
overflow-x: clip;
}
#header .header-nav.ruppert-mm > .container-md {
max-width: 100%;
box-sizing: border-box;
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
#header .header-nav.ruppert-mm #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content {
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center;
row-gap: 0.15rem;
column-gap: 0.25rem 0.65rem;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 {
flex: 0 1 auto;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a {
padding: 0.5rem 0.4rem !important;
font-size: clamp(12.5px, 0.95vw, 15px) !important;
line-height: 1.2 !important;
}
#header .header-nav.ruppert-mm .container_tv_megamenu {
padding: 10px 8px 0px !important;
}
/* Main header row: logo | centered search | actions (shop-test) */
#header .ruppert-header-main__inner {
display: grid !important;
grid-template-columns: auto minmax(48px, 1fr) minmax(360px, 576px) minmax(48px, 1fr) auto !important;
grid-template-areas: "logo pad-l search pad-r actions" !important;
gap: 0 20px !important;
padding-left: max(12px, env(safe-area-inset-left)) !important;
padding-right: max(12px, env(safe-area-inset-right)) !important;
min-height: 96px !important;
max-width: 100%;
box-sizing: border-box;
}
#header .ruppert-header-main__inner:not(:has(.ruppert-header-main__actions)) {
grid-template-columns: auto minmax(48px, 1fr) minmax(360px, 576px) minmax(48px, 1fr) !important;
grid-template-areas: "logo pad-l search pad-r" !important;
}
#header .ruppert-header-main__logo {
grid-area: logo !important;
flex-shrink: 0;
min-width: 0;
}
#header .ruppert-header-main__search {
grid-area: search !important;
justify-self: center !important;
max-width: 576px !important;
min-width: 0 !important;
width: 100% !important;
}
#header .ruppert-header-main__actions {
grid-area: actions !important;
justify-self: end !important;
gap: 8px 16px !important;
flex-shrink: 0;
min-width: 0;
}
#header .ruppert-header-main__logo img {
max-height: clamp(44px, 5vw, 56px) !important;
}
#header .ruppert-header-main__search .ps-searchbar__input,
#header .ruppert-header-main__search .ps-searchbar__input.form-control {
font-size: clamp(13px, 1.1vw, 15px) !important;
padding-left: 10px !important;
padding-right: 36px !important;
}
#header .ruppert-header-main__actions .ruppert-header-action__btn,
#header .ruppert-header-main__actions .header-block__action-btn {
font-size: clamp(11px, 1vw, 13px) !important;
gap: 3px !important;
white-space: nowrap;
}
#header .ruppert-header-action--cart .header-block__title {
font-size: clamp(11px, 1vw, 13px) !important;
}
#header .ruppert-header-main__inner > .ruppert-mm-mobile-bar,
#header .ruppert-header-main__inner > .ruppert-header-main__mobile-icon,
#header .ruppert-header-main__inner > #_mobile_ps_customersignin,
#header .ruppert-header-main__inner > #_ruppert_mobile_wishlist,
#header .ruppert-header-main__inner > #_mobile_ps_shoppingcart {
display: none !important;
}
.ruppert-header-top__inner {
padding-right: 16px !important;
}
}
/* Tighter band for medium-wide desktops — nav link sizing only */
@media (min-width: 1200px) and (max-width: 1399.98px) {
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a {
padding: 0.45rem 0.3rem !important;
font-size: clamp(12px, 1.5vw, 14px) !important;
}
}
/* -------------------------------------------------------------------------- */
/* Ruppert responsive <1120px: header logo, ps_mainmenu submenu, hero slider */
/* -------------------------------------------------------------------------- */
@media (min-width: 1300px) and (max-width: 1399.98px) {
#header .ruppert-header-main__logo {
max-width: min(240px, 28vw);
min-width: 0;
}
#header .ruppert-header-main__logo .logo,
#header .ruppert-header-main__logo a {
display: inline-flex !important;
align-items: center;
max-width: 100%;
}
#header .ruppert-header-main__logo img {
display: block !important;
max-width: 100%;
height: auto;
object-fit: contain;
}
.ps-imageslider__bottom{
margin-bottom: 50px;
}
}
@media (max-width: 991.98px) {
#header .ruppert-header-main__inner,
.ruppert-header-main__inner {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
row-gap: 0 !important;
box-sizing: border-box;
}
#header .ruppert-header-main__logo,
.ruppert-header-main__logo {
flex: 0 1 auto !important;
max-width: min(210px, calc(100% - 6.5rem)) !important;
margin-right: auto !important;
align-self: center;
order: 1;
}
#header .ruppert-header-main__logo .logo,
#header .ruppert-header-main__logo .navbar-brand,
#header .ruppert-header-main__logo a {
display: inline-flex !important;
align-items: center;
max-width: 100%;
width: 150px !important;
}
#header .ruppert-header-main__logo img {
display: block !important;
max-width: 100%;
width: auto;
height: auto;
max-height: clamp(32px, 9vw, 44px);
object-fit: contain;
}
#header .ruppert-header-main__search,
.ruppert-header-main__search {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin-left: 0 !important;
min-width: 0;
order: 2;
}
#header .ruppert-mm-mobile-bar {
flex: 0 0 auto !important;
order: 3;
}
}
/* Mobile header: logo + search + menu in one row */
@media (max-width: 991.98px) {
#header .ruppert-header-main > .container-md,
#header .header-nav.ruppert-mm > .container-md {
padding-left: 15px !important;
padding-right: 10px !important;
}
#header .ruppert-header-main__inner {
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 8px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#header .ruppert-header-main__logo {
flex: 0 1 auto !important;
max-width: calc(100% - 6.5rem) !important;
min-width: 0;
margin-right: auto !important;
}
#header .ruppert-header-main__search {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin-left: 0 !important;
}
#header .ruppert-header-main__search .ps-searchbar--mobile {
display: inline-flex !important;
}
#header .ruppert-mm-mobile-bar {
flex: 0 0 auto;
padding: 0 !important;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
#header .ruppert-header-main__logo {
order: 1;
}
#header .ruppert-header-main__actions {
order: 2;
margin-left: auto !important;
}
#header .ruppert-header-main__search {
order: 3;
}
#header .ruppert-mm-mobile-bar {
order: 4;
}
}
@media (max-width: 1199.98px) {
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
padding: 1rem 1.1rem 1.25rem;
}
}
@media (max-width: 767.98px) {
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
grid-template-columns: 1fr;
gap: 0.75rem;
padding: 0.85rem 1rem 1rem;
}
}
@media (max-width: 991.98px) {
.ps-imageslider #ps_imageslider .ps-imageslider__figure {
min-height: 0;
height: auto;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figure > img {
height: 75vh;
}
/* Smooth overlay (no hard mid-band); anchor content to bottom */
.ps-imageslider #ps_imageslider .ps-imageslider__figcaption {
justify-content: flex-end;
align-items: stretch;
padding: 1rem 1.1rem 2.75rem;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: 0;
/* background: linear-gradient(
180deg,
rgba(4, 43, 50, 0) 0%,
rgba(4, 43, 50, 0.08) 32%,
rgba(1, 52, 58, 0.55) 68%,
rgba(1, 45, 50, 0.88) 100%
); */
color: #fff;
}
/* Replace overlapping absolutes with a simple grid: chips (left) + badge (right) */
.ps-imageslider__promo {
width: 100%;
max-width: none;
margin: 0;
min-height: 0;
top: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 6px;
align-items: center;
}
.ps-imageslider__promo-chip--main,
.ps-imageslider__promo-chip--sub {
position: static;
transform: none;
z-index: 1;
}
.ps-imageslider__promo-chip--main {
grid-column: 1;
grid-row: 1;
align-self: end;
font-size: clamp(1.2rem, 3.8vw, 1.85rem);
padding: 6px 12px;
}
.ps-imageslider__promo-chip--sub {
grid-column: 1;
grid-row: 2;
align-self: start;
font-size: clamp(0.9rem, 2.9vw, 1.2rem);
padding: 6px 14px 8px;
}
.ps-imageslider__promo-badge {
grid-column: 2;
grid-row: 1 / span 2;
position: static;
justify-self: end;
align-self: center;
width: min(138px, 31vw);
height: min(138px, 31vw);
font-size: clamp(0.68rem, 2.5vw, 0.95rem);
line-height: 1.2;
padding: 12px 14px;
transform: none;
}
.ps-imageslider__bottom {
position: relative;
bottom: auto;
left: auto;
right: auto;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-top: 6px;
}
.ps-imageslider__brand-wrap {
width: 100%;
}
.ps-imageslider__brand {
color: #fcf6ed;
font-size: clamp(1.5rem, 4.6vw, 2.35rem);
}
.ps-imageslider__brand-wrap img {
width: clamp(40px, 10vw, 56px) !important;
height: auto !important;
}
.ps-imageslider__cta {
align-self: flex-start;
max-width: 100%;
font-size: clamp(1rem, 3.2vw, 1.35rem);
padding: 12px 20px;
white-space: normal;
text-align: center;
}
}
@media (max-width: 575.98px) {
.ps-imageslider #ps_imageslider .ps-imageslider__figure > img {
height: 75vh;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figcaption {
padding: 0.65rem 0.85rem 2.85rem;
}
.ps-imageslider__promo {
column-gap: 8px;
row-gap: 4px;
}
.ps-imageslider__promo-badge {
width: min(112px, 30vw);
height: min(112px, 30vw);
font-size: 10px;
padding: 10px;
}
.ps-imageslider__bottom {
gap: 10px;
margin-top: 4px;
}
.ps-imageslider__cta {
width: 100%;
justify-content: center;
padding: 11px 16px;
}
}
/* -------------------------------------------------------------------------- */
/* Listing hero banner (search / category – Figma) */
/* -------------------------------------------------------------------------- */
.listing-hero {
--listing-hero-accent-h: 60px;
--listing-hero-badge-size: 120px;
--listing-hero-image-h: clamp(280px, 38vw, 480px);
--listing-hero-accent-bg: #c5e6e5;
--listing-hero-badge-bg: #FCF6ED;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-bottom: 0;
}
.listing-hero__inner {
position: relative;
overflow: visible;
}
.listing-hero__media {
position: relative;
overflow: hidden;
background-color: #d2f1f2;
}
.listing-hero__image {
display: block;
width: 100%;
height: 40vh;
object-fit: cover;
object-position: center 35%;
}
.listing-hero__title {
position: absolute;
left: clamp(24px, 5vw, 80px);
bottom: clamp(32px, 4vw, 64px);
margin: 0;
z-index: 2;
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Rationalist-Medium', serif;
font-size: clamp(48px, 6.5vw, 80px);
line-height: 1;
font-weight: 600;
letter-spacing: -0.02em;
}
/* Figma: pale bar under photo – badge lower half sits here, not on promo */
.listing-hero__accent {
height: var(--listing-hero-accent-h);
background-color: #FCF6ED;
position: relative;
z-index: 1;
}
/* Centered on seam between photo + accent (stays inside hero) */
.listing-hero__badge {
position: absolute;
left: 50%;
bottom: var(--listing-hero-accent-h);
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: var(--listing-hero-badge-size);
height: var(--listing-hero-badge-size);
border-radius: 50%;
background-color: var(--listing-hero-badge-bg);
border: 4px solid var(--listing-hero-badge-bg);
transform: translate(-50%, 50%);
box-shadow: 0 6px 24px rgba(1, 69, 74, 0.14);
pointer-events: none;
}
.listing-hero__badge-icon {
width: 64px;
height: 64px;
object-fit: contain;
}
/* Featured products on listing pages only (search + category) – not homepage */
.listing-featured .ps-featuredproducts {
background: #bed8d5;
margin-bottom: 0;
padding: 64px 80px 34px;
}
.listing-featured .module-products,
.listing-featured .module-products.container {
background-color: transparent !important;
}
.listing-featured .ps-featuredproducts .section-title {
color: #01454a;
}
.listing-featured .ps-featuredproducts__subtitle {
color: #01454a;
opacity: 0.88;
}
/* Listing pages: hero → breadcrumb (inside #products) → results → featured promo → newsletter */
.page-search #products .breadcrumb__wrapper--listing,
.page-category #products .breadcrumb__wrapper--listing,
.page-manufacturer #products .breadcrumb__wrapper--listing {
position: sticky;
top: var(--header-height, calc(var(--scroll-padding-top, 0px) - 16px));
z-index: 1010;
background-color: #FCF6ED;
padding: 12px 0 24px;
}
.page-search #products .breadcrumb__wrapper--listing.is-past-listing,
.page-category #products .breadcrumb__wrapper--listing.is-past-listing,
.page-manufacturer #products .breadcrumb__wrapper--listing.is-past-listing {
position: relative;
top: auto;
z-index: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.page-search .listing-hero + #products .breadcrumb__wrapper--listing,
.page-category .listing-hero + #products .breadcrumb__wrapper--listing,
.page-manufacturer .listing-hero + #products .breadcrumb__wrapper--listing {
margin-top: 20px;
padding-top: 12px;
}
.listing-featured--after-listing {
margin-top: 0;
position: relative;
z-index: 2;
}
.page-category .promo-newsletter-section,
.page-search .promo-newsletter-section,
.page-manufacturer .promo-newsletter-section {
position: relative;
z-index: 2;
}
.page-category #footer,
.page-search #footer,
.page-manufacturer #footer {
position: relative;
z-index: 2;
}
.listing-breadcrumb-sentinel {
height: 0;
width: 100%;
pointer-events: none;
}
.listing-featured--after-listing .ps-featuredproducts {
padding-top: 64px;
}
.page-category .listing-category__description {
margin-bottom: 1.5rem;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.5;
}
.page-search #products,
.page-category #products,
.page-manufacturer #products {
padding: 24px 80px;
background-color: #FCF6ED;
}
.page-search .listing-hero + #products,
.page-category .listing-hero + #products,
.page-manufacturer .listing-hero + #products {
padding-top: 0;
border-top: 1px solid transparent;
}
/* Breadcrumb – Figma (home icon + Vector chevron separators) */
.breadcrumb__wrapper .breadcrumb {
--bs-breadcrumb-divider: none;
--bs-breadcrumb-item-active-color: #01454a;
/* background-color: #FCF6ED; */
}
.breadcrumb-link--home {
display: inline-flex;
align-items: center;
gap: 6px;
}
.breadcrumb__home-icon {
display: block;
width: 14px;
height: 14px;
flex-shrink: 0;
object-fit: contain;
}
.breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item::before {
content: "" !important;
display: inline-block;
width: 7px;
height: 10px;
padding: 0 !important;
margin: 0 0.5rem;
vertical-align: middle;
float: none;
background: transparent url('../img/icons/Vector.png') no-repeat center / contain;
}
.breadcrumb__wrapper .breadcrumb-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #40807e;
text-decoration: none;
}
.breadcrumb__wrapper .breadcrumb-link:hover {
color: #01454a;
}
.breadcrumb__wrapper .breadcrumb-current {
color: #01454a;
font-weight: 500;
}
/* Listing info cards – Figma (below breadcrumb, search + category + brand) */
.page-search .listing-info-cards,
.page-category .listing-info-cards,
.page-manufacturer .listing-info-cards {
background-color: transparent;
padding: 0 0 48px;
}
.page-search .listing-info-cards .container,
.page-category .listing-info-cards .container,
.page-manufacturer .listing-info-cards .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.listing-info-cards__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.listing-info-cards__card {
display: flex;
align-items: flex-start;
gap: 16px;
min-height: 146px;
padding: 24px;
border-radius: 20px;
background-color: #e9edea;
}
.listing-info-cards__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 12px;
background-color: #01454a;
color: #ffffff;
}
.listing-info-cards__icon svg {
display: block;
width: 24px;
height: 24px;
}
.listing-info-cards__content {
min-width: 0;
}
.listing-info-cards__title {
margin: 0 0 8px;
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Rationalist-Medium', serif;
font-size: 18px;
line-height: 1.25;
font-weight: 600;
}
.listing-info-cards__desc {
margin: 0;
color: #5f7d7a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.45;
font-weight: 400;
}
@media (max-width: 1199.98px) {
.page-search .listing-info-cards,
.page-category .listing-info-cards {
padding-left: 0;
padding-right: 0;
}
.listing-info-cards__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.listing-info-cards__card:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 767.98px) {
.page-search .listing-hero + #products .breadcrumb__wrapper--listing,
.page-category .listing-hero + #products .breadcrumb__wrapper--listing,
.page-manufacturer .listing-hero + #products .breadcrumb__wrapper--listing {
margin-top: 0;
padding-top: 16px;
padding-bottom: 16px;
}
.breadcrumb__wrapper {
margin-bottom: 0;
}
.page-search .listing-info-cards,
.page-category .listing-info-cards {
padding: 0 0 32px;
}
.listing-info-cards__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.listing-info-cards__card {
min-height: 0;
padding: 20px;
border-radius: 16px;
}
.listing-info-cards__card:last-child {
grid-column: auto;
}
.listing-info-cards__title {
font-size: 17px;
}
.listing-info-cards__desc {
font-size: 14px;
}
.listing-hero {
--listing-hero-accent-h: 48px;
--listing-hero-badge-size: 96px;
--listing-hero-image-h: clamp(220px, 55vw, 320px);
}
.listing-hero__title {
left: 20px;
bottom: 28px;
font-size: 40px;
}
.listing-featured .ps-featuredproducts {
padding: 28px 24px 26px;
}
.listing-featured--after-listing .ps-featuredproducts {
padding-top: 28px;
}
}
/* -------------------------------------------------------------------------- */
/* Listing filters – offcanvas (Figma) + toolbar + region pills */
/* -------------------------------------------------------------------------- */
/* Listing layout: full-width content (no empty sidebar gap on the right) */
.page-category #center-column,
.page-search #center-column,
.page-manufacturer #center-column,
.page-category .page--full-width,
.page-search .page--full-width,
.page-manufacturer .page--full-width {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.page-category .columns-container > .row,
.page-search .columns-container > .row ,
.page-manufacturer .columns-container > .row{
margin-left: 0;
margin-right: 0;
}
.page-category #left-column,
.page-search #left-column,
.page-manufacturer #left-column,
.page-category .listing-left-column--hidden,
.page-search .listing-left-column--hidden {
display: none !important;
}
.page-category #js-active-search-filters,
.page-search #js-active-search-filters ,
.page-manufacturer #js-active-search-filters,
.page-brands-index #js-active-search-filters {
display: none !important;
}
.page-category .ps-facetedsearch:not(#listing-faceted-sidebar),
.page-search .ps-facetedsearch:not(#listing-faceted-sidebar),
.page-manufacturer .ps-facetedsearch:not(#listing-faceted-sidebar),
.page-brands-index .ps-facetedsearch:not(#listing-faceted-sidebar),
.page-category #search_filters_wrapper:not(#listing-faceted-sidebar #search_filters_wrapper),
.page-search #search_filters_wrapper:not(#listing-faceted-sidebar #search_filters_wrapper),
.page-brands-index #search_filters_wrapper:not(#listing-faceted-sidebar #search_filters_wrapper) {
display: none !important;
}
/* Listing layout – sidebar filters + main content */
.listing-products__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: start;
}
.listing-products__main {
min-width: 0;
}
@media (min-width: 992px) {
.listing-products__layout:has(.listing-faceted-sidebar) {
grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
gap: 32px;
}
}
/* Persistent filter sidebar (desktop) / slide-in panel (mobile & tablet) */
.listing-faceted-sidebar {
position: relative;
z-index: 1;
width: 100%;
background-color: transparent;
border: 0;
box-shadow: none;
}
.listing-faceted-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.listing-faceted-sidebar__title {
margin: 0;
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Rationalist-Medium', serif;
font-size: 20px;
font-weight: 600;
line-height: 1.1;
}
.listing-faceted-sidebar__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #01454a;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.listing-faceted-sidebar__close:hover,
.listing-faceted-sidebar__close:focus {
color: #40807e;
}
.listing-faceted-sidebar__body {
padding: 0;
}
@media (min-width: 992px) {
.listing-faceted-sidebar {
position: relative;
top: auto;
align-self: start;
}
.listing-faceted-sidebar__close {
display: none;
}
.listing-faceted-sidebar__title {
font-size: 24px;
}
}
@media (max-width: 991.98px) {
.listing-faceted-sidebar {
display: none;
}
.listing-faceted-sidebar.is-open {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1060;
width: min(360px, 92vw);
height: 100vh;
overflow-y: auto;
overflow-anchor: none;
padding: 20px 16px 24px;
background-color: #ffffff;
box-shadow: 4px 0 24px rgba(1, 69, 74, 0.12);
transform: translateX(0);
}
}
/* Toolbar */
.listing-toolbar {
margin-bottom: 20px;
}
.listing-toolbar__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.listing-toolbar__filter-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: transparent;
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Rationalist-Medium', serif;
font-size: 18px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.listing-toolbar__filter-btn:hover,
.listing-toolbar__filter-btn:focus {
color: #40807e;
}
.listing-toolbar__filter-icon {
display: block;
width: 18px;
height: 18px;
flex-shrink: 0;
color: #01454a;
}
.listing-faceted-empty {
padding: 12px 4px;
}
.listing-faceted-empty__text {
margin: 0;
color: #5f7d7a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 1.45;
}
.listing-toolbar__meta {
margin-top: 16px;
}
/* Listing snackbar (Figma) – below facet pills */
.listing-snackbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
margin-bottom: 24px;
padding: 14px 24px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 2px 16px rgba(1, 69, 74, 0.08);
}
.listing-snackbar__count {
flex-shrink: 0;
color: #01454A;
font-family: 'TT-Commons-Pro-Regular';
font-size: 14px;
font-weight: 400;
line-height: 100%;
letter-spacing: 0%;
}
.listing-snackbar__views {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 1;
}
.listing-snackbar__view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #9eb8b6;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.listing-snackbar__view-btn:hover,
.listing-snackbar__view-btn:focus {
color: #01454a;
background-color: #f0f6f5;
}
.listing-snackbar__view-btn.is-active {
color: #01454a;
background-color: transparent;
}
.listing-snackbar__sort {
flex-shrink: 0;
margin-left: auto;
}
.listing-snackbar__sort-inner {
display: flex;
align-items: center;
gap: 10px;
}
.listing-snackbar__sort-label {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 100%;
letter-spacing: 0%;
}
.listing-snackbar__sort-dropdown {
position: relative;
}
.listing-snackbar__sort-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 120px;
padding: 10px 14px;
border: 1px solid #7DB2A8;
border-radius: 8px;
background-color: #ffffff;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 100%;
letter-spacing: 0%;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.listing-snackbar__sort-btn::after {
display: none;
}
.listing-snackbar__sort-btn:hover,
.listing-snackbar__sort-btn:focus,
.listing-snackbar__sort-btn.show {
border-color: #01454a;
background-color: #ffffff;
color: #01454a;
box-shadow: none;
}
.listing-snackbar__sort-value {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.listing-snackbar__sort-chevron {
flex-shrink: 0;
color: #01454a;
transition: transform 0.2s ease;
}
.listing-snackbar__sort-btn.show .listing-snackbar__sort-chevron {
transform: rotate(180deg);
}
.listing-snackbar__sort-menu {
min-width: 100%;
margin-top: 6px !important;
padding: 8px 0;
border: 1px solid #d5dedc;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(1, 69, 74, 0.12);
}
.listing-snackbar__sort-menu .listing-snackbar__sort-item {
padding: 10px 16px;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.15px;
text-decoration: none;
}
.listing-snackbar__sort-menu .listing-snackbar__sort-item:hover,
.listing-snackbar__sort-menu .listing-snackbar__sort-item:focus {
background-color: #e8f3f2;
color: #01454a;
}
.listing-snackbar__sort-menu .listing-snackbar__sort-item.is-current,
.listing-snackbar__sort-menu .listing-snackbar__sort-item.active {
background-color: #e8f3f2;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-weight: 500;
}
/* Region / facet pills – Figma filtered details */
.listing-facet-pills--empty {
display: none;
}
.listing-facet-pills__group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.listing-facet-pills__label {
flex-shrink: 0;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.listing-facet-pills__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.listing-facet-pills__pill,
.listing-facet-pills__pill--static {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
border-radius: 999px;
border: 1px solid #01454a;
background-color: #ffffff;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.listing-facet-pills__pill:hover,
.listing-facet-pills__pill:focus {
border-color: #01454a;
background-color: #ffffff;
color: #01454a;
}
.listing-facet-pills__pill.is-active,
.listing-facet-pills__pill--static.is-active {
background-color: #01454a;
border-color: #01454a;
color: #ffffff;
cursor: default;
}
.listing-facet-pills__pill.is-active:hover,
.listing-facet-pills__pill.is-active:focus,
.listing-facet-pills__pill--static.is-active:hover {
background-color: #01454a;
border-color: #01454a;
color: #ffffff;
}
.listing-facet-pills__pill-text {
display: inline;
}
/* Legacy offcanvas selectors kept for safety – sidebar uses listing-faceted-sidebar */
#offcanvas-faceted.listing-faceted-offcanvas,
#listing-faceted-sidebar.listing-faceted-offcanvas {
--bs-offcanvas-width: min(360px, 92vw);
--bs-offcanvas-zindex: 1060;
}
.listing-faceted-backdrop,
.page-category .offcanvas-backdrop,
.page-search .offcanvas-backdrop ,
.page-manufacturer .offcanvas-backdrop,
.page-brands-index .offcanvas-backdrop {
z-index: 1055;
background-color: rgba(1, 69, 74, 0.35);
}
.listing-faceted-offcanvas__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 16px;
border-bottom: 0;
background-color: #ffffff;
}
.listing-faceted-offcanvas__title {
margin: 0;
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Rationalist-Medium', serif;
font-size: 20px;
font-weight: 600;
line-height: 1.1;
}
.listing-faceted-offcanvas__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #01454a;
font-size: 28px;
line-height: 1;
opacity: 1;
cursor: pointer;
}
.listing-faceted-offcanvas__close:hover,
.listing-faceted-offcanvas__close:focus {
color: #40807e;
}
.listing-faceted-offcanvas__body {
padding: 0 16px 24px;
}
.listing-faceted-panel .search-filters__clear {
margin-bottom: 12px;
}
.listing-faceted-accordion__item {
border: 0;
margin-bottom: 12px;
background: transparent;
}
.listing-faceted-accordion__trigger {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 0 0 10px;
border: 0;
background: transparent;
box-shadow: none !important;
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Rationalist-Medium', serif;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
}
.listing-faceted-accordion__trigger::after {
display: none !important;
}
.listing-faceted-accordion__toggle {
flex-shrink: 0;
width: 18px;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1;
text-align: center;
}
.listing-faceted-accordion__toggle::before {
content: '+';
}
.listing-faceted-accordion__label {
flex: 1;
text-align: left;
}
.listing-faceted-accordion__item:has(.listing-faceted-accordion__collapse.show) .listing-faceted-accordion__toggle::before {
content: '−';
}
.listing-faceted-accordion__item:has(.listing-faceted-accordion__collapse.show) .listing-faceted-accordion__trigger .listing-faceted-accordion__label {
font-family: 'TT-Rationalist-Medium-italic', 'TT-Rationalist-Medium', serif;
font-style: italic;
}
.listing-faceted-accordion__collapse .listing-facet-filters {
margin: 0 0 8px;
padding: 14px 16px;
border-radius: 12px;
background-color: #f3f5f4;
overflow-anchor: none;
}
.listing-faceted-accordion__collapse .listing-facet-filters > .accordion-body {
margin: 0;
padding: 0;
border-radius: 0;
background: transparent;
list-style: none;
max-height: none;
overflow: visible;
}
.listing-faceted-accordion__collapse .accordion-body:not(.listing-facet-filters > .accordion-body) {
margin: 0 0 8px;
padding: 14px 16px;
border-radius: 12px;
background-color: #f3f5f4;
list-style: none;
max-height: none;
overflow: visible;
}
.listing-facet-filters--collapsed > .accordion-body > li:nth-child(n+6) {
display: none;
}
.listing-facet-filters__toggle {
display: block;
width: 100%;
margin: 8px 0 0;
padding: 0;
border: 0;
background: transparent;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
line-height: 1.35;
text-align: left;
text-decoration: underline;
cursor: pointer;
}
.listing-facet-filters__toggle:hover,
.listing-facet-filters__toggle:focus {
color: #01454a;
text-decoration: underline;
}
.listing-faceted-accordion__collapse .search-filters__item {
margin-bottom: 8px;
}
.listing-faceted-accordion__collapse .search-filters__item:last-child {
margin-bottom: 0;
}
.listing-faceted-panel .search-filters__form-check .form-check-input {
width: 16px;
height: 16px;
margin-top: 0;
border: 1px solid #c5cecc;
border-radius: 3px;
}
.listing-faceted-panel .search-filters__link,
.listing-faceted-panel .search-filters__form-label {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
line-height: 1.35;
}
.listing-faceted-panel .search-filters__item.active .search-filters__link,
.listing-faceted-panel .search-filters__item.active .search-filters__form-label {
color: #01454a;
font-weight: 500;
}
.listing-faceted-panel .search-filters__magnitude {
color: #8aa09c;
}
@media (max-width: 767.98px) {
.listing-faceted-sidebar__title {
font-size: 24px;
}
.listing-facet-pills__group {
align-items: flex-start;
gap: 10px;
}
.listing-facet-pills__pill,
.listing-facet-pills__pill--static {
padding: 7px 14px;
font-size: 13px;
}
}
/* Category / search / brand product grid – Figma listing cards */
.page-category #js-product-list .products.listing-products__grid,
.page-search #js-product-list .products.listing-products__grid,
.page-manufacturer #js-product-list .products.listing-products__grid {
display: grid !important;
gap: 24px;
margin: 0;
padding: 0;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--4,
.page-search #js-product-list .products.listing-products__grid.listing-grid--4,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* Small laptop / tablet: 2 products per row (matches header menu ≤1300px breakpoint) */
@media (min-width: 576px) and (max-width: 1299.98px) {
.page-category #js-product-list .products.listing-products__grid.listing-grid--4,
.page-search #js-product-list .products.listing-products__grid.listing-grid--4,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px;
}
}
@media (max-width: 1299.98px) {
.listing-snackbar__view-btn[data-grid-view="4"] {
display: none !important;
}
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--2,
.page-search #js-product-list .products.listing-products__grid.listing-grid--2 ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--2{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--1,
.page-search #js-product-list .products.listing-products__grid.listing-grid--1 ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--1{
grid-template-columns: 1fr !important;
gap: 20px;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--1 .listing-product-card__top,
.page-search #js-product-list .products.listing-products__grid.listing-grid--1 .listing-product-card__top ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--1 .listing-product-card__top{
aspect-ratio: 16 / 9;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--list,
.page-search #js-product-list .products.listing-products__grid.listing-grid--list ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--list{
grid-template-columns: 1fr !important;
gap: 16px;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__inner,
.page-search #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__inner ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__inner{
flex-direction: row;
align-items: stretch;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__top,
.page-search #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__top ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__top{
flex: 0 0 220px;
width: 220px;
max-width: 38%;
aspect-ratio: 1 / 1;
border-radius: 14px 0 0 14px;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__bottom,
.page-search #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__bottom ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__bottom{
flex: 1;
justify-content: center;
}
.listing-product-card {
margin: 0;
height: 100%;
}
.listing-product-card__inner {
display: flex;
flex-direction: column;
height: 100%;
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(1, 69, 74, 0.08);
}
.listing-product-card__top {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.listing-product-card__promo-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
width: clamp(52px, 22%, 70px);
pointer-events: none;
}
.listing-product-card__promo-badge img {
display: block;
width: 100%;
height: auto;
}
.listing-product-card__top:has(.listing-product-card__promo-badge) .listing-product-card__region {
top: auto;
bottom: 16px;
left: 16px;
}
.listing-product-card__top:has(.listing-product-card__promo-badge) .listing-product-card__flags .badge.discount {
display: none;
}
.listing-product-card__image-link {
display: block;
width: 100%;
height: 100%;
}
.listing-product-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.listing-product-card__region {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: #ffffff;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 12px;
line-height: 16px;
box-shadow: 0 2px 8px rgba(1, 69, 74, 0.1);
opacity: 90%;
text-decoration: none;
}
a.listing-product-card__region:hover,
a.listing-product-card__region:focus-visible {
color: #01454a;
text-decoration: none;
box-shadow: 0 4px 12px rgba(1, 69, 74, 0.16);
}
.listing-product-card__region-icon {
flex-shrink: 0;
color: #01454a;
}
.listing-product-card__flags {
position: absolute;
top: 16px;
right: 16px;
left: auto;
z-index: 3;
width: auto;
margin: 0;
padding: 0;
list-style: none;
}
.listing-product-card__flags .badge:not(.discount) {
display: none;
}
.listing-product-card__flags .badge.discount {
width: 52px;
height: 52px;
border: 0;
border-radius: 50%;
background: #F07855;
color: #ffffff;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.listing-product-card__wishlist {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
color: #01454a;
box-shadow: 0 2px 10px rgba(1, 69, 74, 0.12);
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease;
opacity: 70%;
}
.listing-product-card__wishlist:hover,
.listing-product-card__wishlist:focus {
color: #F07855;
background: #ffffff;
}
.listing-product-card__bottom {
display: flex;
flex-direction: column;
flex: 1;
gap: 8px;
padding: 20px 20px 18px;
}
.listing-product-card__title {
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Rationalist-Medium', serif;
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0px;
text-decoration: none;
}
.listing-product-card__title:hover {
color: #40807e;
}
.listing-product-card__desc {
margin: 0;
color: #01454A;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 1.4;
margin-bottom: 34px;
font-weight: 400;
width: 60%;
}
.listing-product-card__footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 8px;
}
.listing-product-card__prices {
display: flex;
flex-direction: column;
gap: 2px;
}
.listing-product-card__regular-price {
color: #8aa3a6;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
text-decoration: line-through;
}
.listing-product-card__price {
color: #01454a;
font-family: 'TT-Rationalist-demibold', 'TT-Rationalist-Medium', serif;
font-size: 20px;
font-weight: 600;
line-height: 1.1;
}
.listing-product-card__form {
margin: 0;
flex-shrink: 0;
}
.listing-product-card__cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 10px;
background: #F07855;
color: #ffffff;
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease;
display: none;
}
.listing-product-card__cart-btn:hover,
.listing-product-card__cart-btn:focus {
background: #e06a48;
color: #ffffff;
}
.listing-product-card__cart-btn--link {
line-height: 0;
}
@media (max-width: 991.98px) {
.listing-snackbar {
flex-wrap: wrap;
padding: 12px 16px;
}
.listing-snackbar__views {
display: none;
}
.ruppert-footer__social {
display: flex;
justify-content: center;
}
}
@media (max-width: 575.98px) {
.page-search #products,
.page-category #products {
padding: 20px 24px;
}
.listing-snackbar {
gap: 12px;
}
.listing-snackbar__count {
font-size: 16px;
}
.listing-snackbar__sort-inner {
flex-wrap: wrap;
gap: 6px;
}
.listing-snackbar__sort-btn {
min-width: 120px;
padding: 8px 12px;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--2,
.page-search #js-product-list .products.listing-products__grid.listing-grid--2,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--2,
.page-category #js-product-list .products.listing-products__grid.listing-grid--4,
.page-search #js-product-list .products.listing-products__grid.listing-grid--4,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--4 {
grid-template-columns: 1fr !important;
gap: 16px;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__inner,
.page-search #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__inner ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__inner{
flex-direction: column;
}
.page-category #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__top,
.page-search #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__top ,
.page-manufacturer #js-product-list .products.listing-products__grid.listing-grid--list .listing-product-card__top{
flex: none;
width: 100%;
max-width: none;
border-radius: 14px 14px 0 0;
}
.listing-product-card__title {
font-size: 18px;
}
.listing-product-card__bottom {
padding: 16px;
}
}
/* -------------------------------------------------------------------------- */
/* Product detail page – Figma PDP */
/* -------------------------------------------------------------------------- */
.page-product {
background-color: #fcf6ed;
}
.page-product #wrapper,
.page-product #content-wrapper,
.page-product .center-column {
background-color: #fcf6ed;
}
.page-product .product-page {
max-width: 100%;
margin: 0 auto;
padding: 40px 80px 64px;
}
.page-product .product-page__header {
margin-bottom: 28px;
}
.page-product .breadcrumb__wrapper--product {
margin-bottom: 20px;
}
.page-product .breadcrumb__wrapper--product .breadcrumb {
--bs-breadcrumb-divider: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
gap: 4px 0;
background-color: #FCF6ED;
}
.page-product .breadcrumb__wrapper--product .breadcrumb-item + .breadcrumb-item::before {
content: "" !important;
display: inline-block;
width: 7px;
height: 10px;
padding: 0 !important;
margin: 0 0.5rem;
vertical-align: middle;
background: transparent url('../img/icons/Vector.png') no-repeat center / contain;
}
.page-product .breadcrumb__wrapper--product .breadcrumb-link,
.page-product .breadcrumb__wrapper--product .breadcrumb-current {
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 1.3;
text-decoration: none;
}
.page-product .breadcrumb__wrapper--product .breadcrumb-current {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-weight: 500;
}
.page-product .product-page__back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #6A7282;
font-family: 'TT-Commons-Pro-Regular';
font-size: 14px;
font-weight: 400;
line-height: 100%;
letter-spacing: 0%;
text-decoration: none;
}
.page-product .product-page__back-link:hover,
.page-product .product-page__back-link:focus {
color: #40807e;
}
.page-product .product__container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
.page-product .product__images {
margin-bottom: 0;
}
.page-product .product__carousel {
position: relative;
border-radius: 14px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 20px rgba(1, 69, 74, 0.08);
height: 45vh !important;
}
.page-product .product__carousel .carousel-inner,
.page-product .product__carousel .carousel-item,
.page-product .product__no-image {
background: #ffffff;
height: 75vh !important;
}
.page-product .product__carousel .carousel-item img,
.page-product .product__no-image img {
display: block;
width: 100%;
height: 45vh !important;
aspect-ratio: 1 / 1;
object-fit: contain;
padding: 24px;
}
.page-product .product__carousel .product-flags,
.page-product .product__no-image .product-flags {
top: 14px;
right: 14px;
left: auto;
z-index: 3;
}
.page-product .product__carousel .product__promo-badge,
.page-product .product__no-image .product__promo-badge {
position: absolute;
top: 14px;
right: 14px;
z-index: 4;
width: clamp(52px, 18%, 70px);
pointer-events: none;
}
.page-product .product__carousel .product__promo-badge img,
.page-product .product__no-image .product__promo-badge img {
display: block;
width: 100%;
height: auto;
}
.page-product .product__carousel .product-flags .badge:not(.discount),
.page-product .product__no-image .product-flags .badge:not(.discount) {
display: none;
}
.page-product .product__carousel .product-flags .badge.discount,
.page-product .product__no-image .product-flags .badge.discount {
width: 52px;
height: 52px;
border: 0;
border-radius: 50%;
background: #F07855;
color: #ffffff;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.page-product .product__carousel .carousel-control-prev,
.page-product .product__carousel .carousel-control-next,
.page-product .product__zoom {
display: none;
}
.page-product .product__thumbnails {
margin-top: 16px;
}
.page-product .product__thumbnails-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.page-product .product__thumbnail {
padding: 0;
border: 0;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 2px 10px rgba(1, 69, 74, 0.06);
overflow: hidden;
}
.page-product .product__thumbnail-image {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border: 2px solid transparent;
border-radius: 10px;
outline: none;
}
.page-product .product__thumbnail.active .product__thumbnail-image,
.page-product .product__thumbnail-image.js-thumb-selected {
border-color: #F07855;
}
.page-product .product__name {
margin: 0 0 8px;
color: #01454a;
font-family: 'TT-Rationalist-demibold';
font-size: 24px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.5px;
}
.page-product .product__identifiers {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 10px 0 20px;
/* padding-bottom: 20px; */
/* border-bottom: 1px solid #d5dedc; */
color: #6a8f93;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 1.4;
}
.page-product .product__identifier-separator {
color: #b8c9c7;
}
.page-product .product__description-short {
margin: 0 0 24px;
color: #6a8f93;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.5;
}
.page-product .product__manufacturer {
display: none;
}
.page-product .product__prices {
margin-bottom: 24px;
margin-top : 20px;
}
.page-product .product__price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px 16px;
margin-bottom: 8px;
}
.page-product .product__price {
color: #F07855;
font-family: 'TT-Commons-Pro-Bold';
font-size: 30px;
font-weight: 600;
line-height: 1;
}
.page-product .product__regular-price {
color: #8aa3a6;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 18px;
line-height: 1;
text-decoration: line-through;
}
.page-product .product__tax-infos {
color: #6A7282;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 13px;
line-height: 1.45;
margin-bottom : 23px;
}
#add-to-cart-or-refresh{
border-top : 1px solid #d5dedc;
padding-top : 10px;
}
.page-product .product__quotation {
border-top: none;
padding-top: 0px;
margin-bottom: 25px;
}
#product-additional-info-review-button {
display: none;
}
.page-product .product__quotation .pa-product-btn-wrap {
margin-top: 0;
margin-bottom: 0;
}
.page-product .product__quotation .pa-btn-add {
min-height: 48px;
padding: 8px 16px;
border-radius: 8px;
border: 1.5px solid #0D4D4D !important;
color: #0D4D4D !important;
font-family: 'TT-Rationalist-Medium-italic', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.31px;
}
.page-product .product__quotation .pa-btn-add:hover,
.page-product .product__quotation .pa-btn-add:focus {
background: #0D4D4D !important;
color: #ffffff !important;
}
.page-product .product__quotation .pa-btn-add.pa-added {
background: #0D4D4D !important;
color: #ffffff !important;
}
.page-product .product__actions,
.page-product .product__add-to-cart-container,
.page-product .product__variants,
.page-product .product__prices,
.page-product .product__description-short,
.page-product .product__name,
.page-product .product__identifiers {
margin-bottom: 0;
}
.page-product .product__actions-qty-add {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 12px;
align-items: stretch;
margin-bottom: 25px;
}
.page-product .product__quantity .quantity-button__group {
height: 100%;
min-height: 52px;
border: 1px solid #d5dedc;
border-radius: 10px;
overflow: hidden;
background: #f5f8f9;
}
.page-product .product__quantity .quantity-button__group .btn,
.page-product .product__quantity .quantity-button__group .form-control {
min-height: 52px;
border: 0;
background: transparent;
color: #01454a;
box-shadow: none;
}
.page-product .product__quantity .quantity-button__group .form-control {
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
text-align: center;
}
.page-product .product__add-to-cart-button {
width: 157px;
height: 48px;
padding: 8px 16px;
border: 0;
border-radius: 8px;
background: #0D4D4D;
color: #ffffff;
font-family: 'TT-Rationalist-Medium-italic';
font-size: 16px;
font-weight: 500;
line-height: 100%;
letter-spacing: -0.31px;
box-shadow: none;
}
.page-product .product__add-to-cart-button:hover,
.page-product .product__add-to-cart-button:focus {
background: #0a555a;
color: #ffffff;
}
.page-product .ps-emailalerts__content {
display: none;
}
.page-product .product__info-panel {
border-top: 1px solid #d5dedc;
padding-top: 8px;
margin-top : 0px;
}
.page-product .product__accordion-item {
border: 0;
border-bottom: 1px solid #d5dedc;
background: transparent;
}
.product__accordion-body .details__list{
background-color : #FCF6ED !important;
}
.product__accordion-body .details__title{
color : #0D4D4D !important;
font-family: 'TT-Rationalist-demibold';
font-size: 14px;
font-weight: 500;
line-height: 100%;
}
.product__accordion-body .details__right , .details__right a{
color : #4A5565;
font-family: 'TT-Commons-Pro-Medium';
font-size: 14px;
font-weight: 400;
line-height: 100%;
}
.page-product .product__accordion-item:last-child {
border-bottom: 0;
}
.page-product .product__accordion-button,
.page-product .product__accordion .accordion-button {
padding: 18px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none !important;
color: #01454a;
font-family: 'TT-Rationalist-Medium-italic', 'TT-Rationalist-Medium', serif;
font-size: 20px;
font-style: italic;
font-weight: 500;
line-height: 1.2;
}
.page-product .product__accordion-button:not(.collapsed),
.page-product .product__accordion .accordion-button:not(.collapsed) {
background: transparent;
color: #01454a;
}
.page-product .product__accordion-button::after,
.page-product .product__accordion .accordion-button::after {
width: 12px;
height: 12px;
background-size: 12px;
filter: none;
}
.page-product .product__accordion-body {
padding: 0 0 24px;
}
.page-product .product__description {
color: #4A5565;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.65;
}
.page-product .product__description h2,
.page-product .product__description h3,
.page-product .product__description h4 {
margin: 0 0 12px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
}
.page-product .product__description p {
margin: 0 0 14px;
}
/* CMS wraps all description body in one outer - – hide that wrapper bullet */
.page-product .product__description.rich-text > ul:has(> li:only-child),
.page-product .product__description.rich-text > ol:has(> li:only-child) {
padding-left: 0;
margin-left: 0;
list-style: none;
}
.page-product .product__description.rich-text > ul > li:only-child,
.page-product .product__description.rich-text > ol > li:only-child {
list-style: none;
padding-left: 0;
}
.page-product .product__description.rich-text > ul > li:only-child::marker,
.page-product .product__description.rich-text > ol > li:only-child::marker {
display: none;
content: none;
}
/* Real nested lists inside the wrapper keep their bullets */
.page-product .product__description.rich-text > ul ul,
.page-product .product__description.rich-text > ol ul {
list-style: disc;
padding-left: 1.2rem;
margin: 0 0 14px;
}
.page-product .product__description.rich-text > ul ol,
.page-product .product__description.rich-text > ol ol {
list-style: decimal;
padding-left: 1.2rem;
margin: 0 0 14px;
}
.page-product .product__category-meta {
margin: 18px 0 0;
color: #6A7282;
font-family: 'TT-Commons-Pro-Bold', sans-serif;
font-size: 14px;
line-height: 16px;
font-weight: 700;
}
.page-product .product__category-meta a {
color: #6A7282;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 16px;
font-weight: 400;
letter-spacing: 0px;
text-decoration: none;
}
.page-product .product__category-meta a:hover {
color: #40807e;
}
.page-product .product__bottom {
display: none;
}
@media (max-width: 991.98px) {
.page-product .product-page {
padding: 20px 24px 48px;
}
.page-product .product__container {
grid-template-columns: 1fr;
gap: 28px;
}
.carousel-inner{
height: auto !important;
}
.page-product .product__quantity{
width : 40% !important;
}
}
@media (max-width: 575.98px) {
.page-product .product-page {
padding: 24px 24px 40px;
}
.page-product .product__actions-qty-add {
grid-template-columns: 1fr;
}
.page-product .product__thumbnails-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
}
/* overview css */
.quickview__header , .quickview__footer {
background-color : #FCF6ED;
}
.quickview__body .carousel-inner {
height:55vh !important;
}
.quickview__details-link{
color : #01454A !important;
}
.product-miniature__quickview-button {
color : #01454A !important;
}
/* Category description card – Figma (between product listing and newsletter) */
.page-category .listing-category-desc {
background-color: #fcf6ed;
padding: 0 80px 80px;
}
.page-category .listing-category-desc__inner {
position: relative;
max-width: 100%;
min-height: 380px;
margin: 0 auto;
padding: 64px 80px;
border-radius: 18px;
background-color: #01454a;
color: #ffffff;
overflow: hidden;
background-image: url('../img/desc-category.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: overlay;
}
.page-category .listing-category-desc__pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.35;
background:
radial-gradient(120% 80% at 110% 20%, rgba(190, 216, 213, 0.45) 0%, rgba(190, 216, 213, 0) 58%),
radial-gradient(90% 70% at -10% 80%, rgba(190, 216, 213, 0.35) 0%, rgba(190, 216, 213, 0) 55%),
repeating-radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 48px);
}
.page-category .listing-category-desc__content {
position: relative;
z-index: 1;
max-width: 70%;
}
.page-category .listing-category-desc__content > :first-child {
margin-top: 0;
}
.page-category .listing-category-desc__content h1,
.page-category .listing-category-desc__content h2,
.page-category .listing-category-desc__content h3,
.page-category .listing-category-desc__content h4 {
margin: 0 0 24px;
color: #ffffff;
font-family: 'TT-Commons-Pro-Medium';
font-size: 30px;
font-weight: 500;
line-height: 36px;
letter-spacing: 0px;
}
.page-category .listing-category-desc__content p {
margin: 0 0 18px;
color: #ffffff;
font-family: 'TT-Commons-Pro-Regular';
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
font-weight: 400;
}
.page-category .listing-category-desc__content span {
margin: 0 0 18px;
color: #ffffff;
font-family: 'TT-Commons-Pro-Bold';
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
font-weight: 700;
}
.page-category .listing-category-desc__content p:last-child {
margin-bottom: 0;
}
.page-category .listing-category-desc__content strong,
.page-category .listing-category-desc__content b {
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-weight: 600;
}
.page-category .listing-category-desc__content a,
.page-category .listing-category-desc__content .listing-category-desc__cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 24px;
padding: 12px 24px;
border: 0;
border-radius: 8px;
background-color: #ffffff;
color: #01454a;
font-family: 'TT-Rationalist-Medium-italic';
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.31px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.page-category .listing-category-desc__content a:hover,
.page-category .listing-category-desc__content a:focus,
.page-category .listing-category-desc__content .listing-category-desc__cta:hover,
.page-category .listing-category-desc__content .listing-category-desc__cta:focus {
background-color: #f0f6f5;
color: #01454a;
}
.page-category .listing-category-desc__content ul,
.page-category .listing-category-desc__content ol {
margin: 0 0 18px;
padding-left: 1.25rem;
color: #ffffff;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
line-height: 1.65;
}
@media (max-width: 991.98px) {
.page-category .listing-category-desc {
padding: 0 24px 40px;
}
.page-category .listing-category-desc__inner {
min-height: 0;
padding: 40px 32px;
}
}
@media (max-width: 575.98px) {
.page-category .listing-category-desc {
padding: 0 16px 32px;
}
.page-category .listing-category-desc__inner {
padding: 32px 24px;
border-radius: 14px;
}
.page-category .listing-category-desc__content h1,
.page-category .listing-category-desc__content h2,
.page-category .listing-category-desc__content h3,
.page-category .listing-category-desc__content h4 {
margin-bottom: 18px;
font-size: 24px;
}
.page-category .listing-category-desc__content p,
.page-category .listing-category-desc__content ul,
.page-category .listing-category-desc__content ol {
font-size: 15px;
}
.page-category .listing-category-desc__content a,
.page-category .listing-category-desc__content .listing-category-desc__cta {
margin-top: 22px;
padding: 12px 22px;
font-size: 16px;
}
}
/* ============================================================ */
/* Hausmarken mega-menu – Figma layout */
/* Figma ref: small tile 207×142px, feature tile = 2 rows + gap */
/* ============================================================ */
@media (min-width: 992px) {
#header .header-nav.ruppert-mm .menu-dropdown {
--hauserman-gap: 25px;
--hauserman-tile-h: 142px;
--hauserman-feature-h: calc(var(--hauserman-tile-h) * 2 + var(--hauserman-gap));
--hauserman-card-radius: 10px;
--hauserman-card-pad: 20px;
--hauserman-feature-pad: 24px;
}
/* ── shared card style for ALL logo tiles ─────────────────── */
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .col-sm-4 .html-block,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .col-sm-2 .html-block,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .tv-menu-col .html-block,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 .tv-menu-col .html-block,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 [class*="col-"] .html-block {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #ffffff;
border-radius: var(--hauserman-card-radius);
padding: var(--hauserman-card-pad) !important;
box-sizing: border-box;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-4 .html-block {
padding: var(--hauserman-feature-pad) !important;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .col-sm-4 .html-block p,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .col-sm-2 .html-block p,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .tv-menu-col .html-block p,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 .tv-menu-col .html-block p,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 [class*="col-"] .html-block p {
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .col-sm-4 .html-block img,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .col-sm-2 .html-block img,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section .tv-menu-col .html-block img,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 .tv-menu-col .html-block img,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 [class*="col-"] .html-block img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
position: static !important;
inset: auto !important;
transform: none !important;
}
/* ── Row 1 & 2: shared 5-column grid (keeps columns vertically aligned) ── */
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: var(--hauserman-gap) !important;
row-gap: var(--hauserman-gap) !important;
column-gap: var(--hauserman-gap) !important;
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: var(--hauserman-gap) !important;
padding-left: 156px !important;
padding-right: 156px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ── Row 1: hauserman-section ─────────────────────────────── */
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section {
padding-top: 21px !important;
grid-template-rows: var(--hauserman-feature-h) !important;
align-items: stretch !important;
}
/* Weihenstephan: big left column (col-sm-4) — spans 2 grid columns */
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-4 {
grid-column: 1 / span 2 !important;
flex: unset !important;
max-width: none !important;
width: auto !important;
padding: 0 !important;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-4 .ul-column {
height: 100% !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-4 .ul-column > li {
flex: 1 1 auto;
display: flex;
min-height: 0;
height: 100%;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-4 .html-block {
min-height: var(--hauserman-feature-h) !important;
height: var(--hauserman-feature-h) !important;
}
/* Right 3 columns (col-sm-2): each equals one grid column */
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-2 {
grid-column: span 1 !important;
flex: unset !important;
max-width: none !important;
width: auto !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: var(--hauserman-gap) !important;
row-gap: var(--hauserman-gap) !important;
column-gap: var(--hauserman-gap) !important;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-2 .ul-column {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
height: 100%;
display: flex;
flex-direction: column;
gap: var(--hauserman-gap);
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-2 .ul-column > li {
flex: 0 0 var(--hauserman-tile-h);
min-height: var(--hauserman-tile-h) !important;
max-height: var(--hauserman-tile-h) !important;
height: var(--hauserman-tile-h) !important;
display: flex;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section > .col-sm-2 .ul-column > li .html-block {
min-height: var(--hauserman-tile-h) !important;
height: var(--hauserman-tile-h) !important;
}
/* ── Row 2 & 3: hauserman-row2 ───────────────────────────── */
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 {
grid-template-rows: var(--hauserman-tile-h) !important;
align-items: stretch !important;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 > .tv-menu-col,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 > [class*="col-"] {
grid-column: span 1 !important;
flex: unset !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 !important;
display: flex;
flex-direction: column;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 > .tv-menu-col .ul-column {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
height: 100%;
display: flex;
flex-direction: column;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 > .tv-menu-col .ul-column > li {
flex: 1 1 auto;
min-height: var(--hauserman-tile-h) !important;
max-height: var(--hauserman-tile-h) !important;
height: var(--hauserman-tile-h) !important;
display: flex;
}
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 > .tv-menu-col .ul-column > li .html-block {
min-height: var(--hauserman-tile-h) !important;
height: var(--hauserman-tile-h) !important;
}
/* last hauserman-row2 (row 3) – 2 tiles, same column width as row 2 */
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2.ruppert-mm-card-strip > .tv-menu-col,
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2.ruppert-mm-card-strip > [class*="col-"] {
grid-column: span 1 !important;
flex: unset !important;
max-width: none !important;
width: auto !important;
}
/* Hausmarken logo cards – BO “Link” field (HTML block, empty title) */
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-section li.menu-item:has(.ruppert-mm-html-block-link),
#header .header-nav.ruppert-mm
.menu-dropdown .hauserman-row2 li.menu-item:has(.ruppert-mm-html-block-link) {
padding: 0 !important;
}
#header .header-nav.ruppert-mm .ruppert-mm-html-block-link {
display: flex;
align-items: stretch;
width: 100%;
height: 100%;
min-height: inherit;
text-decoration: none;
color: inherit;
cursor: pointer;
border-radius: inherit;
}
#header .header-nav.ruppert-mm .ruppert-mm-html-block-link .html-block {
width: 100%;
height: 100%;
pointer-events: none;
}
#header .header-nav.ruppert-mm .ruppert-mm-html-block-link:hover,
#header .header-nav.ruppert-mm .ruppert-mm-html-block-link:focus,
#header .header-nav.ruppert-mm .ruppert-mm-html-block-link:focus-visible {
outline: none;
box-shadow: none;
}
}
/* FINAL mobile/tablet fit override for Hausmarken logos */
@media (max-width: 991.98px) {
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img),
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img) {
overflow: hidden !important;
background: #fff !important;
border-radius: 10px !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img) .html-block,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img) .html-block {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
padding: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img) .html-block p,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img) .html-block p {
width: 70% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section li.menu-item:has(.html-block img) img,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 li.menu-item:has(.html-block img) img {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
border-radius: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section .ruppert-mm-html-block-link,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 .ruppert-mm-html-block-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
color: inherit !important;
cursor: pointer !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-section .ruppert-mm-html-block-link .html-block,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.hauserman-row2 .ruppert-mm-html-block-link .html-block {
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
}
}
/* -------------------------------------------------------------------------- */
/* Brands index (/marken/) – Figma row list + category filters */
/* -------------------------------------------------------------------------- */
.page-brands-index #center-column,
.page-brands-index .page--full-width {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.page-brands-index #brands-index .breadcrumb__wrapper--listing {
position: sticky;
top: var(--header-height, calc(var(--scroll-padding-top, 0px) - 16px));
z-index: 1010;
background-color: #fcf6ed;
padding: 12px 0 24px;
}
.page-brands-index #brands-index .breadcrumb__wrapper--listing.is-past-listing {
position: relative;
top: auto;
z-index: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.brands-index {
background-color: #fcf6ed;
padding: 0 24px 80px;
}
.brands-index__header {
margin-bottom: 24px;
}
.brands-index__title {
margin: 0;
color: #01454a;
font-family: 'TT-Rationalist-Demibold';
font-size: 30px;
font-weight: 600;
line-height: 36px;
letter-spacing: -0.75px;
}
.brands-index__intro {
margin: 16px 0 0;
max-width: 720px;
color: #5f7d7a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
line-height: 24px;
padding-top: 50px;
}
.brands-index-snackbar {
margin-bottom: 24px;
}
.brands-index-snackbar .listing-snackbar__views {
display: none;
}
.brands-index__list {
margin: 0;
padding: 0;
list-style: none;
background-color: unset !important;
border-radius: 8px;
box-shadow: none !important;
overflow: hidden;
}
.brands-index__item {
border-bottom: 1px solid #b9d3cf;
}
.brands-index__item:last-child {
border-bottom: 0;
}
.brands-index__item.is-hidden {
display: none;
}
.brands-index__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 12px 13px;
color: inherit;
text-decoration: none;
transition: background-color 0.2s ease;
}
.brands-index__link:hover,
.brands-index__link:focus {
background-color: unset !important;
color: inherit;
}
.brands-index__name {
color: #01454a;
font-family: 'TT-Rationalist-Demibold';
font-size: 20px !important;
font-weight: 600;
line-height: 100%;
letter-spacing: 0;
}
.brands-index__count {
flex-shrink: 0;
color: #01454A;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
white-space: nowrap;
}
.brands-index__empty {
margin: 24px 0 0;
color: #5f7d7a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.45;
}
@media (max-width: 1199.98px) {
.page-brands-index #brands-index,
.brands-index {
padding-left: 40px;
padding-right: 40px;
}
}
@media (max-width: 767.98px) {
.page-brands-index #brands-index .breadcrumb__wrapper--listing {
padding: 12px 0 16px;
}
.brands-index {
padding: 0 20px 48px;
}
.brands-index__title {
font-size: 2.25rem;
}
.brands-index__link {
padding: 18px 16px;
}
.brands-index__name {
font-size: 1.25rem;
}
}
/* ==========================================================================
Cart page – Figma Warenkorb (exact)
========================================================================== */
#cart #wrapper,
#cart .columns-container,
#cart #content-wrapper,
.page-cart #wrapper,
.page-cart .columns-container,
.page-cart #content-wrapper,
.ruppert-cart {
background: #FCF6ED !important;
}
.ruppert-cart .breadcrumb__wrapper--cart {
background: transparent;
padding: 0 0 16px;
margin: 0 0 8px;
}
#cart .center-column,
.page-cart .center-column {
padding-top: 0;
padding-bottom: 56px;
}
.ruppert-cart {
max-width: 80% !important;
margin: 0 auto;
padding: 20px 24px;
}
.ruppert-cart__continue,
.ruppert-cart .blockreassurance,
.ruppert-cart #block-reassurance,
.ruppert-cart .cart-voucher {
display: none !important;
}
/* Single white panel for all cart lines (Figma) */
.ruppert-cart__products-panel {
background: #ffffff;
border: 1px solid rgba(1, 69, 74, 0.08);
border-radius: 16px;
overflow: hidden;
}
.ruppert-cart__list {
display: flex;
flex-direction: column;
gap: 0;
}
.ruppert-cart__list-item:last-child .ruppert-cart-item {
border-bottom: none;
}
.ruppert-cart .product-line.ruppert-cart-item {
display: flex;
align-items: flex-start;
gap: 20px;
margin: 0;
padding: 24px;
border: 0;
border-bottom: 1px solid #e8eceb;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.ruppert-cart-item__media {
flex: 0 0 72px;
}
.ruppert-cart-item__img,
.ruppert-cart .product-line__img {
width: 72px !important;
height: 72px !important;
object-fit: contain;
border-radius: 10px;
background: #f8faf9;
}
.ruppert-cart-item__body,
.ruppert-cart .product-line__content {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
margin: 0 !important;
}
.ruppert-cart-item__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.ruppert-cart-item__details,
.ruppert-cart .product-line__content-left {
flex: 1 1 auto;
min-width: 0;
margin: 0 !important;
gap: 6px !important;
}
.ruppert-cart-item__title,
.ruppert-cart .product-line__title.ruppert-cart-item__title {
display: block;
margin: 0 0 6px;
color: #01454a !important;
font-family: 'TT-Rationalist-Demibold' !important;
font-size: 18px;
font-weight: 600;
line-height: 27px;
letter-spacing: 0px;
text-decoration: none;
}
.ruppert-cart-item__title:hover,
.ruppert-cart-item__title:focus {
color: #02393d !important;
}
.ruppert-cart-item__meta,
.ruppert-cart-item__deposit,
.ruppert-cart-item__unit-price {
margin: 0;
color: #40807E;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}
.ruppert-cart-item__attribute,
.ruppert-cart-item__availability,
.ruppert-cart-item__extra-prices,
.ruppert-cart-item__discounts {
font-size: 13px;
color: #6A7282;
}
.ruppert-cart-item__line-total,
.ruppert-cart .product-line__price {
flex: 0 0 auto;
margin: 0;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0px;
white-space: nowrap;
}
.ruppert-cart-item__foot,
.ruppert-cart .product-line__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 !important;
padding: 0;
}
.ruppert-cart-item__quantity,
.ruppert-cart .product-line__quantity-button {
margin: 0 !important;
}
.ruppert-cart-item__quantity .quantity-button__group {
width: 112px;
min-height: 40px;
border: 1px solid #BED8D5;
border-radius: 8px;
overflow: hidden;
background: #F9FAFB;
}
.ruppert-cart-item__quantity .quantity-button__group .btn,
.ruppert-cart-item__quantity .quantity-button__group .form-control {
min-height: 40px;
padding-top: 0;
padding-bottom: 0;
border: 0;
background: transparent;
color: #01454a;
box-shadow: none;
}
.ruppert-cart-item__quantity .quantity-button__group .btn {
width: 30px;
min-width: 30px;
font-size: 18px;
}
.ruppert-cart-item__quantity .quantity-button__group .form-control {
width: 40px;
min-width: 40px;
padding: 0;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #01454A;
}
.ruppert-cart-item__remove {
display: inline-flex;
align-items: center;
gap: 8px;
color: #F07855 !important;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.31px;
text-decoration: none !important;
flex-shrink: 0;
}
.ruppert-cart-item__remove:hover,
.ruppert-cart-item__remove:focus {
color: #d96545 !important;
}
.ruppert-cart-item__remove-label {
display: inline;
}
.ruppert-cart-item__remove-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
/* Summary sidebar */
.ruppert-cart__summary,
.ruppert-cart .cart-grid__aside-wrapper {
padding: 24px 24px 20px;
box-shadow: none;
}
.cart-grid{
gap: 40px;
}
@media (min-width: 992px) {
.ruppert-cart .cart-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
gap: 40px;
align-items: start;
}
.ruppert-cart .cart-grid__content,
.ruppert-cart .cart-grid__aside {
width: auto !important;
max-width: none !important;
flex: unset !important;
margin-block-end: 0 !important;
padding: 0;
}
.ruppert-cart .cart-grid__aside-wrapper {
margin-top: 0;
padding-top: 0;
border-top: 0;
background: transparent;
}
.ruppert-cart__mobile-footer {
display: none;
}
}
@media (min-width: 992px) {
.ruppert-cart .cart-grid__aside-wrapper {
position: sticky;
top: calc(var(--scroll-padding-top, 80px) + 16px);
}
}
.ruppert-cart__summary-title {
margin: 0 0 18px;
padding-bottom: 0;
color: #01454a;
font-family: 'TT-Rationalist-Demibold' !important;
font-size: 18px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0px;
}
.ruppert-cart .cart-summary {
margin: 0;
}
.ruppert-cart .cart-summary__subtotals,
.ruppert-cart .cart-summary__totals {
margin: 0;
}
.ruppert-cart .cart-summary__subtotals .cart-summary__line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: 16px 0 16px;
border-bottom: 1px solid #e8eceb;
color: #4A5565;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.4;
}
.ruppert-cart .cart-summary__subtotals .cart-summary__line:last-child {
margin-bottom: 0;
}
.ruppert-cart .cart-summary__label {
color: #01454A;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.15px;
}
.ruppert-cart .cart-summary__value {
color: #01454A;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.15px;
text-align: right;
}
.ruppert-cart .cart-summary__value-inner {
display: block;
margin-top: 2px;
color: #6A7282;
font-size: 12px;
}
.ruppert-cart .cart-summary__total {
margin: 0px 0 0;
padding: 0px 0 0;
border-top: 1px solid #e8eceb;
}
.ruppert-cart .cart-summary__line--grand-total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: 16px 0 16px;
border: 0;
}
.ruppert-cart .cart-summary__line--grand-total .cart-summary__label,
.ruppert-cart .cart-summary__line--grand-total .cart-summary__value {
color: #01454a;
font-family: 'TT-Commons-Pro-Bold', sans-serif;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.31px;
font-weight: 700;
}
.ruppert-cart .cart-summary__actions {
margin-top: 20px;
padding-top: 0;
}
.ruppert-cart__checkout-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 0 24px !important;
border: 0 !important;
border-radius: 6px !important;
background: #01454a !important;
color: #fff !important;
font-family: 'TT-Rationalist-Medium-italic', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.31px;
box-shadow: none !important;
text-decoration: none !important;
}
.ruppert-cart__checkout-btn:hover,
.ruppert-cart__checkout-btn:focus {
background: #02393d !important;
color: #fff !important;
}
.ruppert-cart__checkout-icon {
display: inline-flex;
align-items: center;
margin-top: 1px;
}
.ruppert-cart__summary-note {
margin: 14px 0 0;
color: #98a8a6;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 13px;
line-height: 1.45;
text-align: center;
display: none;
}
.ruppert-cart__empty {
padding: 40px 24px;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(1, 69, 74, 0.08);
color: #6A7282;
text-align: center;
}
@media (max-width: 991.98px) {
.ruppert-cart__summary {
margin-top: 8px;
}
}
/* Mobile cart page – Figma Warenkorb */
@media (max-width: 991.98px) {
.ruppert-cart {
max-width: 100% !important;
padding: 16px 16px 32px;
}
#cart .center-column,
.page-cart .center-column {
padding-bottom: 32px;
}
.ruppert-cart .cart-grid {
gap: 0;
padding : 10px 15px;
}
.ruppert-cart .cart-grid__content,
.ruppert-cart .cart-grid__aside {
padding: 0;
}
.ruppert-cart .breadcrumb__wrapper--cart {
padding-bottom: 12px;
margin-bottom: 0;
}
/* Free shipping banner */
.ruppert-cart__shipping-banner {
margin-bottom: 12px;
border-radius: 8px;
overflow: hidden;
background: #01454a;
}
.ruppert-cart__shipping-banner-inner {
display: none;
align-items: center;
gap: 8px;
padding: 10px 14px 8px;
}
.ruppert-cart__shipping-banner-icon {
display: inline-flex;
color: #fff;
flex-shrink: 0;
}
.ruppert-cart__shipping-banner-text {
color: #F07855;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.3;
}
.ruppert-cart__shipping-progress {
height: 4px;
background: rgba(240, 120, 85, 0.35);
display: none;
}
.ruppert-cart__shipping-progress-bar {
display: none;
height: 100%;
background: #F07855;
border-radius: 0 2px 2px 0;
}
/* Separate item cards */
.ruppert-cart__products-panel {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.ruppert-cart__list {
gap: 12px;
}
.ruppert-cart .product-line.ruppert-cart-item {
flex-direction: row;
align-items: flex-start;
gap: 16px;
margin: 0;
padding: 12px;
border: 1px solid rgba(1, 69, 74, 0.08) !important;
border-radius: 12px;
background: #fff;
box-shadow: none;
}
.ruppert-cart__list-item:last-child .ruppert-cart-item {
border-bottom: 1px solid rgba(1, 69, 74, 0.08) !important;
}
.ruppert-cart-item__media {
flex: 0 0 64px;
}
.ruppert-cart-item__img,
.ruppert-cart .product-line__img {
width: 64px !important;
height: 64px !important;
border-radius: 8px;
}
.ruppert-cart-item__body,
.ruppert-cart .product-line__content {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
column-gap: 12px;
row-gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.ruppert-cart-item__head {
display: contents;
}
.ruppert-cart-item__foot {
display: contents;
}
.ruppert-cart-item__details {
display: contents;
}
.ruppert-cart-item__title,
.ruppert-cart .product-line__title.ruppert-cart-item__title {
grid-column: 1;
grid-row: 1;
align-self: center;
min-width: 0;
font-size: 15px;
line-height: 1.35;
margin-bottom: 0;
font-family: 'TT-Rationalist-Medium' !important;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0px;
}
.ruppert-cart-item__extras {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ruppert-cart-item__meta {
display: none;
}
.ruppert-cart-item__deposit {
font-size: 12px;
color: #6A7282;
}
.ruppert-cart-item__line-total,
.ruppert-cart .product-line__price {
grid-column: 2;
grid-row: 1;
align-self: center;
font-size: 16px;
font-weight: 700;
line-height: 24px;
white-space: nowrap;
font-family: 'TT-Commons-Pro-Bold', sans-serif;
letter-spacing: -0.31px;
}
.ruppert-cart-item__quantity,
.ruppert-cart .product-line__quantity-button {
grid-column: 1;
grid-row: 3;
align-self: center;
justify-self: start;
}
.ruppert-cart-item__quantity .quantity-button__group {
width: 100px;
min-height: 36px;
border-radius: 8px;
border-color: #d5e5e3;
background: #fff;
}
.ruppert-cart-item__quantity .quantity-button__group .btn,
.ruppert-cart-item__quantity .quantity-button__group .form-control {
min-height: 36px;
}
.ruppert-cart-item__remove {
position: static;
grid-column: 2;
grid-row: 3;
align-self: center;
justify-self: end;
color: #98a8a6 !important;
padding: 4px;
min-height: 36px;
}
.ruppert-cart-item__remove:hover,
.ruppert-cart-item__remove:focus {
color: #6A7282 !important;
}
.ruppert-cart-item__remove-label {
display: none;
}
.ruppert-cart-item__remove-icon svg {
width: 16px;
height: 16px;
}
/* Order summary */
.ruppert-cart__summary,
.ruppert-cart .cart-grid__aside-wrapper {
margin-top: 20px;
padding: 20px 0 0;
border-top: 1px solid rgba(1, 69, 74, 0.1);
background: transparent;
}
.ruppert-cart__summary-title {
margin-bottom: 12px;
font-size: 16px;
line-height: 1.4;
}
.ruppert-cart .cart-summary__subtotals .cart-summary__line {
padding: 12px 0;
font-size: 14px;
}
.ruppert-cart .cart-summary__line--grand-total {
padding: 14px 0 12px;
}
.ruppert-cart .cart-summary__line--grand-total .cart-summary__label,
.ruppert-cart .cart-summary__line--grand-total .cart-summary__value {
font-size: 18px;
line-height: 28px;
font-family: 'TT-Commons-Pro-Bold', sans-serif;
letter-spacing: -0.44px;
font-weight: 700;
color: #01454a !important;
}
.ruppert-cart__checkout-btn {
min-height: 48px;
border-radius: 8px !important;
font-size: 18px;
font-family: 'TT-Rationalist-Medium-italic' !important;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.31px;
font-style: italic;
gap: 30px;
}
.ruppert-cart .cart-summary__label {
color: #7DB2A8 !important;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.15px;
}
.ruppert-cart .cart-summary__value {
color: #7DB2A8 !important;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.15px;
}
.ruppert-cart__checkout-icon {
width: 20px;
height: 20px;
}
.ruppert-cart__summary-note {
margin-top: 12px;
font-size: 11px;
line-height: 1.45;
color: #98a8a6;
text-align: left;
}
.ruppert-cart__mobile-footer {
margin-top: 0px;
padding-top: 8px;
text-align: center;
}
.ruppert-cart__continue-link {
color: #40807e;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
.ruppert-cart__continue-link:hover,
.ruppert-cart__continue-link:focus {
color: #01454a;
text-decoration: underline;
}
}
/* ==========================================================================
Sign-in page – Figma (header + form + newsletter + footer)
========================================================================== */
/* No category megamenu on login */
.page-authentication #header .header-nav.ruppert-mm,
.page-authentication #header .ruppert-mm-mobile-bar {
display: none !important;
}
.page-authentication #header .tv-sub-menu.menu-dropdown {
display: none !important;
pointer-events: none !important;
}
.page-authentication #wrapper {
position: relative;
z-index: 2;
}
.page-authentication #main-content.ruppert-login-page {
position: relative;
z-index: 10;
isolation: isolate;
}
.page-authentication .ruppert-login-page__form-area {
position: relative;
z-index: 20;
background: #ffffff;
}
.page-authentication .ruppert-login__card {
position: relative;
z-index: 21;
}
.page-authentication #login-form,
.page-authentication #login-form input,
.page-authentication #login-form .form-control,
.page-authentication #login-form .password-field,
.page-authentication #login-form .password-field input {
position: relative;
z-index: 30;
pointer-events: auto !important;
touch-action: manipulation;
user-select: text !important;
-webkit-user-select: text !important;
}
.page-authentication #login-form .password-field .btn {
pointer-events: auto !important;
z-index: 31;
}
.page-authentication .ruppert-login-page__newsletter {
position: relative;
z-index: 1;
pointer-events: none;
}
.page-authentication .ruppert-login-page__newsletter .newsletter-btn {
pointer-events: auto;
}
.page-authentication .promo-newsletter-section--banner-only,
.page-authentication .promo-newsletter-section--banner-only .newsletter-bottom-row {
pointer-events: none;
}
.page-authentication .promo-newsletter-section--banner-only .promo-circle {
pointer-events: none;
top: -48px;
}
.page-authentication #wrapper,
.page-authentication .columns-container,
.page-authentication #content-wrapper,
.page-authentication .center-column {
background: #ffffff !important;
}
.page-authentication .ruppert-auth-container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.page-authentication .center-column {
padding-top: 0;
padding-bottom: 0;
}
.ruppert-login-page__form-area {
padding: 48px 16px 0;
}
.ruppert-login-page__newsletter {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 48px;
}
.page-authentication .promo-newsletter-section--banner-only .newsletter-bottom-row {
padding-top: 88px;
}
.page-authentication .promo-newsletter-section--banner-only .newsletter-btn {
border: 1px solid #fcf6ed;
background-color: #00454a;
}
.page-authentication .promo-newsletter-section--banner-only .newsletter-btn:hover,
.page-authentication .promo-newsletter-section--banner-only .newsletter-btn:focus {
background-color: #013a3e;
border-color: #ffffff;
color: #fcf6ed;
}
.page-authentication .page-content--general {
padding: 0;
}
.page-authentication .page-header {
display: none;
}
.ruppert-login {
display: flex;
justify-content: center;
width: 100%;
}
.ruppert-login__card {
width: 100%;
max-width: 560px;
margin: 0 auto;
padding: 40px 48px;
border: 1px solid rgba(1, 69, 74, 0.08);
border-radius: 16px;
background: #ffffff;
box-shadow: 0 8px 32px rgba(1, 69, 74, 0.06);
}
.ruppert-login__title {
margin: 0 0 28px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium';
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0;
}
.ruppert-login__form-wrapper {
margin: 0;
}
.ruppert-login__form .mb-3 {
margin-bottom: 20px !important;
}
.ruppert-login__form .form-label {
margin-bottom: 8px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.15px;
}
.ruppert-login__form .form-label.required::after {
color: #01454a;
}
.ruppert-login__form .form-control,
.ruppert-login__form .password-field .form-control {
min-height: 48px;
padding: 12px 16px;
border: 1px solid #d5e5e3;
border-radius: 8px;
background: #ffffff;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.4;
box-shadow: none;
}
.ruppert-login__form .form-control::placeholder {
color: #98a8a6;
opacity: 1;
}
.ruppert-login__form .form-control:focus,
.ruppert-login__form .password-field .form-control:focus {
border-color: #40807e;
box-shadow: 0 0 0 3px rgba(64, 128, 126, 0.15);
}
.ruppert-login__form .password-field {
border: 1px solid #d5e5e3;
border-radius: 8px;
overflow: hidden;
background: #ffffff;
}
.ruppert-login__form .password-field .form-control {
border: 0;
border-radius: 0;
box-shadow: none !important;
}
.ruppert-login__form .password-field .form-control:focus {
box-shadow: none !important;
}
.ruppert-login__form .password-field .btn {
min-height: 48px;
padding: 0 14px;
border: 0;
border-left: 1px solid #d5e5e3;
border-radius: 0;
background: #ffffff !important;
color: #40807e !important;
box-shadow: none !important;
}
.ruppert-login__form .password-field .btn:hover,
.ruppert-login__form .password-field .btn:focus {
background: #f8faf9 !important;
color: #01454a !important;
}
.ruppert-login__form .password-field .material-icons {
font-size: 20px;
}
.ruppert-login__actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 28px;
}
.ruppert-login__actions .btn {
width: auto;
}
.ruppert-login__forgot {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #01454a !important;
font-family: 'TT-Commons-Pro-DemiBold-Italic', sans-serif;
font-size: 14px;
font-style: italic;
font-weight: 600;
line-height: 20px;
letter-spacing: -0.15px;
text-decoration: none !important;
box-shadow: none !important;
}
.ruppert-login__forgot:hover,
.ruppert-login__forgot:focus {
color: #02393d !important;
text-decoration: underline !important;
}
.ruppert-login__submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 28px !important;
border: 0 !important;
border-radius: 8px !important;
background: #01454a !important;
color: #ffffff !important;
font-family: 'TT-Rationalist-Medium',serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.31px;
box-shadow: none !important;
}
.ruppert-login__submit:hover,
.ruppert-login__submit:focus {
background: #02393d !important;
color: #ffffff !important;
}
.ruppert-login__form .form-text {
color: #98a8a6;
font-size: 12px;
}
.ruppert-login__form .has-error .form-control,
.ruppert-login__form .has-error .password-field {
border-color: #e74c3c;
}
@media (max-width: 767.98px) {
.ruppert-login-page__form-area {
padding-top: 24px;
}
.ruppert-login-page__newsletter {
margin-top: 32px;
}
.page-authentication .promo-newsletter-section--banner-only .newsletter-bottom-row {
padding-top: clamp(2.25rem, 5vw, 3.5rem);
}
.ruppert-login__card {
max-width: 100%;
padding: 28px 24px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(1, 69, 74, 0.05);
}
.ruppert-login__title {
margin-bottom: 24px;
font-size: 24px;
}
.ruppert-login__actions {
flex-wrap: wrap;
margin-top: 24px;
}
.ruppert-login__forgot {
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
.ruppert-login__submit {
flex: 0 0 auto;
min-width: 120px;
}
}
/* ==========================================================================
Checkout – Figma (address step + order summary)
========================================================================== */
#checkout #wrapper,
#checkout .columns-container,
#checkout #content-wrapper,
.page-checkout #wrapper,
.page-checkout .columns-container,
.page-checkout #content-wrapper,
.ruppert-checkout {
background: #FCF6ED !important;
}
.ruppert-checkout {
max-width: 80%;
margin: 0 auto;
padding: 20px 24px 56px;
}
.ruppert-checkout .breadcrumb__wrapper--cart {
background: transparent;
padding: 0 0 16px;
margin: 0 0 8px;
}
.ruppert-checkout__container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.ruppert-checkout .center-column {
padding-top: 0;
padding-bottom: 0;
}
.ruppert-checkout .checkout-grid {
gap: 40px;
align-items: flex-start;
}
@media (min-width: 992px) {
.ruppert-checkout .checkout-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
gap: 40px;
align-items: start;
}
.ruppert-checkout .checkout-grid__content,
.ruppert-checkout .checkout-grid__aside {
width: auto !important;
max-width: none !important;
flex: unset !important;
margin-block-end: 0 !important;
}
}
/* Shipping + payment + review steps: no order summary sidebar */
.ruppert-checkout:has(#checkout-delivery-step.step--current) .checkout-grid__aside,
.ruppert-checkout:has(#checkout-payment-step.step--current) .checkout-grid__aside,
.ruppert-checkout:has(#checkout-payment-step.show) .checkout-grid__aside,
.ruppert-checkout:has(#checkout-review-step.step--current) .checkout-grid__aside,
.ruppert-checkout:has(#checkout-review-step.show) .checkout-grid__aside {
display: none !important;
}
@media (min-width: 992px) {
.ruppert-checkout:has(#checkout-delivery-step.step--current) .checkout-grid,
.ruppert-checkout:has(#checkout-payment-step.step--current) .checkout-grid,
.ruppert-checkout:has(#checkout-payment-step.show) .checkout-grid,
.ruppert-checkout:has(#checkout-review-step.step--current) .checkout-grid,
.ruppert-checkout:has(#checkout-review-step.show) .checkout-grid {
grid-template-columns: minmax(0, 1fr);
}
.ruppert-checkout:has(#checkout-delivery-step.step--current) .checkout-grid__content,
.ruppert-checkout:has(#checkout-payment-step.step--current) .checkout-grid__content,
.ruppert-checkout:has(#checkout-payment-step.show) .checkout-grid__content,
.ruppert-checkout:has(#checkout-review-step.step--current) .checkout-grid__content,
.ruppert-checkout:has(#checkout-review-step.show) .checkout-grid__content {
width: 70% !important;
max-width: 70% !important;
}
}
/* Stepper */
.ruppert-checkout-steps {
background: transparent !important;
border: 0 !important;
margin-bottom: 32px !important;
padding: 0 !important;
}
.ruppert-checkout-steps__container {
max-width: 100%;
padding: 0;
}
.ruppert-checkout-steps__desktop {
max-width: 100% !important;
}
.ruppert-checkout-steps__list {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.ruppert-checkout-steps__item {
position: relative;
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.ruppert-checkout-steps__item--address::before {
display: none;
}
.ruppert-checkout-steps__item::before,
.ruppert-checkout-steps__item::after {
content: "";
position: absolute;
top: 22px;
height: 2px;
width: 50%;
background: #d5e5e3;
z-index: 0;
}
.ruppert-checkout-steps__item::before {
left: 0;
}
.ruppert-checkout-steps__item::after {
right: 0;
}
.ruppert-checkout-steps__item:last-child::after {
display: none;
}
/* Neutralize hummingbird theme.css stepper overrides */
.ruppert-checkout .checkout-steps__step--current::before,
.ruppert-checkout .checkout-steps__step--success::before,
.ruppert-checkout .checkout-steps__step--success::after {
background: #d5e5e3 !important;
}
.ruppert-checkout .checkout-steps__step--success .checkout-steps__btn {
color: #01454a !important;
}
.ruppert-checkout .checkout-steps__step--current .checkout-steps__btn {
color: #01454a;
}
/* Completed connector segments */
.ruppert-checkout:has(#checkout-addresses-step.step--complete) .ruppert-checkout-steps__item--address::after,
.ruppert-checkout:has(#checkout-addresses-step.step--complete) .ruppert-checkout-steps__item--shipping::before {
background: #01454a !important;
}
.ruppert-checkout:has(#checkout-delivery-step.step--complete) .ruppert-checkout-steps__item--shipping::after,
.ruppert-checkout:has(#checkout-delivery-step.step--complete) .ruppert-checkout-steps__item--payment::before {
background: #01454a !important;
}
.ruppert-checkout:has(#checkout-payment-step.step--complete) .ruppert-checkout-steps__item--payment::after,
.ruppert-checkout:has(#checkout-payment-step.step--complete) .ruppert-checkout-steps__item--review::before {
background: #01454a !important;
}
.checkout-steps__step--hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.ruppert-checkout-steps__icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #e8f0ef;
color: #01454a;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ruppert-checkout-steps__icon-step,
.ruppert-checkout-steps__icon-done {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ruppert-checkout-steps__icon-done {
display: none;
}
.ruppert-checkout-steps__label,
.ruppert-checkout-steps .checkout-steps__btn {
position: relative;
z-index: 1;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.15px;
text-decoration: none !important;
box-shadow: none !important;
}
.ruppert-checkout-steps__label--static {
display: block;
}
/* Completed steps – dark teal circle + checkmark */
.ruppert-checkout:has(#checkout-addresses-step.step--complete) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-delivery-step.step--complete) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-payment-step.step--complete) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__icon,
.ruppert-checkout-steps__item.checkout-steps__step--success .ruppert-checkout-steps__icon {
background: #01454a !important;
color: #ffffff !important;
box-shadow: none !important;
}
.ruppert-checkout:has(#checkout-addresses-step.step--complete) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon-step,
.ruppert-checkout:has(#checkout-delivery-step.step--complete) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon-step,
.ruppert-checkout:has(#checkout-payment-step.step--complete) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__icon-step,
.ruppert-checkout-steps__item.checkout-steps__step--success .ruppert-checkout-steps__icon-step {
display: none !important;
}
.ruppert-checkout:has(#checkout-addresses-step.step--complete) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon-done,
.ruppert-checkout:has(#checkout-delivery-step.step--complete) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon-done,
.ruppert-checkout:has(#checkout-payment-step.step--complete) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__icon-done,
.ruppert-checkout-steps__item.checkout-steps__step--success .ruppert-checkout-steps__icon-done,
.ruppert-checkout-steps__item.ruppert-checkout-steps__item--done .ruppert-checkout-steps__icon-done {
display: inline-flex !important;
}
/* Progress icons from visible step pane (works without JS) */
.ruppert-checkout:has(#checkout-delivery-step.show):not(:has(#checkout-addresses-step.show)) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon {
background: #01454a !important;
color: #ffffff !important;
box-shadow: none !important;
}
.ruppert-checkout:has(#checkout-delivery-step.show):not(:has(#checkout-addresses-step.show)) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon-step,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon-step,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon-step {
display: none !important;
}
.ruppert-checkout:has(#checkout-delivery-step.show):not(:has(#checkout-addresses-step.show)) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon-done,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon-done,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon-done {
display: inline-flex !important;
}
.ruppert-checkout:has(#checkout-delivery-step.show):not(:has(#checkout-addresses-step.show)) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-delivery-step.show):not(:has(#checkout-addresses-step.show)) .ruppert-checkout-steps__item--address .checkout-steps__btn,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--address .checkout-steps__btn,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--shipping .checkout-steps__btn {
color: #01454a !important;
}
.ruppert-checkout:has(#checkout-delivery-step.show):not(:has(#checkout-addresses-step.show)) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__icon {
background: #F07855 !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(240, 120, 85, 0.38) !important;
}
.ruppert-checkout:has(#checkout-delivery-step.show):not(:has(#checkout-addresses-step.show)) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-delivery-step.show):not(:has(#checkout-addresses-step.show)) .ruppert-checkout-steps__item--shipping .checkout-steps__btn,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-payment-step.show) .ruppert-checkout-steps__item--payment .checkout-steps__btn {
color: #F07855 !important;
}
.ruppert-checkout:has(#checkout-addresses-step.show):not(:has(#checkout-delivery-step.show)) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon {
background: #F07855 !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(240, 120, 85, 0.38) !important;
}
.ruppert-checkout:has(#checkout-addresses-step.show):not(:has(#checkout-delivery-step.show)) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-addresses-step.show):not(:has(#checkout-delivery-step.show)) .ruppert-checkout-steps__item--address .checkout-steps__btn {
color: #F07855 !important;
}
.ruppert-checkout:has(#checkout-addresses-step.step--complete) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-addresses-step.step--complete) .ruppert-checkout-steps__item--address .checkout-steps__btn,
.ruppert-checkout:has(#checkout-delivery-step.step--complete) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-delivery-step.step--complete) .ruppert-checkout-steps__item--shipping .checkout-steps__btn,
.ruppert-checkout:has(#checkout-payment-step.step--complete) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-payment-step.step--complete) .ruppert-checkout-steps__item--payment .checkout-steps__btn,
.ruppert-checkout-steps__item.checkout-steps__step--success .ruppert-checkout-steps__label,
.ruppert-checkout-steps__item.checkout-steps__step--success .checkout-steps__btn {
color: #01454a;
}
/* Current step – orange circle + shadow */
.ruppert-checkout:has(#checkout-addresses-step.step--current):not(:has(#checkout-delivery-step.step--current)):not(:has(#checkout-payment-step.step--current)) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-delivery-step.step--current) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-payment-step.step--current) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__icon,
.ruppert-checkout-steps__item.checkout-steps__step--current:not(.checkout-steps__step--success) .ruppert-checkout-steps__icon {
background: #F07855 !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(240, 120, 85, 0.38) !important;
}
.ruppert-checkout:has(#checkout-addresses-step.step--current):not(:has(#checkout-delivery-step.step--current)):not(:has(#checkout-payment-step.step--current)) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-addresses-step.step--current):not(:has(#checkout-delivery-step.step--current)):not(:has(#checkout-payment-step.step--current)) .ruppert-checkout-steps__item--address .checkout-steps__btn,
.ruppert-checkout:has(#checkout-delivery-step.step--current) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-delivery-step.step--current) .ruppert-checkout-steps__item--shipping .checkout-steps__btn,
.ruppert-checkout:has(#checkout-payment-step.step--current) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-payment-step.step--current) .ruppert-checkout-steps__item--payment .checkout-steps__btn,
.ruppert-checkout-steps__item.checkout-steps__step--current:not(.checkout-steps__step--success) .ruppert-checkout-steps__label,
.ruppert-checkout-steps__item.checkout-steps__step--current:not(.checkout-steps__step--success) .checkout-steps__btn {
color: #F07855;
}
/* Guest checkout: personal info step maps to address item as active */
.ruppert-checkout:has(#checkout-personal-information-step.step--current) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon {
background: #F07855;
color: #ffffff;
box-shadow: 0 4px 14px rgba(240, 120, 85, 0.38);
}
.ruppert-checkout:has(#checkout-personal-information-step.step--current) .ruppert-checkout-steps__item--address .checkout-steps__btn {
color: #F07855;
}
/* Main card */
.ruppert-checkout__main-card {
padding: 28px 32px 32px;
border: 1px solid rgba(1, 69, 74, 0.08);
border-radius: 16px;
background: #ffffff;
box-shadow: none;
}
.ruppert-checkout__main-card .step__title {
display: none;
}
.ruppert-checkout__main-card .step.tab-pane:not(.show) {
display: none;
}
/* Address selection */
.ruppert-checkout-addresses__title {
margin: 0 0 24px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0px;
}
.ruppert-checkout-addresses__title--invoice {
margin-top: 32px;
}
.ruppert-checkout-addresses__list {
display: flex;
flex-direction: column;
gap: 16px;
}
.ruppert-address-card {
margin: 0;
border: 0;
background: transparent;
}
.ruppert-address-card__row {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 0;
cursor: pointer;
}
.ruppert-address-card__radio {
flex: 0 0 auto;
margin-top: 22px;
}
.ruppert-address-card__radio .form-check-input {
width: 20px;
height: 20px;
margin: 0;
border: 2px solid #bed8d5;
background-color: #ffffff;
box-shadow: none !important;
}
.ruppert-address-card__radio .form-check-input:checked {
border-color: #01454a;
background-color: #01454a;
}
.ruppert-address-card__panel {
flex: 1 1 auto;
min-width: 0;
padding: 20px 24px;
border: 1px solid #01454A;
border-radius: 12px;
background: #ffffff;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ruppert-address-card.selected .ruppert-address-card__panel {
border-color: rgba(1, 69, 74, 0.35);
background: #f0f4f4;
}
.ruppert-address-card__label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0px;
}
.ruppert-address-card__pin {
flex-shrink: 0;
color: #40807e;
}
.ruppert-address-card__content {
margin: 0;
color: #01454A;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 20px;
letter-spacing: 0px;
}
.ruppert-address-card__actions {
margin-top: 12px;
}
.ruppert-checkout-addresses__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 32px;
padding-top: 8px;
}
.ruppert-checkout-addresses__back {
display: inline-flex;
align-items: center;
gap: 8px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.31px;
text-decoration: none !important;
border: none;
background: none;
cursor: pointer;
}
.ruppert-checkout-addresses__back:hover,
.ruppert-checkout-addresses__back:focus {
color: #02393d;
}
.ruppert-checkout-addresses__continue {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 28px;
border: 0;
border-radius: 8px;
background: #01454a;
color: #ffffff;
font-family: 'TT-Rationalist-Medium-italic', serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.31px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.ruppert-checkout-addresses__continue:hover,
.ruppert-checkout-addresses__continue:focus {
background: #02393d;
color: #ffffff;
}
.ruppert-checkout-addresses__empty {
margin: 0;
border-radius: 12px;
}
/* Order summary sidebar */
.ruppert-checkout__summary {
padding: 24px;
border: 1px solid rgba(1, 69, 74, 0.08);
border-radius: 16px;
background: #ffffff;
box-shadow: none;
}
@media (min-width: 992px) {
.ruppert-checkout__summary {
position: sticky;
top: calc(var(--scroll-padding-top, 80px) + 16px);
}
}
.ruppert-checkout__summary-title {
margin: 0 0 20px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 27px;
letter-spacing: 0px;
}
.ruppert-checkout-summary__products-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 8px;
padding-bottom: 16px;
border-bottom: 1px solid #e8eceb;
}
.ruppert-checkout-summary-product {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 12px;
}
.ruppert-checkout-summary-product__image {
flex-shrink: 0;
}
.ruppert-checkout-summary-product__img {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 8px;
background: #f8faf9;
}
.ruppert-checkout-summary-product__info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ruppert-checkout-summary-product__name {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.ruppert-checkout-summary-product__qty {
color: #6a7282;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 13px;
line-height: 18px;
}
.ruppert-checkout-summary-product__total {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
text-align: right;
}
.ruppert-checkout-summary__line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: 14px 0;
border-bottom: 1px solid #e8eceb;
}
.ruppert-checkout-summary__line:last-child {
border-bottom: 0;
}
.ruppert-checkout-summary__label {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.ruppert-checkout-summary__value {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: right;
}
.ruppert-checkout-summary__total {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid #e8eceb;
}
.ruppert-checkout-summary__line--grand-total {
align-items: flex-start;
padding-top: 18px;
padding-bottom: 0;
border-bottom: 0;
}
.ruppert-checkout-summary__line--grand-total .ruppert-checkout-summary__label,
.ruppert-checkout-summary__line--grand-total .ruppert-checkout-summary__value {
color: #01454a;
font-family: 'TT-Commons-Pro-Bold', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.ruppert-checkout-summary__value-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.ruppert-checkout-summary__tax-note {
color: #98a8a6;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 12px;
line-height: 16px;
}
.ruppert-checkout .blockreassurance,
.ruppert-checkout #block-reassurance,
.ruppert-checkout .cart-voucher {
display: none !important;
}
@media (max-width: 991.98px) {
.ruppert-checkout {
max-width: 100%;
padding: 16px 16px 32px;
}
.ruppert-checkout__main-card {
padding: 20px 16px 24px;
border-radius: 12px;
}
.ruppert-checkout-steps__list {
gap: 4px;
}
.ruppert-checkout-steps__icon {
width: 36px;
height: 36px;
}
.ruppert-checkout-steps__item::before,
.ruppert-checkout-steps__item::after {
top: 18px;
}
.ruppert-checkout-steps__label,
.ruppert-checkout-steps .checkout-steps__btn {
font-size: 11px;
line-height: 1.2;
}
.ruppert-checkout-addresses__footer {
flex-direction: column-reverse;
align-items: stretch;
}
.ruppert-checkout-addresses__continue {
width: 100%;
}
.ruppert-checkout-addresses__back {
justify-content: center;
}
.ruppert-checkout__summary {
margin-top: 8px;
padding: 20px 16px;
}
}
/* Checkout shipping – Figma */
.ruppert-checkout-shipping .delivery-option__item,
.ruppert-checkout-shipping .ruppert-shipping-option {
background-color: transparent;
/* border-block-end: 0; */
}
.ruppert-checkout-shipping .delivery-option__label,
.ruppert-checkout-shipping .ruppert-shipping-option__label {
display: grid;
flex-wrap: unset;
}
.ruppert-checkout-shipping .delivery-option__content,
.ruppert-checkout-shipping .delivery-option__carrier-name,
.ruppert-checkout-shipping .delivery-option__price {
flex-basis: auto;
flex-grow: 0;
font-weight: inherit;
}
.ruppert-checkout-shipping__title {
margin: 0 0 24px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0;
}
.ruppert-checkout-shipping__options {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.ruppert-shipping-option {
border: 1px solid #bed8d5;
border-radius: 12px;
background: #ffffff;
overflow: visible;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.ruppert-shipping-option.is-date-open {
position: relative;
z-index: 40;
overflow: visible;
}
.ruppert-shipping-option.is-selected {
border-color: #01454a;
background: #f0f7f6;
box-shadow: inset 0 0 0 1px rgba(1, 69, 74, 0.08);
}
.ruppert-shipping-option__label {
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: 14px;
margin: 0;
padding: 20px 24px;
cursor: pointer;
}
.ruppert-shipping-option__radio {
display: flex;
align-items: center;
justify-content: center;
}
.ruppert-shipping-option__radio .form-check-input {
width: 20px;
height: 20px;
margin: 0;
border: 2px solid #bed8d5;
background-color: #ffffff;
box-shadow: none !important;
}
.ruppert-shipping-option__radio .form-check-input:checked {
border-color: #01454a;
background-color: #01454a;
}
.ruppert-shipping-option__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #e8f0ef;
color: #40807e;
flex-shrink: 0;
}
.ruppert-shipping-option.is-selected .ruppert-shipping-option__icon {
background: #d5ebe8;
color: #01454a;
}
.ruppert-shipping-option__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ruppert-shipping-option__name {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0;
}
.ruppert-shipping-option__delay {
color: #40807e;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.ruppert-shipping-option__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
flex-shrink: 0;
}
.ruppert-shipping-option__price {
color: #1a8f5c;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
white-space: nowrap;
}
.ruppert-shipping-option__price .carrier-price,
.ruppert-shipping-option__price {
color: #1a8f5c;
}
.ruppert-shipping-option__date {
padding: 0 24px 20px;
}
.ruppert-shipping-date {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
border: 1px solid #d5e5e3;
border-radius: 10px;
background: #ffffff;
}
.ruppert-shipping-date__label-wrap {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.ruppert-shipping-date__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #40807e;
flex-shrink: 0;
}
.ruppert-shipping-date__label {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
}
.ruppert-shipping-date__select-wrap {
position: relative;
flex: 1 1 220px;
min-width: 0;
max-width: 100%;
}
.ruppert-shipping-date__select--native {
display: none !important;
}
.ruppert-shipping-date__trigger {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
min-height: 44px;
margin: 0;
padding: 10px 40px 10px 14px;
border: 1px solid #bed8d5;
border-radius: 8px;
background: #ffffff;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 20px;
text-align: left;
cursor: pointer;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.ruppert-shipping-date__trigger.is-placeholder .ruppert-shipping-date__trigger-text {
color: #6b8f8c;
}
.ruppert-shipping-date__trigger:disabled {
color: #98a8a6;
cursor: not-allowed;
background: #f8faf9;
}
.ruppert-shipping-date__trigger-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ruppert-shipping-date__list {
margin: 0;
padding: 6px 0;
list-style: none;
border: 1px solid #bed8d5;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(1, 69, 74, 0.12);
max-height: min(220px, 40vh);
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.ruppert-shipping-date__list.is-open {
position: fixed;
z-index: 1200;
}
.ruppert-shipping-date__backdrop {
position: fixed;
inset: 0;
z-index: 1190;
background: transparent;
}
.ruppert-shipping-date__list-item {
padding: 12px 14px;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ruppert-shipping-date__list-item:hover,
.ruppert-shipping-date__list-item.is-selected {
background: #f0f7f6;
}
.ruppert-shipping-date__select-wrap.is-open .ruppert-shipping-date__chevron {
transform: translateY(-50%) rotate(180deg);
}
.ruppert-shipping-date__select-wrap.is-open .ruppert-shipping-date__trigger {
border-color: #01454a;
}
.ruppert-shipping-date__trigger:focus {
border-color: #01454a;
outline: none;
}
.ruppert-shipping-date__trigger:disabled {
color: #98a8a6;
cursor: not-allowed;
background: #f8faf9;
}
.ruppert-shipping-date__chevron {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #40807e;
pointer-events: none;
}
.ruppert-shipping-date__error {
margin: 10px 0 0;
color: #b42318;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 13px;
line-height: 18px;
}
.ruppert-checkout-shipping__alert {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
padding: 14px 16px;
border-radius: 10px;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
}
.ruppert-checkout-shipping__alert--success {
border: 1px solid #b8e6cc;
background: #e8f8ef;
color: #1a8f5c;
}
.ruppert-checkout-shipping__alert--notice {
border: 1px solid #f5d4b8;
background: #fdf3ea;
color: #01454a;
}
.ruppert-checkout-shipping__alert-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
color: #1a8f5c;
}
.ruppert-checkout-shipping__alert-text strong {
font-family: 'TT-Commons-Pro-Bold', sans-serif;
font-weight: 700;
line-height: 20px;
letter-spacing: 0;
}
.ruppert-checkout-shipping__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 32px;
padding-top: 8px;
}
.ruppert-checkout-shipping__hidden-options {
display: none !important;
}
.ruppert-checkout-shipping .delivery-options__display-after-carrier,
.ruppert-checkout-shipping .buttons-wrapper {
display: none;
}
.ruppert-checkout-shipping__footer .ruppert-checkout-addresses__continue:disabled {
opacity: 0.55;
cursor: not-allowed;
}
@media (max-width: 767.98px) {
.ruppert-checkout-shipping,
.ruppert-checkout-shipping__form,
.ruppert-checkout-shipping__options {
max-width: 100%;
}
.ruppert-shipping-option,
.ruppert-shipping-option__date,
.ruppert-shipping-date {
max-width: 100%;
overflow: visible;
}
.ruppert-shipping-option__label {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 12px 14px;
padding: 16px;
}
.ruppert-shipping-option__radio {
grid-row: 1 / span 2;
align-self: start;
margin-top: 10px;
}
.ruppert-shipping-option__icon {
display: none;
}
.ruppert-shipping-option__meta {
grid-column: 2;
align-items: flex-start;
text-align: left;
}
.ruppert-shipping-option__date {
padding: 0 16px 16px;
}
.ruppert-shipping-date {
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
box-sizing: border-box;
}
.ruppert-shipping-date__label {
white-space: normal;
}
.ruppert-shipping-date__select-wrap {
flex: 1 1 auto;
width: 100%;
min-width: 0;
max-width: 100%;
}
.ruppert-checkout-shipping__footer {
flex-direction: column-reverse;
align-items: stretch;
}
.ruppert-checkout-shipping__footer .ruppert-checkout-addresses__continue {
width: 100%;
}
.ruppert-checkout-shipping__footer .ruppert-checkout-addresses__back {
justify-content: center;
}
}
/* Checkout payment – Figma */
.ruppert-checkout-payment .payment-option__label {
display: grid;
flex-wrap: unset;
}
.ruppert-checkout-payment__title {
margin: 0 0 24px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0;
}
.ruppert-checkout-payment__options {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.ruppert-checkout-payment .payment-option__no-js-form {
display: none !important;
}
.ruppert-checkout-payment__notice {
margin: 0 0 16px;
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-payment-option {
border: 1px solid #bed8d5;
border-radius: 12px;
background: #ffffff;
overflow: hidden;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.ruppert-payment-option.is-selected {
border-color: #01454a;
background: #f0f7f6;
box-shadow: inset 0 0 0 1px rgba(1, 69, 74, 0.08);
}
.ruppert-payment-option__label {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 14px;
margin: 0;
padding: 20px 24px;
cursor: pointer;
}
.ruppert-payment-option__radio {
display: flex;
align-items: center;
justify-content: center;
}
.ruppert-payment-option__radio .form-check-input {
width: 20px;
height: 20px;
margin: 0;
border: 2px solid #bed8d5;
background-color: #ffffff;
}
.ruppert-payment-option__radio .form-check-input:checked {
border-color: #01454a;
background-color: #01454a;
}
.ruppert-payment-option__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #d5ebe8;
color: #40807e;
flex-shrink: 0;
}
.ruppert-payment-option.is-selected .ruppert-payment-option__icon {
background: #01454a;
color: #ffffff;
}
.ruppert-payment-option__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ruppert-payment-option__name {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.ruppert-payment-option__delay {
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.ruppert-payment-option__additional {
margin: -8px 0 0;
padding: 0 24px 20px calc(24px + 20px + 14px + 40px + 14px);
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-payment-option__additional p,
.ruppert-payment-option__additional section {
margin: 0;
}
.ruppert-checkout-payment__terms {
margin-bottom: 24px;
}
.ruppert-checkout-payment__terms-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
}
.ruppert-checkout-payment__terms-item .form-check-input {
width: 18px;
height: 18px;
margin-top: 2px;
border: 2px solid #bed8d5;
}
.ruppert-checkout-payment__terms-item .form-check-input:checked {
border-color: #01454a;
background-color: #01454a;
}
.ruppert-checkout-payment__terms-item .form-check-label {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-checkout-payment__terms-item .form-check-label a {
color: #01454a;
text-decoration: underline;
}
.ruppert-checkout-payment__hidden-meta {
display: none !important;
}
.ruppert-checkout-payment__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 32px;
padding-top: 8px;
}
.ruppert-checkout-payment .buttons-wrapper {
display: none;
}
.ruppert-checkout-payment #payment-confirmation .ruppert-checkout-addresses__continue.disabled,
.ruppert-checkout-payment #payment-confirmation .ruppert-checkout-addresses__continue:disabled {
opacity: 0.55;
cursor: not-allowed;
}
@media (max-width: 767.98px) {
.ruppert-payment-option__label {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 12px 14px;
padding: 16px;
}
.ruppert-payment-option__radio {
grid-row: 1 / span 2;
align-self: start;
margin-top: 10px;
}
.ruppert-payment-option__icon {
grid-column: 2;
}
.ruppert-payment-option__body {
grid-column: 2;
}
.ruppert-checkout-payment__footer {
flex-direction: column-reverse;
align-items: stretch;
}
.ruppert-checkout-payment__footer .ruppert-checkout-addresses__continue {
width: 100%;
}
.ruppert-checkout-payment__footer .ruppert-checkout-addresses__back {
justify-content: center;
}
}
/* Checkout review – Figma */
#checkout-review-step .step__title {
display: none;
}
.ruppert-checkout-review__title {
margin: 0 0 24px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 28px;
}
.ruppert-checkout-review__sections {
display: flex;
flex-direction: column;
gap: 16px;
}
.ruppert-review-card {
border: 1px solid #bed8d5;
border-radius: 12px;
background: #ffffff;
overflow: hidden;
}
.ruppert-review-card__header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px 0;
}
.ruppert-review-card__header--items {
padding-bottom: 0;
}
.ruppert-review-card--items .ruppert-review-card__header--items {
gap: 0;
}
.ruppert-review-card--items .ruppert-review-card__header--items .ruppert-review-card__title {
font-size: 16px;
}
.ruppert-review-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #40807e;
flex-shrink: 0;
}
.ruppert-review-card__title {
margin: 0;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.ruppert-review-card__body {
padding: 12px 20px 20px;
}
.ruppert-review-address__line {
margin: 0 0 4px;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-review-address__line:last-child {
margin-bottom: 0;
}
.ruppert-checkout-review__delivery-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.ruppert-review-delivery-date__label {
display: block;
margin-bottom: 8px;
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 13px;
line-height: 18px;
}
.ruppert-review-delivery-date__value {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
padding: 10px 14px;
border: 1px solid #bed8d5;
border-radius: 8px;
background: #f8faf9;
}
.ruppert-review-delivery-date__weekday {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.ruppert-review-delivery-date__date {
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-review-delivery-date__empty,
.ruppert-review-shipping__name {
margin: 0;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-review-payment {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid #bed8d5;
border-radius: 10px;
background: #f0f7f6;
}
.ruppert-review-payment__radio {
width: 20px;
height: 20px;
border: 6px solid #01454a;
border-radius: 50%;
background: #ffffff;
box-sizing: border-box;
}
.ruppert-review-payment__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #01454a;
color: #ffffff;
}
.ruppert-review-payment__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ruppert-review-payment__name {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.ruppert-review-payment__hint {
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-review-comment {
width: 100%;
min-height: 110px;
padding: 12px 14px;
border: 1px solid #bed8d5;
border-radius: 8px;
background: #ffffff;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
resize: vertical;
box-sizing: border-box;
}
.ruppert-review-comment:focus {
border-color: #01454a;
outline: none;
}
.ruppert-review-items__list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e3efed;
}
.ruppert-review-item {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 14px;
}
.ruppert-review-item__img {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
}
.ruppert-review-item__info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ruppert-review-item__name {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.ruppert-review-item__meta {
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 13px;
line-height: 18px;
}
.ruppert-review-item__total {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
}
.ruppert-review-items__line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 6px 0;
}
.ruppert-review-items__label {
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-review-items__value {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
text-align: right;
}
.ruppert-review-items__line--grand-total {
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid #e3efed;
}
.ruppert-review-items__line--grand-total .ruppert-review-items__label,
.ruppert-review-items__line--grand-total .ruppert-review-items__value {
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 26px;
color: #01454a;
}
.ruppert-checkout-review__terms {
margin-top: 20px;
padding: 14px 16px;
border: 1px solid #f5d4b8;
border-radius: 10px;
background: #fdf3ea;
}
.ruppert-checkout-review__terms-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
}
.ruppert-checkout-review__terms-item .form-check-input {
width: 18px;
height: 18px;
margin-top: 2px;
border: 2px solid #bed8d5;
}
.ruppert-checkout-review__terms-item .form-check-input:checked {
border-color: #01454a;
background-color: #01454a;
}
.ruppert-checkout-review__terms-item .form-check-label {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-checkout-review__terms-item .form-check-label a {
color: #01454a;
text-decoration: underline;
}
.ruppert-checkout-review__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 24px;
padding-top: 8px;
}
.ruppert-checkout-review__footer .ruppert-checkout-addresses__back {
min-height: auto;
padding: 0;
border: none;
border-radius: 0;
background: none;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.ruppert-checkout-review__footer .ruppert-checkout-addresses__back:hover,
.ruppert-checkout-review__footer .ruppert-checkout-addresses__back:focus {
background: none;
color: #02393d;
}
.ruppert-checkout-review__place-order {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 28px;
border: none;
border-radius: 999px;
background: #b8d9d4;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
cursor: pointer;
}
.ruppert-checkout-review__place-order:hover,
.ruppert-checkout-review__place-order:focus {
background: #a5ccc6;
color: #01454a;
}
/* Review step active in stepper */
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__icon {
background: #01454a;
border-color: #01454a;
color: #ffffff;
}
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon-step,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon-step,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__icon-step {
opacity: 0;
}
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__icon-done,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__icon-done,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__icon-done {
opacity: 1;
}
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--address .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--shipping .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--payment .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--address .checkout-steps__btn,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--shipping .checkout-steps__btn,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--payment .checkout-steps__btn {
color: #01454a;
}
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--review .ruppert-checkout-steps__icon {
background: #f28c28;
border-color: #f28c28;
color: #ffffff;
}
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--review .ruppert-checkout-steps__label,
.ruppert-checkout:has(#checkout-review-step.show) .ruppert-checkout-steps__item--review .checkout-steps__btn {
color: #f28c28;
}
@media (max-width: 767.98px) {
.ruppert-checkout-review__delivery-row {
grid-template-columns: 1fr;
}
.ruppert-review-item {
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
}
.ruppert-review-item__total {
grid-column: 2;
justify-self: start;
}
.ruppert-checkout-review__footer {
flex-direction: column-reverse;
align-items: stretch;
}
.ruppert-checkout-review__place-order,
.ruppert-checkout-review__footer .ruppert-checkout-addresses__back {
width: 100%;
justify-content: center;
}
}
/* Order confirmation – matches checkout review layout */
.page-order-confirmation #wrapper,
.page-order-confirmation .columns-container,
.page-order-confirmation #content-wrapper,
.page-order-confirmation #center-column {
background: #fcf6ed !important;
}
.ruppert-order-confirmation {
padding: 24px 0 48px;
background: transparent;
min-height: 60vh;
}
.ruppert-order-confirmation .ruppert-checkout-review__title {
margin-bottom: 8px;
}
.ruppert-order-confirmation__container {
max-width: 80%;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
.ruppert-order-confirmation__success-body {
flex: 1;
min-width: 0;
}
.ruppert-order-confirmation__success {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
padding: 20px 24px;
border: 1px solid #b8d9c8;
border-radius: 12px;
background: #edf7f0;
}
.ruppert-order-confirmation__success-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: #01454a;
color: #ffffff;
}
.ruppert-order-confirmation__success-title {
margin: 0 0 8px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 30px;
}
.ruppert-order-confirmation__success-text {
margin: 0 0 4px;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-order-confirmation__success-text:last-child {
margin-bottom: 0;
}
.ruppert-order-confirmation__link {
color: #01454a;
text-decoration: underline;
}
.ruppert-order-confirmation__card {
padding: 28px 32px 32px;
border: 1px solid rgba(1, 69, 74, 0.08);
border-radius: 16px;
background: #ffffff;
margin-bottom: 60px;
}
.ruppert-order-confirmation__reference {
margin: -12px 0 20px;
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-order-confirmation__carrier-delay {
margin: 6px 0 0;
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 13px;
line-height: 18px;
}
.ruppert-order-confirmation__payment-note {
margin: 14px 0 0;
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-order-confirmation__payment-return {
margin-top: 12px;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-order-confirmation__comment {
margin: 0;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
white-space: pre-wrap;
}
.ruppert-order-confirmation__guest-card {
margin-top: 24px;
padding: 24px;
border: 1px solid rgba(1, 69, 74, 0.08);
border-radius: 16px;
background: #ffffff;
}
@media (max-width: 767.98px) {
.ruppert-order-confirmation__container {
max-width: 100%;
}
.ruppert-order-confirmation__card {
padding: 20px 16px 24px;
}
.ruppert-order-confirmation__success {
flex-direction: column;
padding: 16px;
}
}
/* Add-to-cart modal */
.ruppert-blockcart-modal .modal-dialog {
max-width: 850px;
}
.ruppert-blockcart-modal__content {
border: 1px solid #bed8d5;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 24px 48px rgba(1, 69, 74, 0.16);
}
.ruppert-blockcart-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid #e8eceb;
background: #edf7f0;
}
.ruppert-blockcart-modal__success {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.ruppert-blockcart-modal__success-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: #01454a;
color: #ffffff;
}
.ruppert-blockcart-modal__title {
margin: 0;
color: #01454a;
font-family: 'TT-Rationalist-Medium-italic', sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 30px;
}
.ruppert-blockcart-modal__close {
flex-shrink: 0;
margin: 0;
opacity: 0.7;
}
.ruppert-blockcart-modal__close:hover,
.ruppert-blockcart-modal__close:focus {
opacity: 1;
}
.ruppert-blockcart-modal__body {
padding: 24px;
}
.ruppert-blockcart-modal__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 20px;
align-items: start;
}
.ruppert-blockcart-modal__product {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 16px;
border: 1px solid #bed8d5;
border-radius: 12px;
background: #ffffff;
}
.ruppert-blockcart-modal__product-media {
flex: 0 0 96px;
}
.ruppert-blockcart-modal__image {
display: block;
width: 96px;
height: 96px;
object-fit: contain;
border-radius: 8px;
background: #f8faf9;
}
.ruppert-blockcart-modal__product-details {
min-width: 0;
}
.ruppert-blockcart-modal__name {
margin: 0 0 8px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.ruppert-blockcart-modal__price,
.ruppert-blockcart-modal__property,
.ruppert-blockcart-modal__quantity {
margin: 0 0 4px;
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-blockcart-modal__price {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-weight: 500;
}
.ruppert-blockcart-modal__summary.ruppert-review-card {
height: 100%;
}
.ruppert-blockcart-modal__summary .ruppert-review-card__header {
padding-bottom: 0;
}
.ruppert-blockcart-modal__summary .ruppert-review-card__title {
font-size: 15px;
line-height: 22px;
}
.ruppert-blockcart-modal__totals {
padding-top: 8px;
}
.ruppert-blockcart-modal__total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #e8eceb;
}
.ruppert-blockcart-modal__total:last-child {
border-bottom: 0;
}
.ruppert-blockcart-modal__total-label,
.ruppert-blockcart-modal__total-value {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-blockcart-modal__total-value {
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-weight: 500;
text-align: right;
}
.ruppert-blockcart-modal__total--bold .ruppert-blockcart-modal__total-label,
.ruppert-blockcart-modal__total--bold .ruppert-blockcart-modal__total-value,
.ruppert-blockcart-modal__total--grand .ruppert-blockcart-modal__total-label,
.ruppert-blockcart-modal__total--grand .ruppert-blockcart-modal__total-value {
font-family: 'TT-Commons-Pro-Bold', sans-serif;
font-weight: 700;
}
.ruppert-blockcart-modal__total--grand {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid #bed8d5;
border-bottom: 0;
}
.ruppert-blockcart-modal__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 20px 24px;
border-top: 1px solid #e8eceb;
background: #fafcfb;
}
.ruppert-blockcart-modal__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 24px;
border-radius: 8px;
font-family: 'TT-Rationalist-Medium-italic', serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.31px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ruppert-blockcart-modal__btn--secondary {
border: 1px solid #01454a;
background: #ffffff;
color: #01454a;
}
.ruppert-blockcart-modal__btn--secondary:hover,
.ruppert-blockcart-modal__btn--secondary:focus {
background: #f0f7f6;
color: #02393d;
border-color: #02393d;
}
.ruppert-blockcart-modal__btn--primary {
border: 0;
background: #01454a;
color: #ffffff;
}
.ruppert-blockcart-modal__btn--primary:hover,
.ruppert-blockcart-modal__btn--primary:focus {
background: #02393d;
color: #ffffff;
}
.ruppert-blockcart-modal__footer-extra {
width: 100%;
}
@media (max-width: 991.98px) {
.ruppert-blockcart-modal__grid {
grid-template-columns: 1fr;
}
.ruppert-blockcart-modal__footer {
flex-direction: column-reverse;
align-items: stretch;
}
.ruppert-blockcart-modal__btn {
width: 100%;
}
}
@media (max-width: 575.98px) {
.ruppert-blockcart-modal__header,
.ruppert-blockcart-modal__body,
.ruppert-blockcart-modal__footer {
padding-left: 16px;
padding-right: 16px;
}
.ruppert-blockcart-modal__title {
font-size: 18px;
line-height: 26px;
}
.ruppert-blockcart-modal__product {
flex-direction: column;
align-items: center;
text-align: center;
}
.ruppert-blockcart-modal__product-media {
flex-basis: auto;
}
}
/* -------------------------------------------------------------------------- */
/* Nav breakpoint overrides (load last — beat desktop grid header rules) */
/* -------------------------------------------------------------------------- */
@media (max-width: 1299.98px) {
#header .ruppert-header-main__inner,
#header .ruppert-header-main > .container-md .ruppert-header-main__inner {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 8px 12px !important;
min-height: 64px !important;
max-width: 100%;
box-sizing: border-box;
}
#header .ruppert-header-main__search #_desktop_ps_searchbar {
display: none !important;
}
#header .ruppert-header-main__search .ps-searchbar--mobile {
display: inline-flex !important;
}
#header .ruppert-mm-mobile-bar {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 auto !important;
min-width: 2.5rem !important;
}
#header .header-nav.ruppert-mm {
border: 0 !important;
background: transparent !important;
min-height: 0 !important;
padding: 0 !important;
}
#header .header-nav.ruppert-mm > .container-md {
padding: 0 !important;
min-height: 0 !important;
}
#header .header-nav.ruppert-mm #tvdesktop-megamenu {
display: none !important;
}
#tvmobile-megamenu.ruppert-mm-closed {
display: none !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
.tv-menu-horizontal li.level-1.parent>a:after {
content: none !important;
}
}
@media (min-width: 992px) and (max-width: 1299.98px) {
#header .ruppert-header-main__actions {
display: inline-flex !important;
flex: 0 0 auto;
order: 19;
margin-left: 0 !important;
}
#header .ruppert-mm-mobile-bar {
order: 20;
}
}
/* -------------------------------------------------------------------------- */
/* Menu drawer: right sidebar + vertical list (≤1300px) */
/* -------------------------------------------------------------------------- */
@media (max-width: 1299.98px) {
body.ruppert-mm-panel-open .ruppert-mm-backdrop {
/* Dim only the page — not the right sidebar */
left: 0 !important;
right: min(420px, 92vw) !important;
width: auto !important;
background: rgba(4, 43, 50, 0.45) !important;
z-index: 1055 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu {
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
width: min(420px, 92vw) !important;
max-width: 420px !important;
z-index: 1060 !important;
box-shadow: -8px 0 32px rgba(0, 61, 61, 0.15);
border-left: 1px solid rgba(0, 61, 61, 0.12);
padding: max(0.5rem, env(safe-area-inset-top)) 1rem
max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-right)) !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .container_tv_megamenu {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal {
display: block !important;
width: 100% !important;
text-align: left !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal ul.menu-content {
display: block !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal ul.menu-content > li.level-1,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
flex: none !important;
position: relative !important;
box-sizing: border-box;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal ul.menu-content > li.level-1 > a,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1 > a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
white-space: normal !important;
box-sizing: border-box;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > a {
padding-right: 3rem !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > .icon-drop-mobile {
display: block !important;
right: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal .menu-dropdown,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
float: none !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 0 0.5rem !important;
margin: 0 !important;
}
/* Submenu rows/cols: single column (fixes wine menu multi-column overlap) */
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown .tv-menu-row,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row,
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-dropdown .tv-menu-row,
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip--wine {
display: block !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
grid-template-columns: none !important;
gap: 0 !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown [class*="col-"],
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip > .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip > [class*="col-"],
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip--wine > .tv-menu-col,
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip--wine > [class*="col-"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: none !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 0.75rem !important;
box-sizing: border-box;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ul-column,
body.ruppert-mm-panel-open #tvmobile-megamenu .spirit-column .ul-column {
display: block !important;
width: 100% !important;
column-count: 1 !important;
column-gap: normal !important;
height: auto !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ul-column > li,
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown li.menu-item,
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown li.item-header,
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown li.item-line {
display: block !important;
width: 100% !important;
max-width: 100% !important;
break-inside: auto !important;
column-span: none !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown ul li.item-header > a,
body.ruppert-mm-panel-open #tvmobile-megamenu .menu-dropdown ul li.item-line > a {
display: block !important;
width: 100% !important;
white-space: normal !important;
text-align: left !important;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .ruppert-mm-card-strip--wine > .tv-menu-col:first-child:not(:has(li .html-block img)) ul.ul-column > li.menu-item:first-child > a {
min-height: auto !important;
height: auto !important;
width: 100% !important;
padding: 0.75rem 1rem !important;
}
/* Image card rows: keep single-column stack in sidebar */
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-row.ruppert-mm-card-strip,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-sub-menu .tv-menu-row.row:has(> .tv-menu-col li .html-block img) {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* -------------------------------------------------------------------------- */
/* Desktop header grid (load last — Figma: logo | search | actions) */
/* -------------------------------------------------------------------------- */
@media (min-width: 1300px) {
#header .ruppert-header-main__inner,
#header .ruppert-header-main > .container-md .ruppert-header-main__inner {
display: grid !important;
grid-template-columns: auto minmax(48px, 1fr) minmax(360px, 576px) minmax(48px, 1fr) auto !important;
grid-template-areas: "logo pad-l search pad-r actions" !important;
align-items: center !important;
gap: 0 20px !important;
min-height: 96px !important;
padding: 16px 40px !important;
flex-wrap: nowrap !important;
}
#header .ruppert-header-main__inner:not(:has(.ruppert-header-main__actions)),
#header .ruppert-header-main > .container-md .ruppert-header-main__inner:not(:has(.ruppert-header-main__actions)) {
grid-template-columns: auto minmax(48px, 1fr) minmax(360px, 576px) minmax(48px, 1fr) !important;
grid-template-areas: "logo pad-l search pad-r" !important;
}
#header .ruppert-header-main__logo {
grid-area: logo !important;
order: unset !important;
margin-right: 0 !important;
}
#header .ruppert-header-main__search {
grid-area: search !important;
order: unset !important;
justify-self: center !important;
width: 100% !important;
max-width: 576px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#header .ruppert-header-main__search #_desktop_ps_searchbar {
display: flex !important;
}
#header .ruppert-header-main__search .ps-searchbar--mobile {
display: none !important;
}
#header .ruppert-header-main__actions {
grid-area: actions !important;
order: unset !important;
justify-self: end !important;
display: inline-flex !important;
align-items: center !important;
gap: 20px !important;
margin-left: 0 !important;
white-space: nowrap !important;
}
#header .ruppert-header-main__inner > .ruppert-mm-mobile-bar,
#header .ruppert-header-main__inner > .ruppert-header-main__mobile-icon,
#header .ruppert-header-main__inner > #_mobile_ps_customersignin,
#header .ruppert-header-main__inner > #_ruppert_mobile_wishlist,
#header .ruppert-header-main__inner > #_mobile_ps_shoppingcart {
display: none !important;
}
}
/* ==========================================================================
Customer account dashboard – Ruppert brand
========================================================================== */
/* Variables on .ruppert-account so all account pages get them (my-account,
addresses, order-detail, and module pages are not always .page-customer-account). */
.ruppert-account,
.page-customer-account {
--ruppert-account-teal: #01454a;
--ruppert-account-teal-dark: #003d3d;
--ruppert-account-cream: #fcf6ed;
--ruppert-account-card: #ffffff;
--ruppert-account-border: rgba(1, 69, 74, 0.1);
--ruppert-account-muted: #4a5565;
--ruppert-account-signout: #c45c3e;
}
.page-customer-account,
body:has(.ruppert-account) {
background-color: var(--ruppert-account-cream);
}
.page-customer-account #wrapper,
.page-customer-account #content-wrapper,
.page-customer-account .columns-container,
.page-customer-account .center-column,
body:has(.ruppert-account) #wrapper,
body:has(.ruppert-account) #content-wrapper,
body:has(.ruppert-account) .columns-container,
body:has(.ruppert-account) .center-column {
background-color: var(--ruppert-account-cream);
}
.page-customer-account .breadcrumb__wrapper,
body:has(.ruppert-account) .breadcrumb__wrapper {
background: transparent;
}
.ruppert-account .breadcrumb__wrapper--account {
background: transparent;
padding: 0;
margin: 0 0 clamp(16px, 2.5vw, 24px);
}
.ruppert-account .breadcrumb__wrapper--account .breadcrumb {
margin: 0;
padding: 0;
}
.page-customer-account .center-column,
body:has(.ruppert-account) .center-column {
padding-top: 0;
}
.page-customer-account .breadcrumb-link,
.page-customer-account .breadcrumb-current,
body:has(.ruppert-account) .breadcrumb-link,
body:has(.ruppert-account) .breadcrumb-current {
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
color: var(--ruppert-account-muted);
}
.page-customer-account .breadcrumb-link:hover,
body:has(.ruppert-account) .breadcrumb-link:hover {
color: var(--ruppert-account-teal);
}
.ruppert-account {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 40px) clamp(40px, 5vw, 80px);
background-color: #FCF6ED;
}
.ruppert-account__layout {
--bs-gutter-x: clamp(16px, 2.5vw, 32px);
--bs-gutter-y: clamp(16px, 2.5vw, 32px);
align-items: flex-start;
}
.ruppert-account__header {
margin-bottom: 20px;
}
.ruppert-account__header .page-title-section {
margin: 0;
font-family: 'TT-Rationalist-demibold', Georgia, 'Times New Roman', serif;
font-size: 30px;
font-weight: 600;
line-height: 100%;
color: #01454A !important;
}
.address-card__alias {
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 100%;
color: #01454A;
}
.address-card__content {
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #40807E;
}
.ruppert-account__back {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
padding: 0;
border: 0;
background: transparent;
color: var(--ruppert-account-teal);
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-decoration: none;
transition: color 0.2s ease;
}
.ruppert-account__back .material-icons {
font-size: 20px;
}
.ruppert-account__back:hover,
.ruppert-account__back:focus-visible {
color: var(--ruppert-account-teal-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
body#my-account .ruppert-account__back {
display: none;
}
/* Sidebar navigation */
.account-menu--sidebar,
.ruppert-account__sidebar-col .account-menu--sidebar {
display: flex;
flex-direction: column;
gap: 0;
padding: clamp(20px, 2.5vw, 28px);
border: 1px solid var(--ruppert-account-border);
border-radius: 18px;
background: #ffffff;
background: var(--ruppert-account-card, #ffffff);
box-shadow: 0 1px 0 rgba(1, 69, 74, 0.04);
}
.account-menu--sidebar .account-menu__title {
margin: 0 0 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(1, 69, 74, 0.08);
font-family: 'TT-Rationalist-demibold', Georgia, 'Times New Roman', serif;
font-size: clamp(1.125rem, 2vw, 1.375rem);
font-weight: 600;
line-height: 1.3;
color: #01454A !important;
}
.account-menu--sidebar .account-menu__nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.account-menu--sidebar .account-menu__link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
color: #01454A;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 100%;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.account-menu--sidebar .account-menu__link:hover,
.account-menu--sidebar .account-menu__link:focus-visible {
background-color: rgba(1, 69, 74, 0.06);
color: var(--ruppert-account-teal);
}
.account-menu--sidebar .account-menu__link--active {
background-color: rgba(1, 69, 74, 0.08);
color: var(--ruppert-account-teal);
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-weight: 500;
}
.account-menu--sidebar .account-menu__icon-wrap {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(1, 69, 74, 0.06);
}
.account-menu--sidebar .account-menu__icon {
font-size: 20px;
color: var(--ruppert-account-teal);
}
.account-menu--sidebar .account-menu__link--signout {
margin-top: 12px;
padding-top: 16px;
border-top: 1px solid rgba(1, 69, 74, 0.08);
color: #01454A;
}
.account-menu--sidebar .account-menu__link--signout .account-menu__icon-wrap {
background: rgba(196, 92, 62, 0.1);
}
.account-menu--sidebar .account-menu__link--signout .account-menu__icon {
color: var(--ruppert-account-signout);
}
.account-menu--sidebar .account-menu__link--signout:hover,
.account-menu--sidebar .account-menu__link--signout:focus-visible {
background-color: rgba(196, 92, 62, 0.08);
color: #a84a30;
}
.js-customer-form .form-check-label {
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 100%;
color: #01454A;
}
.js-customer-form .form-check-label em {
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 25px;
color: #01454A;
font-style: normal;
}
.js-customer-form .form-check-input:checked {
background-color: #01454A;
border-color: #01454A;
}
.js-customer-form .form-check-input:focus {
box-shadow: 0 0 0 3px rgba(1, 69, 74, 0.1);
}
/* Mobile dropdown navigation (sub-pages) */
.account-menu--mobile {
position: relative;
display: block;
margin-bottom: 20px;
}
.account-menu__toggle {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 12px 16px;
border: 1px solid var(--ruppert-account-border);
border-radius: 14px;
background: #ffffff;
background: var(--ruppert-account-card, #ffffff);
color: var(--ruppert-account-teal);
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
text-align: left;
cursor: pointer;
box-shadow: 0 1px 0 rgba(1, 69, 74, 0.04);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.account-menu__toggle:hover,
.account-menu__toggle:focus-visible {
border-color: rgba(1, 69, 74, 0.25);
box-shadow: 0 4px 16px rgba(1, 69, 74, 0.08);
outline: none;
}
.account-menu__toggle-icon,
.account-menu__toggle-chevron {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.account-menu__toggle-icon .material-icons,
.account-menu__toggle-chevron .material-icons {
font-size: 22px;
color: var(--ruppert-account-teal);
}
.account-menu__toggle-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-menu__toggle-chevron {
transition: transform 0.2s ease;
}
.account-menu--open .account-menu__toggle-chevron {
transform: rotate(180deg);
}
.account-menu__dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
left: 0;
z-index: 30;
overflow: hidden;
border: 1px solid var(--ruppert-account-border);
border-radius: 14px;
background: #ffffff;
background: var(--ruppert-account-card, #ffffff);
box-shadow: 0 12px 32px rgba(1, 69, 74, 0.12);
}
.account-menu__dropdown-nav {
display: flex;
flex-direction: column;
gap: 2px;
max-height: min(70vh, 420px);
padding: 8px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.account-menu--mobile .account-menu__dropdown-nav .account-menu__link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
color: #01454A;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.account-menu--mobile .account-menu__dropdown-nav .account-menu__link:hover,
.account-menu--mobile .account-menu__dropdown-nav .account-menu__link:focus-visible {
background-color: rgba(1, 69, 74, 0.06);
color: var(--ruppert-account-teal);
}
.account-menu--mobile .account-menu__dropdown-nav .account-menu__link--active {
background-color: rgba(1, 69, 74, 0.08);
color: var(--ruppert-account-teal);
font-family: 'TT-Commons-Pro-Medium', sans-serif;
}
.account-menu--mobile .account-menu__dropdown-nav .account-menu__icon-wrap {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(1, 69, 74, 0.06);
}
.account-menu--mobile .account-menu__dropdown-nav .account-menu__icon {
font-size: 20px;
color: var(--ruppert-account-teal);
}
.account-menu--mobile .account-menu__dropdown-nav .account-menu__link--signout {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid rgba(1, 69, 74, 0.08);
color: var(--ruppert-account-signout);
}
.account-menu--mobile .account-menu__dropdown-nav .account-menu__link--signout .account-menu__icon-wrap {
background: rgba(196, 92, 62, 0.1);
}
.account-menu--mobile .account-menu__dropdown-nav .account-menu__link--signout .account-menu__icon {
color: var(--ruppert-account-signout);
}
/* Dashboard grid cards */
.ruppert-account-dashboard {
width: 100%;
}
.account-menu--main {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 2vw, 20px);
}
.account-menu--main .account-menu__link,
.account-menu--main .account-menu__card {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 12px;
min-height: clamp(108px, 30vw, 148px);
padding: clamp(14px, 3vw, 24px);
border: 1px solid var(--ruppert-account-border);
border-radius: 16px;
background: var(--ruppert-account-card);
color: #1a1a1a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: clamp(14px, 1.5vw, 16px);
font-weight: 500;
line-height: 1.35;
text-decoration: none;
box-shadow: 0 1px 0 rgba(1, 69, 74, 0.04);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.account-menu--main .account-menu__link:hover,
.account-menu--main .account-menu__link:focus-visible {
border-color: rgba(1, 69, 74, 0.22);
box-shadow: 0 8px 24px rgba(1, 69, 74, 0.08);
color: var(--ruppert-account-teal);
transform: translateY(-2px);
}
.account-menu--main .account-menu__icon-wrap {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: clamp(44px, 5vw, 52px);
height: clamp(44px, 5vw, 52px);
border-radius: 12px;
background: rgba(1, 69, 74, 0.06);
}
.account-menu--main .account-menu__icon {
font-size: clamp(24px, 3vw, 28px);
color: #01454A;
}
.account-menu--main .account-menu__label {
flex: 1;
min-width: 0;
color: #6a8f93;
}
.account-menu--main .account-menu__link--signout {
color: var(--ruppert-account-signout);
}
.account-menu--main .account-menu__link--signout .account-menu__icon-wrap {
background: rgba(196, 92, 62, 0.1);
}
.account-menu--main .account-menu__link--signout .account-menu__icon {
color: var(--ruppert-account-signout);
}
.account-menu--main .account-menu__link--signout:hover,
.account-menu--main .account-menu__link--signout:focus-visible {
border-color: rgba(196, 92, 62, 0.3);
color: #a84a30;
}
/* Sub-page content card */
body.page-customer-account:not(#my-account) .ruppert-account__content,
body:has(.ruppert-account):not(#my-account) .ruppert-account__content {
padding: clamp(24px, 3vw, 40px);
border: 1px solid var(--ruppert-account-border);
border-radius: 18px;
background: #ffffff;
background: var(--ruppert-account-card, #ffffff);
box-shadow: 0 1px 0 rgba(1, 69, 74, 0.04);
}
body.page-customer-account:not(#my-account) .ruppert-account__content > p:first-child {
margin-bottom: 1.5rem;
color: #01454A;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 15px;
line-height: 1.6;
}
body.page-customer-account:not(#my-account) .ruppert-account__content .form-label {
color: #01454A;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 100%;
}
body.page-customer-account:not(#my-account) .ruppert-account__content .form-control {
border-color: #d5e5e3;
border-radius: 8px;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 100%;
color: #01454A;
}
body.page-customer-account:not(#my-account) .ruppert-account__content .form-control:focus {
border-color: #40807e;
box-shadow: 0 0 0 3px rgba(64, 128, 126, 0.15);
}
body.page-customer-account:not(#my-account) .ruppert-account__content .btn-primary {
background: var(--ruppert-account-teal);
border-color: var(--ruppert-account-teal);
font-family: 'TT-Rationalist-Medium', serif;
}
body.page-customer-account:not(#my-account) .ruppert-account__content .btn-primary:hover,
body.page-customer-account:not(#my-account) .ruppert-account__content .btn-primary:focus {
background: var(--ruppert-account-teal-dark);
border-color: var(--ruppert-account-teal-dark);
}
.ruppert-account__content p {
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 100%;
color: #01454A;
}
/* Tablet: keep 2-column dashboard grid */
@media (min-width: 576px) {
.account-menu--main .account-menu__link,
.account-menu--main .account-menu__card {
min-height: clamp(120px, 14vw, 148px);
}
}
/* Desktop: sidebar + 3-column dashboard, hide mobile nav & back on lg+ */
@media (min-width: 992px) {
.account-menu--mobile {
display: none;
}
.ruppert-account__back {
display: none;
}
.account-menu--main {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.account-menu--main .account-menu__link--signout {
display: none;
}
.ruppert-account__sidebar-col {
position: sticky;
top: calc(var(--header-height, 80px) + 16px);
}
}
/* Large desktops & 4K */
@media (min-width: 1400px) {
.ruppert-account {
max-width: 100%;
padding-left: clamp(40px, 4vw, 80px);
padding-right: clamp(40px, 4vw, 80px);
}
.account-menu--main {
gap: 24px;
}
}
@media (min-width: 1920px) {
.ruppert-account {
max-width: 100%;
}
}
@media (max-width: 991.98px) {
.ruppert-account {
padding-top: 20px;
padding-bottom: 48px;
}
}
@media (max-width: 575.98px) {
.account-menu--main .account-menu__link,
.account-menu--main .account-menu__card {
min-height: clamp(100px, 28vw, 128px);
padding: 14px 12px;
border-radius: 12px;
}
.account-menu--main .account-menu__icon-wrap {
width: 40px;
height: 40px;
}
.account-menu--main .account-menu__icon {
font-size: 22px;
}
body.page-customer-account:not(#my-account) .ruppert-account__content,
body:has(.ruppert-account):not(#my-account) .ruppert-account__content {
padding: 20px 16px;
border-radius: 14px;
}
}
/* ==========================================================================
Order detail (account) – matches order confirmation layout
========================================================================== */
body#order-detail .ruppert-account__content {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
body#order-detail .ruppert-account__header {
display: none;
}
.ruppert-order-detail {
width: 100%;
}
.ruppert-order-detail__status {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
padding: 20px 24px;
border: 1px solid #bed8d5;
border-radius: 12px;
background: #ffffff;
}
.ruppert-order-detail__status-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: #01454a;
color: #ffffff;
}
.ruppert-order-detail__status-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 8px;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: clamp(18px, 2.5vw, 22px);
font-weight: 500;
line-height: 1.35;
}
.ruppert-order-detail__status-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
color: #ffffff;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-order-detail__status-text {
margin: 0;
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-order-detail__card {
margin-bottom: 0;
}
.ruppert-order-detail__date {
color: #40807e;
}
.ruppert-order-detail__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
margin: 0 0 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(1, 69, 74, 0.08);
}
.ruppert-order-detail__action-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
text-decoration: underline;
text-underline-offset: 2px;
}
.ruppert-order-detail__action-link:hover,
.ruppert-order-detail__action-link:focus-visible {
color: #02393d;
}
.ruppert-order-detail__action-link .material-icons {
font-size: 18px;
}
.ruppert-order-detail__reorder {
min-height: 44px;
padding: 0 24px;
border: 0;
border-radius: 8px;
background: #01454a;
font-family: 'TT-Rationalist-Medium', serif;
font-size: 15px;
}
.ruppert-order-detail__reorder:hover,
.ruppert-order-detail__reorder:focus {
background: #02393d;
}
.ruppert-order-detail__timeline {
display: flex;
flex-direction: column;
gap: 12px;
}
.ruppert-order-detail__timeline-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border: 1px solid rgba(1, 69, 74, 0.08);
border-radius: 10px;
background: #faf8f4;
}
.ruppert-order-detail__timeline-date {
color: #4a5565;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 20px;
}
.ruppert-order-detail__timeline-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 8px;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 13px;
line-height: 18px;
}
.ruppert-order-detail__timeline-badge--bright {
background-color: #F07855 !important;
color: #FCF6ED !important;
}
.ruppert-order-detail__timeline-badge--dark {
background-color: #01454A !important;
color: #FCF6ED !important;
}
.ruppert-order-detail__tracking .order-carriers {
margin: 0;
}
.ruppert-order-detail__tracking .order-carriers .h3,
.ruppert-order-detail__tracking #order_carriers_heading {
display: none;
}
.ruppert-order-detail__tracking .grid-table {
border: 0;
}
.ruppert-order-detail__tracking .grid-table__header {
background: #faf8f4;
border-radius: 8px 8px 0 0;
}
.ruppert-order-detail__tracking .grid-table__cell {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
}
.ruppert-order-detail__tracking .grid-table__header .grid-table__cell {
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-weight: 500;
}
.ruppert-order-detail__messages {
display: flex;
flex-direction: column;
gap: 12px;
}
.ruppert-order-detail__message {
padding: 14px 16px;
border: 1px solid rgba(1, 69, 74, 0.08);
border-radius: 10px;
background: #faf8f4;
}
.ruppert-order-detail__message-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.ruppert-order-detail__message-name {
margin: 0;
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.ruppert-order-detail__message-date {
margin: 0;
color: #40807e;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 13px;
line-height: 18px;
}
.ruppert-order-detail__message-content {
color: #1a1a1a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-order-detail__message-intro {
margin: 0 0 16px;
color: #4a5565;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
line-height: 22px;
}
.ruppert-order-detail__message-form .form-label {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
}
.ruppert-order-detail__message-form .form-control,
.ruppert-order-detail__message-form .form-select {
border-color: #d5e5e3;
border-radius: 8px;
}
.ruppert-order-detail__message-form .form-control:focus,
.ruppert-order-detail__message-form .form-select:focus {
border-color: #40807e;
box-shadow: 0 0 0 3px rgba(64, 128, 126, 0.15);
}
.ruppert-order-detail__message-actions {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.ruppert-order-detail__submit {
min-height: 44px;
padding: 0 24px;
border: 0;
border-radius: 8px;
background: #01454a;
font-family: 'TT-Rationalist-Medium', serif;
}
.ruppert-order-detail__submit:hover,
.ruppert-order-detail__submit:focus {
background: #02393d;
}
.ruppert-order-detail__products-return .grid-table {
border: 0;
}
.ruppert-order-detail__products-return .grid-table__header {
background: #faf8f4;
}
.ruppert-order-detail__products-return .grid-table__cell {
color: #01454a;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
font-size: 14px;
}
.ruppert-order-detail__products-return .order-product__name {
color: #01454a;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
text-decoration: none;
}
.ruppert-order-detail__products-return .order-product__name:hover {
text-decoration: underline;
}
.ruppert-order-detail__products-return .btn-primary {
background: #01454a;
border-color: #01454a;
}
@media (max-width: 767.98px) {
.ruppert-order-detail__status {
flex-direction: column;
padding: 16px;
}
.ruppert-order-detail__actions {
flex-direction: column;
align-items: stretch;
}
.ruppert-order-detail__reorder {
width: 100%;
}
.ruppert-order-detail__timeline-row {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 575.98px) {
body#order-detail .ruppert-account__content {
padding: 0;
}
.ruppert-order-detail__card {
padding: 20px 16px 24px;
}
}
/* Order history status badges – theme colors (no inline BO state color) */
.order-history__status {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 8px;
border: 0;
font-family: 'TT-Commons-Pro-Medium', sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 400;
white-space: normal;
}
.order-history__status--bright {
background-color: #F07855 !important;
color: #FCF6ED !important;
}
.order-history__status--dark {
background-color: #01454A !important;
color: #FCF6ED !important;
}