/* EDIT GUIDE: css/tees.css
   Page-specific or legacy styles. Shared theme files load later and can override these rules. Check the page stylesheet list before changing colours or spacing.
   Search EDIT BLOCK for selectors/functions; see EDITING-GUIDE.md for the file map.
*/
/* FILE GUIDE: Original tee-page component styles. Shared refresh.css loads later and supplies the current visual treatment. */
/* =========================================================
   TEES PRODUCT PAGE
   ========================================================= */


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


/* EDIT BLOCK: .site-header. Change the declarations below; shared overrides may load later. */
.site-header {
    height: 82px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    z-index: 1000;
}


/* EDIT BLOCK: .site-header .container. Change the declarations below; shared overrides may load later. */
.site-header .container {
    height: 100%;
}


/* EDIT BLOCK: .header-inner. Change the declarations below; shared overrides may load later. */
.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}


/* LOGO */


/* EDIT BLOCK: .site-header .logo. Change the declarations below; shared overrides may load later. */
.site-header .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}


/* EDIT BLOCK: .site-header .logo img. Change the declarations below; shared overrides may load later. */
.site-header .logo img {
    display: block;
    width: 220px;
    height: auto;
    max-height: 62px;
    object-fit: contain;
}


/* NAVIGATION */


/* EDIT BLOCK: .main-nav. Change the declarations below; shared overrides may load later. */
.main-nav {
    margin-left: auto;
}


/* EDIT BLOCK: .main-nav > ul. Change the declarations below; shared overrides may load later. */
.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}


/* EDIT BLOCK: .main-nav > ul > li. Change the declarations below; shared overrides may load later. */
.main-nav > ul > li {
    position: relative;
}


/* EDIT BLOCK: .main-nav a. Change the declarations below; shared overrides may load later. */
.main-nav a {
    color: #1f2937;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}


/* EDIT BLOCK: .main-nav > ul > li > a. Change the declarations below; shared overrides may load later. */
.main-nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
}


/* EDIT BLOCK: .main-nav a:hover. Change the declarations below; shared overrides may load later. */
.main-nav a:hover {
    color: #0d4f75;
}


/* DROPDOWN */


/* EDIT BLOCK: .nav-dropdown > a i. Change the declarations below; shared overrides may load later. */
.nav-dropdown > a i {
    font-size: 11px;
}


/* EDIT BLOCK: .dropdown-menu. Change the declarations below; shared overrides may load later. */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 190px;
    background: #ffffff;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
}


/* EDIT BLOCK: .nav-dropdown:hover .dropdown-menu. Change the declarations below; shared overrides may load later. */
.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* EDIT BLOCK: .dropdown-menu li. Change the declarations below; shared overrides may load later. */
.dropdown-menu li {
    width: 100%;
}


/* EDIT BLOCK: .dropdown-menu a. Change the declarations below; shared overrides may load later. */
.dropdown-menu a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: #374151;
}


/* EDIT BLOCK: .dropdown-menu a:hover. Change the declarations below; shared overrides may load later. */
.dropdown-menu a:hover {
    background: #f3f6f8;
    color: #0d4f75;
}


/* HEADER BUTTON */


/* EDIT BLOCK: .site-header .btn-primary. Change the declarations below; shared overrides may load later. */
.site-header .btn-primary {
    flex-shrink: 0;
    padding: 11px 20px;
    font-size: 14px;
    white-space: nowrap;
}


/* =========================================================
   PRODUCT HERO
========================================================= */


/* EDIT BLOCK: .product-hero. Change the declarations below; shared overrides may load later. */
.product-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 45%,
            rgba(215, 155, 50, 0.18),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #061d32 0%,
            #0b3a5b 55%,
            #0a2f4b 100%
        );

    color: #ffffff;
}


/* subtle industrial glow */


/* EDIT BLOCK: .product-hero::after. Change the declarations below; shared overrides may load later. */
.product-hero::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -180px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(215, 155, 50, 0.10);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
}



/* EDIT BLOCK: .product-hero .container. Change the declarations below; shared overrides may load later. */
.product-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}



/* EDIT BLOCK: .product-hero-grid. Change the declarations below; shared overrides may load later. */
.product-hero-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 70px;
    min-height: 640px;

    /* Moves the entire hero content inward */
    padding-left: 80px;
    padding-right: 40px;
}


/* HERO CONTENT */


/* EDIT BLOCK: .product-hero-content. Change the declarations below; shared overrides may load later. */
.product-hero-content {
    max-width: 650px;
    margin-left: 70px;
}



/* EDIT BLOCK: .product-hero .section-tag. Change the declarations below; shared overrides may load later. */
.product-hero .section-tag {
    display: inline-block;
    margin-bottom: 20px;
    color: #f0ba4f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
}



