/* Resistance 77 store refresh
   Designed to sit alongside the existing pagestyle.css without changing
   the legacy product/basket page layouts. */

:root {
    --r77-black: #111111;
    --r77-paper: #f3f0e7;
    --r77-white: #ffffff;
    --r77-red: #990000;
    --r77-grey: #666666;
    --r77-line: #d8d5cc;
}

/* Shared store header */
.r77-shop-header {
    min-height: 112px;
    padding: 16px 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.r77-shop-header__logo {
    display: block;
    min-width: 0;
}

.r77-shop-header__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 90px;
    object-fit: contain;
    object-position: left center;
}

.r77-shop-basket {
    position: relative;
    min-width: 190px;
    padding: 12px 16px;
    border: 2px solid var(--r77-black);
    color: var(--r77-black);
    background: var(--r77-white);
    text-decoration: none;
    text-align: right;
    box-sizing: border-box;
    box-shadow: 4px 4px 0 var(--r77-black);
    transition: transform .15s ease, box-shadow .15s ease;
}

.r77-shop-basket:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--r77-black);
}

.r77-shop-basket__label {
    display: block;
    margin-bottom: 2px;
    color: var(--r77-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.r77-shop-basket strong,
.r77-shop-basket > span:last-child {
    font-size: 13px;
}

.r77-shop-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0 0 18px;
    background: var(--r77-black);
    border-bottom: 4px solid var(--r77-red);
    font-family: Arial, Helvetica, sans-serif;
}

.r77-shop-nav a {
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.r77-shop-nav a:hover,
.r77-shop-nav a.is-store {
    background: var(--r77-red);
}

/* Main store */
.r77-store {
    padding: 0 10px 24px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--r77-black);
}

.r77-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin: 0 0 16px;
    color: #777;
    font-size: 11px;
}

.r77-breadcrumbs a {
    color: #444;
    text-decoration: none;
}

.r77-breadcrumbs a:hover {
    color: var(--r77-red);
    text-decoration: underline;
}

.r77-store-hero {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 44px 48px;
    box-sizing: border-box;
    background: var(--r77-black);
    color: #fff;
    border: 4px solid var(--r77-black);
}

.r77-store-hero::before,
.r77-store-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    width: 420px;
    height: 28px;
    background: var(--r77-red);
    transform: rotate(-18deg);
    opacity: .95;
}

.r77-store-hero::before {
    top: 78px;
}

.r77-store-hero::after {
    top: 152px;
}

.r77-store-hero__content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.r77-store-hero h1 {
    margin: 17px 0 10px;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(48px, 7vw, 78px);
    line-height: .91;
    letter-spacing: .015em;
    text-transform: uppercase;
    font-weight: 900;
}

.r77-store-hero p {
    max-width: 500px;
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.5;
}

.r77-store-hero__marks {
    position: absolute;
    z-index: 1;
    right: 30px;
    bottom: -44px;
    color: rgba(255,255,255,.08);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 260px;
    line-height: .8;
    transform: rotate(-8deg);
}

.r77-sticker {
    display: inline-block;
    padding: 7px 11px;
    background: var(--r77-paper);
    color: var(--r77-black);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
}

.r77-store-promises {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 4px solid var(--r77-black);
    border-top: 0;
    background: var(--r77-paper);
}

