/* ==================================================== authors: YC & AS === */
/* === Global Stylesheet ==================================================== */
/* ========================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font: inherit;
    font-size: 100%;
    font-weight: normal;
}
html {
    height: 100%;
    letter-spacing: 0.025em;

    -webkit-font-smoothing: subpixel-antialiased;
}
::-moz-selection {
    background: #ccc;
}
::selection {
    background: #ccc;
}
::-moz-selection {
    background: #ccc;
}

/* === Tables =============================================================== */
table {
    empty-cells: show;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 100%;
    border: 0 none;
}
caption,
th,
td {
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}

/* === Colour + Background Transition ======================================= */
.imageslider a,
.slide-left,
.slide-right {
    -webkit-transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
            transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* ========================================================================== */
/* === Layout =============================================================== */
/* ========================================================================== */

.wrapper {
    overflow: hidden;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    background: #fff;
}

.page {
    width: 980px;
    margin: 0 auto;
    padding: 0 0 40px;
    -webkit-transition: margin 250ms ease-out, padding 250ms ease-out;
            transition: margin 250ms ease-out, padding 250ms ease-out;
    text-align: left;
}
.main {
    float: left;
    width: 100%;
    min-height: 60vh;
    text-align: left;
    background: transparent;
}
.breadcrumbs {
    min-height: 18px;
    margin: 15px 0 20px;
    line-height: 18px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
}
.breadcrumbs li {
    float: left;
}
.breadcrumbs a {
    float: left;
}
.breadcrumbs span {
    position: relative;
    top: -5px;
    float: left;
    width: 16px;
    font-size: 16px;
    line-height: inherit;
    text-align: center;
}
.breadcrumbs a:hover,
.breadcrumbs .last a {
    color: #000;
}
.split-page {
    clear: both;
    overflow: hidden;
}
.split-page.space-above {
    margin-top: 30px;
}
.split-page span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    border-bottom: 1px solid #ededed;
}
.split-page.light-grey span {
    border-bottom: 1px solid #f2f2f2;
}
/* Stop this from clashing with navigation */
.page i {
    display: block;
}

.map img {
    max-width: 100%;
}

/* ========================================================================== */
/* Global Styles ============================================================ */
/* ========================================================================== */

/* === Sticky Pagination ==================================================== */
.pagination {
    -webkit-transition: top 250ms ease;
            transition: top 250ms ease;
}
.pagination-sticky {
    float: right;
}
.pagination-stick {
    position: fixed;
    top: 150px;
    right: 0;
}
.is-header-collapsed .pagination-stick {
    top: 80px;
}


/* === Forms ================================================================ */
form {
    display: block;
}
fieldset {
    border: 0 none;
}
legend {
    display: none;
}
input,
select,
textarea {
    margin: 0;
    font: 14px "FB", Arial, Helvetica, sans-serif;
    vertical-align: middle;
    color: #333;
    border: 1px solid #ccc;
}
input {
    min-height: 32px;
    padding: 0 0 0 8px;
    vertical-align: bottom;
    border-radius: 0;
}
button,
.button {
    font: 14px "FB", Arial, Helvetica, sans-serif;
    cursor: pointer;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    border: 0 none;
}
button {
    padding: 0 22px;
    border-radius: 0;
    background: #666;
}
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
input.input-text,
textarea {
    border: 1px solid #ccc;
    background: #fff;
}
input.input-text,
textarea {
    padding: 0 0 0 8px;
}
label {
    display: block;
    cursor: default;
    text-transform: uppercase;
}
textarea {
    overflow: auto;
    resize: vertical;
}
textarea.default-value {
    color: #ddd;
}
input.radio,
input.checkbox {
    margin-top: 2px;
    margin-right: 3px;
    font-size: 11px !important;
    vertical-align: top;
}
input.radio {
    font-size: 10px !important;
}
button.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
button.button {
    -webkit-border-fit: lines;
}
button.button {
    cursor: pointer;
    vertical-align: middle;
}
button.disabled {
    right: 0 !important;
    bottom: 0 !important;
    cursor: default !important;
}
button.disabled span {
    cursor: default !important;
    color: #bbb !important;
}
.buttons-set {
    clear: both;
}