/* EDIT BLOCK: .product-hero h1. Change the declarations below; shared overrides may load later. */
.product-hero h1 {
    margin: 0 0 25px;
    color: #ffffff !important;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.5px;
}



/* EDIT BLOCK: .product-hero p. Change the declarations below; shared overrides may load later. */
.product-hero p {
    max-width: 620px;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    line-height: 1.75;
}


/* HERO BUTTONS */


/* EDIT BLOCK: .product-hero-actions. Change the declarations below; shared overrides may load later. */
.product-hero-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 32px;
}



/* EDIT BLOCK: .product-hero .btn-primary. Change the declarations below; shared overrides may load later. */
.product-hero .btn-primary {
    background: #d79b32;
    border-color: #d79b32;
    color: #ffffff;
}



/* EDIT BLOCK: .product-hero .btn-primary:hover. Change the declarations below; shared overrides may load later. */
.product-hero .btn-primary:hover {
    background: #b87d1d;
    border-color: #b87d1d;
}



/* EDIT BLOCK: .product-hero .btn-outline. Change the declarations below; shared overrides may load later. */
.product-hero .btn-outline {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
}



/* EDIT BLOCK: .product-hero .btn-outline:hover. Change the declarations below; shared overrides may load later. */
.product-hero .btn-outline:hover {
    background: #ffffff;
    color: #0b3a5b;
}


/* HERO IMAGE */


/* EDIT BLOCK: .product-hero-image. Change the declarations below; shared overrides may load later. */
.product-hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* EDIT BLOCK: .product-hero-image img. Change the declarations below; shared overrides may load later. */
.product-hero-image img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 560px;
    height: 390px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.28);
}



/* EDIT BLOCK: .hero-image-glow. Change the declarations below; shared overrides may load later. */
.hero-image-glow {
    position: absolute;
    width: 80%;
    height: 80%;
    background: rgba(215, 155, 50, 0.16);
    filter: blur(55px);
    border-radius: 50%;
}


/* =========================================================
   SECTION COMMON
========================================================= */


/* EDIT BLOCK: .product-overview, .product-types. Change the declarations below; shared overrides may load later. */
.product-overview,
.product-types {
    padding: 100px 0;
}



/* EDIT BLOCK: .section-header. Change the declarations below; shared overrides may load later. */
.section-header {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}



/* EDIT BLOCK: .section-header .section-tag. Change the declarations below; shared overrides may load later. */
.section-header .section-tag {
    display: inline-block;
    margin-bottom: 14px;
    color: #f58220;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.3px;
}



/* EDIT BLOCK: .section-header h2. Change the declarations below; shared overrides may load later. */
.section-header h2 {
    margin: 0 0 18px;
    color: #0b2f4d;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
}



/* EDIT BLOCK: .section-header p. Change the declarations below; shared overrides may load later. */
.section-header p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   PRODUCT OVERVIEW
========================================================= */


/* EDIT BLOCK: .product-overview. Change the declarations below; shared overrides may load later. */
.product-overview {
    background: #ffffff;
}



/* EDIT BLOCK: .product-overview-grid. Change the declarations below; shared overrides may load later. */
.product-overview-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: start;
}



/* EDIT BLOCK: .product-overview-content h3. Change the declarations below; shared overrides may load later. */
.product-overview-content h3 {
    margin: 0 0 20px;
    color: #0b2f4d;
    font-size: 30px;
}



/* EDIT BLOCK: .product-overview-content p. Change the declarations below; shared overrides may load later. */
.product-overview-content p {
    margin: 0 0 18px;
    color: #64748b;
    line-height: 1.75;
}



/* EDIT BLOCK: .feature-list. Change the declarations below; shared overrides may load later. */
.feature-list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}



/* EDIT BLOCK: .feature-list li. Change the declarations below; shared overrides may load later. */
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 13px;
    color: #334155;
    line-height: 1.5;
}



/* EDIT BLOCK: .feature-list li i. Change the declarations below; shared overrides may load later. */
.feature-list li i {
    margin-top: 4px;
    color: #f58220;
}


/* SPECIFICATION BOX */


/* EDIT BLOCK: .product-spec-box. Change the declarations below; shared overrides may load later. */
.product-spec-box {
    padding: 30px;
    background: #f5f8fa;
    border-left: 4px solid #f58220;
}



/* EDIT BLOCK: .spec-box-header. Change the declarations below; shared overrides may load later. */
.spec-box-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}



/* EDIT BLOCK: .spec-box-header i. Change the declarations below; shared overrides may load later. */
.spec-box-header i {
    color: #f58220;
}



/* EDIT BLOCK: .spec-box-header h3. Change the declarations below; shared overrides may load later. */
.spec-box-header h3 {
    margin: 0;
    color: #0b2f4d;
    font-size: 22px;
}



/* EDIT BLOCK: .spec-row. Change the declarations below; shared overrides may load later. */
.spec-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #dce3e8;
}