.r77-store-promises span {
    padding: 14px 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.r77-store-promises span + span {
    border-left: 2px solid var(--r77-black);
}

.r77-category-heading {
    padding: 28px 32px 24px;
    margin-bottom: 18px;
    border-left: 10px solid var(--r77-red);
    background: var(--r77-black);
    color: #fff;
}

.r77-category-heading h1 {
    margin: 4px 0 0;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(38px, 6vw, 62px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.r77-category-heading p {
    margin: 8px 0 0;
    color: #ddd;
    font-size: 13px;
}

.r77-category-bar {
    margin: 22px 0 32px;
    border-top: 3px solid var(--r77-black);
    border-bottom: 3px solid var(--r77-black);
    background: #fff;
}

.r77-category-bar__label {
    display: inline-block;
    margin-top: -3px;
    padding: 9px 13px;
    background: var(--r77-black);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.r77-category-bar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0;
}

.r77-category-link,
.r77-filter-link {
    display: inline-block;
    padding: 10px 14px;
    border: 2px solid var(--r77-black);
    background: #fff;
    color: var(--r77-black);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .035em;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}

.r77-category-link:hover,
.r77-filter-link:hover,
.r77-category-link.is-active,
.r77-filter-link.is-active {
    background: var(--r77-black);
    color: #fff;
    transform: translateY(-2px);
}

.r77-category-link.is-sale {
    border-color: var(--r77-red);
    color: var(--r77-red);
}

.r77-category-link.is-sale:hover,
.r77-category-link.is-sale.is-active {
    background: var(--r77-red);
    color: #fff;
}

.r77-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -12px 0 30px;
    padding: 13px;
    background: var(--r77-paper);
}

.r77-filters__label {
    margin-right: 4px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .08em;
}

.r77-filter-link {
    padding: 8px 12px;
    font-size: 11px;
}

.r77-store-section {
    margin: 42px 0 54px;
}

.r77-store-section--category {
    margin-top: 24px;
}

.r77-section-heading {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

.r77-section-heading > div {
    flex: 0 0 auto;
}

.r77-section-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--r77-red);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.r77-section-heading h2 {
    margin: 0;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 38px;
    line-height: 1;
    letter-spacing: .025em;
    text-transform: uppercase;
    font-weight: 900;
}

.r77-section-slash {
    position: relative;
    flex: 1 1 auto;
    height: 4px;
    margin-bottom: 5px;
    background: var(--r77-black);
}

.r77-section-slash::after {
    content: "";
    position: absolute;
    right: 8%;
    top: -7px;
    width: 55px;
    height: 18px;
    background: var(--r77-red);
    transform: rotate(-5deg);
}

.r77-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 18px;
}

.r77-product-card {
    min-width: 0;
    background: #fff;
}

.r77-product-card__link {
    display: block;
    height: 100%;
    border: 2px solid var(--r77-black);
    color: var(--r77-black);
    text-decoration: none;
    box-shadow: 5px 5px 0 var(--r77-black);
    transition: transform .15s ease, box-shadow .15s ease;
}

.r77-product-card__link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--r77-black);
}

.r77-product-card__image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    background: var(--r77-paper);
    border-bottom: 2px solid var(--r77-black);
}

.r77-product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .2s ease;
}

.r77-product-card__link:hover .r77-product-card__image {
    transform: scale(1.035);
}

