/* Every Roham header design: top row, logo, search, account and cart, the nav row and its links, and the colours chosen in the panel. */
.roham-theme .page-header {
    background: var(--ds-color-surface);
    box-shadow: 0 1px 0 var(--ds-color-border);
    position: relative;
    top: auto;
    z-index: 1100;
    overflow: visible !important;
    width: 100%;
    transition: box-shadow .2s ease, padding .2s ease;
}
.roham-theme .page-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}
body.roham-header-scrolled .page-header .top-header-wrapper {
    padding: 10px 0 8px !important;
}
body.roham-header-scrolled .page-header .site-brand,
body.roham-header-scrolled .page-header .site-brand a,
body.roham-header-scrolled .page-header .site-brand img {
    width: auto !important;
    height: 44px !important;
    max-height: 44px !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    transform: none !important;
}
body.roham-header-scrolled .page-header .search-box input[type="text"],
body.roham-header-scrolled .page-header .search-box input[type="search"] {
    height: 44px;
}
.roham-theme .page-header .container {
    overflow: visible !important;
}
.roham-theme .page-header .top-header-wrapper {
    overflow: visible !important;
    position: relative;
    z-index: 1200;
}
.roham-theme .top-header-wrapper {
    border-bottom: none;
    padding: 12px 0 10px !important;
}
.roham-theme .top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.roham-theme .site-brand--search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.roham-theme .site-brand {
    flex: 0 0 auto;
    flex-shrink: 0;
    line-height: 0;
    margin-left: 0 !important;
    justify-content: flex-start !important;
}
.roham-theme .site-brand a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.roham-theme .site-brand img,
.roham-theme .site-brand img.roham-site-logo {
    display: block;
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    flex-shrink: 0;
    transform: none !important;
}
.roham-theme .roham-nav-row {
    border-top: 1px solid #f0f0f1;
    position: relative;
    z-index: 1000; /* below top-header / mini-cart so border doesn't cut the dropdown */
}
.roham-theme .roham-nav-row-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--ds-header-nav-h);
    height: var(--ds-header-nav-h);
    position: relative;
}
.roham-theme .roham-nav-row .roham-main-nav {
    flex: 1;
    min-width: 0;
}
.roham-theme .roham-nav-delivery {
    flex: 0 1 auto;
    max-width: min(260px, 30%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    margin-right: auto;
    height: 100%;
}
.roham-theme .user-items {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1200;
    overflow: visible !important;
}
.roham-theme .user-item {
    margin-right: 0 !important;
}
.roham-theme .user-item.account > a:not(.roham-account-btn) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
    border: 1px solid #e0e0e2 !important;
    border-radius: 8px !important;
    font-size: 12px;
    font-weight: 500;
    color: #0c0c0c !important;
    text-decoration: none;
    background: #fff !important;
    height: 40px;
    box-sizing: border-box;
}
.roham-theme .user-item.account > a:not(.roham-account-btn) .icon,
.roham-theme .user-item.account > a:not(.roham-account-btn) i {
    font-size: 18px;
    color: #0c0c0c;
}
.roham-theme .user-item.cart {
    border-right: 1px solid #e0e0e2 !important;
    margin-right: 12px !important;
    padding-right: 12px;
    position: relative;
    z-index: 1300;
}
.roham-theme .user-item.cart > a.dropdown--btn,
.roham-theme .user-item.cart > a.roham-minicart-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px !important;
    background: transparent !important;
    color: #424750 !important;
    border-radius: 8px;
    position: relative;
    font-size: 0;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    text-decoration: none !important;
}
.roham-theme .user-item.cart > a.dropdown--btn:hover,
.roham-theme .user-item.cart.is-open > a.dropdown--btn,
.roham-theme .user-item.cart.open > a.dropdown--btn {
    background: #f0f0f1 !important;
}
.roham-theme .user-item.cart > a.dropdown--btn i {
    font-size: 24px !important;
    margin: 0 !important;
    color: #424750 !important;
    line-height: 1;
}
.roham-theme .user-item.cart .cart-count {
    position: absolute !important;
    top: 2px !important;
    left: 0 !important;
    right: auto !important;
    background: var(--ds-color-primary, #ef394e) !important;
    color: #fff !important;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
    z-index: 2;
}
.roham-theme header.page-header .top-header-wrapper .top-header .user-items .user-item.cart .cart-items-wrapper,
.roham-theme .user-item.cart .roham-minicart.cart-items-wrapper,
.roham-theme .user-item.cart .roham-minicart {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    width: 400px !important;
    max-width: min(400px, calc(100vw - 24px));
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #e0e0e2;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .12) !important;
    z-index: 1400 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
.roham-theme .user-item.cart:hover .roham-minicart,
.roham-theme .user-item.cart:hover .cart-items-wrapper,
.roham-theme .user-item.cart.is-open .roham-minicart,
.roham-theme .user-item.cart.is-open .cart-items-wrapper,
.roham-theme .user-item.cart.open .roham-minicart,
.roham-theme .user-item.cart.open .cart-items-wrapper,
.roham-theme header.page-header .top-header-wrapper .top-header .user-items .user-item.cart:hover .cart-items-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0);
}
@media (max-width: 991.98px) {
.roham-theme .user-item.cart .roham-minicart,
    .roham-theme .user-item.cart .cart-items-wrapper {
        display: none !important;
    }
}
.roham-theme .user-item.account {
    position: relative;
    z-index: 1210;
}
.roham-theme header.page-header .top-header-wrapper .top-header .user-items .user-item.account > a.roham-account-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    padding: 6px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #424750 !important;
    text-decoration: none;
    transition: background .15s ease;
    line-height: 1 !important;
    height: 40px !important;
    width: auto;
    position: relative;
    z-index: 2;
}
.roham-theme .user-item.account .roham-account-btn:hover,
.roham-theme .user-item.account.is-open .roham-account-btn,
.roham-theme .user-item.account.open .roham-account-btn {
    border-color: transparent !important;
    box-shadow: none !important;
    background: #f0f0f1 !important;
}
.roham-theme .roham-account-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #424750;
    font-size: 22px;
}
.roham-theme .roham-account-caret {
    font-size: 16px;
    color: #81858b;
    transition: transform .18s ease;
    margin-right: -2px;
}
.roham-theme .user-item.account.is-open .roham-account-caret,
.roham-theme .user-item.account.open .roham-account-caret {
    transform: rotate(180deg);
}
.roham-theme .user-item.account .dropdown--wrapper.roham-account-menu,
.roham-theme .roham-account-menu.dropdown--wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: 264px;
    min-width: 0;
    max-width: none;
    padding: 6px 0 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible !important;
    max-height: none !important;
    z-index: 1200;
    list-style: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}
