/* Mobile storefront: one brand row and a stable, complete navigation row. */
.header .mobile-brand-name,
.header .navigation-short-label,
.header .header-inner > nav > .navigation-more { display: none; }

@media (max-width: 1000px) {
  .header, .header.is-compact {
    background: linear-gradient(115deg, #102f57, #071c39 80%);
    border-bottom: 1px solid #2f587e;
  }
  .header .header-inner {
    width: calc(100% - 28px);
    max-width: 720px;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 98px;
    gap: 2px 10px;
    padding: 6px 0 4px;
    align-items: center;
  }
  .header .header-inner > .wordmark {
    grid-area: 1 / 1;
    display: flex;
    width: auto;
    min-width: 0;
    gap: 9px;
    margin: 0;
    padding: 0;
  }
  .header .header-inner > .wordmark > img,
  .header.is-compact .header-inner > .wordmark > img {
    width: 46px;
    height: 46px;
    margin: 0;
    filter: none;
  }
  .header .wordmark > .mobile-brand-name {
    display: grid;
    gap: 4px;
    margin: 0;
    min-width: 0;
    letter-spacing: 0;
  }
  .header .mobile-brand-name strong {
    font: 700 16px/1.15 Arial, Helvetica, sans-serif;
    color: #fff;
    letter-spacing: -.35px;
    white-space: nowrap;
  }
  .header .mobile-brand-name > span {
    color: #9cc9eb;
    font: 400 9px/1.3 Arial, Helvetica, sans-serif;
    letter-spacing: .2px;
    white-space: nowrap;
  }
  .header .header-inner > .header-top-links {
    grid-area: 1 / 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: 98px;
    gap: 2px;
    margin: 0;
    padding: 0;
  }
  .header .header-top-links > .header-contact-link { display: none; }
  .header .header-top-links #header-account {
    order: 0;
    width: 100%;
    min-height: 26px;
    height: 26px;
    padding: 3px 0;
    gap: 5px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font: 600 12px/20px Arial, Helvetica, sans-serif;
    color: #fff;
  }
  .header .header-top-links #header-account svg { width: 14px; height: 14px; }
  .header .header-top-links .vat-toggle {
    order: 1;
    width: 98px;
    height: 28px;
    padding: 1px;
    border: 1px solid #426383;
    border-radius: 5px;
    background: #061a33;
  }
  .header .header-top-links .vat-toggle button {
    height: 24px;
    min-height: 24px;
    padding: 2px 3px;
    border-radius: 3px;
    font: 600 10px/20px Arial, Helvetica, sans-serif;
    color: #cad8e7;
  }
  .header .header-top-links .vat-toggle button[aria-pressed="true"] {
    background: #285c87;
    color: #fff;
    box-shadow: none;
  }
  .header #header-product-search {
    grid-area: 2 / 1 / auto / -1;
    width: 100%;
    height: 36px;
    min-height: 36px;
    margin: 4px 0 0;
    border: 1px solid #a9bfd3;
    border-radius: 6px;
    box-shadow: none;
    background: #fff;
  }
  .header #header-product-search > input,
  .header #header-product-search > button {
    height: 34px;
    min-height: 34px;
    padding: 5px 10px;
  }
  .header #header-product-search > input {
    font: 400 16px/24px Arial, Helvetica, sans-serif;
    background: #fff;
    border-radius: 5px 0 0 5px;
  }
  .header #header-product-search > button {
    width: 44px;
    min-width: 44px;
    background: #1c5686;
    border: 0;
    border-radius: 0 5px 5px 0;
  }
  .header #header-product-search > button span { display: none; }
  .header #header-product-search > button svg { width: 18px; height: 18px; }
  .header .header-top-links #header-account::after,
  .header .header-top-links .vat-toggle button::after,
  .header #header-product-search > button::after { inset: 0; }
  .header .header-inner > .header-actions {
    grid-area: 3 / 1 / auto / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  .header .header-actions > a,
  .header .header-actions > .contact-link,
  .header .header-actions > button {
    width: 44px;
    min-width: 44px;
    height: 36px;
    min-height: 36px;
    padding: 8px 11px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
  }
  .header .header-actions > a::after,
  .header .header-actions > button::after { inset: 0; }
  /* Keep item counts inside the icon row, clear of the search field. */
  .header .header-actions #basket-count,
  .header .header-actions #saved-count {
    box-sizing: border-box;
    top: 1px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 2px;
    font-size: 10px;
    line-height: 12px;
    white-space: nowrap;
    pointer-events: none;
  }
  .header .header-actions > .contact-link + .header-social { margin: 0; }
  .header .header-actions > a svg,
  .header .header-actions > button svg { width: 21px; height: 21px; }
  .header .header-actions > .header-social svg { width: 18px; height: 18px; }
  .header .header-actions > .header-euronics-link img { width: 22px; height: 22px; }
  .header .header-inner > nav {
    grid-area: 4 / 1 / auto / -1;
    display: grid;
    grid-template-columns: .9fr 1.3fr 1fr .8fr;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-top: 1px solid #ffffff17;
    border-bottom: 1px solid #ffffff17;
    background: transparent;
  }
  .header .header-inner > nav > .navigation-secondary,
  .header .navigation-full-label,
  .header .header-inner > .navigation-edge-fade { display: none; }
  .header .navigation-short-label,
  .header .header-inner > nav > .navigation-more { display: block; }
  .header .header-inner > nav > a.navigation-guides { grid-column: 1 / 2; grid-row: 1; }
  .header .header-inner > nav > #browse-menu { grid-column: 2 / 3; grid-row: 1; }
  .header .header-inner > nav > #browse-brands-menu { grid-column: 3 / 4; grid-row: 1; }
  .header .header-inner > nav > details.navigation-more { grid-column: 4 / 5; grid-row: 1; }
  .header .header-inner > nav > a,
  .header .header-inner > nav > .browse-menu > summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 2px;
    font: 600 12px/22px Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    border: 0;
    border-radius: 0;
    color: #edf5fe;
  }
  .header .header-inner > nav > .browse-menu > summary::after { color: #9dc7e8; font-size: 10px; }
  .header .header-inner nav .navigation-more-panel { padding: 6px; }
  .header .header-inner nav .navigation-more-panel > a {
    display: flex;
    justify-content: flex-start;
    min-height: 44px;
    padding: 11px 12px;
    border: 0;
    border-radius: 4px;
    font: 500 14px/22px Arial, Helvetica, sans-serif;
    color: #163863;
    background: #fff;
    text-align: left;
    white-space: normal;
  }
  .header .header-inner nav .navigation-more-panel > a:hover { background: #eaf3fd; }
  .header .header-inner > .catalogue-accuracy {
    grid-area: 5 / 1 / auto / -1;
    justify-self: end;
    max-width: 100%;
    margin: 0;
    padding: 2px 0 0;
    color: #abc1d7;
    font: 400 9px/13px Arial, Helvetica, sans-serif;
    text-align: right;
  }
}

/* Retain all opening copy, with aligned edges and quieter supporting text. */
@media (max-width: 600px) {
  .hero.storefront-hero { border-bottom: 0; background: linear-gradient(180deg, #103761, #0b284e); }
  .hero.storefront-hero .hero-inner {
    width: calc(100% - 36px);
    padding: 4px 0 8px;
    gap: 16px;
  }
  .hero.storefront-hero .hero-inner > .van-photo { width: 100%; max-width: 430px; margin: 0; }
  .hero.storefront-hero .van-photo img { width: 72%; max-width: 306px; margin: 0 auto; }
  .hero.storefront-hero .van-photo figcaption { margin: 8px 0 0; }
  .hero.storefront-hero .van-photo .van-promise {
    font: italic 700 clamp(22px, 6vw, 27px)/1.2 Georgia, serif;
    letter-spacing: -.4px;
    text-wrap: balance;
  }
  .hero.storefront-hero .van-photo .van-services {
    max-width: 37ch;
    margin: 9px auto 0;
    font: 400 15px/1.5 Arial, Helvetica, sans-serif;
    color: #d4e3f3;
    text-wrap: balance;
  }
  .hero.storefront-hero .mobile-hero-browse {
    width: min(100%, 360px);
    min-height: 44px;
    padding: 10px 40px;
    margin: 0 auto;
    border: 1px solid #4498d8;
    border-radius: 6px;
    background: #0872ce;
    font: 600 14px/22px Arial, Helvetica, sans-serif;
    box-shadow: none;
  }
  .storefront-hero + .local-delivery-check {
    padding: 0 0 12px;
    border: 0;
    background: #0b284e;
  }
  .storefront-hero + .local-delivery-check > .wrap { width: calc(100% - 36px); }
  .storefront-hero + .local-delivery-check #top-delivery-disclosure { max-width: 360px; margin: 0 auto; }
  .storefront-hero + .local-delivery-check #top-delivery-disclosure > summary {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 9px 34px;
    border: 1px solid #4498d866;
    border-radius: 6px;
    background: #ffffff04;
    color: #dceafa;
    font: 500 13px/22px Arial, Helvetica, sans-serif;
    box-shadow: none;
  }
  .storefront-hero + .local-delivery-check #top-delivery-disclosure > summary:hover { background: #ffffff09; }
  .family-story-background { background: #0b2345; border-top: 1px solid #ffffff0f; }
  .family-story-background #about { width: calc(100% - 40px); padding: 16px 0 24px; }
  #about .about-copy .about-story-heading h2 {
    font: 700 27px/1.12 Arial, Helvetica, sans-serif;
    letter-spacing: -.65px;
    margin: 0 0 12px;
  }
  #about .about-story-heading { margin-bottom: 10px; }
  #about .about-copy p.lead { margin-top: 0; margin-bottom: 0; font: 400 15px/1.55 Arial, Helvetica, sans-serif; }
  #about .about-story-details { text-align: left; }
  #about .about-story-details p { font: 400 14px/1.6 Arial, Helvetica, sans-serif; margin: 0 0 12px; }
  #about .about-story-details p:last-child { margin-bottom: 0; }
}

@media (max-width: 360px) {
  .header .header-inner { width: calc(100% - 24px); column-gap: 6px; grid-template-columns: minmax(0, 1fr) 92px; }
  .header .header-inner > .wordmark { gap: 6px; }
  .header .header-inner > .wordmark > img,
  .header.is-compact .header-inner > .wordmark > img { width: 38px; height: 38px; }
  .header .mobile-brand-name strong { font-size: 14px; letter-spacing: -.4px; }
  .header .mobile-brand-name > span { font-size: 8px; letter-spacing: 0; }
  .header .header-inner > .header-top-links,
  .header .header-top-links .vat-toggle { width: 92px; }
}

/* Keep the complete buying-guide title directly in the main navigation. */
@media(max-width:1000px){
 .header .header-inner>nav{box-sizing:border-box;grid-template-columns:repeat(4,minmax(0,max-content));justify-content:space-between;column-gap:8px;padding-inline:4px}
 .header .header-inner>nav>a.navigation-guides{white-space:normal;text-align:center;line-height:20px;padding:5px 0;min-height:44px}
 .header .navigation-guides .navigation-full-label{display:block;text-wrap:balance}
 .header .navigation-guides .navigation-short-label{display:none}
 .header .header-inner>nav>.browse-menu>summary{box-sizing:border-box;min-height:44px;min-width:44px;padding:5px 0;line-height:20px;gap:4px}
}

/* A single compact utility row beside the logo, with a fine white rim. */
.header .header-inner > .wordmark > img,
.header.is-compact .header-inner > .wordmark > img {
  clip-path: circle(46.5% at 50% 50.4%);
}
@media (max-width: 1000px) {
  .header .header-inner {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 2px 10px;
    padding-top: 4px;
  }
  .header .header-inner > .wordmark { align-self: center; }
  .header .header-inner > .wordmark > img,
  .header.is-compact .header-inner > .wordmark > img { width: 46px; height: 46px; }
  .header .header-inner > .header-top-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    width: 100%;
    gap: 6px;
  }
  .header .header-top-links .vat-toggle {
    order: 0;
    flex: 0 0 100px;
    width: 100px;
    height: 36px;
    box-sizing: border-box;
    margin: 0;
  }
  .header .header-top-links .vat-toggle button {
    height: 32px;
    min-height: 32px;
    padding: 4px 3px;
  }
  .header .header-top-links > .header-email-link,
  .header .header-top-links #header-account {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    min-width: 0;
    margin: 0;
    border: 1px solid #52799b;
    border-radius: 5px;
    background: #ffffff08;
    color: #fff;
    box-shadow: none;
  }
  .header .header-top-links > .header-email-link {
    order: 2;
    flex: 0 0 32px;
    width: 32px;
    padding: 5px;
  }
  .header .header-top-links > .header-email-link svg { width: 18px; height: 18px; }
  .header .header-top-links #header-account {
    order: 1;
    flex: 0 0 70px;
    width: 70px;
    gap: 4px;
    padding: 3px 4px;
    font-size: 11px;
    white-space: nowrap;
  }
  .header .header-top-links > .header-email-link:hover,
  .header .header-top-links #header-account:hover { background: #ffffff15; border-color: #8db8da; }
  .header .header-top-links > .header-email-link:focus-visible,
  .header .header-top-links #header-account:focus-visible { outline: 2px solid #8bd2ff; outline-offset: 2px; }
  .header #header-product-search { margin-top: 0; }
}