.r77-product-badge {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: -4px;
    padding: 7px 10px;
    background: var(--r77-black);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

.r77-product-badge--sale {
    background: var(--r77-red);
}

.r77-product-card__body {
    display: flex;
    min-height: 92px;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 14px 13px;
    box-sizing: border-box;
}

.r77-product-card__name {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 900;
}

.r77-product-card__price {
    color: var(--r77-red);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 24px;
    letter-spacing: .02em;
}

.r77-empty-state {
    margin: 18px 0 40px;
    padding: 34px;
    border: 3px dashed var(--r77-black);
    background: var(--r77-paper);
    text-align: center;
}

.r77-empty-state strong,
.r77-empty-state span {
    display: block;
}

.r77-empty-state strong {
    margin-bottom: 8px;
    font-size: 18px;
    text-transform: uppercase;
}

.r77-empty-state span {
    margin-bottom: 18px;
    color: #555;
}

.r77-empty-state a {
    display: inline-block;
    padding: 10px 14px;
    background: var(--r77-black);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
}

/* Shared footer */
.r77-shop-footer {
    margin: 48px 10px 0;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 4px solid var(--r77-red);
    background: var(--r77-black);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.r77-shop-footer__copy strong,
.r77-shop-footer__copy span {
    display: block;
}

.r77-shop-footer__copy strong {
    font-size: 13px;
}

.r77-shop-footer__copy span {
    margin-top: 3px;
    color: #aaa;
    font-size: 11px;
}

.r77-shop-footer__paypal {
    display: block;
    padding: 7px 9px;
    background: #fff;
}

.r77-shop-footer__paypal img {
    display: block;
    max-width: 145px;
    height: auto;
}

@media only screen and (max-width: 990px) {
    .r77-store-page #container {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .r77-store-page .r77-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .r77-shop-header {
        min-height: 0;
        padding: 10px 5px 12px;
        align-items: center;
    }

    .r77-shop-header__logo img {
        height: auto;
        max-height: 72px;
    }

    .r77-shop-basket {
        min-width: 130px;
        padding: 9px 10px;
        box-shadow: 3px 3px 0 var(--r77-black);
    }

    .r77-shop-basket strong,
    .r77-shop-basket > span:last-child {
        font-size: 11px;
    }

    .r77-shop-nav {
        overflow-x: auto;
        justify-content: flex-start;
        margin-left: -5px;
        margin-right: -5px;
        -webkit-overflow-scrolling: touch;
    }

    .r77-shop-nav a {
        flex: 0 0 auto;
        padding: 12px 14px;
        font-size: 11px;
    }

    .r77-store {
        padding: 0 5px 20px;
    }

    .r77-store-hero {
        min-height: 255px;
        padding: 34px 24px;
    }

    .r77-store-hero h1 {
        font-size: clamp(42px, 13vw, 64px);
    }

    .r77-store-hero p {
        font-size: 14px;
    }

    .r77-store-hero__marks {
        right: -18px;
        font-size: 190px;
    }

    .r77-store-promises {
        grid-template-columns: 1fr;
    }

    .r77-store-promises span {
        padding: 10px 12px;
    }

    .r77-store-promises span + span {
        border-left: 0;
        border-top: 2px solid var(--r77-black);
    }

    .r77-category-heading {
        padding: 22px 20px;
    }

    .r77-category-bar__links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .r77-category-link {
        text-align: center;
    }

    .r77-section-heading h2 {
        font-size: 31px;
    }

    .r77-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }

    .r77-product-card__image-wrap {
        padding: 10px;
    }

    .r77-product-card__body {
        min-height: 88px;
        padding: 12px 10px;
    }

    .r77-product-card__name {
        font-size: 11px;
    }

    .r77-product-card__price {
        font-size: 21px;
    }

    .r77-shop-footer {
        margin: 36px 5px 0;
        padding: 18px 14px;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 380px) {
    .r77-shop-header {
        align-items: flex-start;
    }

    .r77-shop-basket {
        min-width: 112px;
    }

    .r77-shop-basket > span:last-child {
        display: none;
    }

    .r77-category-bar__links {
        grid-template-columns: 1fr;
    }
}

/* Product detail page ----------------------------------------------------- */
.r77-product-main {
    padding-bottom: 10px;
}

.r77-product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 42px;
    align-items: start;
    margin: 18px 0 52px;
}

.r77-product-gallery {
    min-width: 0;
}

.r77-product-gallery__main {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    overflow: hidden;
    border: 3px solid var(--r77-black);
    background: var(--r77-paper);
    box-shadow: 8px 8px 0 var(--r77-black);
}

.r77-product-gallery__main img {
    display: block;
    width: 100%;
    max-width: 540px;
    max-height: 540px;
    object-fit: contain;
}

.r77-product-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.r77-product-thumb {
    width: 94px;
    height: 94px;
    padding: 7px;
    cursor: pointer;
    border: 2px solid var(--r77-black);
    background: #fff;
    box-shadow: 3px 3px 0 var(--r77-black);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.r77-product-thumb:hover,
.r77-product-thumb.is-active {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--r77-black);
    background: var(--r77-paper);
}

.r77-product-thumb.is-active {
    outline: 3px solid var(--r77-red);
    outline-offset: 2px;
}