/* === General style for button containing block ============================ */
.buttons-set p.back-link {
    float: left;
    margin: 0;
    padding: 2px 15px 0 0;
    text-align: right;
}
.buttons-set2 {
    clear: both;
    margin: 5px 0 0;
    padding: 5px;
    text-align: right;
    background: #ededed;
}
select {
    position: absolute;
    left: -9999px;
}

/* === Form Validation ====================================================== */
.input-box {
    float: left;
}
.input-box-inline {
    display: inline-block;
}
.validation-advice:before {
    position: absolute;
    z-index: 1;
    top: -8px;
    left: 29px;
    width: 0;
    height: 0;
    content: "";
    border-width: 0 9px 8px 9px;
    border-style: solid;
    border-color: transparent transparent #191919 transparent;
}
.validation-advice {
    position: absolute;
    z-index: 1;
    margin: 8px 0 0;
    padding: 12px 8px;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    color: #fff;
    background: #191919;
}
.select-wrap .validation-advice {
    top: 35px;
}
.product-options .validation-error .options-list,
.validation-failed {
    border: 1px solid #b44!important;
}
.required em {
    margin-left: 4px;
}
p.required {
    padding: 16px 0 0;
    font-size: 12px;
    text-align: left;
    letter-spacing: 0.025em;
    color: #999;
}

/* ========================================================================== */
/* === Global Messages ====================================================== */
/* ========================================================================== */

.messages {
    overflow: hidden;
    width: 100%;
    margin: 10px 0 20px;
}
.messages a {
    text-decoration: underline;
}
.messages a:hover {
    text-decoration: none;
}
p.error-msg {
    margin: 10px 0;
    padding: 10px;
    font-size: 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
}
.global-site-notice.noscript {
    padding: 10px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: #b44;
}

/* ========================================================================== */
/* === Error Messages ======================================================= */
/* ========================================================================== */

.messages li.success-msg,
.messages li.error-msg {
    display: block;
    padding: 10px 0;
    text-align: center;
    letter-spacing: 0.1em;
    color: #fff;
}
.messages li.success-msg span,
.messages li.error-msg span {
    font-size: 14px;
    line-height: 24px;
}
.messages li.success-msg a {
    color: #fff;
}

.messages li.error-msg {
    background: #b44;
}

.messages li.success-msg {
    background: #427d4e;
}

/* ========================================================================== */
/* === Page Headings ======================================================== */
/* ========================================================================== */
.page-title h1,
.std h1 {
    margin: 22px 0 18px;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.category-description {
    width: 100%;
    margin: 0 0 10px;
    text-align: center;
    letter-spacing: 0.01em;
    text-transform: none;
}
.category-description p {
    width: 610px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 20px;
}

.category-description a {
    cursor: pointer;
    text-decoration: underline;
}

/* ============================================================================================== */
/* === Keep me signed in functionality ========================================================== */
/* ============================================================================================== */

.keep-me-logged-in-container {
    display: block;
    clear: both;
    overflow: hidden;
    width: 100%;
}
.keep-me-logged-in-container label {
    float: left;
    width: 100%;
    padding: 0 0 8px;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.1em;
    color: #333;
}
.keep-me-logged-in-container label {
    padding: 0 0 12px;
    font-size: 14px;
    color: #666;
}
.keep-me-logged-in-container input[type="checkbox"] {
    display: none;
}
.keep-me-logged-in-container input[type="checkbox"] + label {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 0 25px;
    font-size: 12px;
    line-height: 25px;
    cursor: pointer;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #333;
}
.keep-me-logged-in-container input[type="checkbox"] + label i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: -3px 10px 0 0;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #333;
    background: white;
}
.keep-me-logged-in-container input[type="checkbox"] + label i {
    position: static;
    float: none;
}
.keep-me-logged-in-container input[type="checkbox"]:checked + label i {
    background: #333;
}

/* ========================================================================== */
/* === Links ================================================================ */
/* ========================================================================== */

ul.links,
ul.links li {
    display: inline;
}
ul.links li .separator {
    margin: 0 2px 0 5px;
    font-size: 10px;
    color: #8f8f8f;
}
ul.links li.last .separator {
    display: none;
}

/* ========================================================================== */
/* === Site-wide promotion containers ======================================= */
/* ========================================================================== */

