/* =========================================================
   EVAN'S SMART FIX - SHARED 2026 SITE THEME
   Matches the redesigned index.html.
   Applied only to pages with body.site-redesign.
   repair-quality.html is intentionally excluded.
========================================================= */

:root {
    --esf-navy: #0d1b2a;
    --esf-blue: #0057b8;
    --esf-blue-dark: #004494;
    --esf-blue-soft: #eaf3ff;
    --esf-bg: #f7f9fc;
    --esf-card: #ffffff;
    --esf-text: #172033;
    --esf-muted: #667085;
    --esf-border: #e2e8f0;
    --esf-shadow: 0 14px 34px rgba(18, 38, 63, 0.08);
    --esf-shadow-hover: 0 20px 44px rgba(18, 38, 63, 0.13);
}

body.site-redesign {
    min-height: 100vh !important;
    margin: 0 !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(0, 87, 184, 0.08), transparent 26%),
        var(--esf-bg) !important;
    color: var(--esf-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-align: left !important;
}

body.site-redesign * {
    box-sizing: border-box;
}

.site-top-strip {
    width: 100%;
    padding: 9px 20px;
    background: var(--esf-navy);
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* =========================================================
   HEADER / NAVIGATION
========================================================= */

body.site-redesign > header,
body.site-redesign header.top-bar {
    width: 100% !important;
    min-height: 88px;
    padding: 13px 6% !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: wrap !important;

    background: #fff !important;
    color: var(--esf-text) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 5px 22px rgba(21, 39, 66, 0.08) !important;
    text-align: left !important;
}

body.site-redesign > header .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

body.site-redesign > header .logo,
body.site-redesign header.top-bar .logo {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    margin: 0 !important;
}

body.site-redesign > header h1,
body.site-redesign > header h2,
body.site-redesign > header p,
body.site-redesign header.top-bar h1 {
    color: var(--esf-text) !important;
}

body.site-redesign > header h1,
body.site-redesign header.top-bar h1 {
    margin: 0 !important;
    font-size: clamp(20px, 2vw, 26px) !important;
    line-height: 1.2 !important;
}

body.site-redesign > header p {
    margin: 3px 0 0 !important;
    color: #6d7888 !important;
    font-size: 13px !important;
}

body.site-redesign > header nav,
body.site-redesign header.top-bar nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Every normal header link should be dark on the white header. */
body.site-redesign > header nav a:not(.cart-link),
body.site-redesign > header .nav-dropdown > summary,
body.site-redesign > header .esf-nav-button,
body.site-redesign > header .esf-social-button,
body.site-redesign header.top-bar nav a:not(.cart-link),
body.site-redesign header.top-bar .nav-dropdown > summary,
body.site-redesign header.top-bar .esf-nav-button,
body.site-redesign header.top-bar .esf-social-button {
    color: var(--esf-text) !important;
    background: transparent !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

body.site-redesign > header nav a:not(.cart-link),
body.site-redesign header.top-bar nav a:not(.cart-link) {
    padding: 10px 11px !important;
}

body.site-redesign > header nav a:not(.cart-link):hover,
body.site-redesign > header .nav-dropdown > summary:hover,
body.site-redesign > header .esf-nav-button:hover,
body.site-redesign > header .esf-social-button:hover,
body.site-redesign header.top-bar nav a:not(.cart-link):hover,
body.site-redesign header.top-bar .nav-dropdown > summary:hover,
body.site-redesign header.top-bar .esf-nav-button:hover,
body.site-redesign header.top-bar .esf-social-button:hover {
    color: var(--esf-blue) !important;
    background: var(--esf-blue-soft) !important;
    transform: none !important;
}

/* Log In / My Account is injected by auth-nav.js. */
body.site-redesign .esf-account-link {
    background: #f4f7fb !important;
    color: var(--esf-text) !important;
    border: 1px solid var(--esf-border) !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

body.site-redesign .esf-account-link:hover {
    background: var(--esf-blue-soft) !important;
    color: var(--esf-blue) !important;
    border-color: #bfd8f4 !important;
}

body.site-redesign .cart-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    background: var(--esf-blue) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(0, 87, 184, 0.18) !important;
}

body.site-redesign .cart-link:hover {
    background: var(--esf-blue-dark) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

body.site-redesign #cartCount {
    min-width: 20px !important;
    height: 20px !important;
    padding: 2px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: var(--esf-blue) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Existing HTML dropdowns */
body.site-redesign .nav-dropdown > .dropdown-menu,
body.site-redesign .sub-dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(18, 38, 63, 0.16) !important;
}

body.site-redesign .dropdown-menu a,
body.site-redesign .sub-dropdown-menu a,
body.site-redesign .dropdown-menu summary,
body.site-redesign .sub-dropdown-menu summary {
    color: var(--esf-text) !important;
}

body.site-redesign .dropdown-menu a:hover,
body.site-redesign .sub-dropdown-menu a:hover,
body.site-redesign .dropdown-menu summary:hover,
body.site-redesign .sub-dropdown-menu summary:hover {
    background: #f4f7fb !important;
    color: var(--esf-blue) !important;
}

/* JS Socials menu */
body.site-redesign .esf-social-menu {
    border: 1px solid var(--esf-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(18, 38, 63, 0.16) !important;
}

/* =========================================================
   GENERAL PAGE SPACING / TYPOGRAPHY
========================================================= */

body.site-redesign main {
    width: 100%;
}

body.site-redesign > h2,
body.site-redesign main > h2,
body.site-redesign .accessory-page > h2,
body.site-redesign .auth-card h2,
body.site-redesign .account-panel h2,
body.site-redesign .step-page h2 {
    color: var(--esf-navy) !important;
}

body.site-redesign > h2,
body.site-redesign main > h2:not(.accessory-page h2) {
    width: min(1180px, calc(100% - 36px));
    margin: 42px auto 10px !important;
    font-size: clamp(30px, 4vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px;
}

body.site-redesign > p,
body.site-redesign main > p {
    color: var(--esf-muted) !important;
}

/* =========================================================
   BRAND / MODEL / REPAIR SELECTION PAGES
========================================================= */

body.site-redesign .brands,
body.site-redesign .samsung-series,
body.site-redesign .repair-grid,
body.site-redesign .screen-brand-grid {
    width: min(1220px, calc(100% - 36px)) !important;
    max-width: 1220px !important;
    margin: 34px auto 76px !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 18px !important;
}

body.site-redesign .repair-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.site-redesign .brand,
body.site-redesign .model,
body.site-redesign .screen-brand-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 190px;
    margin: 0 !important;
    padding: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;

    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--esf-shadow) !important;
    text-align: center !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

body.site-redesign .brand:hover,
body.site-redesign .model:hover,
body.site-redesign .screen-brand-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--esf-shadow-hover) !important;
    border-color: #c7d9ee !important;
}

body.site-redesign .brand a,
body.site-redesign .model a,
body.site-redesign .screen-brand-card a {
    width: 100%;
    color: var(--esf-text) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

body.site-redesign .brand a:hover,
body.site-redesign .model a:hover,
body.site-redesign .screen-brand-card a:hover {
    color: var(--esf-blue) !important;
}

body.site-redesign .brand img,
body.site-redesign .model img,
body.site-redesign .screen-brand-card img {
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto 14px !important;
    filter: drop-shadow(0 10px 14px rgba(18, 38, 63, 0.08));
}

body.site-redesign .model img {
    width: auto !important;
    max-height: 145px !important;
}

body.site-redesign #selectedModel,
body.site-redesign .screen-brand-intro,
body.site-redesign .case-help {
    width: min(1180px, calc(100% - 36px));
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body.site-redesign #selectedModel {
    margin-top: 38px !important;
    color: var(--esf-navy) !important;
}

body.site-redesign .screen-brand-intro,
body.site-redesign .case-help {
    color: var(--esf-muted) !important;
}

/* =========================================================
   ACCESSORY / SHOP PAGES
========================================================= */

body.site-redesign .accessory-page {
    width: min(1220px, calc(100% - 36px)) !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 52px 0 80px !important;
}

body.site-redesign .accessory-page h2 {
    margin: 0 0 10px !important;
    color: var(--esf-navy) !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px;
}

body.site-redesign .accessory-intro {
    max-width: 720px;
    margin-bottom: 28px !important;
    color: var(--esf-muted) !important;
    font-size: 16px;
    line-height: 1.7;
}

body.site-redesign .accessory-toolbar {
    padding: 14px !important;
    margin: 24px 0 28px !important;
    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(18, 38, 63, 0.05) !important;
}

body.site-redesign .accessory-search {
    min-height: 48px !important;
    padding: 12px 15px !important;
    background: #f9fbfd !important;
    color: var(--esf-text) !important;
    border: 1px solid #cfd9e6 !important;
    border-radius: 11px !important;
    outline: none !important;
}

body.site-redesign .accessory-search:focus {
    background: #fff !important;
    border-color: var(--esf-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.10) !important;
}

body.site-redesign .accessory-grid {
    gap: 18px !important;
}

body.site-redesign .accessory-product,
body.site-redesign .accessory-category-card {
    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--esf-shadow) !important;
}

body.site-redesign .accessory-product {
    padding: 20px !important;
}

body.site-redesign .accessory-product:hover,
body.site-redesign .accessory-category-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--esf-shadow-hover) !important;
}