/* EDIT BLOCK: .spec-row:last-child. Change the declarations below; shared overrides may load later. */
.spec-row:last-child {
    border-bottom: none;
}



/* EDIT BLOCK: .spec-row span. Change the declarations below; shared overrides may load later. */
.spec-row span {
    color: #64748b;
}



/* EDIT BLOCK: .spec-row strong. Change the declarations below; shared overrides may load later. */
.spec-row strong {
    color: #1e293b;
    text-align: right;
}


/* =========================================================
   TEE TYPES
========================================================= */


/* EDIT BLOCK: .product-types. Change the declarations below; shared overrides may load later. */
.product-types {
    background: #f5f8fa;
}



/* EDIT BLOCK: .tee-types-grid. Change the declarations below; shared overrides may load later. */
.tee-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}



/* EDIT BLOCK: .tee-type-card. Change the declarations below; shared overrides may load later. */
.tee-type-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}



/* EDIT BLOCK: .tee-type-card:hover. Change the declarations below; shared overrides may load later. */
.tee-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(7, 31, 56, 0.10);
}



/* EDIT BLOCK: .tee-type-image. Change the declarations below; shared overrides may load later. */
.tee-type-image {
    height: 260px;
    background: #e9eef2;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* EDIT BLOCK: .tee-placeholder. Change the declarations below; shared overrides may load later. */
.tee-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #0b2f4d;
    color: #f58220;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
}



/* EDIT BLOCK: .tee-type-content. Change the declarations below; shared overrides may load later. */
.tee-type-content {
    padding: 32px;
}



/* EDIT BLOCK: .type-label. Change the declarations below; shared overrides may load later. */
.type-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #f58220;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}



/* EDIT BLOCK: .tee-type-content h3. Change the declarations below; shared overrides may load later. */
.tee-type-content h3 {
    margin: 0 0 14px;
    color: #0b2f4d;
    font-size: 28px;
}



/* EDIT BLOCK: .tee-type-content p. Change the declarations below; shared overrides may load later. */
.tee-type-content p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


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


/* EDIT BLOCK: @media (max-width: 1100px). Change the declarations below; shared overrides may load later. */
@media (max-width: 1100px) {

    .main-nav > ul {
        gap: 18px;
    }

    .header-inner {
        gap: 20px;
    }

    .site-header .logo img {
        width: 190px;
    }

    .product-hero-grid {
        gap: 40px;
    }

}



/* EDIT BLOCK: @media (max-width: 900px). Change the declarations below; shared overrides may load later. */
@media (max-width: 900px) {

    .site-header {
        height: auto;
        min-height: 78px;
    }

    .header-inner {
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .main-nav {
        order: 3;
        width: 100%;
    }

    .main-nav > ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px 22px;
    }

    .product-hero-grid {
        grid-template-columns: 1fr;
        padding: 80px 0;
        text-align: center;
    }

    .product-hero-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .product-hero-actions {
        justify-content: center;
    }

    .product-hero-image {
        margin-top: 20px;
    }

    .product-overview-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}



/* EDIT BLOCK: @media (max-width: 650px). Change the declarations below; shared overrides may load later. */
@media (max-width: 650px) {

    .site-header .logo img {
        width: 170px;
    }

    .site-header .btn-primary {
        padding: 9px 14px;
        font-size: 12px;
    }

    .main-nav > ul {
        gap: 10px 15px;
    }

    .main-nav a {
        font-size: 13px;
    }

    .product-hero h1 {
        font-size: 42px;
    }

    .product-hero p {
        font-size: 15px;
    }

    .product-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .product-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .product-hero-image img {
        height: 280px;
    }

    .tee-types-grid {
        grid-template-columns: 1fr;
    }

    .product-overview,
    .product-types {
        padding: 70px 0;
    }

}

/* EDIT BLOCK: .standards-list. Change the declarations below; shared overrides may load later. */
.standards-list {
    display: grid;
    gap: 12px;
    margin-top: 25px;
}


/* EDIT BLOCK: .standard-item. Change the declarations below; shared overrides may load later. */
.standard-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    transition: all 0.2s ease;
}


/* EDIT BLOCK: .standard-item:hover. Change the declarations below; shared overrides may load later. */
.standard-item:hover {
    background: #ffffff;
    border-color: #f58220;
    transform: translateX(4px);
}


/* EDIT BLOCK: .standard-icon. Change the declarations below; shared overrides may load later. */
.standard-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b2f4d;
    color: #f58220;
}


/* EDIT BLOCK: .standard-item strong. Change the declarations below; shared overrides may load later. */
.standard-item strong {
    display: block;
    margin-bottom: 3px;
    color: #0b2f4d;
    font-size: 15px;
}


/* EDIT BLOCK: .standard-item span. Change the declarations below; shared overrides may load later. */
.standard-item span {
    display: block;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}
