/* ---- self-contained base ----
   Everything this block needs from the site styles (styles/styles.css, styles/fonts.css), so the
   block folder can be copied to another project and look the same: the design tokens, fonts and
   text defaults, scoped to the block's section, plus the section layout. The text defaults have
   element-level specificity (:where), so they beat a host site's plain element rules but the
   block's own rules always win.
   The section layout this block expects is at the end of this file.
   The font is the source's Manrope (asianpaints.com); the host site's Manrope @font-face supplies
   it (styles/fonts.css here). */
/* stylelint-disable max-line-length */
main > .section.tabs-wraper-container {
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #131313;
  --link-color: #3b63fb;
  --link-hover-color: #1d3ecf;
  --body-font-family: manrope, manrope-fallback, sans-serif;
  --heading-font-family: manrope, manrope-fallback, sans-serif;
  --body-font-size-m: 22px;
  --body-font-size-s: 19px;
  --body-font-size-xs: 17px;
  --heading-font-size-xxl: 55px;
  --heading-font-size-xl: 44px;
  --heading-font-size-l: 34px;
  --heading-font-size-m: 27px;
  --heading-font-size-s: 24px;
  --heading-font-size-xs: 22px;
  --nav-height: 64px;

  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.6;
}

@media (width >= 900px) {
  main > .section.tabs-wraper-container {
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;
    --heading-font-size-xxl: 45px;
    --heading-font-size-xl: 36px;
    --heading-font-size-l: 28px;
    --heading-font-size-m: 22px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
  }
}

/* the browser's box model, in case the host site sets box-sizing on everything */
:where(main > .section.tabs-wraper-container), :where(main > .section.tabs-wraper-container) *, :where(main > .section.tabs-wraper-container) ::before, :where(main > .section.tabs-wraper-container) ::after {
  box-sizing: revert;
}

:where(main > .section.tabs-wraper-container) :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
  scroll-margin: 40px;
}

:where(main > .section.tabs-wraper-container) h1 { font-size: var(--heading-font-size-xxl); }
:where(main > .section.tabs-wraper-container) h2 { font-size: var(--heading-font-size-xl); }
:where(main > .section.tabs-wraper-container) h3 { font-size: var(--heading-font-size-l); }
:where(main > .section.tabs-wraper-container) h4 { font-size: var(--heading-font-size-m); }
:where(main > .section.tabs-wraper-container) h5 { font-size: var(--heading-font-size-s); }
:where(main > .section.tabs-wraper-container) h6 { font-size: var(--heading-font-size-xs); }

:where(main > .section.tabs-wraper-container) :is(p, dl, ol, ul, pre, blockquote) {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

:where(main > .section.tabs-wraper-container) a:where(:any-link) {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

:where(main > .section.tabs-wraper-container) a:where(:hover) {
  color: var(--link-hover-color);
  text-decoration: underline;
}

:where(main > .section.tabs-wraper-container) img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: baseline;
}

:where(main > .section.tabs-wraper-container) :is(input, textarea, select, button) {
  font: inherit;
}

/* stylelint-enable max-line-length */

/* ---- end of self-contained base ---- */

/* category banner, edge to edge (section layout at the end of this file) */
.tabs-wraper {
  --tabs-wraper-height: 200px;

  /* the source's pill, link grey and CTA gradient; no matching tokens in styles.css */
  --tabs-wraper-pill: rgb(35 36 38 / 69.8%);
  --tabs-wraper-link: #cacbcc;
  --tabs-wraper-accent: linear-gradient(#fec940, #f90);

  position: relative;
  display: grid;
  height: var(--tabs-wraper-height);
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.5715;
  color: var(--background-color);
  background-color: var(--dark-color);
}

.tabs-wraper .tabs-wraper-background {
  position: absolute;
  inset: 0;
}

.tabs-wraper .tabs-wraper-background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* anchored top-left like the source, so the text on the left of the image is never cropped */
  object-position: left top;
}

.tabs-wraper .tabs-wraper-center {
  position: relative;
  display: grid;

  /* min 0 so a long link pill scrolls inside the banner instead of widening the grid */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: 72px;
  padding: 30px 13px;
}

/* page h1 from the Heading row: visually hidden, as on the source */
.tabs-wraper .tabs-wraper-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the title image is shown on desktop only, as on the source */
.tabs-wraper .tabs-wraper-title {
  display: none;
}

.tabs-wraper .tabs-wraper-title img {
  display: block;
  width: auto;
  height: 76px;
}

.tabs-wraper .tabs-wraper-title p {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: var(--heading-font-size-xl);
  font-weight: 800;
  text-align: center;
}

/* range links */
.tabs-wraper .tabs-wraper-nav {
  width: 100%;
  max-width: max-content;

  /* keeps the pill's place in the banner while it is pinned */
  height: 44px;
}

.tabs-wraper .tabs-wraper-nav ul {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  padding: 12px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  border-radius: 100px;
  background-color: var(--tabs-wraper-pill);
}

.tabs-wraper .tabs-wraper-nav li {
  flex: none;
  color: var(--tabs-wraper-link);
}

/* the current range is outlined on its list item, as on the source */
.tabs-wraper .tabs-wraper-nav li:has(> a[aria-current='page']) {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 28px;
  padding: 2px 12px;
  border: 1px solid var(--tabs-wraper-link);
  border-radius: 50px;
  background-color: rgb(141 143 145 / 10%);
  color: var(--background-color);
}

.tabs-wraper .tabs-wraper-nav a {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tabs-wraper-link);
}