body.site-redesign .accessory-product h3 {
    color: var(--esf-text) !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

body.site-redesign .product-price {
    color: var(--esf-blue) !important;
    font-size: 21px !important;
    font-weight: 900 !important;
}

body.site-redesign .product-image,
body.site-redesign .category-image,
body.site-redesign .page-category-image {
    background: #f8fafc;
    border-radius: 14px !important;
}

body.site-redesign .accessory-product select,
body.site-redesign .accessory-product input[type="number"] {
    min-height: 44px !important;
    background: #f9fbfd !important;
    border: 1px solid #cfd9e6 !important;
    border-radius: 10px !important;
}

body.site-redesign .add-accessory-btn {
    min-height: 46px !important;
    padding: 12px 16px !important;
    background: var(--esf-blue) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(0, 87, 184, 0.16) !important;
}

body.site-redesign .add-accessory-btn:hover {
    background: var(--esf-blue-dark) !important;
}

body.site-redesign .accessory-back-link {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    background: var(--esf-blue-soft);
    color: var(--esf-blue) !important;
    border-radius: 10px;
}

/* =========================================================
   FORMS / CONTACT / OTHER REPAIR DETAILS
========================================================= */

body.site-redesign form:not(.auth-form):not(.checkout-form-container) {
    width: min(680px, calc(100% - 36px)) !important;
    margin: 44px auto 70px !important;
    padding: 30px !important;
    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--esf-shadow) !important;
}