.promotion-container {
    position: relative;
    z-index: 1;
    float: left;
    width: 100%;
    padding: 10px 0;
    font-size: 0;
    line-height: 0;
}
.promo-1,
.promo-3,
.promo-5 {
    float: left;
    width: 980px;
    line-height: 0;
}
.promo-3 {
    margin: 0 1px;
}
.promo-1 div,
.promo-3 div,
.promo-5 div {
    float: left;
    text-align: center;
}
.promo-1 div {
    width: 980px;
}
.promo-3 div {
    width: 326px;
}
.promo-5 div {
    width: 196px;
}
.promotion-container a,
.promotion-container img {
    margin: 0 auto;
}

/* ========================================================================== */
/* === Forgotten Password Popup ============================================= */
/* ========================================================================== */

.password-container {
    display: none;
    width: 375px;
    padding: 40px;
    text-align: left;
    background: #fff;
}
.password-container.success {
    padding: 40px;
}
.password-container .input-box {
    position: relative;
    float: left;
    width: 100%;
    margin: 0 0 20px;
}
.password-container input {
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: -webkit-calc(100% - 70px);
    width:         calc(100% - 70px);
}
.password-container .validation-advice {
    top: 72px;
    width: 359px;
}
.password-container .message-success,
.password-container span {
    display: block;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 22px;
    color: #999;
}
.password-container .message-success.empty {
    margin: 0;
}
.password-container .message-fail a {
    cursor: pointer;
    text-decoration: underline;
    color: #900;
}
.password-container .required {
    float: left;
    padding: 0;
    line-height: 36px;
}
.password-container .input-box .required {
    width: 70px;
}
.password-container button {
    float: right;
    width: 110px;
    height: 35px;
    color: #fff;
    background-color: #999;
}
.password-container .buttons-set {
    height: 36px;
}
.password-container .button.close {
    display: inline-block;
    padding: 0 40px;
    line-height: 40px;
    background: #999;
}
.password-container .button:hover {
    color: #fff;
    background: #333;
}
.password-container .message {
    margin: 0 0 20px;
    line-height: 20px;
}
.password-container h3 {
    padding: 0 0 24px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.password-container .ajax-overlay {
    display: none;
    background-position: center;
}

/* ============================================================================ */
/* === Marketing Preferences Form ============================================= */
/* ============================================================================ */

.marketing-preferences .opt-in-marketing-header {
    margin: 20px 0 0;
}
.marketing-preferences .privacy-cms {
    width: 92%;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #333;
}
.marketing-preferences .privacy-cms a {
    text-decoration: underline;
}
.marketing-preferences input[type="checkbox"] {
    display: none;
}
.marketing-preferences input[type="checkbox"] + label,
.marketing-preferences .loyalty-label {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #666;
    text-shadow: none;
}

.marketing-preferences .marketing-label i {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: -3px 10px 0 0;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #333;
    border-radius: 50%;
    background: white;
}
.marketing-preferences input[type="checkbox"] + label i,
.marketing-prferences .loyalty-label i,
.marketing-preferences .loyalty-label i {
    float: left;
    width: 12px;
    height: 12px;
    margin: 2px 20px 0 0;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #333;
    border-radius: 0;
    background: white;
}
.marketing-preferences .loyalty-label input[type="checkbox"]:checked + i {
    background: #333;
}

/* ========================================================================== */
/* === Vertical Pagination ================================================== */
/* ========================================================================== */

.content-wrap {
    float: left;
    width: 930px;
}
.options-pagination-wrapper {
    float: right;
}
.options-pagination-wrapper-bottom {
    display: inline-block;
    margin-top: 10px;
    margin-left: -60px;
}
.catalogsearch-result-index .options-pagination-wrapper {
    float: none;
    text-align: center;
}
.pagination {
    float: left;
    width: 50px;
}
.pagination-horizontal {
    float: left;
    margin-left: 20px;
}
.pagination-horizontal .pagination {
    width: auto;
}
.pagination li {
    float: right;
    clear: right;
}
.pagination-horizontal .pagination li {
    display: inline-block;
    float: none;
    clear: none;
}
.pagination li i {
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    margin-bottom: 27px;
    cursor: pointer;
    border-radius: 100%;
    background: #8e8e8e;
}
.pagination li i.all {
    width: 11px;
    height: 11px;
    border: 2px solid #333;
    background: #333;
}
.pagination .icon {
    width: 31px;
    height: 32px;
    margin: 0;
    border-radius: 0;
    background: url("../images/pagination.png") 0 0 no-repeat;
}
.pagination .icon:hover {
    background-position: 0 -31px;
}
.pagination .products-number {
    min-width: 31px;
    max-width: 35px;
    margin-bottom: 15px;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.pagination-horizontal .pagination .products-number {
    position: fixed;
    /*display: none;*/
    margin-top: -40px;
    margin-left: 20px;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.pagination-pages {
    min-width: 31px;
    max-width: 35px;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.1em;
    color: #999;
}
.pagination-pages a:hover {
    color: #333;
}
.pagination-horizontal .pagination-pages {
    min-width: none;
    max-width: none;
}
@media only screen and (max-device-width: 768px) {
    .pagination-pages {
        font-size: 14px;
    }
}
.pagination-pages .number {
    line-height: 35px;
    cursor: pointer;
}
.pagination-horizontal .pagination-pages .js-page {
    display: inline-block;
    width: 4px;
    line-height: 19px;
}
.pagination-horizontal .pagination-pages .number {
    display: inline-block;
    width: 35px;
    line-height: 19px;
}
.pagination-horizontal .pagination-pages .number a {
    display: block;
    font-size: 15px;
}
.pagination-pages .js-active a,
.pagination-pages .js-active a,
.pagination-horizontal .pagination-pages .number a:hover {
    font-family: FH;
    color: #333;
}

.pager {
    margin-bottom: 10px;
    font-family: "ico";
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    color: #999;
}
.pagination-horizontal .pager {
    width: 35px;
    margin-bottom: 0;
    line-height: 19px;
}
.pager:hover {
    color: #666;
}
.pager.prev:before {
    content: "\e027";
}
.pagination-horizontal .prev:before {
    font-size: 16px;
    content: "\e032";
}
.pager.next {
    margin-top: 10px;
    margin-bottom: 15px;
}
.pagination-horizontal .pager.next {
    margin: 0;
}
.pager.next:before {
    content: "\e02a";
}
.pagination-horizontal .pager.next:before {
    content: "\e031";
}
.pagination-horizontal .pagination .js-top {
    position: fixed;
    margin-top: 0;
    margin-left: 20px;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.pagination-horizontal .pagination .js-top.products-number {
    margin-top: 40px;
}
.view-all {
    display: inline-block;
    padding-right: 4px;
    font-size: 14px;
    line-height: 19px;
    white-space: nowrap;
}
.pagination-vertical .view-all {
    min-width: 31px;
    max-width: 35px;
    margin-bottom: 20px;
    padding: 0;
}
.view-all a {
    font-size: 12px;
    text-decoration: underline;
}
.pagination-horizontal .bottom-pager,
.pagination-horizontal .pagination .products-number,
.pagination-horizontal .pagination .js-top {
    display: none;
}
.pagination-horizontal.show-top .pagination .products-number,
.pagination-horizontal.show-top .pagination .js-top {
    right: 0;
    display: block;
}


/* ========================================================================== */
/* === Sidetab ============================================================== */
/* ========================================================================== */
.sidetab {
    position: fixed;
    z-index: 2;
    top: 300px;
    right: 0;
    width: 60px;
    text-align: right;
}
.sidetab .sidetab-state {
    display: none;
}
.sidetab .sidetab-collapsed {
    position: relative;
    width: 60px;
    height: 203px;
    cursor: pointer;
}
.sidetab .sidetab-expanded {
    position: relative;
    width: 384px;
    height: 203px;
}
.sidetab img {
    display: block;
}
.sidetab .bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}
.sidetab .cta {
    position: absolute;
    z-index: 1;
    /*     bottom: 10px;
    left: 50%; */
    display: block;
    background: url(../images/px-clear.gif);
}
.sidetab .close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    padding: 7px;
    font-family: "ico";
    font-size: 20px;
    color: #fff;
    background: url(../images/px-clear.gif);
}
.sidetab .close:after {
    content: "\e026";
}
.sidetab .close span {
    display: none;
}

/* ========================================================================== */
/* === Clears =============================================================== */
/* ========================================================================== */
.clr {
    clear: both;
}
.clr-lft {
    clear: left;
}
.clr-rgt {
    clear: right;
}
.clr-float:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: "";
}
* html .clr-float {
    height: 1%;
}
.clr-float {
    display: inline-block;
}
.clr-float {
    display: block;
}

/* ========================================================================== */
/* === Generic Floats ======================================================= */
/* ========================================================================== */

.lft {
    float: left;
}
.rgt {
    float: right;
}

/* ========================================================================== */
/* === Product Information ================================================== */
/* ========================================================================== */

.price-box {
    color: #000;
}
.price-box .old-price {
    display: inline;
}
.old-price {
    display: inline;
    margin-right: 5px;
    text-decoration: line-through;
    color: #999;
}
.special-price {
    display: inline;
    color: #900;
}
.special-price .discount {
    font-size: 70%;
}


/* ========================================================================== */
/* === Global Styles ======================================================== */
/* ========================================================================== */

.product-overlay a,
.brand a {
    color: #333;
}
.product-overlay a:hover,
.brand a:hover {
    color: #000;
}

.brand {
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ajax-overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8) url("../images/loading.gif") no-repeat;
    background-position: center 130px;
}