/* =========================================================
   PRODUCT PARAMETERS
========================================================= */


/* EDIT BLOCK: .product-parameters. Change the declarations below; shared overrides may load later. */
.product-parameters {
    margin-top: 45px;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #f58220;
    box-shadow: 0 12px 35px rgba(7, 31, 56, 0.06);
}


/* HEADER */


/* EDIT BLOCK: .parameters-header. Change the declarations below; shared overrides may load later. */
.parameters-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}


/* EDIT BLOCK: .parameters-icon. Change the declarations below; shared overrides may load later. */
.parameters-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0b2f4d;
    color: #f58220;

    font-size: 20px;
}


/* EDIT BLOCK: .parameters-header .type-label. Change the declarations below; shared overrides may load later. */
.parameters-header .type-label {
    margin-bottom: 5px;
}


/* EDIT BLOCK: .parameters-header h3. Change the declarations below; shared overrides may load later. */
.parameters-header h3 {
    margin: 0;
    color: #0b2f4d;
    font-size: 25px;
}


/* PARAMETER GRID */


/* EDIT BLOCK: .parameters-grid. Change the declarations below; shared overrides may load later. */
.parameters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
}


/* INDIVIDUAL ROW */


/* EDIT BLOCK: .parameter-row. Change the declarations below; shared overrides may load later. */
.parameter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;

    min-height: 58px;
    padding: 13px 18px;

    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}



/* EDIT BLOCK: .parameter-row:nth-child(even). Change the declarations below; shared overrides may load later. */
.parameter-row:nth-child(even) {
    background: #ffffff;
}



/* EDIT BLOCK: .parameter-row span. Change the declarations below; shared overrides may load later. */
.parameter-row span {
    color: #64748b;
    font-size: 14px;
}



/* EDIT BLOCK: .parameter-row strong. Change the declarations below; shared overrides may load later. */
.parameter-row strong {
    color: #0b2f4d;
    font-size: 14px;
    text-align: right;
}


/* HOVER */


/* EDIT BLOCK: .parameter-row:hover. Change the declarations below; shared overrides may load later. */
.parameter-row:hover {
    background: #f1f5f9;
}


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


/* EDIT BLOCK: @media (max-width: 700px). Change the declarations below; shared overrides may load later. */
@media (max-width: 700px) {

    .product-parameters {
        padding: 22px;
    }

    .parameters-grid {
        grid-template-columns: 1fr;
    }

    .parameter-row {
        min-height: 52px;
    }

}


/* EDIT BLOCK: @media (max-width: 500px). Change the declarations below; shared overrides may load later. */
@media (max-width: 500px) {

    .product-parameters {
        padding: 18px;
    }

    .parameter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .parameter-row strong {
        text-align: left;
    }

}

/* EDIT BLOCK: .material-card. Change the declarations below; shared overrides may load later. */
.material-card {
    display: block;
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid #d9e1e7;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
}


/* EDIT BLOCK: .material-card:hover. Change the declarations below; shared overrides may load later. */
.material-card:hover {
    transform: translateY(-4px);
    border-color: #f58220;
    box-shadow: 0 12px 30px rgba(7, 31, 56, 0.10);
}


/* EDIT BLOCK: .material-icon. Change the declarations below; shared overrides may load later. */
.material-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef4f7;
    color: #0b2f4d;
    border-radius: 10px;
}


/* EDIT BLOCK: .material-card h3. Change the declarations below; shared overrides may load later. */
.material-card h3 {
    margin: 0 0 8px;
    color: #0b2f4d;
    font-size: 19px;
}


/* EDIT BLOCK: .material-card p. Change the declarations below; shared overrides may load later. */
.material-card p {
    margin: 0 0 22px;
    color: #64748b;
    font-size: 14px;
}


/* EDIT BLOCK: .material-link. Change the declarations below; shared overrides may load later. */
.material-link {
    color: #0b2f4d;
    font-size: 13px;
    font-weight: 700;
}


/* EDIT BLOCK: .material-link i. Change the declarations below; shared overrides may load later. */
.material-link i {
    margin-left: 7px;
    color: #f58220;
    transition: transform 0.2s ease;
}


/* EDIT BLOCK: .material-card:hover .material-link i. Change the declarations below; shared overrides may load later. */
.material-card:hover .material-link i {
    transform: translateX(4px);
}

/* EDIT BLOCK: .materials-grid. Change the declarations below; shared overrides may load later. */
.materials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* EDIT BLOCK: @media (max-width: 1100px). Change the declarations below; shared overrides may load later. */
@media (max-width: 1100px) {
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* EDIT BLOCK: @media (max-width: 600px). Change the declarations below; shared overrides may load later. */
@media (max-width: 600px) {
    .materials-grid {
        grid-template-columns: 1fr;
    }
}