/* Mobile browsing keeps only the existing search and basket in view. */
@media (max-width: 1000px) {
  .header .header-inner { grid-template-columns: 54px minmax(0, 1fr); }
  .header .header-inner > .wordmark > img,
  .header.is-compact .header-inner > .wordmark > img { width: 54px; height: 54px; }
  .header .header-top-links > .header-email-link,
  .header .header-top-links #header-account {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .header.is-mobile-compact {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    box-shadow: 0 3px 12px #03152b30;
  }
  .header.is-mobile-compact .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    padding: 2px 0;
    max-width: 720px;
  }
  .header.is-mobile-compact .header-inner > .wordmark,
  .header.is-mobile-compact .header-inner > .header-top-links,
  .header.is-mobile-compact .header-inner > nav,
  .header.is-mobile-compact .header-inner > .navigation-edge-fade,
  .header.is-mobile-compact .header-inner > .catalogue-accuracy { display: none; }
  .header.is-mobile-compact #header-product-search {
    grid-area: 1 / 1;
    height: 38px;
    min-height: 38px;
    margin: 0;
  }
  .header.is-mobile-compact #header-product-search > input,
  .header.is-mobile-compact #header-product-search > button {
    height: 36px;
    min-height: 36px;
  }
  .header.is-mobile-compact .header-inner > .header-actions {
    grid-area: 1 / 2;
    display: flex;
    width: 44px;
    margin: 0;
    padding: 0;
  }
  .header.is-mobile-compact .header-actions > :not(#open-basket) { display: none; }
  .header.is-mobile-compact .header-actions > #open-basket {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px;
  }
}