/* ========================================================================== */
/* === Fluid Images ========================================================= */
/* ========================================================================== */
.brand-container img {
    max-width: 100%;
}
.content-stream-wrap .main-container img,
.content-stream-wrap .image img,
.content-stream-wrap .img-contain img {
    float: left;
    max-width: 100%;
}
.carousel-container .promo-content img {
    max-width: 100%;
}
.secondary-nav .restaurants img,
.secondary-nav .stores img {
    max-width: 100%;
}
.stores-list li img,
.store-event img {
    max-width: 100%;
}
.restaurants-list li img,
.restaurants li img {
    max-width: 100%;
}
.about-restaurant-image img {
    max-width: 100%;
}
.dining-image {
    max-width: 100%;
}
.booking-feature .featured-image {
    width: 658px;
}
.category-image img {
    max-width: 100%;
}

/* ========================================================================== */
/* === Switch Websites ====================================================== */
/* ========================================================================== */

/* ==== Secondary Navigation Dropdown ======================================= */
.navigation-popup.website-selector {
    left: 668px;
    width: 312px;
}
.website-selector .selector-container {
    padding: 20px;
}
.website-selector .selector-container .website-text {
    margin: 0 0 15px;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
}
.website-selector .selector-container .button {
    display: block;
    width: 244px;
    padding: 9px 14px;
    font-size: 15px;
    line-height: 19px;
    text-align: center;
    letter-spacing: 0.1em;
    background: #666;
}
.website-selector .selector-container .button:hover {
    color: #fff;
}
.website-selector .button .website-label {
    padding: 0 0 0 39px;
}
.overlay.switch .flag.en-hk .text,
.website-selector .button.en-hk .website-label {
    background: url("../images/flags/hk.jpg") no-repeat 0;
}
.overlay.switch .flag.default .text,
.website-selector .button.default .website-label {
    background: url("../images/flags/uk.jpg") no-repeat 0;
}
.navigation-popup.website-selector .selector-container .close-nav {
    margin: 15px 0 1px;
    padding: 0 23px 0 0;
    font-size: 12px;
    line-height: 40px;
}
.navigation-popup.website-selector .selector-container .close-nav i {
    right: -11px;
    font-size: 26px;
}


