.hn-main-container {
  padding: 0;
}

.hn-midlands-page {

    color: #373737;

    background: #fff;

}

.hn-midlands-page * {

    box-sizing: border-box;

}

.hn-midlands-page img {

    max-width: 100%;

}

.hn-midlands-wrap {

    max-width: 1320px;

    margin: 0 auto;

    padding: 0 24px;

}

/* =========================================================

   HERO BANNER

========================================================= */

.hn-midlands-hero {

    position: relative;

    min-height: 520px;

    background-image:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.78) 0%,

            rgba(0, 0, 0, 0.62) 25%,

            rgba(0, 0, 0, 0.32) 48%,

            rgba(0, 0, 0, 0.08) 70%,

            rgba(0, 0, 0, 0) 100%

        ),

        url("https://hnuk.blob.core.windows.net/hnuk-assets/hn-landing-pages/midlands-sofa-ranges/olivia-corner-sofa-harvey-norman-uk.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    align-items: center;

}

.hn-midlands-hero .hn-midlands-wrap {

    width: 100%;

}

.hn-midlands-hero-content {

    position: relative;

    z-index: 2;

    max-width: 520px;

    padding: 85px 0;

    color: #fff;

    text-align: left;

}

.hn-midlands-hero h1 {


    font-size: 4em;

    line-height: 1.1em;

    font-weight: 800;

    margin: 0 0 24px;

    color: #fff;

}

.hn-midlands-hero p {

    max-width: 430px;

    margin: 0 0 30px;

    font-size: 1.286em;

    line-height: 1.6em;

    color: #fff;

}

.hn-midlands-hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 28px;

    border: 2px solid #fff;

    background: transparent;

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.03em;

    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;

}

.hn-midlands-hero-button:hover,

.hn-midlands-hero-button:focus-visible {

    background: #fff;

    border-color: #fff;

    color: #373737;

}

/* =========================================================

   BENEFIT ICON STRIP

========================================================= */

.hn-midlands-benefits {

    background: #fafafa;

    border-bottom: 1px solid #eee;

}

.hn-midlands-benefit-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

}

.hn-midlands-benefit {

    min-height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    padding: 25px;

    position: relative;

}

.hn-midlands-benefit:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    width: 1px;

    height: 45px;

    transform: translateY(-50%);

    background: #ddd;

}

.hn-midlands-icon {

    flex: none;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #373737;

}

.hn-midlands-icon svg {

    width: 30px;

    height: 30px;

    stroke: currentColor;

    fill: none;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.hn-midlands-benefit-text {

    font-size: 14px;

    line-height: 1.45;

    font-weight: 700;

    color: #373737;

}

/* =========================================================

   MADE IN THE MIDLANDS STORY

========================================================= */

.hn-midlands-story {

    padding: 75px 0 85px;

}

.hn-midlands-title {

    text-align: center;

    margin-bottom: 22px;

}

.hn-midlands-title h2 {

    margin: 0;

    font-size: 1.7em;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: #373737;

}

.hn-midlands-story-intro {

    max-width: 800px;

    margin: 0 auto 42px;

    text-align: center;

    font-size: 1.143em;

    line-height: 1.7em;

    color: #444;

}

/* CRAFTSMANSHIP CARDS */

.hn-midlands-craft-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}

.hn-midlands-craft-card {

    background: #f3f4f5;

    overflow: hidden;
    border-radius: 4px;

}

.hn-midlands-craft-card img {

    display: block;

    width: 100%;

    height: 270px;

    object-fit: cover;

}

.hn-midlands-craft-content {

    padding: 30px 20px 30px;

}

.hn-midlands-craft-content h3 {

    font-size: 1.143em;

    margin: 0 0 7px;

    color: #373737;

}

.hn-midlands-craft-content p {

    margin: 0;

    font-size: 1.143em;

    line-height: 1.5;

    color: #373737;

}

/* =========================================================

   SOFA COLLECTION SLIDER

========================================================= */