.tabs-wraper .tabs-wraper-nav a:hover {
  color: var(--background-color);
  text-decoration: none;
}

.tabs-wraper .tabs-wraper-nav a[aria-current='page'] {
  color: var(--background-color);
}

.tabs-wraper .tabs-wraper-nav a[aria-current='page']:hover {
  text-decoration: none;
}

/* pinned while the page scrolls (tabs-wraper.js): in a white strip at the top of the page below
   992px, over the header as on the source; just below the header on desktop */
.tabs-wraper .tabs-wraper-nav-pinned::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: 1001;
  height: 60px;
  background-color: var(--background-color);
  box-shadow: 0 1px 4px 4px rgb(0 0 0 / 20%);
}

.tabs-wraper .tabs-wraper-nav-pinned ul {
  position: fixed;
  top: var(--tabs-wraper-pin-top, 10px);
  right: 0;
  left: 0;
  z-index: 1001;
  width: max-content;
  max-width: calc(100% - 26px);
  margin-inline: auto;
}

@media (width >= 400px) {
  .tabs-wraper .tabs-wraper-nav ul {
    gap: 27px;
  }
}

/* promo: desktop only, as on the source */
.tabs-wraper .tabs-wraper-promo {
  display: none;
}

.tabs-wraper .tabs-wraper-promo img {
  display: block;
  width: 249px;
  height: auto;
  aspect-ratio: 249 / 278;
  object-fit: fill;
}

.tabs-wraper .tabs-wraper-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 38px;
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 45px;
  background: var(--tabs-wraper-accent);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5715;
  text-decoration: none;
  color: #1e1e1e;
  cursor: pointer;
}

/* the source's arrow icon (icons/arrow-icon.svg, white) with the source's filter, which draws it
   bold black; white again on hover */
.tabs-wraper .tabs-wraper-cta::after {
  content: '';
  flex: none;
  width: 17px;
  height: 20px;
  background: url('/eds/icons/arrow-icon.svg') no-repeat;
  filter: contrast(10) invert(1) sepia(1) saturate(100) hue-rotate(90deg);
  transition: transform 0.2s ease-in;
}

.tabs-wraper .tabs-wraper-cta:is(:hover, :focus-visible) {
  border: 1px solid var(--background-color);
  background: transparent;
  color: var(--background-color);
}

.tabs-wraper .tabs-wraper-cta:is(:hover, :focus-visible)::after {
  filter: none;
  transform: translateX(6px);
}

.tabs-wraper .tabs-wraper-nav a:focus-visible,
.tabs-wraper .tabs-wraper-cta:focus-visible {
  outline: 2px solid var(--background-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--text-color);
}