/* ========================================================================== */
/* === Loyalty Rewards ====================================================== */
/* ========================================================================== */
.rewards-cart-wrapper {
    overflow: auto;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    background-color: #e68a00;
}

.rewards-cart-wrapper label {
    font-size: 1.0rem;
    font-style: normal;
    color: #fff;
}

.rewards-cart-wrapper button {
    float: right;
}

.nav-bag__panel .rewards-bg button {
    width: 100%;
}
.nav-bag__panel .rewards-banner {
    padding: 0.6em 0;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}
.nav-bag__panel .rewards-product {
    overflow: hidden;
    padding: 10px;
    border-top: 0 none;
    border-bottom: 1px solid #876ece;
    background: #fff;
}
.nav-bag__panel .rewards-product .product-desc {
    width: 70%;
}
.nav-bag__panel .rewards-product .product-desc p {
    margin: 0 0 5px 0;
    font-size: 14px;
    text-align: left;
}
.nav-bag__panel .rewards-product .rewards-brand {
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #333;
}
.nav-bag__panel .rewards-product .rewards-desc {
    color: #666;
}
.nav-bag__panel .rewards-product .product-desc .lte-grey {
    font-size: 12px;
    color: #999;
}

/* ==== Overlays ============================================================ */
.overlay.reward-basket-value {
    position: relative;
    display: none;
    width: 345px;
    margin: 0 auto;
    padding: 45px 15px 25px;
    font-family: FM;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
}
.overlay.reward-basket-value h3 {
    font-size: 18px;
    text-transform: uppercase;
}
.overlay.reward-basket-value p {
    margin: 20px 10px;
}
.overlay.reward-basket-value .button {
    display: block;
    clear: both;
    margin-top: 10px;
    padding: 8px 20px;
    font-size: 16px;
    background: #666;
}
.overlay.reward-basket-value .button.subdued {
    background: #999;
}