.r77-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.r77-product-summary {
    position: sticky;
    top: 18px;
    padding: 30px;
    box-sizing: border-box;
    border: 3px solid var(--r77-black);
    background: #fff;
}

.r77-product-summary::before {
    content: "77";
    position: absolute;
    z-index: 0;
    right: 16px;
    top: -22px;
    color: rgba(153, 0, 0, .07);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 140px;
    line-height: 1;
    transform: rotate(-7deg);
    pointer-events: none;
}

.r77-product-summary > * {
    position: relative;
    z-index: 1;
}

.r77-product-summary h1 {
    margin: 8px 0 15px;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: .98;
    letter-spacing: .015em;
    text-transform: uppercase;
    font-weight: 900;
}

.r77-product-summary__price {
    margin: 0 0 14px;
    color: var(--r77-red);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 42px;
    line-height: 1;
    letter-spacing: .02em;
}

.r77-product-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.r77-stock-status {
    display: inline-block;
    padding: 7px 10px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.r77-stock-status--in {
    background: var(--r77-black);
}

.r77-stock-status--out {
    background: var(--r77-red);
}

.r77-stock-note {
    color: var(--r77-red);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.r77-product-promises {
    margin: 22px 0 25px;
    border-top: 2px solid var(--r77-black);
    border-bottom: 2px solid var(--r77-black);
}

.r77-product-promises > div {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) 1.2fr;
    gap: 12px;
    padding: 11px 0;
    font-size: 11px;
}

.r77-product-promises > div + div {
    border-top: 1px solid var(--r77-line);
}

.r77-product-promises strong {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .06em;
}

.r77-product-promises span {
    color: #666;
}

.r77-product-buybox {
    margin-top: 24px;
}

.r77-product-option-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.r77-product-select-wrap {
    position: relative;
    margin-bottom: 14px;
}

.r77-product-select-wrap::after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    pointer-events: none;
}

.r77-product-select-wrap select {
    width: 100%;
    min-height: 50px;
    padding: 0 42px 0 14px;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--r77-black);
    border-radius: 0;
    background: #fff;
    color: var(--r77-black);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.r77-product-select-wrap select:focus {
    outline: 3px solid rgba(153, 0, 0, .2);
    outline-offset: 2px;
}

.r77-add-to-basket {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
    cursor: pointer;
    border: 3px solid var(--r77-black);
    border-radius: 0;
    background: var(--r77-red);
    color: #fff;
    box-shadow: 6px 6px 0 var(--r77-black);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.r77-add-to-basket:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--r77-black);
    background: #7e0000;
}

.r77-add-to-basket span:last-child {
    font-size: 24px;
    line-height: 1;
}

.r77-product-sold-out {
    margin-top: 24px;
    padding: 18px;
    border: 3px dashed var(--r77-red);
    background: #fff7f7;
}

.r77-product-sold-out strong,
.r77-product-sold-out span {
    display: block;
}

.r77-product-sold-out strong {
    margin-bottom: 4px;
    color: var(--r77-red);
    font-size: 18px;
    text-transform: uppercase;
}

.r77-product-sold-out span {
    color: #555;
}

.r77-product-description,
.r77-track-preview,
.r77-related-products {
    margin: 56px 0;
}

.r77-product-description__content {
    max-width: 780px;
    font-size: 14px;
    line-height: 1.75;
    color: #333;
}

.r77-product-description__content p:first-child {
    margin-top: 0;
}

.r77-product-description__content a {
    color: var(--r77-red);
    font-weight: 700;
}

.r77-track-preview > p {
    margin: -5px 0 18px;
    color: #666;
    font-size: 12px;
}

.r77-track-preview #aWrap {
    max-width: 760px;
    border: 3px solid var(--r77-black);
    box-shadow: 6px 6px 0 var(--r77-black);
}