body.site-redesign form:not(.auth-form) h2 {
    margin: 0 0 22px !important;
    color: var(--esf-navy) !important;
}

body.site-redesign label {
    color: var(--esf-text) !important;
    font-weight: 700 !important;
}

body.site-redesign input:not([type="checkbox"]):not([type="radio"]),
body.site-redesign textarea,
body.site-redesign select {
    border: 1px solid #cfd9e6 !important;
    border-radius: 10px !important;
    background: #f9fbfd !important;
    color: var(--esf-text) !important;
    outline: none !important;
}

body.site-redesign input:not([type="checkbox"]):not([type="radio"]):focus,
body.site-redesign textarea:focus,
body.site-redesign select:focus {
    background: #fff !important;
    border-color: var(--esf-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.10) !important;
}

body.site-redesign button:not(.testimonial-arrow):not(.testimonial-dot):not(.esf-social-button):not(.esf-nav-button) {
    border-radius: 10px !important;
}

/* =========================================================
   AUTH / ACCOUNT PAGES
========================================================= */

body.site-redesign .auth-page {
    width: min(1040px, calc(100% - 36px)) !important;
    margin: 54px auto 80px !important;
}

body.site-redesign .auth-card,
body.site-redesign .account-panel,
body.site-redesign .checkout-choice-side {
    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--esf-shadow) !important;
}

