/* NOIRWERK — layout layer.
   The pages are authored as fixed 1440px design boards with inline styles.
   Below 1100px these rules unpack them for narrow screens; above 1100px they
   let the bands run edge to edge while the content stays centred. */

@media (min-width: 1101px) {

  /* the board stops being a 1440px slab stuck to the left edge */
  body > div[style*="width: 1440px"] {
    width: 100% !important;
    max-width: none !important;
  }

  /* bands stay full-bleed, their content is capped and centred */
  [style*="padding: 0 80px"],
  [style*="px 80px 0"],
  [style*="px 80px 80px"],
  [style*="padding: 0 92px"] {
    padding-left: max(80px, calc((100% - 1680px) / 2)) !important;
    padding-right: max(80px, calc((100% - 1680px) / 2)) !important;
  }

  /* split bands: the picture takes the extra room, the copy keeps a readable measure */
  section[style*="display: flex"] > div[style*="width: 840px"],
  section[style*="display: flex"] > div[style*="width: 660px"],
  section[style*="display: flex"] > div[style*="width: 700px"] { flex-grow: 1 !important; }

  section[style*="display: flex"] > div[style*="flex-grow: 1"] { max-width: 820px; }
  section[style*="display: flex"] > div[style*="flex-grow: 1"] > * { max-width: 640px; }
}