.r77-related-products .r77-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media only screen and (max-width: 990px) {
    .r77-product-detail {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr);
        gap: 26px;
    }

    .r77-product-gallery__main {
        min-height: 430px;
    }

    .r77-product-summary {
        padding: 24px;
    }

    .r77-related-products .r77-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .r77-product-detail {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 12px;
    }

    .r77-product-gallery__main {
        min-height: 0;
        aspect-ratio: 1 / 1;
        padding: 20px;
        box-shadow: 5px 5px 0 var(--r77-black);
    }

    .r77-product-gallery__main img {
        max-height: 100%;
    }

    .r77-product-gallery__thumbs {
        gap: 9px;
    }

    .r77-product-thumb {
        width: 78px;
        height: 78px;
    }

    .r77-product-summary {
        position: static;
        padding: 23px 18px;
    }

    .r77-product-summary h1 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .r77-product-summary__price {
        font-size: 38px;
    }

    .r77-product-description,
    .r77-track-preview,
    .r77-related-products {
        margin: 44px 0;
    }

    .r77-product-description__content {
        font-size: 13px;
        line-height: 1.65;
    }

    .r77-related-products .r77-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 430px) {
    .r77-product-promises > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .r77-product-gallery__thumbs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .r77-product-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* =========================================================
   Basket / delivery / order complete
   ========================================================= */
.r77-checkout-page {
    background: var(--r77-paper);
}

.r77-checkout {
    padding: 0 10px 48px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--r77-black);
}

.r77-checkout-hero {
    position: relative;
    overflow: hidden;
    min-height: 245px;
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    padding: 34px 42px;
    border: 4px solid var(--r77-black);
    box-sizing: border-box;
    background: var(--r77-black);
    color: #fff;
}

.r77-checkout-hero > div:first-child {
    position: relative;
    z-index: 2;
    max-width: 690px;
}

.r77-checkout-kicker {
    margin: 18px 0 5px;
    color: #d9d9d9;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.r77-checkout-hero h1,
.r77-order-success h1,
.r77-order-pending h1 {
    margin: 0;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(48px, 7vw, 76px);
    line-height: .92;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.r77-checkout-hero p:last-child,
.r77-order-success p:last-child,
.r77-order-pending p {
    max-width: 620px;
    margin: 15px 0 0;
    font-size: 15px;
    line-height: 1.55;
}

.r77-checkout-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: 80px;
    width: 430px;
    height: 32px;
    background: var(--r77-red);
    transform: rotate(-16deg);
}

.r77-checkout-hero__mark {
    position: absolute;
    z-index: 1;
    right: 30px;
    bottom: -32px;
    color: rgba(255,255,255,.08);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 190px;
    line-height: .9;
    transform: rotate(-7deg);
}

.r77-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 28px;
    align-items: start;
}

.r77-checkout-section-heading {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 4px solid var(--r77-black);
}

.r77-checkout-section-heading span,
.r77-checkout-summary__label {
    display: block;
    margin-bottom: 3px;
    color: var(--r77-red);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.r77-checkout-section-heading h2 {
    margin: 0;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 31px;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.r77-checkout-notice {
    margin: 0 0 20px;
    padding: 13px 16px;
    border: 2px solid var(--r77-black);
    background: #fff;
    box-shadow: 4px 4px 0 var(--r77-black);
    font-size: 13px;
    font-weight: 700;
}

.r77-checkout-notice--success {
    border-left: 8px solid #2f6b38;
}

.r77-checkout-notice--warning {
    border-left: 8px solid #bf7a00;
}

.r77-checkout-notice--error {
    border-left: 8px solid var(--r77-red);
}

.r77-checkout-notice--info {
    border-left: 8px solid #555;
}

.r77-cart-list,
.r77-delivery-fields,
.r77-order-items {
    min-width: 0;
}

.r77-cart-card {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr) 112px 100px;
    gap: 18px;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    border: 3px solid var(--r77-black);
    background: #fff;
    box-shadow: 5px 5px 0 var(--r77-black);
}

.r77-cart-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #dedede;
}