/* ==== Accepted card types ================================================= */
.security .title {
    margin-bottom: 10px;
}
.accepted-card-types li,
.security li {
    margin: 0 0 10px 7px;
}
.security li:first-of-type,
.security li:nth-of-type(6n) {
    margin-left: 0;
}
.accepted-card-types em,
.security em {
    display: block;
    width: 45px;
    height: 28px;
    background: url("../images/checkout/cards.png") no-repeat;
}

/* === Visa Icon ============================================================ */
.pay-method-VISA em {
    background-position: -210px 0;
}

/* === Mastercard Icon ====================================================== */
.pay-method-MasterCard em {
    background-position: -104px 0;
}

/* === American Express Icon ================================================ */
.pay-method-American.Express em {
    background-position: -52px 0;
}

/* === Switch / Maestro (International) Icon ================================ */
.payment-method .method-Maestro em {
    background-position: -156px 0;
}

/* === Visa Debit/Delta Icon ================================================ */
.payment-method .method-Delta em {
    background-position: -263px 0;
}

/* === Visa Electrom Icon =================================================== */
.payment-method .method-Electrom em {
    background-position: -316px 0;
}

/* === PayPal Icon ========================================================== */
.pay-method-PayPal.Payments em {
    background-position: -369px 0;
}

/* === Union Icon =========================================================== */
.pay-method-China.UnionPay em {
    background-position: -422px 0;
}

/* === JCB Icon ============================================================= */
.payment-method .method-jcb em {
    background-position: -475px 0;
}


/* ==== App store =========================================================== */
.app-store-cont {
    margin: 20px 0;
    text-align: center;
}
.appstore-btn {
    display: inline-block;
    width: 190px;
}
.playstore-btn {
    display: inline-block;
    width: 186px;
}
.android .appstore-btn,
.ios .playstore-btn {
    display: none;
}


/* ========================================================================== */
/* === ICONS ================================================================ */
/* ========================================================================== */

.info-icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 16px;
}
.info-icon:before {
    content: "\e670";
}
.active.info-icon:before {
    content: "\e026";
    color: #333;
}

.delivery-no-international:before {
    content: "\e608";
}
.delivery-no-international.icon {
    display: inline-block;
    margin-right: 10px;
}
.product-collateral .delivery-no-international.icon {
    float: left;
    padding-top: 10px;
    font-size: 48px;
}


/* View port edge tablet */
.edge.tablet .viewport {
    -ms-overflow-y: scroll;

    -ms-overflow-style: none;
}
.edge.tablet .product-collateral .scrollbar,
.edge.tablet .viewport .scrollbar {
    display: none;
}


/* ========================================================================== */
/* === MISC ================================================================= */
/* ========================================================================== */
.caps {
    text-transform: uppercase;
}
.blk-col {
    color: #000;
}


/* ========================================================================== */
/* === TOOL TIP POPUP ======================================================= */
/* ========================================================================== */
i.info-tt-icon {
    float: left;
    margin: 5px 0 0 15px;
    font-size: 23px;
    cursor: pointer;
}
.info-tt-icon:before {
    content: "\e00f";
}
.active.info-tt-icon:before {
    content: "\e026";
    color: #333;
}

/* ========================================================================== */
/* === CHECKOUT HEADER ====================================================== */
/* ========================================================================== */
header.nav-header.no-actions {
    overflow: hidden;
    height: 65px;
    border-bottom: 1px solid #000;
    background: #fff;
}
header.nav-header.no-actions .logo__bg {
    display: block;
    width: 340px;
    margin: 0 auto;
    padding: 5px 0;
    font-size: 0;
    line-height: 0;
}