body.site-redesign .auth-card h2,
body.site-redesign .account-panel h2,
body.site-redesign .checkout-choice-side h3 {
    color: var(--esf-navy) !important;
}

body.site-redesign .auth-subtitle,
body.site-redesign .account-email,
body.site-redesign .empty-history {
    color: var(--esf-muted) !important;
}

body.site-redesign .auth-primary {
    background: var(--esf-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 87, 184, 0.16) !important;
}

body.site-redesign .auth-primary:hover {
    background: var(--esf-blue-dark) !important;
}

body.site-redesign .auth-secondary {
    background: var(--esf-blue-soft) !important;
    color: var(--esf-blue) !important;
}

body.site-redesign .booking-history-card {
    background: #f9fbfd !important;
    border-color: var(--esf-border) !important;
    border-radius: 14px !important;
}

/* =========================================================
   CART
========================================================= */

body.site-redesign #total {
    width: min(900px, calc(100% - 36px));
    margin: 44px auto 12px !important;
    color: var(--esf-navy) !important;
    font-size: 22px;
    text-align: right !important;
}

body.site-redesign #cartBox {
    width: min(900px, calc(100% - 36px));
    margin: 0 auto !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--esf-shadow) !important;
}

body.site-redesign #cartBox .item {
    padding: 18px 8px !important;
    border-bottom: 1px solid #edf1f5 !important;
}

body.site-redesign .cart-actions {
    width: min(900px, calc(100% - 36px));
    margin: 18px auto 70px !important;
}

body.site-redesign .cart-actions button {
    min-height: 46px !important;
    background: var(--esf-blue) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
}

body.site-redesign .cart-actions button:hover {
    background: var(--esf-blue-dark) !important;
    opacity: 1 !important;
}

/* =========================================================
   CHECKOUT / BOOKING DETAILS
========================================================= */

body.site-redesign .checkout-layout {
    width: min(1220px, calc(100% - 36px)) !important;
    max-width: 1220px !important;
    margin: 48px auto 80px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 22px !important;
    align-items: start !important;
}

body.site-redesign .checkout-main,
body.site-redesign .checkout-sidebar {
    min-width: 0 !important;
}

body.site-redesign .checkout-form-container,
body.site-redesign .checkout-sidebar {
    margin: 0 !important;
    padding: 28px !important;
    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--esf-shadow) !important;
}

body.site-redesign .steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 26px !important;
}