.r77-cart-card__image img {
    display: block;
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.r77-cart-card__details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.r77-cart-card__title {
    color: var(--r77-black);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
}

.r77-cart-card__title:hover {
    color: var(--r77-red);
}

.r77-cart-card__option,
.r77-cart-card__unit {
    color: #555;
    font-size: 12px;
}

.r77-cart-card__stock {
    color: var(--r77-red);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.r77-cart-card__quantity {
    text-align: center;
}

.r77-cart-card__quantity > span:first-child {
    display: block;
    margin-bottom: 6px;
    color: #777;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.r77-qty-control {
    display: grid;
    grid-template-columns: 34px 42px 34px;
    align-items: stretch;
    justify-content: center;
}

.r77-qty-control a,
.r77-qty-control > span,
.r77-qty-control strong {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--r77-black);
    box-sizing: border-box;
    background: #fff;
    color: var(--r77-black);
    text-decoration: none;
    font-size: 16px;
}

.r77-qty-control strong {
    border-left: 0;
    border-right: 0;
    font-size: 13px;
}

.r77-qty-control a:hover {
    background: var(--r77-black);
    color: #fff;
}

.r77-qty-control .is-disabled {
    color: #aaa;
    background: #eee;
}

.r77-cart-card__remove {
    display: inline-block;
    margin-top: 7px;
    color: #777;
    font-size: 11px;
    text-decoration: underline;
}

.r77-cart-card__price {
    text-align: right;
    color: var(--r77-red);
    font-size: 20px;
}

.r77-checkout-summary {
    position: sticky;
    top: 18px;
    padding: 22px;
    border: 3px solid var(--r77-black);
    background: #fff;
    box-shadow: 7px 7px 0 var(--r77-black);
}

.r77-checkout-summary__row,
.r77-checkout-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--r77-line);
    font-size: 13px;
}

.r77-checkout-summary__total {
    margin-top: 5px;
    padding: 15px 0 17px;
    border-bottom: 0;
    border-top: 3px solid var(--r77-black);
    font-size: 16px;
    font-weight: 900;
}

.r77-checkout-summary__total strong {
    color: var(--r77-red);
    font-size: 23px;
}

.r77-checkout-button {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 12px;
    padding: 0 17px;
    border: 3px solid var(--r77-black);
    border-radius: 0;
    box-sizing: border-box;
    background: var(--r77-red);
    color: #fff;
    box-shadow: 5px 5px 0 var(--r77-black);
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.r77-checkout-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--r77-black);
    background: #7e0000;
}

.r77-checkout-button--form:disabled,
.r77-checkout-button--form.is-loading {
    cursor: wait;
    opacity: .78;
    transform: none;
    box-shadow: 5px 5px 0 var(--r77-black);
}

.r77-checkout-secondary,
.r77-checkout-back {
    display: inline-block;
    margin-top: 15px;
    color: var(--r77-black);
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
}

.r77-checkout-trust {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px dashed #bbb;
}

.r77-checkout-trust strong,
.r77-checkout-trust span {
    display: block;
}

.r77-checkout-trust strong {
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
}

.r77-checkout-trust span {
    color: #666;
    font-size: 11px;
    line-height: 1.45;
}

.r77-checkout-empty {
    max-width: 700px;
    margin: 36px auto;
    padding: 38px;
    border: 4px solid var(--r77-black);
    background: #fff;
    box-shadow: 8px 8px 0 var(--r77-black);
    text-align: center;
}

.r77-checkout-empty h2 {
    margin: 18px 0 8px;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 40px;
    text-transform: uppercase;
}

.r77-checkout-empty p {
    margin: 0 auto 20px;
    max-width: 480px;
    color: #555;
    line-height: 1.55;
}

.r77-checkout-empty .r77-checkout-button {
    max-width: 280px;
    margin: 24px auto 0;
}

.r77-delivery-zone-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 24px;
    align-items: center;
    margin-bottom: 28px;
    padding: 18px 20px;
    border: 3px solid var(--r77-black);
    background: var(--r77-paper);
}

.r77-delivery-zone-card strong {
    display: block;
    font-size: 16px;
}

