.customer-body {
    --ink: #202c3b;
    --accent: #c54c16;
    --muted: #657080;
    --line: #e4e7ec;
    --soft-orange: #fff3e9;
    background: #f6f7f9;
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
}
.customer-body a:hover {
    text-decoration: none;
}
.customer-body a:focus-visible, .customer-body button:focus-visible {
    outline: 3px solid #f3a06e;
    outline-offset: 3px;
}
.customer-body .btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 16px;
}
.customer-body .btn-primary {
    background: #c54c16;
    border-color: #c54c16;
}
.customer-body .btn-primary:hover, .customer-body .btn-primary:focus {
    background: #a63a0c;
    border-color: #a63a0c;
}
.customer-body .btn-outline-primary {
    color: #b7420e;
    border-color: #e18a60;
}
.customer-body .btn-outline-primary:hover {
    color: white;
    background: #c54c16;
    border-color: #c54c16;
}
.customer-body .form-control, .customer-body .form-select {
    border-color: #dce1e7;
    border-radius: 7px;
    font-size: 14px;
    min-height: 42px;
}
.customer-body .form-control:focus, .customer-body .form-select:focus {
    border-color: #de8b62;
    box-shadow: 0 0 0 3px #f7e6dc;
}
.customer-body .form-check-input:checked {
    border-color: #c54c16;
    background-color: #c54c16;
}
.shop-container {
    width: min(1400px, calc(100% - 64px));
    margin-inline: auto;
}
.shop-main {
    padding-top: 28px;
    padding-bottom: 50px;
    min-height: 60vh;
}
.shop-topbar {
    background: #202c3b;
    color: #e2e6ed;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 9px 0;
}
.shop-header {
    background: white;
    border-bottom: 1px solid var(--line);
}
.header-grid {
    display: grid;
    grid-template-columns: 205px minmax(220px, 1fr) auto;
    align-items: center;
    gap: 42px;
    min-height: 90px;
}
.shop-logo {
    color: #202c3b;
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.1px;
    white-space: nowrap;
}
.shop-logo:hover {
    color: #202c3b;
}
.shop-logo span {
    color: #c54c16;
}
.shop-logo small {
    display: block;
    font-size: 8px;
    letter-spacing: 3.2px;
    font-weight: 650;
    margin-top: 8px;
}
.header-search {
    display: flex;
    border: 1px solid #e0e4e9;
    border-radius: 9px;
    padding: 5px;
    background: #f8f9fb;
}
.header-search:focus-within {
    border-color: #c54c16;
}
.header-search input {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    color: var(--ink);
}
.header-search button {
    background: #c54c16;
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 9px 18px;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 23px;
}
.header-cart {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}
.account-button {
    display: inline-block;
    border: 0;
    background: #fff2e9;
    color: #a43d0f;
    border-radius: 7px;
    padding: 10px 14px;
    font-weight: 600;
    white-space: nowrap;
}
.skip-link {
    position: fixed;
    top: -100px;
    left: 15px;
    z-index: 2000;
    background: white;
    padding: 10px 16px;
}
.skip-link:focus {
    top: 10px;
}
.catalog-banner {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: #f9ede2;
    border: 1px solid #efdac8;
    padding: 32px 44px;
    min-height: 255px;
    position: relative;
}
.banner-kicker {
    color: #9b4119;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 12px;
}
.catalog-banner h1 {
    font-size: clamp(26px, 3vw, 41px);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -1.4px;
    margin-bottom: 14px;
}
.catalog-banner h1 span {
    color: #a8451b;
}
.catalog-banner p:not(.banner-kicker) {
    color: #6e635c;
    margin-bottom: 17px;
}
.banner-link {
    color: #202c3b;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 20px;
}
.banner-link span {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: #202c3b;
    color: white;
}
.banner-art {
    position: relative;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.banner-art img {
    width: 215px;
    height: 215px;
    object-fit: contain;
    mix-blend-mode: multiply;
    position: relative;
    z-index: 1;
    transform: rotate(-12deg);
}
.banner-art > span {
    font-size: 25px;
    line-height: 1.2;
    font-weight: 900;
    color: #b57a55;
    position: relative;
    z-index: 1;
    letter-spacing: -1px;
}
.banner-ring {
    border: 1px solid #e4bc9d;
    width: 270px;
    height: 270px;
    position: absolute;
    border-radius: 50%;
    transform: rotate(-20deg) scaleX(1.6);
}
.sport-tabs {
    display: flex;
    gap: 10px;
    padding: 22px 0 26px;
    overflow-x: auto;
}
.sport-tab {
    color: #475364;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    white-space: nowrap;
}
.sport-tab.selected, .sport-tab:hover {
    color: #b7420e;
    border-color: #e2a07d;
    background: #fff2e9;
}
.catalog-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 26px;
    scroll-margin-top: 110px;
}
.filter-panel {
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
    align-self: start;
}
.filter-panel .offcanvas-header {
    padding: 20px 18px 14px;
    border-bottom: 1px solid #edf0f3;
}
.filter-panel h2 {
    font-size: 15px;
    font-weight: 750;
    margin: 0;
}
.filter-panel .offcanvas-body {
    padding: 0 18px 18px;
}
.filter-section {
    padding: 17px 0;
    border-bottom: 1px solid #edf0f3;
}
.filter-title {
    display: block;
    font-weight: 650;
    font-size: 13px;
    margin-bottom: 10px;
}
.catalog-filters .form-select, .catalog-filters .form-control {
    font-size: 12px;
    min-height: 38px;
}
.catalog-filters > .btn {
    margin-top: 20px;
    font-size: 13px;
}
.filter-reset {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #626c78;
    margin-top: 15px;
}
.price-filter {
    display: flex;
    align-items: center;
    gap: 5px;
}
.price-filter input {
    min-width: 0;
    padding: 7px;
    appearance: textfield;
}
.catalog-results {
    min-width: 0;
}
.results-heading, .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.results-heading h2, .section-title h2 {
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.4px;
    margin: 0;
}
.results-heading p {
    color: var(--muted);
    font-size: 12px;
    margin: 7px 0 0;
}
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
    align-items: center;
    font-size: 12px;
}
.active-filters span {
    border: 1px solid #eadacd;
    background: #fff7f1;
    border-radius: 5px;
    padding: 5px 9px;
}
.active-filters a {
    padding: 5px;
}
.sort-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #eceff3;
    border-radius: 9px;
    margin-bottom: 18px;
    font-size: 12px;
    flex-wrap: wrap;
}
.sort-caption {
    color: #66717f;
    margin-right: 3px;
}
.sort-buttons {
    display: flex;
    gap: 6px;
}
.sort-button {
    background: white;
    border: 1px solid #e0e4ea;
    color: #3e4a59;
    padding: 8px 13px;
    border-radius: 5px;
    font-weight: 600;
}
.sort-button.selected {
    background: #c54c16;
    border-color: #c54c16;
    color: white;
}
.sort-form {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-left: auto;
}
.sort-form .form-select {
    min-height: 34px;
    font-size: 12px;
    width: 165px;
}
.sort-form .btn {
    font-size: 12px;
    padding: 6px 9px;
}
.js-enabled .sort-form button {
    display: none;
}
.page-counter {
    margin-left: 5px;
    color: #617084;
    white-space: nowrap;
}
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.catalog-card {
    background: white;
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    min-width: 0;
}
.catalog-card:hover, .catalog-card:focus-within {
    border-color: #d59a79;
    box-shadow: 0 5px 20px #202c3b0a;
    transform: translateY(-3px);
}
.card-image-link {
    display: block;
    position: relative;
    background: #f0f1f2;
}
.card-image-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}
.stock-label {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    background: #fff;
    padding: 5px 8px;
    color: #586270;
    font-size: 10px;
}
.card-copy {
    padding: 13px 12px 11px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.card-sport {
    color: var(--muted);
    font-size: 10px;
    margin-bottom: 7px;
}
.card-copy h3 {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
    min-height: 58.5px;
    margin-bottom: 12px;
}
.card-copy h3 a {
    color: var(--ink);
}
.card-copy h3 a:hover {
    color: #b7420e;
}
.card-price {
    color: #bb4613;
    font-weight: 750;
    font-size: 17px;
    white-space: nowrap;
}
.card-price small {
    font-size: 10px;
    font-weight: 500;
}
.card-price > span {
    font-size: 12px;
}
.card-rating {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 11px;
    min-height: 25px;
    margin-top: 5px;
}
.rating-star {
    color: #ba7600;
}
.card-bottom {
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid #f1f2f5;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #626c78;
    gap: 3px;
}
.in-stock {
    color: #267345;
}
.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}
.catalog-pagination a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #4f5d6d;
    border-radius: 6px;
}
.catalog-pagination a:hover {
    background: white;
}
.catalog-pagination .selected {
    color: white;
    background: #c54c16;
}
.catalog-empty {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--line);
    text-align: center;
    padding: 65px 20px;
    color: var(--muted);
}
.catalog-empty > span {
    font-size: 50px;
    color: #d69a74;
}
.catalog-empty h3, .catalog-empty h2 {
    font-size: 21px;
    color: var(--ink);
    margin-bottom: 12px;
}
.shop-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    margin: 2px 0 22px;
}
.shop-breadcrumb a {
    color: #6e594c;
}
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
}
.detail-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    background: #f0f1f2;
    border-radius: 10px;
}
.detail-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 13px;
}
.detail-thumbs button {
    padding: 0;
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    overflow: hidden;
}
.detail-thumbs button[aria-pressed="true"] {
    border-color: #c54c16;
    outline: 1px solid #c54c16;
}
.detail-thumbs img {
    object-fit: contain;
}
.image-note {
    font-size: 11px;
    color: var(--muted);
    margin: 12px 0 0;
}
.detail-info {
    padding: 15px 8px 0 0;
}
.detail-category {
    color: #a34b20;
    font-size: 11px;
    letter-spacing: 0.8px;
    font-weight: 700;
}
.detail-info h1 {
    font-size: clamp(25px, 2.5vw, 34px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.6px;
}
.detail-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    margin-top: 15px;
}
.detail-rating > span:last-child {
    color: var(--muted);
    margin-left: 4px;
}
.detail-price-box {
    background: #fff5ed;
    border: 1px solid #f7e0cf;
    border-radius: 9px;
    padding: 18px 20px;
    margin: 24px 0;
}
.detail-price-box > span, .detail-price-box small {
    display: block;
    color: #7b6153;
    font-size: 12px;
}
.detail-price-box strong {
    display: block;
    color: #b7420e;
    font-size: 31px;
    margin: 5px 0;
}
.variant-stock {
    color: #267345;
    font-size: 12px;
    margin: 10px 0 20px;
}
.buy-row {
    display: flex;
    align-items: stretch;
    gap: 15px;
}
.quantity-control {
    display: flex;
    border: 1px solid #dce1e7;
    border-radius: 7px;
    overflow: hidden;
}
.quantity-control button {
    border: 0;
    background: #f8f9fb;
    padding: 0 14px;
    color: #384859;
    font-size: 18px;
}
.quantity-control button:disabled {
    color: #b4bac3;
}
.quantity-control input {
    width: 46px;
    border: 0;
    text-align: center;
    appearance: textfield;
    background: white;
}
.quantity-control input::-webkit-inner-spin-button, .price-filter input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.detail-notes {
    border-top: 1px solid #edf0f3;
    margin-top: 28px;
    padding-top: 20px;
    color: var(--muted);
    font-size: 12px;
}
.detail-notes strong {
    color: #3e4a59;
}
.customer-body .surface {
    border-color: var(--line);
    border-radius: 12px;
}
.description-section, .reviews-section {
    margin-top: 24px;
    padding: 28px;
}
.description-section h2, .reviews-section h2, .cart-summary h2 {
    font-size: 20px;
    font-weight: 750;
    margin-bottom: 20px;
}
.description-section p {
    color: #536170;
    line-height: 1.9;
}
.section-title > span {
    color: var(--muted);
    font-size: 12px;
}
.reviews-section .section-title h2 {
    margin: 0;
}
.reviews-summary {
    display: flex;
    align-items: center;
    gap: 38px;
    background: #faf7f4;
    border: 1px solid #f0e4da;
    border-radius: 9px;
    padding: 24px;
    margin-top: 22px;
}
.review-score strong {
    font-size: 38px;
    font-weight: 800;
    color: #b7420e;
}
.review-score > span {
    color: #976f59;
}
.review-score small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}
.rating-bars {
    width: min(340px, 60%);
}
.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    margin: 5px 0;
    color: #7a6557;
}
.rating-bar-row > span:first-child {
    width: 24px;
    flex-shrink: 0;
}
.rating-bar-row > span:last-child {
    width: 18px;
}
.rating-track {
    height: 6px;
    background: #e8e0d9;
    border-radius: 6px;
    flex: 1;
    overflow: hidden;
}
.rating-track > div {
    height: 100%;
    background: #db935e;
}
.review-item {
    display: flex;
    gap: 14px;
    border-bottom: 1px solid #edf0f3;
    padding: 24px 0;
}
.review-avatar {
    width: 40px;
    height: 40px;
    background: #eaf0f5;
    color: #61778d;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-weight: 700;
}
.review-copy {
    min-width: 0;
}
.review-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    margin: 6px 0 10px;
}
.review-meta time {
    color: var(--muted);
}
.review-copy p {
    margin: 0;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.review-form {
    max-width: 650px;
    margin-top: 28px;
}
.review-form h3 {
    font-size: 18px;
    font-weight: 700;
}
.review-form select {
    max-width: 260px;
}
.review-login {
    background: #f8f9fb;
    margin: 20px 0 0;
    padding: 15px;
    border-radius: 7px;
    font-size: 13px;
}
.related-section {
    margin-top: 32px;
}
.related-section .section-title a {
    font-size: 12px;
    white-space: nowrap;
}
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 25px;
    align-items: start;
}
.cart-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px;
    border-radius: 11px;
    background: white;
    border: 1px solid var(--line);
    margin-bottom: 13px;
}
.cart-image img {
    object-fit: contain;
    border-radius: 7px;
    background: #f0f1f2;
}
.cart-item-copy {
    flex: 1;
    min-width: 0;
}
.cart-name {
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
}
.cart-item-copy > p {
    margin: 7px 0 10px;
}
.cart-update {
    display: flex;
    gap: 8px;
    align-items: center;
}
.cart-update input {
    max-width: 70px;
}
.cart-update .btn {
    padding: 7px 10px;
    font-size: 12px;
}
.cart-item-total {
    text-align: right;
    font-size: 15px;
}
.remove-item {
    border: 0;
    background: none;
    color: #a94436;
    font-size: 12px;
    padding: 10px 0;
}
.continue-shopping {
    display: inline-block;
    margin: 12px 0;
    font-size: 13px;
}
.cart-summary {
    position: sticky;
    top: 115px;
}
.cart-summary h2 {
    font-size: 18px;
}
.summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0;
    color: #647180;
}
.summary-total {
    border-top: 1px solid #edf0f3;
    padding-top: 20px;
    color: var(--ink);
}
.summary-total strong {
    font-size: 21px;
    color: #b7420e;
}
.checkout-card {
    padding: 36px;
}
.checkout-card h1 {
    font-weight: 800;
    font-size: 28px;
}
.checkout-card form {
    margin-top: 26px;
}
.checkout-payment {
    background: #f9f5f1;
    border: 1px solid #eee1d7;
    border-radius: 8px;
    padding: 15px;
}
.checkout-payment span {
    display: block;
    font-size: 12px;
    color: #7d6759;
    margin-top: 6px;
}
.shop-footer {
    background: white;
    border-top: 1px solid var(--line);
    padding-top: 34px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 30px;
}
.footer-grid p {
    color: var(--muted);
    font-size: 12px;
    margin-top: 14px;
    line-height: 1.8;
}
.footer-grid strong {
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
}
.footer-grid > div > a:not(.shop-logo) {
    display: block;
    color: #66717f;
    font-size: 12px;
    margin: 10px 0;
}
.footer-note {
    border-top: 1px solid #edf0f3;
    color: #707a86;
    font-size: 10px;
    padding: 18px 0;
}
@media (min-width: 992px) {
    .filter-panel.offcanvas {
        position: static;
        visibility: visible;
        transform: none;
        width: auto;
        z-index: auto;
    }
}
@media (min-width: 1280px) {
    .catalog-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
@media (max-width: 1100px) {
    .header-grid {
        grid-template-columns: 180px minmax(200px, 1fr) auto;
        gap: 20px;
    }
    .header-actions {
        gap: 12px;
    }
    .header-cart span {
        display: none;
    }
    .sort-caption {
        display: none;
    }
    .sort-button {
        padding: 8px 10px;
    }
    .page-counter {
        display: none;
    }
    .catalog-shell {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 20px;
    }
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .banner-art > span {
        font-size: 21px;
    }
}
@media (max-width: 991px) {
    .shop-container {
        width: calc(100% - 40px);
    }
    .catalog-shell {
        display: block;
    }
    .filter-panel.offcanvas {
        border-radius: 0;
        width: min(320px, 90vw);
    }
    .catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .catalog-banner {
        padding: 28px;
    }
    .banner-art img {
        width: 175px;
        height: 175px;
    }
    .banner-art > span {
        font-size: 18px;
    }
    .detail-grid {
        gap: 24px;
        padding: 20px;
    }
    .detail-info {
        padding: 0;
    }
    .detail-info h1 {
        font-size: 25px;
    }
    .buy-row {
        flex-wrap: wrap;
    }
    .quantity-control {
        height: 42px;
    }
    .cart-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 18px;
    }
    .cart-item {
        flex-wrap: wrap;
        padding: 16px;
        gap: 14px;
    }
    .cart-image img {
        width: 85px;
        height: 85px;
    }
    .cart-item-total {
        margin-left: auto;
    }
}
@media (max-width: 767px) {
    .header-grid {
        grid-template-columns: 1fr auto;
        gap: 16px;
        padding: 17px 0;
    }
    .shop-logo {
        font-size: 24px;
    }
    .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .header-actions {
        gap: 17px;
    }
    .shop-main {
        padding-top: 20px;
    }
    .catalog-banner {
        grid-template-columns: 1fr 140px;
        min-height: 210px;
        padding: 24px;
    }
    .banner-kicker {
        font-size: 8px;
        letter-spacing: 1px;
    }
    .catalog-banner h1 {
        font-size: 29px;
    }
    .catalog-banner p:not(.banner-kicker) {
        font-size: 11px;
        max-width: 260px;
    }
    .banner-art {
        min-height: 140px;
    }
    .banner-art img {
        width: 150px;
        height: 150px;
    }
    .banner-art > span {
        display: none;
    }
    .banner-ring {
        width: 160px;
        height: 160px;
    }
    .sport-tabs {
        padding: 17px 0 23px;
        gap: 8px;
    }
    .sport-tab {
        padding: 9px 13px;
        font-size: 12px;
    }
    .results-heading h2 {
        font-size: 20px;
    }
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .detail-cover {
        max-height: 480px;
    }
    .description-section,     .reviews-section {
        padding: 22px;
    }
    .cart-layout {
        grid-template-columns: 1fr;
    }
    .cart-summary {
        position: static;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 575px) {
    .shop-container {
        width: calc(100% - 28px);
    }
    .shop-topbar {
        font-size: 8px;
        letter-spacing: 0.7px;
    }
    .shop-header {
        position: static;
    }
    .header-actions {
        gap: 13px;
    }
    .account-button {
        padding: 8px 10px;
        font-size: 12px;
    }
    .catalog-banner {
        grid-template-columns: 1fr 86px;
        padding: 23px 20px;
        border-radius: 12px;
        min-height: 190px;
    }
    .catalog-banner h1 {
        font-size: 26px;
        letter-spacing: -0.8px;
    }
    .banner-art img {
        width: 125px;
        height: 125px;
    }
    .banner-ring {
        width: 115px;
        height: 115px;
    }
    .banner-link {
        font-size: 12px;
        gap: 12px;
    }
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .sort-toolbar {
        padding: 9px;
        gap: 8px;
    }
    .sort-buttons {
        flex: 1;
        justify-content: space-between;
    }
    .sort-button {
        flex: 1;
        text-align: center;
        padding: 8px;
    }
    .sort-form {
        width: 100%;
    }
    .sort-form .form-select {
        width: 100%;
    }
    .card-copy {
        padding: 11px 10px;
    }
    .card-copy h3 {
        font-size: 12px;
        min-height: 54px;
    }
    .card-price {
        font-size: 16px;
    }
    .card-bottom > span:last-child {
        display: none;
    }
    .results-heading h2 {
        font-size: 18px;
    }
    .detail-grid {
        padding: 15px;
        gap: 25px;
    }
    .detail-price-box {
        padding: 16px;
    }
    .reviews-summary {
        padding: 18px 14px;
        gap: 22px;
    }
    .review-score strong {
        font-size: 31px;
    }
    .rating-bars {
        flex: 1;
    }
    .description-section,     .reviews-section {
        padding: 20px 16px;
    }
    .section-title h2 {
        font-size: 18px;
    }
    .related-section .section-title {
        align-items: flex-start;
    }
    .cart-name {
        font-size: 14px;
    }
    .cart-image img {
        width: 75px;
        height: 75px;
    }
    .cart-item-total {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #edf0f3;
        padding-top: 10px;
    }
    .cart-item-total form {
        order: -1;
    }
    .checkout-card {
        margin-top: 0;
        padding: 23px 18px !important;
    }
    .checkout-card h1 {
        font-size: 24px;
    }
    .footer-grid {
        column-gap: 15px;
    }
    .footer-note {
        line-height: 1.7;
    }
}
@media (prefers-reduced-motion: reduce) {
    .catalog-card {
        transition: none;
    }
}
.skip-link:not(:focus) {
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* ==========================================================
   SPORTLINE · Giao diện xanh navy/cam theo ảnh tham chiếu
   Chỉ thay đổi diện mạo; giữ nguyên nội dung và nghiệp vụ.
   ========================================================== */
.customer-body {
    --ink: #14314b;
    --accent: #ff7626;
    --muted: #637486;
    --line: #e2e9ef;
    --soft-orange: #fff2e8;
    background: #ffffff;
    color: var(--ink);
    font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
.customer-body button, .customer-body input, .customer-body select, .customer-body textarea, .customer-body .btn {
    font-family: inherit;
}
.customer-body h1, .customer-body h2, .customer-body h3, .customer-body h4, .customer-body h5 {
    letter-spacing: -.045em;
    line-height: 1.28;
}
.customer-body .btn-primary, .customer-body .sort-button.selected, .customer-body .catalog-pagination .selected {
    background: #ff7626;
    border-color: #ff7626;
    color: #fff;
}
.customer-body .btn-primary:hover, .customer-body .btn-primary:focus {
    background: #e96113;
    border-color: #e96113;
}
.customer-body .btn-outline-primary {
    color: #e86114;
    border-color: #ffb183;
}
.customer-body .btn-outline-primary:hover {
    background: #ff7626;
    border-color: #ff7626;
}
.customer-body .form-control:focus, .customer-body .form-select:focus {
    border-color: #ff9d64;
    box-shadow: 0 0 0 3px #ff762624;
}
.customer-body .form-check-input:checked {
    background-color: #ff7626;
    border-color: #ff7626;
}
.customer-body .header-cart, .customer-body .header-navigation a {
    text-decoration: none;
}
.customer-body .header-cart:hover, .customer-body .header-navigation a:hover {
    color: #ffb582;
}
.shop-container {
    width: min(1580px, calc(100% - 72px));
}
.shop-main {
    padding-top: 56px;
    padding-bottom: 74px;
    min-height: 58vh;
}
/* Top promotion strip removed from Razor view. */
.shop-topbar {
    display: none;
}
.shop-header {
    background: #102b46;
    border: 0;
    box-shadow: 0 3px 16px #10253d13;
}
.header-grid {
    min-height: 100px;
    grid-template-columns: auto minmax(210px, 1fr) auto auto;
    gap: clamp(16px, 2vw, 32px);
}
.shop-header .shop-logo {
    display:inline-flex;
    align-items:center;
    position:relative;
    color:#fff;
    font-size: 26px;
    font-weight: 900;
    line-height:1.12;
    letter-spacing:-1.25px;
    margin:0;
}
.shop-header .shop-logo::before {
    content:"S";
    display:inline-grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:11px;
    margin-right:12px;
    background:#ff7626;
    color:white;
    font-size:27px;
    font-weight:900;
    letter-spacing:-1px;
    flex-shrink:0;
}
.shop-header .shop-logo:hover {
    color: #fff;
}
.shop-logo span {
    color: #ff7626;
}
.shop-header .shop-logo small {
    display: none;
}
.header-search {
    height: 57px;
    border: 0;
    border-radius: 10px;
    padding: 0;
    background: #fff;
    overflow: hidden;
    min-width: 0;
}
.header-search:focus-within {
    box-shadow: 0 0 0 3px #ff762650;
    border-color: transparent;
}
.header-search input {
    padding:13px 18px;
    color:#30445b;
    background:#fff;
    font-size:15px;
    line-height:1.6;
}
.header-search input::placeholder {
    color: #6c7787;
    opacity: 1;
}
.header-search button {
    padding:0 23px;
    background:#ff7626;
    color:#fff;
    border-radius:0;
    min-width:65px;
    display:grid;
    place-items:center;
    transition:background .18s;
}
.header-search button:hover {
    background: #e96113;
}
.header-navigation {
    display: flex;
    gap: clamp(14px,1.3vw,24px);
    align-items: center;
    white-space: nowrap;
}
.header-navigation a {
    font-size: 14px;
    font-weight: 600;
    color: #f2f6fb;
    transition: color .18s;
}
.header-actions {
    gap: 12px;
}
.header-cart {
    display:inline-flex;
    justify-content:center;
    gap:8px;
    min-height:53px;
    padding:0 18px;
    border-radius:9px;
    background:#ff7626;
    color:#fff;
    font-size:14px;
    font-weight:700;
    transition:background .18s;
}
.header-cart:hover {
    background: #e96113;
    color: #fff !important;
}
.account-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:47px;
    background:#ffffff16;
    border:1px solid #ffffff45;
    color:#fff;
    border-radius:8px;
    padding:10px 13px;
    font-weight:600;
    font-size:13px;
}
.account-button:hover {
    color: #fff;
    background: #ffffff25;
}
.header-actions .dropdown-menu {
    font-size: 13px;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    box-shadow: 0 12px 32px #0e274422;
}
/* Banner: preserve heading, tagline, image, link and product list. */
.catalog-banner {
    grid-template-columns: minmax(0,1fr) minmax(0, 1fr);
    gap:clamp(24px, 4vw, 70px);
    background:linear-gradient(114deg, #112d49 0%, #1b4668 55%, #286789 100%);
    border:0;
    color:white;
    border-radius:22px;
    min-height:460px;
    padding:clamp(36px,4vw,66px);
    box-shadow: 0 10px 25px #0f314010;
}
.banner-kicker {
    display:table;
    padding:6px 11px;
    border-radius:6px;
    background:#ffca05;
    color:#0e2941;
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    margin-bottom:22px;
}
.catalog-banner h1 {
    color:#fff;
    font-size:clamp(34px,3.45vw,61px);
    letter-spacing:-.055em;
    font-weight:900;
    line-height:1.16;
    margin:0 0 24px;
}
.catalog-banner h1 span {
    color: #fff;
}
.catalog-banner p:not(.banner-kicker) {
    color:#e9f2f9;
    font-size:16px;
    line-height:1.9;
    margin-bottom:26px;
    max-width:620px;
}
.banner-link {
    display:inline-flex;
    align-items:center;
    gap:15px;
    background:#ff7626;
    color:white;
    border-radius:9px;
    padding:14px 22px;
    font-size:16px;
    font-weight:800;
    transition: background .18s, transform .18s;
}
.banner-link:hover {
    color: #fff;
    background: #e96113;
    transform: translateY(-2px);
}
.banner-link span {
    display:inline-block;
    background:none;
    width:auto;
    height:auto;
    font-size:20px;
    line-height:1;
    color:inherit;
}
.banner-art {
    min-height:320px;
    border-radius:17px;
    overflow:hidden;
    background:radial-gradient(circle at 50% 40%, #487f9b 0%, #174267 58%, #0d2d4d 100%);
    isolation:isolate;
}
.banner-art::before {
    content: "";
    width: 350px;
    height: 350px;
    background: #f7ac5230;
    filter: blur(60px);
    position: absolute;
    border-radius: 50%;
}
.banner-art img {
    width:min(60%,300px);
    height:auto;
    max-height:310px;
    object-fit:contain;
    transform:rotate(-12deg);
    mix-blend-mode:normal;
    filter:drop-shadow(0 14px 13px #071b3266);
}
.banner-art > span {
    color: #eff6ff;
    font-size: clamp(17px,2vw,30px);
    letter-spacing: -1px;
    text-shadow: 0 3px 12px #05182f70;
}
.banner-ring {
    border-color: #ffffff4d;
    width: 300px;
    height: 300px;
}
/* Keep all existing catalog/checkout/review features, modernize surfaces. */
.sport-tabs {
    padding: 28px 0 32px;
}
.sport-tab {
    background: #f7f9fc;
    border-color: #e5e9f0;
    border-radius: 9px;
    padding: 11px 20px;
    font-size: 13px;
}
.sport-tab.selected,.sport-tab:hover {
    color: #e85f13;
    background: #fff2e8;
    border-color: #ffb585;
}
.catalog-shell {
    gap: 30px;
}
.filter-panel, .catalog-card, .detail-grid, .cart-item, .customer-body .surface {
    border-color: #e3e9ef;
    border-radius: 13px;
}
.filter-panel {
    box-shadow: 0 4px 16px #10324c08;
}
.results-heading h2,.section-title h2 {
    font-size: 24px;
    font-weight: 800;
}
.sort-toolbar {
    background: #f4f7fa;
    border: 1px solid #e7edf1;
    border-radius: 11px;
}
.sort-button {
    border-radius: 7px;
}
.catalog-grid {
    gap: 18px;
}
.catalog-card {
    box-shadow: 0 2px 12px #122b4308;
}
.catalog-card:hover {
    border-color: #ffb483;
    box-shadow: 0 10px 25px #183a5817;
}
.card-copy h3 {
    font-size: 14px;
}
.card-price,.detail-price-box strong,.summary-total strong {
    color: #ed6419;
}
/* Dark navy footer, three columns and bottom information bar. */
.shop-footer {
    background: #102b46;
    border-top: 0;
    color: #fff;
    padding-top: 58px;
}
.footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: clamp(35px,5vw,95px);
    padding-bottom: 55px;
}
.shop-footer .shop-logo {
    color: #fff;
    font-size: 29px;
    font-weight: 900;
    letter-spacing: -.04em;
}
.shop-footer .shop-logo:hover {
    color: #fff;
}
.footer-grid strong {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 23px;
}
.footer-grid p {
    color: #dce8f3;
    font-size: 14px;
    line-height: 1.95;
    margin-top: 20px;
}
.footer-grid > div > a:not(.shop-logo) {
    color: #e8f1f7;
    font-size: 14px;
    margin: 13px 0;
}
.footer-grid > div > a:not(.shop-logo):hover {
    color: #ffb582;
}
.footer-note {
    max-width:none;
    width:100%;
    background:#091d31;
    border-top:0;
    padding:22px max(36px,calc((100vw - 1580px)/2));
    text-align:center;
    color:#d5e2ec;
    font-size:12px;
    line-height:1.7;
}
@media (max-width:1399px) {
    .header-grid {
        gap: 16px;
    }
    .shop-header .shop-logo {
        font-size: 23px;
    }
    .shop-header .shop-logo::before {
        width: 36px;
        height: 36px;
        font-size: 24px;
        margin-right: 9px;
    }
    .header-navigation a {
        font-size: 12px;
    }
    .header-cart {
        padding: 0 13px;
        font-size: 13px;
    }
    .account-button {
        padding-inline: 10px;
    }
}
@media (max-width:1199px) {
    .header-grid {
        grid-template-columns: auto minmax(220px,1fr) auto;
        row-gap: 0;
        padding: 18px 0 12px;
    }
    .header-search {
        grid-column: 2;
        grid-row: 1;
    }
    .header-navigation {
        grid-column: 1/-1;
        grid-row: 2;
        justify-content: center;
        padding: 12px 0 3px;
        gap: 34px;
    }
    .header-actions {
        grid-column: 3;
        grid-row: 1;
    }
    .header-cart span {
        display: inline;
    }
    .catalog-banner {
        min-height: 395px;
    }
    .banner-art {
        min-height: 290px;
    }
    .footer-grid {
        gap: 30px;
    }
}
@media (max-width:991px) {
    .shop-container {
        width: calc(100% - 40px);
    }
    .shop-main {
        padding-top: 35px;
    }
    .catalog-banner {
        padding: 32px;
        gap: 26px;
        min-height: 365px;
    }
    .catalog-banner h1 {
        font-size: clamp(30px,4vw,42px);
    }
    .catalog-banner p:not(.banner-kicker) {
        font-size: 13px;
    }
    .banner-art {
        min-height: 250px;
    }
    .banner-art img {
        width: 60%;
    }
    .banner-art > span {
        font-size: 18px;
    }
    .footer-grid {
        gap: 24px;
    }
    .footer-grid strong {
        font-size: 17px;
    }
}
@media (max-width:767px) {
    .header-grid {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 11px 14px;
        padding: 16px 0;
    }
    .shop-header .shop-logo {
        grid-column: 1;
        grid-row: 1;
        font-size: 22px;
    }
    .shop-header .shop-logo::before {
        width: 35px;
        height: 35px;
    }
    .header-actions {
        grid-column: 2;
        grid-row: 1;
        gap: 8px;
    }
    .header-cart {
        min-height: 43px;
        padding: 0 12px;
    }
    .header-cart span {
        display: none;
    }
    .account-button {
        min-height: 42px;
        font-size: 12px;
    }
    .header-search {
        grid-column: 1/-1;
        grid-row: 2;
        height: 50px;
    }
    .header-navigation {
        grid-column: 1/-1;
        grid-row: 3;
        justify-content: flex-start;
        gap: 26px;
        padding: 6px 0 0;
        overflow-x: auto;
    }
    .header-navigation a {
        font-size: 12px;
    }
    .catalog-banner {
        grid-template-columns: minmax(0,1fr) 190px;
        gap: 18px;
        min-height: 310px;
        padding: 26px;
    }
    .catalog-banner h1 {
        font-size: clamp(27px,4.4vw,36px);
    }
    .banner-kicker {
        font-size: 9px;
        padding: 5px 9px;
        margin-bottom: 14px;
    }
    .catalog-banner p:not(.banner-kicker) {
        font-size: 12px;
        line-height: 1.7;
    }
    .banner-link {
        padding: 11px 15px;
        font-size: 12px;
        gap: 9px;
    }
    .banner-art {
        min-height: 200px;
    }
    .banner-art img {
        width: 70%;
    }
    .banner-art > span {
        display: none;
    }
    .banner-ring {
        width: 170px;
        height: 170px;
    }
    .footer-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .footer-grid > div:first-child {
        grid-column: 1/-1;
    }
    .footer-grid p,.footer-grid > div > a:not(.shop-logo) {
        font-size: 13px;
    }
    .footer-note {
        padding-inline: 20px;
    }
}
@media (max-width:575px) {
    .shop-container {
        width: calc(100% - 28px);
    }
    .shop-header {
        position: static;
    }
    .shop-header .shop-logo {
        font-size: 19px;
    }
    .shop-header .shop-logo::before {
        width: 31px;
        height: 31px;
        font-size: 21px;
        margin-right: 7px;
    }
    .header-cart {
        min-height: 39px;
        padding-inline: 10px;
    }
    .account-button {
        min-height: 39px;
        padding: 7px 9px;
        font-size: 11px;
    }
    .catalog-banner {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 25px 21px;
        gap: 22px;
        border-radius: 15px;
    }
    .catalog-banner h1 {
        font-size: clamp(30px,8vw,40px);
    }
    .catalog-banner p:not(.banner-kicker) {
        font-size: 13px;
        margin-bottom: 20px;
        max-width: 100%;
    }
    .banner-art {
        min-height: 210px;
        border-radius: 12px;
    }
    .banner-art img {
        width: 165px;
        height: 165px;
    }
    .banner-art > span {
        display: block;
        font-size: 20px;
    }
    .banner-ring {
        width: 180px;
        height: 180px;
    }
    .sport-tabs {
        padding: 20px 0;
    }
    .results-heading h2 {
        font-size: 20px;
    }
    .shop-footer {
        padding-top: 40px;
    }
    .footer-grid {
        gap: 22px 17px;
        padding-bottom: 32px;
    }
    .footer-grid strong {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .footer-grid p,.footer-grid > div > a:not(.shop-logo) {
        font-size: 12px;
    }
    .footer-note {
        font-size: 11px;
    }
}
/* Footer contact links: accessible and responsive; editable via StoreContact settings. */
.footer-contact address {
    margin: 0;
    font-style: normal;
}
.footer-contact address p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0;
    overflow-wrap: anywhere;
}
.footer-contact address p > span:first-child {
    flex: 0 0 20px;
    text-align: center;
}
.footer-contact a {
    color: #e8f1f7;
    text-decoration: none;
}
.footer-contact a:hover, .footer-contact a:focus-visible {
    color: #ffb582;
    text-decoration: underline;
}