/* Give the logo breathing room; keep tax display a quiet utility. */
@media (max-width: 1000px) {
  .header .header-top-links .vat-toggle {
    flex-basis: 84px;
    width: 84px;
    height: 26px;
    padding: 1px;
    border-color: #52799b80;
    border-radius: 4px;
    background: #061a3340;
  }
  .header .header-top-links .vat-toggle button {
    height: 22px;
    min-height: 22px;
    padding: 1px 3px;
    font: 400 9px/20px Arial, Helvetica, sans-serif;
    border-radius: 2px;
  }
  .header .header-top-links .vat-toggle button[aria-pressed="true"] { background: #285c87; }
  .header:not(.is-mobile-compact) #header-product-search { margin-top: 8px; }
}

/* Quiet tax controls and a little clearance for the basket badge. */
@media (max-width: 1000px) {
  .header .header-top-links .vat-toggle {
    border: 0;
    background: transparent;
    padding: 1px 0;
    box-shadow: none;
  }
  .header .header-top-links .vat-toggle button {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #a9bfd4;
    font-weight: 400;
    border-radius: 0;
  }
  .header .header-top-links .vat-toggle button + button { border-left: 1px solid #ffffff26; }
  .header .header-top-links .vat-toggle button[aria-pressed="true"] {
    background: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: none;
  }
  .header .header-top-links .vat-toggle button:hover { color: #fff; background: #ffffff08; }
  .header:not(.is-mobile-compact) .header-inner > .header-actions { padding-top: 6px; }
  .header.is-mobile-compact .header-inner { column-gap: 12px; }
}

/* Product-page header rules must not restore the hidden logo column. */
@media (max-width: 1000px) {
 body .header.is-mobile-compact .header-inner,
 body[data-product-model] .header.is-mobile-compact .header-inner {
  grid-template-columns:minmax(0,1fr) 44px;
  grid-template-rows:44px;
  column-gap:12px;
  row-gap:0;
  padding:2px 0;
  align-items:center;
 }
 body .header.is-mobile-compact #header-product-search,
 body[data-product-model] .header.is-mobile-compact #header-product-search {
  grid-area:1 / 1 / 2 / 2;
  display:flex;
  width:100%;
  min-width:0;
  max-width:none;
  height:38px;
  min-height:38px;
  margin:0;
 }
 body .header.is-mobile-compact #header-product-search > input {
  flex:1 1 0;
  width:0;
  min-width:0;
  height:36px;
  min-height:36px;
  padding:4px 10px;
  font-size:16px;
 }
 body .header.is-mobile-compact #header-product-search > button {
  flex:0 0 44px;
  width:44px;
  height:36px;
  min-height:36px;
  padding:4px 10px;
 }
 body .header.is-mobile-compact .header-inner > .header-actions,
 body[data-product-model] .header.is-mobile-compact .header-inner > .header-actions {
  grid-area:1 / 2 / 2 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  min-width:44px;
  max-width:44px;
  margin:0;
  padding:0;
  gap:0;
 }
 body .header.is-mobile-compact .header-actions #open-basket svg {width:18px;height:18px}
 body .header.is-mobile-compact #header-product-search > button svg {width:17px;height:17px}
 /* The visible control is slimmer; retain a 44px search-button hit area. */
 body .header.is-mobile-compact #header-product-search > button::after {inset:-4px 0}
}