.r77-delivery-zone-card select,
.r77-field input,
.r77-field select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid var(--r77-black);
    border-radius: 0;
    box-sizing: border-box;
    background: #fff;
    color: var(--r77-black);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.r77-delivery-zone-card select:focus,
.r77-field input:focus,
.r77-field select:focus {
    outline: 3px solid rgba(153, 0, 0, .18);
    outline-offset: 2px;
}

.r77-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px;
    border: 3px solid var(--r77-black);
    background: #fff;
    box-shadow: 6px 6px 0 var(--r77-black);
}

.r77-field--full {
    grid-column: 1 / -1;
}

.r77-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.r77-field-static {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 2px solid var(--r77-black);
    box-sizing: border-box;
    background: #eee;
    font-size: 14px;
    font-weight: 700;
}

.r77-delivery-note {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 14px;
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 8px solid var(--r77-red);
    background: var(--r77-black);
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
}

.r77-delivery-note strong {
    text-transform: uppercase;
}

.r77-sr-only {
    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;
}

/* Order complete */
.r77-order-success {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    padding: 40px 44px;
    border: 4px solid var(--r77-black);
    background: var(--r77-black);
    color: #fff;
}

.r77-order-success > div:last-child {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.r77-order-success__stamp {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    padding: 14px 18px;
    border: 8px solid var(--r77-red);
    color: var(--r77-red);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 72px;
    letter-spacing: .08em;
    opacity: .8;
}

.r77-order-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 4px solid var(--r77-black);
    border-top: 0;
    background: #fff;
}

.r77-order-meta > div {
    padding: 18px 22px;
}

.r77-order-meta > div + div {
    border-left: 2px solid var(--r77-black);
}

.r77-order-meta span,
.r77-order-reference span {
    display: block;
    margin-bottom: 4px;
    color: #777;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.r77-order-meta strong,
.r77-order-reference strong {
    word-break: break-word;
    font-size: 14px;
}

.r77-order-items {
    margin-top: 38px;
}

.r77-order-items__list {
    border: 3px solid var(--r77-black);
    background: #fff;
    box-shadow: 6px 6px 0 var(--r77-black);
}

.r77-order-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 120px;
    gap: 18px;
    align-items: center;
    padding: 16px;
}

.r77-order-item + .r77-order-item {
    border-top: 2px solid var(--r77-black);
}

.r77-order-item__image {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
}

.r77-order-item__image img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
}

.r77-order-item__image span {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 35px;
}

.r77-order-item__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.r77-order-item__details > strong {
    font-size: 15px;
}

.r77-order-item__details span,
.r77-order-item__details small {
    color: #666;
    font-size: 11px;
}

.r77-order-item__price {
    text-align: right;
    color: var(--r77-red);
    font-size: 19px;
}

.r77-order-items__total {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 14px;
    padding: 15px 18px;
    border: 3px solid var(--r77-black);
    background: var(--r77-black);
    color: #fff;
}

.r77-order-items__total strong {
    color: #fff;
    font-size: 18px;
}

.r77-order-next,
.r77-order-pending {
    margin-top: 36px;
    padding: 28px 30px;
    border: 3px solid var(--r77-black);
    background: #fff;
    box-shadow: 6px 6px 0 var(--r77-black);
}

.r77-order-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.r77-order-next h2 {
    margin: 16px 0 7px;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 33px;
    text-transform: uppercase;
}

.r77-order-next p {
    max-width: 640px;
    margin: 0;
    color: #555;
    font-size: 13px;
    line-height: 1.55;
}

.r77-order-pending {
    max-width: 760px;
    margin: 30px auto;
}

.r77-order-pending h1 {
    margin-top: 18px;
}

.r77-order-reference {
    margin-top: 20px;
    padding: 15px;
    background: #f0f0f0;
    border-left: 6px solid var(--r77-red);
}

.r77-order-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 25px;
}

.r77-order-actions .r77-checkout-button {
    max-width: 310px;
    margin-top: 0;
}