.roham-theme .user-item.account.is-open .roham-account-menu,
.roham-theme .user-item.account.open .roham-account-menu,
.roham-theme .user-item.account:hover .roham-account-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.roham-theme .roham-account-panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .08), 0 4px 20px rgba(0, 0, 0, .1);
    border: 1px solid #e0e0e2;
    overflow: hidden;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    scrollbar-width: none;
    animation: roham-account-in .14s ease;
}
.roham-theme .roham-account-panel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.roham-theme .roham-account-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f1;
    background: #fff;
}
.roham-theme .roham-account-head:hover .roham-account-head-meta span {
    color: #0f8fa3;
}
.roham-theme .roham-account-head-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f1;
}
.roham-theme .roham-account-head-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.roham-theme .roham-account-head-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.roham-theme .roham-account-head-meta strong {
    font-size: 13px;
    color: #0c0c0c;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.roham-theme .roham-account-head-meta span {
    font-size: 11px;
    color: var(--ds-color-secondary, #19bfd3);
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-weight: 500;
    transition: color .15s;
    line-height: 1.3;
}
.roham-theme .roham-account-group {
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f1;
}
.roham-theme .roham-account-group--last {
    border-bottom: none;
    padding-bottom: 4px;
}
.roham-theme .roham-account-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 7px 12px !important;
    color: #3f4064 !important;
    text-decoration: none !important;
    font-size: 12px;
    line-height: 1.35;
    transition: background .12s ease, color .12s ease;
    margin: 0 !important;
    border-radius: 0;
    font-weight: 500;
}
.roham-theme .roham-account-item i {
    font-size: 18px;
    color: #81858b;
    width: 20px;
    text-align: center;
    margin: 0 !important;
    flex-shrink: 0;
    transition: color .12s ease;
}
.roham-theme .roham-account-item:hover {
    background: #f5f5f5;
    color: #0c0c0c !important;
}
.roham-theme .roham-account-item:hover i {
    color: #424750;
}
.roham-theme .roham-account-logout {
    color: var(--ds-color-primary, #ef394e) !important;
}
.roham-theme .roham-account-logout i {
    color: var(--ds-color-primary, #ef394e);
}
.roham-theme .roham-account-logout:hover {
    background: var(--ds-color-primary-soft, #fff5f6);
    color: var(--ds-color-primary, #ef394e) !important;
}
.roham-theme .roham-account-logout:hover i {
    color: var(--ds-color-primary, #ef394e);
}
.roham-theme header.page-header nav.main-menu {
    overflow: visible !important;
    position: static !important;
    z-index: 1050;
    flex: 1;
    min-width: 0;
}
.roham-theme header.page-header nav.main-menu > ul,
.roham-theme .roham-nav-list {
    display: flex !important;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow: visible !important;
    position: static !important;
    padding: 0;
    margin: 0;
    list-style: none;
    width: auto;
    max-width: 100%;
    height: var(--ds-header-nav-h);
}
.roham-theme header.page-header nav.main-menu > ul > li {
    flex: 0 0 auto;
    margin-left: 2px;
    margin-right: 0;
    position: static !important;
    display: flex;
    align-items: stretch;
    height: 100%;
}
.roham-theme header.page-header nav.main-menu > ul > li > a {
    display: inline-flex !important;
    align-items: center;
    align-self: stretch;
    gap: 6px;
    padding: 0 10px;
    font-size: 12px;
    color: #62666d !important;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1 !important;
    font-weight: 400;
    height: 100%;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
    margin: 0 !important;
}
/* A menu link with children opens its list under itself. The rule above
   makes every item static (!important) so the mega menu can span the row;
   without !important here the list was anchored to the whole row and
   opened at its far end. */
.roham-theme header.page-header nav.main-menu > ul > li.dropdown-list {
    position: relative !important;
}
.roham-theme header.page-header nav.main-menu > ul > li.dropdown-list > ul {
    z-index: 1070 !important;
}
@media (min-width: 992px) {
html.roham-pdp-desk-nav-compact .page-header .roham-nav-row,
    html.roham-pdp-desk-tabs-stuck .page-header .roham-nav-row {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
html.roham-pdp-desk-nav-compact .page-header.is-fixed,
    html.roham-pdp-desk-tabs-stuck .page-header.is-fixed {
        box-shadow: none;
        border-bottom: 1px solid #f0f0f1;
    }
}
.roham-theme header.page-header nav.main-menu > ul > li > a.is-active {
    color: var(--ds-color-primary, #ef394e) !important;
    font-weight: 700;
}

/* ------------------------------------------------------------------
   Colours chosen in Themes > Header (dark, brand or custom). Light, the
   default, leaves everything above exactly as it was.
   ------------------------------------------------------------------ */
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]){
    --h-bg:var(--chrome-h-bg,#fff);--h-text:var(--chrome-h-text,#424750);--h-accent:var(--chrome-h-accent,var(--ds-color-primary));
    --h-nav-bg:var(--chrome-h-nav-bg,var(--h-bg));--h-nav-text:var(--chrome-h-nav-text,var(--h-text));--h-border:var(--chrome-h-border,#f0f0f1);
    --h-soft:color-mix(in srgb,var(--h-text) 12%,var(--h-bg));
    background:var(--h-bg);color:var(--h-text)}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .top-header-wrapper{background:var(--h-bg)}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-nav-row{background:var(--h-nav-bg);border-top-color:var(--h-border);border-bottom:1px solid var(--h-border)}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) nav.main-menu>ul>li>a,
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-cat-trigger-link,
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-nav-delivery .roham-delivery-trigger{color:var(--h-nav-text)!important}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) nav.main-menu>ul>li>a:hover,
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) nav.main-menu>ul>li>a.is-active,
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-cat-trigger:hover>.roham-cat-trigger-link{color:var(--h-accent)!important;border-bottom-color:var(--h-accent)!important}
.roham-theme header.chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .top-header-wrapper .top-header .search-box form{background:var(--h-soft)!important}
.roham-theme header.chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .top-header-wrapper .top-header .search-box form input{color:var(--h-text)!important}
.roham-theme header.chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .top-header-wrapper .top-header .search-box form input::placeholder{color:color-mix(in srgb,var(--h-text) 65%,transparent)!important}
.roham-theme header.chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .top-header-wrapper .top-header .search-box form i{color:color-mix(in srgb,var(--h-text) 70%,transparent)!important}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .user-item>a,
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .user-item>a i,
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .user-item.cart>a.dropdown--btn i,
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-account-avatar,
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-site-logo-text{color:var(--h-text)!important}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .user-item.account>a{border-color:var(--h-border)!important;background:transparent!important}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .user-item.cart{border-color:var(--h-border)!important}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .user-item.cart .cart-count{background:var(--h-accent)!important}
.roham-theme .chrome-header[data-chrome-scheme]:not([data-chrome-scheme="light"]) .roham-delivery-trigger *{color:inherit!important}