body.site-redesign .step {
    padding: 10px 8px !important;
    background: #f2f5f8 !important;
    color: #6b7788 !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

body.site-redesign .step.active {
    background: var(--esf-blue) !important;
    color: #fff !important;
}

body.site-redesign .checkout-form {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.site-redesign .form-group {
    margin-bottom: 17px !important;
}

body.site-redesign .form-group input,
body.site-redesign .form-group select,
body.site-redesign .form-group textarea {
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 13px !important;
}

body.site-redesign .confirm-btn,
body.site-redesign .next-step button {
    background: var(--esf-blue) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

body.site-redesign .confirm-btn:hover {
    background: var(--esf-blue-dark) !important;
}

body.site-redesign .confirmation-container,
body.site-redesign .confirmation-details,
body.site-redesign .next-step,
body.site-redesign .email-notice {
    border-radius: 14px !important;
}

body.site-redesign .confirmation-details,
body.site-redesign .next-step,
body.site-redesign .email-notice {
    background: #f7f9fc !important;
    border: 1px solid var(--esf-border) !important;
}

/* =========================================================
   PAYMENT SUCCESS
========================================================= */

body.site-redesign .payment-container {
    width: min(620px, calc(100% - 36px)) !important;
    margin: 90px auto !important;
    padding: 42px 30px !important;
    background: #fff !important;
    border: 1px solid var(--esf-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--esf-shadow) !important;
    text-align: center !important;
}

body.site-redesign .payment-container h1 {
    color: var(--esf-navy) !important;
}

body.site-redesign .payment-container #status {
    color: var(--esf-muted) !important;
}

/* =========================================================
   CONFIRMATION POPUPS
========================================================= */

body.site-redesign .confirmation-popup {
    border: 1px solid var(--esf-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 26px 70px rgba(13, 27, 42, 0.24) !important;
}

body.site-redesign .confirmation-popup h2,
body.site-redesign .reference-box strong {
    color: var(--esf-blue) !important;
}

body.site-redesign .reference-box,
body.site-redesign .confirmation-details {
    background: #f7f9fc !important;
    border: 1px solid var(--esf-border) !important;
}

body.site-redesign .close-confirmation {
    background: var(--esf-blue) !important;
    color: #fff !important;
}

/* =========================================================
   TERMS / SIMPLE CONTENT PAGES
========================================================= */

body.site-redesign > h2,
body.site-redesign > h3,
body.site-redesign > h4,
body.site-redesign > p {
    max-width: 1000px;
}

body.site-redesign > h3,
body.site-redesign > h4 {
    width: min(1000px, calc(100% - 36px));
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--esf-navy) !important;
}

body.site-redesign > p {
    width: min(1000px, calc(100% - 36px));
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.75 !important;
}

/* =========================================================
   FOOTER
========================================================= */

body.site-redesign footer {
    width: 100% !important;
    margin-top: auto !important;
    padding: 28px 6% !important;
    background: #08131f !important;
    color: #b7c3d1 !important;
    text-align: center !important;
}

body.site-redesign footer p {
    color: #b7c3d1 !important;
    margin: 0 !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
    body.site-redesign > header,
    body.site-redesign header.top-bar {
        justify-content: center !important;
    }

    body.site-redesign > header nav,
    body.site-redesign header.top-bar nav {
        width: 100% !important;
        justify-content: center !important;
    }

    body.site-redesign .repair-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.site-redesign .checkout-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    .site-top-strip {
        padding: 8px 12px;
        font-size: 12px;
    }

    body.site-redesign > header,
    body.site-redesign header.top-bar {
        padding: 11px 14px !important;
        gap: 10px !important;
    }

    body.site-redesign > header .header-left {
        width: 100% !important;
        justify-content: center !important;
    }

    body.site-redesign > header .logo,
    body.site-redesign header.top-bar .logo {
        width: 48px !important;
        height: 48px !important;
    }

    body.site-redesign > header nav,
    body.site-redesign header.top-bar nav {
        gap: 5px !important;
    }

    body.site-redesign > header nav a:not(.cart-link),
    body.site-redesign > header .nav-dropdown > summary,
    body.site-redesign > header .esf-social-button,
    body.site-redesign > header .esf-nav-button,
    body.site-redesign .esf-account-link {
        padding: 7px 8px !important;
        font-size: 12px !important;
    }

    body.site-redesign .cart-link {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    body.site-redesign .brands,
    body.site-redesign .samsung-series,
    body.site-redesign .repair-grid,
    body.site-redesign .screen-brand-grid {
        width: min(100% - 24px, 1220px) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.site-redesign .brand,
    body.site-redesign .model,
    body.site-redesign .screen-brand-card {
        min-height: 155px !important;
        padding: 16px !important;
    }

    body.site-redesign .model img {
        max-height: 105px !important;
    }

    body.site-redesign .accessory-page {
        width: min(100% - 24px, 1220px) !important;
        padding-top: 36px !important;
    }

    body.site-redesign .checkout-form-container,
    body.site-redesign .checkout-sidebar {
        padding: 20px 16px !important;
    }

    body.site-redesign .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 430px) {
    body.site-redesign .brands,
    body.site-redesign .samsung-series,
    body.site-redesign .repair-grid,
    body.site-redesign .screen-brand-grid {
        grid-template-columns: 1fr !important;
    }
}