@media only screen and (max-width: 900px) {
    .r77-checkout-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
        gap: 20px;
    }

    .r77-cart-card {
        grid-template-columns: 105px minmax(0, 1fr) 105px;
    }

    .r77-cart-card__price {
        grid-column: 2 / 4;
    }

    .r77-order-success__stamp {
        right: 20px;
        font-size: 55px;
    }
}

@media only screen and (max-width: 767px) {
    .r77-checkout {
        padding-left: 8px;
        padding-right: 8px;
    }

    .r77-checkout-hero {
        min-height: 220px;
        padding: 28px 22px;
    }

    .r77-checkout-hero__mark {
        right: 10px;
        font-size: 130px;
    }

    .r77-checkout-layout,
    .r77-delivery-zone-card {
        grid-template-columns: 1fr;
    }

    .r77-checkout-summary {
        position: static;
    }

    .r77-cart-card {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 14px;
        padding: 13px;
    }

    .r77-cart-card__quantity {
        grid-column: 1 / 2;
    }

    .r77-cart-card__price {
        grid-column: 2 / 3;
        align-self: center;
        text-align: right;
    }

    .r77-field-grid {
        grid-template-columns: 1fr;
        padding: 17px;
    }

    .r77-field--full {
        grid-column: auto;
    }

    .r77-delivery-note {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .r77-order-success {
        min-height: 260px;
        padding: 30px 22px;
    }

    .r77-order-success__stamp {
        right: -15px;
        top: 45px;
        transform: rotate(-10deg);
        font-size: 42px;
        opacity: .35;
    }

    .r77-order-meta {
        grid-template-columns: 1fr;
    }

    .r77-order-meta > div + div {
        border-left: 0;
        border-top: 2px solid var(--r77-black);
    }

    .r77-order-item {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .r77-order-item__price {
        grid-column: 2;
    }

    .r77-order-next,
    .r77-order-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .r77-order-actions .r77-checkout-button {
        max-width: none;
    }
}

@media only screen and (max-width: 430px) {
    .r77-checkout-hero h1,
    .r77-order-success h1,
    .r77-order-pending h1 {
        font-size: 44px;
    }

    .r77-cart-card {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .r77-cart-card__image img {
        max-height: 74px;
    }

    .r77-qty-control {
        grid-template-columns: 32px 38px 32px;
    }

    .r77-checkout-empty,
    .r77-order-next,
    .r77-order-pending {
        padding: 24px 18px;
    }
}

/* ---------------------------------------------------------
   Clothing in-stock size filter
   --------------------------------------------------------- */
.r77-size-filter {
    margin: -12px 0 32px;
    border: 3px solid var(--r77-black);
    background: var(--r77-paper);
    box-shadow: 5px 5px 0 var(--r77-black);
}

.r77-filters + .r77-size-filter {
    margin-top: -18px;
}

.r77-size-filter__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 13px;
    background: var(--r77-black);
    color: #fff;
}

.r77-size-filter__label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.r77-size-filter__hint {
    color: #ccc;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.r77-size-filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 14px;
}

.r77-size-link {
    min-width: 48px;
    padding: 10px 13px;
    border: 2px solid var(--r77-black);
    background: #fff;
    color: var(--r77-black);
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .035em;
    text-transform: uppercase;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}

.r77-size-link:hover,
.r77-size-link.is-active {
    background: var(--r77-red);
    border-color: var(--r77-red);
    color: #fff;
    transform: translateY(-2px);
}

.r77-size-link:first-child {
    min-width: 86px;
}

@media only screen and (max-width: 600px) {
    .r77-size-filter {
        margin-top: -8px;
        box-shadow: 3px 3px 0 var(--r77-black);
    }

    .r77-filters + .r77-size-filter {
        margin-top: -16px;
    }

    .r77-size-filter__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .r77-size-filter__options {
        gap: 7px;
        padding: 12px;
    }

    .r77-size-link {
        flex: 1 0 54px;
    }

    .r77-size-link:first-child {
        flex-basis: 100%;
    }
}