@media (max-width: 1100px) {

  html { -webkit-text-size-adjust: 100%; }
  body { display: block !important; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }

  /* ---- page container ---- */
  [style*="width: 1440px"] {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* ---- bands: drop the fixed heights ---- */
  section, header, footer { height: auto !important; min-height: 0 !important; }

  /* ---- side gutters ---- */
  [style*="padding: 0 80px"],
  [style*="px 80px 0"],
  [style*="px 80px 80px"],
  [style*="padding: 0 92px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---- two-column bands stack ---- */
  section[style*="display: flex"] { flex-direction: column !important; align-items: stretch !important; }

  /* ---- fixed-width columns go full width ---- */
  [style*="width: 840px"], [style*="width: 700px"], [style*="width: 660px"],
  [style*="width: 640px"], [style*="width: 620px"], [style*="width: 560px"],
  [style*="width: 504px"], [style*="width: 470px"], [style*="width: 460px"],
  [style*="width: 430px"], [style*="width: 420px"], [style*="width: 410px"],
  [style*="width: 380px"], [style*="width: 330px"], [style*="width: 320px"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* ---- grids collapse ---- */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  /* collection tiles stay two-up, they are small */
  .m-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* ---- navigation: keep wordmark and cart, drop the link row ---- */
  header nav { display: none !important; }
  header {
    gap: 10px !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    padding: 12px 20px !important;
    row-gap: 6px;
  }

  /* ---- checkout step bar ---- */
  [style*="height: 70px"][style*="display: flex"] {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 12px 20px !important;
    gap: 10px !important;
  }
  [style*="height: 70px"][style*="display: flex"] > span[style*="height: 1px"] { display: none !important; }

  /* ---- typography ---- */
  h1 { font-size: clamp(38px, 11vw, 62px) !important; line-height: 1.02 !important; }
  h2 { font-size: clamp(27px, 7vw, 40px) !important; line-height: 1.08 !important; }

  /* ---- media ---- */
  img, svg { max-width: 100%; }
  img[style*="height: 898px"], img[style*="height: 796px"], img[style*="height: 766px"] {
    height: auto !important;
    max-height: 72vh;
  }
  svg[style*="width: 600px"], svg[style*="width: 560px"], svg[style*="width: 336px"],
  svg[style*="width: 330px"], svg[style*="width: 300px"] {
    width: 100% !important;
    height: auto !important;
    max-height: 60vh;
  }

  /* ---- product stage: thumbnails move under the image ---- */
  .m-stage { flex-direction: column !important; padding: 24px 20px 32px !important; gap: 16px !important; overflow: hidden !important; }
  .m-thumbs {
    position: static !important;
    transform: none !important;
    flex-direction: row !important;
    justify-content: center !important;
    order: 2;
  }
  .m-thumbs button { width: 64px !important; height: 82px !important; }
  .m-stage > img, .m-stage > a, .m-stage > div:not(.m-thumbs) { order: 1; }

  /* ---- floating chips and decoration are noise on a phone ---- */
  .m-chip, .m-deco { display: none !important; }

  /* ---- sticky buy bar on product pages ---- */
  .m-buy {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: rgba(10,10,11,0.96);
    border-top: 1px solid #26262B;
    margin: 0 -20px;
    padding: 12px 20px !important;
  }

  /* ---- payment methods and size pills must stay reachable ---- */
  div:has(> [data-method]) { flex-wrap: wrap !important; }
  [data-method] { flex: 1 1 auto; padding: 0 14px !important; font-size: 12px !important; }

  [data-size-group] { flex-wrap: wrap !important; gap: 8px !important; }
  [data-size] { min-width: 0 !important; flex: 1 1 56px; padding: 0 8px !important; }

  /* ---- swatches and thumbnails wrap instead of pushing ---- */
  div:has(> .bkk-swatch) { flex-wrap: wrap !important; }

  /* ---- any row that was told not to wrap, may wrap ---- */
  [style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; }

  /* ---- step indicators (cart, checkout, confirmation) ---- */
  header > div:last-child,
  section[style*="justify-content: space-between"] > div[style*="gap: 16px"] {
    flex-wrap: wrap !important;
    row-gap: 8px;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }
  span[style*="width: 44px"][style*="height: 1px"],
  span[style*="width: 34px"][style*="height: 1px"] { display: none !important; }

  /* ---- cart line items ---- */
  .bkk-row { height: auto !important; flex-wrap: wrap !important; gap: 14px !important; padding: 16px !important; }
  .bkk-row > div:first-child { width: 96px !important; height: 96px !important; }
  .bkk-row > div:last-child {
    width: 100% !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    text-align: left !important;
  }

  /* ---- the four-step delivery timeline stacks ---- */
  [style*="display: flex; gap: 0;"] { flex-wrap: wrap !important; gap: 18px !important; }
  [style*="display: flex; gap: 0;"] > div {
    flex: 1 1 100% !important;
    padding: 14px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #26262B !important;
  }
  [style*="display: flex; gap: 0;"] > div:first-child { border-top: 0 !important; padding-top: 0 !important; }

  /* ---- meta rows with wide gaps ---- */
  [style*="gap: 40px"], [style*="gap: 28px"], [style*="gap: 22px"] { flex-wrap: wrap !important; }

  /* ---- footer columns stack ---- */
  footer > div:first-child { flex-direction: column !important; gap: 28px !important; }
  footer > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 10px; height: auto !important; padding: 18px 0 24px; }

  /* ---- summary panels ---- */
  aside {
    width: auto !important;
    max-width: 100% !important;
    align-self: stretch !important;
    padding: 20px !important;
  }
  aside > * { max-width: 100% !important; }
  aside div, aside span { min-width: 0 !important; }

  /* ---- buttons: let long labels breathe ---- */
  a[style*="height: 56px"], a[style*="height: 60px"], a[style*="height: 62px"],
  button[style*="height: 54px"], button[style*="height: 56px"], button[style*="height: 60px"],
  button[style*="height: 62px"] {
    height: auto !important;
    min-height: 52px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    text-align: center;
    line-height: 1.25;
  }

  /* ---- announcement strip ---- */
  [style*="height: 40px"][style*="justify-content: center"] {
    height: auto !important;
    padding: 9px 14px !important;
  }
  [style*="height: 40px"][style*="justify-content: center"] > div {
    font-size: 10px !important;
    letter-spacing: 0.10em !important;
    line-height: 1.5;
    text-align: center;
  }

  /* ---- decoration that only works at desktop scale ---- */
  .bkk-l3, .bkk-ring { display: none !important; }

  /* ---- hero column inside a stacked section ---- */
  section > div[style*="height: 100%"] { height: auto !important; min-height: 420px; }


  /* ---- section headers: headline and "see all" link stack ---- */
  [style*="align-items: flex-end; justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  /* ---- hero call to action: one button per row, no three-line labels ---- */
  div:has(> a.bkk-btn) { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  a.bkk-btn { justify-content: center !important; text-align: center; padding-left: 18px !important; padding-right: 18px !important; }

  /* ---- the three key figures: a real row, no stray hairlines ---- */
  [style*="gap: 28px"][style*="border-top"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
  }
  [style*="gap: 28px"][style*="border-top"] > span[style*="width: 1px"] { display: none !important; }
  [style*="gap: 28px"][style*="border-top"] span[style*="font-size: 27px"] { font-size: 22px !important; }
  [style*="gap: 28px"][style*="border-top"] span[style*="letter-spacing: 0.2em"] { letter-spacing: 0.08em !important; }

  /* ---- announcement strip: one line is enough on a phone ---- */
  [style*="height: 40px"][style*="justify-content: center"] > div > span:nth-child(n+4) { display: none !important; }


  /* ---- collapsed grids: the column rules become row rules ---- */
  [style*="grid-template-columns: repeat(4"] > div[style*="border-left"],
  [style*="grid-template-columns: repeat(3"] > div[style*="border-left"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(128,128,128,0.3);
    padding-top: 18px !important;
  }
  [style*="grid-template-columns: repeat(4"] > div:first-child[style*="padding-right"],
  [style*="grid-template-columns: repeat(3"] > div:first-child[style*="padding-right"] {
    padding-right: 0 !important;
  }
  [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(3"] {
    row-gap: 22px !important;
  }

  /* ---- newsletter: field over button, both full width ---- */
  form[style*="align-items: flex-end"] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  form[style*="align-items: flex-end"] > div { width: 100% !important; }
  form[style*="align-items: flex-end"] input { width: 100% !important; }
  form[style*="align-items: flex-end"] button { width: 100% !important; justify-content: center; }


  /* ---- the product grid stays two-up, like every shop of this kind ---- */
  section[style*="padding: 48px 80px 80px"][style*="repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-bottom: 40px !important;
  }
  section[style*="padding: 48px 80px 80px"] .bkk-sizes { display: none; }
  section[style*="padding: 48px 80px 80px"] a > div:last-child { padding: 12px !important; }
  section[style*="padding: 48px 80px 80px"] h3 { font-size: 15px !important; line-height: 1.2 !important; }

  /* ---- the closing bar at the foot of the commerce pages ---- */
  div[style*="border-top"][style*="justify-content: space-between"][style*="align-items: center"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }


  /* ---- tables keep their columns; only layout grids collapse ---- */
  [style*="grid-template-columns: repeat(3"]:has(> span[style*="px 12px"]) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  [style*="grid-template-columns: 1.1fr"]:has(> span[style*="px 12px"]) {
    grid-template-columns: 1.1fr 1fr !important;
  }

  /* ---- the buy bar belongs to the page it sits on ---- */
  .m-buy {
    background: rgba(245,240,235,0.97) !important;
    border-top: 1px solid #E2DBCD !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* ---- the marquee stays, just calmer ---- */
  .bkk-marquee-track > div { font-size: 18px !important; gap: 26px !important; }
  .bkk-rail-track > div { gap: 16px !important; }
  .bkk-rail-track svg { width: 150px !important; height: auto !important; }
}

@media (max-width: 560px) {
  [style*="padding: 0 80px"],
  [style*="px 80px 0"],
  [style*="px 80px 80px"],
  [style*="padding: 0 92px"] { padding-left: 16px !important; padding-right: 16px !important; }

  .m-tiles { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  header { padding: 0 16px !important; }
  .m-stage { padding: 20px 16px 28px !important; }
  .m-buy { margin: 0 -16px; padding: 12px 16px !important; }
}