.hn-midlands-collection {

    padding: 10px 0 70px;

}

.hn-midlands-section-title {

    text-align: center;

    margin-bottom: 36px;

}

.hn-midlands-section-title h2 {

    margin: 0;

    font-size: 25px;

    font-weight: 800;

    text-transform: uppercase;

    color: #373737;

}



/* --- SLIDER SHELL + CORNER ARROWS --- */

.hn-midlands-slider {

    position: relative;

}

.hn-midlands-slider-nav {

    position: absolute;

    top: -76px;          /* sits in the top-right corner, level with the title */

    right: 0;

    display: flex;

    gap: 10px;

    z-index: 3;

}

.hn-midlands-arrow {

    width: 44px;

    height: 44px;

    padding: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    border: 1px solid #d5d5d5;

    border-radius: 50%;

    color: #373737;

    cursor: pointer;

    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;

}

.hn-midlands-arrow svg {

    width: 17px;

    height: 17px;

    stroke: currentColor;

    fill: none;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.hn-midlands-arrow:hover:not(:disabled),

.hn-midlands-arrow:focus-visible:not(:disabled) {

    background: #0B62C4;

    border-color: #0B62C4;

    color: #fff;

}

.hn-midlands-arrow:disabled {

    opacity: 0.35;

    cursor: default;

}

/* --- SLIDER TRACK --- */

.hn-midlands-slider-track {

    display: flex;

    gap: 26px;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    /* room for the card hover-lift and shadow */

    padding: 6px 0 14px;

    /* hide the scrollbar, the arrows are the control */

    scrollbar-width: none;

    -ms-overflow-style: none;

}

.hn-midlands-slider-track::-webkit-scrollbar {

    display: none;

}

.hn-midlands-slider-track > .hn-midlands-product-card {

    flex: 0 0 calc((100% - 52px) / 3);   /* 3 across, 2 gaps of 26px */

    scroll-snap-align: start;

}

.slick-slide {
      margin: 0 7px;
  }

  /* the parent */
  .slick-list {
      margin: 0 -7px;
  }

.hn-midlands-product-card {

    background: #f3f4f5;

    overflow: hidden;

    border-radius: 4px;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.hn-midlands-product-image {
  height: 300px;
  overflow: hidden;
}

.hn-midlands-product-card img {
  transition: transform 0.3s;
}

.hn-midlands-product-card:hover img {
  transform: scale(1.05);
}

.hn-midlands-product-card img {

    width: 100%;

    height: 300px;

    display: block;

    object-fit: cover;

}

.hn-midlands-product-content {

    padding: 20px;

}

.hn-midlands-product-content h3 {

    margin: 0 0 7px;

    font-size: 1.5em;

    color: #373737;

}

.hn-midlands-product-content p {

    margin: 0 0 17px;

    font-size: 1.143em;

    color: #373737;

}

.hn-midlands-product-link {

    color: #373737;

    text-decoration: none;

    font-size: 1.143em;

    font-weight: 400;

    transition: color 0.25s ease;

}

.hn-midlands-product-link:hover,

.hn-midlands-product-link:focus-visible,

.hn-midlands-product-card:hover .hn-midlands-product-link {

    color: #0B62C4;

    text-decoration: underline;

}

/* =========================================================

   PROMO BANNER

========================================================= */

.hn-midlands-promo-wrap {

    max-width: 1050px;

    margin: 25px auto 0;

    padding: 0 24px;

}

.hn-midlands-promo-image {

    display: block;

    width: 100%;

    overflow: hidden;

    text-decoration: none;

}

.hn-midlands-promo-image img {

    display: block;

    width: 100%;

    height: auto;

}

/* =========================================================

   SHOP BY CATEGORY

========================================================= */

.hn-midlands-category-section {

    padding: 60px 0 70px;

}

.hn-midlands-category-title {

    text-align: center;

    margin-bottom: 36px;

}

.hn-midlands-category-title h2 {

    margin: 0;

    font-size: 26px;

    font-weight: 800;

    text-transform: uppercase;

    color: #373737;

}

.hn-midlands-category-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

}

.hn-midlands-category-card {

    display: flex;

    flex-direction: column;

    background: #f3f4f5;

    text-decoration: none;

    color: #373737;

    overflow: hidden;
    border-radius: 4px;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.hn-midlands-category-card img {
  transition: transform 0.3s;
}

.hn-midlands-category-card:hover img {
  transform: scale(1.05);
}

.hn-midlands-category-image {

    width: 100%;

    height: 230px;

    overflow: hidden;

}

.hn-midlands-category-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hn-midlands-category-content {

    padding: 22px;

    background: #f3f4f5;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}

.hn-midlands-category-content h3 {

    margin: 0 0 8px;

    font-size: 17px;

    font-weight: 800;

    color: #373737;

}

.hn-midlands-category-content span,
.hn-midlands-product-content span {
  font-size: 1.143em;
  line-height: 1.5em;
  color: #373737;
}

.hn-midlands-category-shop {

    margin-top: auto;

    font-size: 12px;

    font-weight: 800;

    color: #373737;

    transition: color 0.25s ease;

}

.hn-midlands-category-card:hover .hn-midlands-category-shop,

.hn-midlands-category-card:focus-visible .hn-midlands-category-shop {

    color: #0B62C4;

    text-decoration: underline;

}

/* =========================================================

   TABLET  (601px – 1024px)

   Card grids drop to 2 per row.

========================================================= */

@media (max-width: 1024px) {

    .hn-midlands-wrap {

        padding: 0 20px;

    }

    /* HERO */

    .hn-midlands-hero {

        min-height: 420px;

        background-position: 72% center;

        background-image:

            linear-gradient(

                90deg,

                rgba(0, 0, 0, 0.82) 0%,

                rgba(0, 0, 0, 0.68) 35%,

                rgba(0, 0, 0, 0.40) 62%,

                rgba(0, 0, 0, 0.15) 85%,

                rgba(0, 0, 0, 0.05) 100%

            ),

            url("https://hnuk.blob.core.windows.net/hnuk-assets/hn-landing-pages/midlands-sofa-ranges/midlands-sofa-banner.jpg");

    }

    .hn-midlands-hero-content {

        max-width: 60%;

        padding: 60px 0;

    }

    .hn-midlands-hero h1 {

        font-size: 2em;

    }

    .hn-midlands-hero p {

        font-size: 16px;

        margin-bottom: 26px;

    }

    /* BENEFITS — 2 per row */

    .hn-midlands-benefit-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .hn-midlands-benefit {

        min-height: 104px;

        padding: 20px 16px;

        justify-content: flex-start;

    }

    .hn-midlands-benefit:not(:last-child)::after {

        display: none;

    }

    .hn-midlands-benefit:nth-child(odd)::after {

        content: "";

        display: block;

        position: absolute;

        right: 0;

        top: 50%;

        width: 1px;

        height: 45px;

        transform: translateY(-50%);

        background: #ddd;

    }

    .hn-midlands-benefit:nth-child(1),

    .hn-midlands-benefit:nth-child(2) {

        border-bottom: 1px solid #ddd;

    }

    /* SECTION SPACING */

    .hn-midlands-story {

        padding: 55px 0 60px;

    }

    .hn-midlands-collection {

        padding: 10px 0 55px;

    }

    .hn-midlands-category-section {

        padding: 45px 0 55px;

    }

    /* CARD GRIDS — 2 per row */

    .hn-midlands-craft-grid,

    .hn-midlands-category-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }

    /* SLIDER — 2 cards in view */

    .hn-midlands-slider-track {

        gap: 20px;

    }

    .hn-midlands-slider-track > .hn-midlands-product-card {

        flex: 0 0 calc((100% - 20px) / 2);

    }

    .hn-midlands-slider-nav {

        top: -70px;

    }

    /* IMAGES scale up to fill the wider 2-up columns */

    .hn-midlands-craft-card img {

        height: 300px;

    }

    .hn-midlands-product-card img {

        height: 340px;

    }

    .hn-midlands-category-image {

        height: 280px;

    }

    .hn-midlands-promo-wrap {

        max-width: 100%;

        margin: 20px auto 0;

        padding: 0 20px;

    }

}

/* =========================================================

   MOBILE  (<= 600px)

   Everything stacks one per row, full width.

========================================================= */

@media (max-width: 600px) {

    .hn-midlands-wrap {

        padding: 0 16px;

    }

    /* HERO — full dark overlay so white text stays legible */

    .hn-midlands-hero {

        min-height: 0;

        background-position: center;

        background-image:

            linear-gradient(

                180deg,

                rgba(0, 0, 0, 0.62) 0%,

                rgba(0, 0, 0, 0.70) 100%

            ),

            url("https://hnuk.blob.core.windows.net/hnuk-assets/hn-landing-pages/midlands-sofa-ranges/olivia-corner-sofa-harvey-norman-uk.png");

    }

    .hn-midlands-hero-content {

        max-width: 100%;

        padding: 55px 0;

    }

    .hn-midlands-hero h1 {

        font-size: 34px;

        margin-bottom: 16px;

    }

    .hn-midlands-hero p {

        max-width: 100%;

        font-size: 15px;

        margin-bottom: 24px;

    }

    .hn-midlands-hero-button {

        padding: 16px 20px;

    }

    /* BENEFITS — stacked, icon left */

    /* .hn-midlands-benefit-grid {

        grid-template-columns: 1fr;

    } */

    .hn-midlands-benefit {

        min-height: 0;

        padding: 16px;

        justify-content: flex-start;

        gap: 14px;

    }

    .hn-midlands-benefit:nth-child(odd)::after {

        display: none;

    }

    /* .hn-midlands-benefit:not(:last-child) {

        border-bottom: 1px solid #e5e5e5;

    } */

    /* SECTION SPACING */

    .hn-midlands-story {

        padding: 40px 0 45px;

    }

    .hn-midlands-collection {

        padding: 5px 0 40px;

    }

    .hn-midlands-category-section {

        padding: 30px 0 45px;

    }

    .hn-midlands-section-title h2,

    .hn-midlands-category-title h2 {

        font-size: 21px;

    }

    .hn-midlands-section-title,

    .hn-midlands-category-title {

        margin-bottom: 26px;

    }

    .hn-midlands-story-intro {

        font-size: 1.143em;

        line-height: 1.65em;

        text-align: left;

        margin-bottom: 30px;

    }

    /* CARD GRIDS — 1 per row, stacked */

    .hn-midlands-craft-grid,

    .hn-midlands-category-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    /* SLIDER — 1 card in view with a peek of the next */

    .hn-midlands-slider-track {

        gap: 14px;

    }

    .hn-midlands-slider-track > .hn-midlands-product-card {

        flex: 0 0 88%;

    }

    /* A corner position would collide with the centred title on a narrow

       screen, so the arrows sit under the title and centre up instead. */

    .hn-midlands-slider-nav {

        position: static;

        justify-content: center;

        margin-top: 6px;

    }

    .hn-midlands-arrow {

        width: 42px;

        height: 42px;

    }

    /* IMAGES — shorter so stacked cards don't run away */

    .hn-midlands-craft-card img {

        height: 220px;

    }

    .hn-midlands-product-card img {

        height: 260px;

    }

    .hn-midlands-category-image,
    .hn-midlands-product-image {

        height: 220px;

    }

    /* Disable lift-on-hover (no hover on touch) */

    .hn-midlands-product-card:hover,

    .hn-midlands-category-card:hover {

        transform: none;

        box-shadow: none;

    }

    .hn-midlands-category-content {

        min-height: 0;

        padding: 18px;

    }

    .hn-midlands-promo-wrap {

        margin: 18px auto 0;

        padding: 0 16px;

    }

}