@media (width >= 992px) {
  .tabs-wraper {
    --tabs-wraper-height: 340px;
  }

  .tabs-wraper .tabs-wraper-center {
    align-content: end;
    padding: 0 0 30px;
  }

  .tabs-wraper .tabs-wraper-title {
    display: block;
  }

  .tabs-wraper .tabs-wraper-nav ul {
    gap: 35px;
    padding: 12px 24px;
  }

  .tabs-wraper .tabs-wraper-nav a {
    font-size: 0.8125rem;
    font-weight: 400;
  }

  .tabs-wraper .tabs-wraper-cta {
    padding: 14px 20px;
  }

  .tabs-wraper .tabs-wraper-nav-pinned::before {
    content: none;
  }

  /* above the header, whose box can reach below its visible bar (and would take the pill's
     clicks), but under it while it is in use, so its menus open over the pill */
  body:has(header:is(:hover, :focus-within)) .tabs-wraper .tabs-wraper-nav-pinned ul {
    z-index: 999;
  }

  .tabs-wraper .tabs-wraper-promo {
    position: absolute;
    top: 1px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* the source zooms the whole page below 1440px; scale the banner the same way so the image,
   title, pill and promo keep the source proportions */
@media (width >= 992px) and (width < 1100px) {
  .tabs-wraper {
    zoom: calc(0.7 / var(--body-zoom, 1));
  }
}

@media (width >= 1100px) and (width < 1200px) {
  .tabs-wraper {
    zoom: calc(0.75 / var(--body-zoom, 1));
  }
}

@media (width >= 1200px) and (width < 1280px) {
  .tabs-wraper {
    zoom: calc(0.8 / var(--body-zoom, 1));
  }
}

@media (width >= 1280px) and (width < 1366px) {
  .tabs-wraper {
    zoom: calc(0.85 / var(--body-zoom, 1));
  }
}

@media (width >= 1366px) and (width < 1440px) {
  .tabs-wraper {
    zoom: calc(0.9 / var(--body-zoom, 1));
  }
}


/* ---- grouped tabs ("Paints | Textures", tabs-wraper.js), measured on the source ---- */

/* below 992px: the pill shows only the current group's tabs */
.tabs-wraper .tabs-wraper-nav-grouped ul {
  gap: 30px;
  background-color: rgb(29 29 31);
}

.tabs-wraper .tabs-wraper-groups {
  display: none;
}

/* below 992px: "← Textures ⌄" strip above the banner, opening the group list */
.tabs-wraper-switch {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 23px 0 23px 16px;
  background-color: #fff;
  color: #1d1d1f;
  font-family: manrope, manrope-fallback, sans-serif;
  font-size: 14px;
  line-height: 22px;
}

.tabs-wraper-switch button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* the source's arrow icon, pointing left, drawn black (same filter as the CTA arrow) */
.tabs-wraper-switch .tabs-wraper-switch-back {
  flex: none;
  width: 17px;
  height: 22px;
  background: url('/eds/icons/arrow-icon.svg') no-repeat center;
  filter: contrast(10) invert(1) sepia(1) saturate(100) hue-rotate(90deg);
  transform: rotate(180deg);
}

.tabs-wraper-switch .tabs-wraper-switch-toggle {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

/* caret: down while closed, up while open */
.tabs-wraper-switch .tabs-wraper-switch-toggle::after {
  content: '^';
  display: block;
  margin: -1px 0 0 6px;
  font-weight: 800;
  transform: rotate(180deg);
}

.tabs-wraper-switch .tabs-wraper-switch-toggle[aria-expanded='true']::after {
  transform: translate(0, 4px);
}

.tabs-wraper-switch .tabs-wraper-switch-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.tabs-wraper-switch .tabs-wraper-switch-list[hidden] {
  display: none;
}

.tabs-wraper-switch .tabs-wraper-switch-option {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* radio-style marker; the current group is filled green */
.tabs-wraper-switch .tabs-wraper-switch-option::before {
  content: '';
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid #1d1d1f;
  border-radius: 100px;
}

.tabs-wraper-switch .tabs-wraper-switch-option[aria-current]::before {
  margin-right: 1px;
  border: 4px solid #fff;
  background-color: #00c853;
  box-shadow: 0 0 0 1px #00c853;
}

.tabs-wraper-switch .tabs-wraper-switch-option:focus-visible,
.tabs-wraper-switch button:focus-visible {
  outline: 2px solid #1d1d1f;
  outline-offset: 2px;
}

@media (width >= 992px) {
  .tabs-wraper-switch {
    display: none;
  }

  .tabs-wraper .tabs-wraper-nav-grouped ul {
    gap: 33px;
    padding: 12px 19px 12px 0;
    background-color: rgb(29 29 31 / 26.7%);
  }

  /* pinned over the page: the source's darker pill, so the tabs stay readable */
  .tabs-wraper .tabs-wraper-nav-grouped.tabs-wraper-nav-pinned ul {
    background-color: var(--tabs-wraper-pill);
  }

  /* "Paints | Textures" segment at the start of the pill, with a notch pointing at the tabs */
  .tabs-wraper .tabs-wraper-groups {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    margin: -10px 2px -10px 0;
    padding: 0 10px;
    border-radius: 19px 0 0 19px;
    background-color: rgb(29 29 31 / 40%);
  }

  .tabs-wraper .tabs-wraper-groups::after {
    content: '';
    position: absolute;
    top: 15px;
    right: -11px;
    width: 11px;
    height: 10px;
    background-color: rgb(29 29 31 / 40%);
    clip-path: polygon(72% 49%, 0 0, 0 100%);
  }

  /* the source's other ranges sit 3px above the outlined current one */
  .tabs-wraper .tabs-wraper-nav-grouped li:not(.tabs-wraper-groups) > a:not([aria-current='page']) {
    position: relative;
    top: -3px;
  }

  .tabs-wraper .tabs-wraper-nav .tabs-wraper-group {
    display: block;
    padding: 2px 13px;
    border-radius: 50px;
    color: #a7a7a7;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
  }

  .tabs-wraper .tabs-wraper-nav .tabs-wraper-group:hover {
    color: var(--background-color);
  }

  .tabs-wraper .tabs-wraper-nav .tabs-wraper-group[aria-current] {
    background-color: #fff;
    color: #0f0f0f;
    font-weight: 700;
  }
}

/* ---- section layout (part of the self-contained base, see the top of this file) ---- */
/* stylelint-disable max-line-length, no-duplicate-selectors */

/* section layout: edge to edge (was Section Metadata "Style: full-width") */
main > .section.tabs-wraper-container > div {
  max-width: none;
  padding: 0;
}

/* stylelint-enable max-line-length, no-duplicate-selectors */

/* ---- end of section layout ---- */