/* ==========================================================================
   ORTEGA PAINT AND DECORATING
   Layout measured from the previous storefront at 1440px and 390px.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
  color: #212529; background: #f7f7f7;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { padding-left: 30.5px; padding-right: 30.5px; }

.skip-link { position: absolute; left: 0; top: 0; z-index: 1000; padding: 5px; background: #000; color: #fff; transform: translateY(-120%); }
.skip-link:focus { transform: none; }

/* Image slots: keep the measured box when a supplied image is missing. */
.slot { position: relative; overflow: hidden; }
.slot > img { width: 100%; height: 100%; object-fit: cover; }
.slot.is-empty > img { visibility: hidden; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 43px; padding: 12px 20px;
  border: 1px solid transparent; border-radius: 5.25px;
  font-size: 14px; line-height: 16px; font-weight: 400; text-align: center;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-black { background: #000; border-color: #000; color: #fff; font-weight: 700; }
.btn-black:hover { background: #2a2a2a; }
.btn-outline { background: transparent; border-color: #000; color: #000; }
.btn-outline:hover, .btn-outline.is-active { background: #000; color: #fff; }
.btn-grad { background: linear-gradient(90deg, #1b406d, #2d795c); color: #fff; font-weight: 700; border: 0; }
.btn-grad:hover { filter: brightness(1.08); }
.btn-soft { background: #fff; border-color: #e2e8f0; color: #1e293b; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr { position: relative; z-index: 50; background: #fff; }
.hdr__bar { position: relative; display: flex; align-items: center; height: 78px; padding: 0 30.5px; }
.hdr__logo { display: block; width: 180px; height: 29px; flex: none; }
.hdr__logo .slot { width: 180px; height: 29px; }
.hdr__logo .slot > img { object-fit: contain; }
.hdr__name { margin: 14px 0 0 14px; font-size: 17.5px; line-height: 21px; font-weight: 700; color: #2f3540; white-space: nowrap; }

.search { position: absolute; left: 539px; top: 19px; width: 503px; }
.search__input {
  width: 100%; height: 40px; padding: 0 40px 0 15px;
  border: 1px solid #f0f0f0; border-radius: 40px; background: #fff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  font-size: 14px; color: #212529;
}
.search__input::placeholder { color: #212529; opacity: .75; }
.search__input:focus { outline: none; border-color: #cfcfcf; }
.search__btn { position: absolute; right: 4px; top: 2px; width: 29px; height: 33px; display: grid; place-items: center; border-radius: 50%; }
.search__results {
  position: absolute; left: 0; right: 0; top: 46px; z-index: 60;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 420px; overflow-y: auto;
}
.search__results a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 15px; border-bottom: 1px solid #f0f0f0; }
.search__results a:hover, .search__results a.is-active { background: #f7f7f7; text-decoration: none; }
.search__results span:last-child { font-weight: 700; white-space: nowrap; }

.hdr__right { position: absolute; top: 0; right: 30.5px; height: 78px; display: flex; align-items: center; }
.lang { position: relative; margin-right: 20px; }
.lang__btn { display: inline-flex; align-items: center; gap: 4px; height: 43px; padding: 12px 20px; border-radius: 5.25px; font-size: 14px; line-height: 16px; }
.lang__btn:hover, .lang.is-open .lang__btn { background: #f8f9fa; }
.lang__menu { position: absolute; right: 0; top: 46px; min-width: 160px; padding: 6px 0; background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.lang__menu button { display: block; width: 100%; padding: 6px 16px; text-align: left; }
.lang__menu button:hover { background: #f1f1f1; }
.acct { display: flex; align-items: center; }
.acct a { font-weight: 700; text-transform: uppercase; white-space: nowrap; line-height: 21px; }
.acct span { margin: 0 7px; font-style: italic; color: #2f3540; }
.hdr__cart { position: relative; display: block; width: 20px; height: 20px; margin-left: 14px; }
.hdr__cart svg { display: block; }
.badge-count {
  position: absolute; left: 14px; top: -16px;
  min-width: 20px; height: 20px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 50%; background: #000; color: #fff;
  font-size: 10.5px; line-height: 18px; font-weight: 700; letter-spacing: -1px;
}
.hdr__burger, .hdr__scan { display: none; }

/* ---- Nav ---- */
.nav { position: relative; z-index: 40; height: 54px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.07); }
.nav__list { display: flex; align-items: center; height: 100%; margin: 0; padding: 0 30.5px; list-style: none; }
.nav__item { position: relative; margin-right: 16px; }
.nav__item--end { margin: 0 0 0 auto; }
.nav__link {
  display: flex; align-items: center; gap: 4px;
  padding: 16px 0; border-bottom: 2px solid transparent;
  font-size: 14px; line-height: 18.2px; letter-spacing: .2px; text-transform: capitalize; color: #000;
}
.nav__link:hover { text-decoration: none; }
.nav__link.is-active { border-bottom-color: #000; }
.nav__caret { width: 10px; height: 6px; margin-left: 4px; }
.nav__drop {
  position: absolute; left: 0; top: 100%; min-width: 220px; padding: 8px 0;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 0 0 6px 6px; box-shadow: 0 10px 24px rgba(0,0,0,.1);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.nav__item:hover .nav__drop, .nav__item.is-open .nav__drop { opacity: 1; visibility: visible; transform: none; }
.nav__drop a { display: block; padding: 8px 18px; white-space: nowrap; }
.nav__drop a:hover { background: #f5f5f5; text-decoration: none; }
.nav__close { display: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { padding: 92px 30.5px 0; }
.ftr__grid { display: grid; grid-template-columns: 350px 357px 1fr; align-items: start; }
.ftr__name { max-width: 329px; font-size: 28px; line-height: 33.6px; font-weight: 700; color: #212529; }
.ftr__addr { margin-top: 10px; font-size: 16px; line-height: 24px; color: #2f3540; }
.ftr__addr span { margin-right: 4px; }
.ftr__email { display: block; margin-top: 3px; font-size: 14.4px; line-height: 21.6px; }
.ftr__phone { display: block; margin-top: 4px; font-size: 16px; line-height: 24px; }
.ftr__hours { display: grid; grid-template-columns: 99px auto; row-gap: 3px; margin-top: 89px; font-size: 12.6px; line-height: 18.9px; }
.ftr__hours dt { text-transform: capitalize; }
.ftr__hours dd { margin: 0; }
.ftr__links { display: flex; flex-direction: column; gap: 3.5px; margin: 58px 0 0 17px; width: 315px; }
.ftr__links a { text-transform: capitalize; line-height: 21px; }
.ftr__bottom { margin-top: 45px; padding: 14px 0 24px; border-top: 1px solid #dee2e6; text-align: center; font-size: 16px; line-height: 24px; }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero { margin: 40px 30.5px 0; display: grid; grid-template-columns: 1fr 1fr; height: 462px; border-radius: 20px; background: #01574d; overflow: hidden; color: #fff; }
.hero__media { display: flex; justify-content: center; }
.hero__media .slot { width: 370px; height: 462px; }
.hero__media .slot > img { object-fit: contain; }
.hero__body { padding: 84px 53px 0 72px; }
.hero__title { font-size: 42px; line-height: 50.4px; font-weight: 300; margin-bottom: 14px; }
.hero__text { font-size: 22px; line-height: 33px; margin-bottom: 63px; }
.hero__btn { width: 50%; background: #131313; color: #fff; }
.hero__btn:hover { background: #000; }

.shelf { margin-top: 63px; padding: 0 30.5px; }
.shelf + .shelf { margin-top: 100px; }
.shelf__title { font-size: 26px; line-height: 31.2px; font-weight: 500; color: #212529; margin-bottom: 21px; }
.shelf__track { position: relative; }
.shelf__viewport { overflow: hidden; }
.shelf__row { display: flex; gap: 6.33px; transition: transform .35s ease; }
.shelf__arrow { position: absolute; top: 158px; width: 12px; height: 20px; display: grid; place-items: center; }
.shelf__arrow--prev { left: -24px; }
.shelf__arrow--next { right: -24px; }
.shelf__arrow:disabled { opacity: .25; cursor: default; }

.pcard {
  flex: 0 0 340.25px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 7px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  text-align: center;
}
.pcard .slot { width: 130px; height: 130px; }
.pcard .slot > img { object-fit: contain; }
.pcard__name { margin-top: 14px; min-height: 54px; display: flex; align-items: center; font-size: 21px; line-height: 25.2px; font-weight: 700; }
.pcard__line { margin: 4px 0 7px; font-size: 14px; line-height: 21px; }
.pcard__price { font-size: 21px; line-height: 25.2px; font-weight: 700; margin-bottom: 7px; }
.pcard .btn { width: calc(100% - 14px); margin: 7px; }

.guides { margin-top: 58px; padding: 42px; background: #f0efe7; text-align: center; }
.guides__title { padding-top: 14px; font-size: 42px; line-height: 63px; font-weight: 700; color: #212529; }
.guides__row { display: flex; justify-content: center; gap: 14px; margin-top: 50px; }
.guide { width: 375px; }
.guide__card { position: relative; height: 320px; border-radius: 20%; overflow: hidden; background: #4f5059; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.guide__card .slot { position: absolute; inset: 0; }
.guide__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .2s; }
.guide__card:hover .guide__overlay, .guide__card:focus-within .guide__overlay { opacity: 1; }
.guide__overlay p { font-size: 14px; line-height: 21px; margin-bottom: 29px; }
.guide__overlay .btn { width: 315px; min-height: 36px; padding: 0 13px; border-color: #fff; color: #fff; border-radius: 3.5px; }
.guide__name { display: block; padding: 15px 0; font-size: 21px; line-height: 31.5px; font-weight: 600; color: #212529; }

.coty { display: grid; grid-template-columns: 720px 1fr; height: 527px; background: #58504c; color: #fff; }
.coty__text { display: flex; flex-direction: column; align-items: center; padding: 97px 10px 0; text-align: center; }
.coty__mark { width: 140px; height: 68px; }
.coty__mark .slot { width: 140px; height: 68px; }
.coty__mark .slot > img { object-fit: contain; }
.coty__brand { font-size: 23px; line-height: 34.5px; font-weight: 700; }
.coty__brand sup { font-size: 10px; }
.coty__kicker { margin-top: 15px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 49px; line-height: 53px; letter-spacing: .5px; }
.coty__year { margin-top: 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 80px; line-height: 87px; font-weight: 500; }
.coty__shade { margin-top: 14px; font-size: 22px; line-height: 26.4px; font-weight: 600; }
.coty__media .slot { width: 100%; height: 527px; margin-left: 11px; }

.families { padding: 42px 41px 49px; background: #eeece3; }
.families__title, .collections__title { font-size: 42px; line-height: 50.4px; font-weight: 300; color: #212529; margin-bottom: 28px; }
.families__grid { display: grid; grid-template-columns: repeat(4, 334px); column-gap: 7.33px; row-gap: 7px; }
.fam { display: flex; flex-direction: column; height: 300px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.fam:hover { text-decoration: none; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.fam__head { height: 84px; display: flex; align-items: center; padding: 0 21px; font-size: 24px; line-height: 36px; color: #131313; }
.fam__head--dark { color: #d6d6d6; }
.fam__strips { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); }

.collections { padding: 42px 30.5px 58px; background: #eeece3; }
.collections__grid { display: grid; grid-template-columns: repeat(3, 446px); column-gap: 20.5px; row-gap: 21px; }
.coll { display: block; }
.coll:hover { text-decoration: none; }
.coll__media { display: grid; grid-template-columns: 1fr 74px; height: 402px; }
.coll__media .slot { height: 402px; background: #d8d3c7; }
.coll__chips { display: grid; grid-template-rows: repeat(5, 1fr); }
.coll__name { margin-top: 14px; font-size: 28px; line-height: 33.6px; font-weight: 400; color: #000; }

.reviews { margin-top: 42px; padding: 0 30.5px; }
.reviews__title { font-size: 26px; line-height: 39px; font-weight: 400; margin-bottom: 21px; }
.review { flex: 0 0 453px; display: flex; flex-direction: column; justify-content: center; min-height: 231px; padding: 21px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); text-align: center; }
.review__text { font-size: 16px; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review__name { margin-top: 14px; font-size: 17.5px; line-height: 21px; font-weight: 700; color: #000; }
.review__stars { display: flex; justify-content: center; gap: 7px; margin-top: 17px; color: #d97706; }

.welcome { margin: 30px 30.5px 0; padding: 20px 40px 40px; background: #fff; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); font-family: Arial, Helvetica, sans-serif; }
.welcome h2 { font-size: 28px; line-height: 33.6px; font-weight: 700; margin: 20px 0 28px; }
.welcome h3 { font-size: 28px; line-height: 33.6px; font-weight: 700; margin: 16px 0 6px; }
.welcome p { font-size: 14px; line-height: 21px; margin-bottom: 14px; }
.welcome ul { padding-left: 28px; margin-bottom: 14px; }
.welcome li { line-height: 21px; }
.contact-list { list-style: none; padding: 0 !important; margin: 42px 0 12px 10px !important; }
.contact-list li { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.contact-list svg { color: #dc2626; flex: none; }
.hours-tiles { display: flex; justify-content: space-between; list-style: none; padding: 0 !important; margin: 0 !important; }
.hours-tiles li { width: 70px; height: 70px; padding: 8px; background: #fff; border-radius: 6px; box-shadow: 0 .125rem .5rem rgba(0,0,0,.12); display: flex; flex-direction: column; justify-content: center; font-size: 11px; line-height: 16.5px; }
.hours-tiles b { font-weight: 600; }

.subscribe { position: relative; margin: 42px 30.5px 0; height: 345px; border-radius: 13px; background: #e7eaef; overflow: hidden; }
.subscribe__media { position: absolute; left: -35px; top: -6px; width: 525px; height: 371px; }
.subscribe__media .slot { width: 100%; height: 100%; }
.subscribe__media .slot > img { object-fit: contain; }
.subscribe__body { position: absolute; left: 700px; right: 30px; top: 162px; }
.subscribe__title { font-size: 28px; line-height: 33.6px; font-weight: 400; color: #000; margin-bottom: 14px; }
.subscribe__form { display: flex; gap: 7px; }
.subscribe__form input { flex: 1; height: 48px; padding: 0 15px; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.subscribe__form .btn { width: 114px; min-height: 48px; border-radius: 8px; }

/* ==========================================================================
   CATEGORY PAGE
   ========================================================================== */
.cat-head { padding: 47px 30.5px 49px; text-align: center; }
.cat-head h1 { font-size: 42px; line-height: 50.4px; font-weight: 300; margin-bottom: 14px; }
.cat-head p { max-width: 700px; margin: 0 auto; font-size: 17.5px; line-height: 21px; font-weight: 500; }
.products { padding: 42px 30.5px 63px; background: #fff; }
.cat-btns { display: grid; grid-template-columns: 148fr 145fr 145fr 138fr 154fr 156fr 128fr 153fr 148fr; gap: 7px; margin-bottom: 84px; }
.cat-btns .btn { width: 100%; padding: 12px 7px; }
.cat-btns .btn.is-active { background: #000; color: #fff; font-weight: 700; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 21px; row-gap: 21px; }
.item {
  position: relative; display: flex; flex-direction: column;
  height: 337px; padding: 16px 12px 12px;
  background: #fff; border-radius: 13px; box-shadow: 0 .125rem .5rem rgba(0,0,0,.12);
}
.item__media { display: block; align-self: center; width: 157px; height: 157px; }
.item__media .slot { width: 157px; height: 157px; }
.item__media .slot > img { object-fit: contain; }
.wish {
  position: absolute; right: 6px; top: 177px;
  width: 35px; height: 35px; display: grid; place-items: center;
  background: #fff; border: 1px solid #f0f0f0; border-radius: 5.25px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  color: #e11d48;
}
.wish svg path { fill: none; stroke: currentColor; stroke-width: 2; }
.wish.is-on svg path { fill: currentColor; }
.item__brand { margin-top: 26px; font-size: 12.6px; line-height: 15.75px; color: #000; width: 270px; }
.item__name { font-size: 15.96px; line-height: 19.95px; font-weight: 700; color: #000; width: 270px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item__name a:hover { text-decoration: underline; }
.item__price { margin-top: 15px; font-size: 15.96px; line-height: 20px; font-weight: 700; color: #000; min-height: 20px; }
.item__sku { font-size: 12.6px; line-height: 18.9px; }
.item__stock { position: absolute; right: 12px; bottom: 13px; padding: 4px 8px; border-radius: 8px; background: #e0e0e0; color: #333; font-size: 10px; line-height: 15px; font-weight: 700; }
.item__stock strong { font-weight: 900; }
.empty-note { grid-column: 1 / -1; padding: 40px 0; text-align: center; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pdp-wrap { padding: 40px 30.5px 0; }
.crumbs { display: flex; align-items: center; gap: 7px; height: 21px; margin-bottom: 14px; }
.crumbs svg { flex: none; }
.pdp { display: grid; grid-template-columns: 562px 1fr; column-gap: 21px; padding: 21px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.pdp__preview { position: relative; height: 400px; padding: 20px; border: 1px solid #ccc; display: grid; place-items: center; }
.pdp__preview .slot { width: 504px; height: 347px; }
.pdp__preview .slot > img { object-fit: contain; }
.pdp__preview .wish { left: 7px; top: 7px; right: auto; }
.pdp__title { font-size: 28px; line-height: 33.6px; font-weight: 400; margin-bottom: 7px; }
.pdp__meta { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; max-width: 420px; color: #6c757d; line-height: 21px; }
.pdp__meta strong { margin-left: 4px; }
.pdp__rule { margin: 12px 7px 8px; border: 0; border-top: 2px dashed #f9f9f9; }
.buybox {
  position: relative; padding: 16px 18px 16px 22px;
  border-radius: 10px; background: linear-gradient(135deg, #fdf8f0, #f0ece4);
  box-shadow: 0 .125rem .5rem rgba(0,0,0,.1);
}
.buybox::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 10px 0 0 10px; background: linear-gradient(180deg, #1b406d, #2b755d); }
.buybox__brand { display: block; font-size: 14px; line-height: 16.8px; font-weight: 700; text-transform: uppercase; color: #212529; }
.buybox__price { margin: 19px 0 13px 7px; }
.buybox__price small { display: block; font-size: 14px; line-height: 21px; font-weight: 700; text-transform: uppercase; color: #6c757d; }
.buybox__price span { display: block; font-size: 32px; line-height: 48px; font-weight: 700; color: #1a3c6e; }
.buybox h2 { font-size: 14px; line-height: 16.8px; font-weight: 700; color: #1a3c6e; margin-bottom: 7px; }
.color-chosen { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-weight: 700; color: #1a3c6e; }
.color-chosen[hidden] { display: none; }
.disclaimer { margin: 7px 0 15px; padding: 7px; background: #fef2f2; border: 1px solid #ec9a9a; border-radius: 5px; font-size: 13.125px; line-height: 19.6875px; color: #464343; }
.pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.pill { height: 36px; padding: 0 13px; border: 1px solid #d0ccc5; border-radius: 20px; background: #fff; color: #1e293b; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.pill.is-on { border-color: transparent; background: linear-gradient(90deg, #1f4b6a, #2a705f); color: #fff; }
.pill:disabled { cursor: not-allowed; opacity: .55; }
.pill-note { margin: -7px 0 14px; font-size: 12.6px; color: #6c757d; }
.stock-row { display: flex; justify-content: flex-end; margin-top: 4px; padding: 10px 0 6px; border-bottom: 1px solid #e0e0e0; text-align: left; }
.stock-row div { width: 180px; }
.stock-row b { display: block; font-size: 13.3px; line-height: 15.96px; }
.stock-row span { display: block; font-size: 11.2px; line-height: 16.8px; color: #666; }
.qty-row { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.qty { display: flex; align-items: center; gap: 3px; }
.qty button { width: 30px; height: 45px; border: 1px solid #1a3c6e; border-radius: 5.25px; color: #1a3c6e; display: grid; place-items: center; }
.qty input { width: 34px; height: 45px; border: 1px solid #dee2e6; border-radius: 4px; text-align: center; font-weight: 700; box-shadow: inset 0 1px 2px rgba(0,0,0,.075); }
.qty-row .btn-grad { width: 191px; min-height: 45px; padding: 8px; }
.instore { display: flex; align-items: center; gap: 13px; margin: 14px 0 15px; font-weight: 700; line-height: 21px; }
.instore .btn { min-height: 25px; padding: 0 10px; font-size: 12px; border-color: #000; }
.instore .btn.is-on { background: #000; color: #fff; }
.fbox { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; padding: 8px 10px; min-height: 60px; background: rgba(255,255,255,.6); border: 1px solid rgba(26,60,110,.08); border-radius: 8px; }
.fbox svg { flex: none; color: #141b34; }
.fbox h3 { display: inline; font-size: 14px; line-height: 16.8px; font-weight: 700; color: #1a3c6e; }
.fbox a { text-decoration: underline; }

.acc { margin-top: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.acc:first-of-type { margin-top: 28px; }
.acc__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 15px 14px 15px; min-height: 57px; text-align: left; }
.acc__head h2 { font-size: 14px; line-height: 16.8px; font-weight: 700; text-transform: uppercase; }
.acc__icon { width: 26px; height: 26px; position: relative; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 5px; right: 5px; top: 12px; height: 2px; background: #212529; }
.acc__icon::after { transform: rotate(90deg); transition: transform .2s; }
.acc.is-open .acc__icon::after { transform: rotate(0); }
.acc__body { padding: 0 21px 21px 28px; }
.acc__body ul { padding-left: 15px; }
.acc__body li { line-height: 21px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 21px; padding: 0 10px; }
.specs div { padding: 8px 0; border-bottom: 1px solid #dee2e6; line-height: 21px; }
.specs b { display: block; }
.acc__body iframe { width: 100%; height: 500px; border: 0; }

/* ==========================================================================
   STORE INFO, COLORS, CART, TEXT PAGES
   ========================================================================== */
.banner { position: relative; height: 400px; margin-top: 40px; display: grid; place-items: center; background: #3b3b3b; overflow: hidden; }
.banner .slot { position: absolute; inset: 0; }
.banner h1 { position: relative; padding: 0 10px; font-size: 100px; line-height: 120px; font-weight: 500; color: #fff; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.store-grid { display: grid; grid-template-columns: 912px 1fr; gap: 21px; align-items: start; padding: 56px 30.5px 0; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.prose { padding: 28px 28px 42px; font-size: 14px; line-height: 22px; }
.prose p { margin-bottom: 14px; }
.prose h2 { font-size: 28px; line-height: 33.6px; font-weight: 700; margin: 28px 0 8px; }
.prose ul { padding-left: 28px; margin-bottom: 14px; }
.store-card__head { padding: 21px 28px; border-bottom: 1px solid #eaeaeb; }
.store-card__head h2 { font-size: 17.5px; line-height: 21px; font-weight: 700; }
.store-card__body { padding: 28px; }
.store-card__map { width: 100%; height: 240px; border: 0; background: #e5e3df; }
.store-card__row { display: flex; align-items: center; gap: 7px; margin-top: 14px; line-height: 22px; color: #2f3540; }
.store-card__row + .store-card__row { margin-top: 4px; }
.store-hours { margin-top: 12px; }
.store-hours > b { display: block; font-size: 12.25px; line-height: 22px; text-transform: uppercase; }
.store-hours__days { display: flex; justify-content: space-between; }
.store-hours__days div { font-size: 13px; line-height: 19px; letter-spacing: -.4px; }
.store-hours__days b { display: block; font-size: 12.25px; line-height: 22px; letter-spacing: 0; }

.page-title-band { padding: 49px 30.5px 42px; text-align: center; }
.page-title-band h1 { font-size: 35px; line-height: 42px; font-weight: 400; color: #212529; }

.cart-page { padding: 40px 30.5px 0; min-height: 481px; }
.cart-page h1 { display: flex; align-items: center; gap: 7px; font-size: 21px; line-height: 25.2px; font-weight: 500; margin-bottom: 14px; }
.cart-page h1 .num { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 28px; background: #000; color: #fff; font-size: 15px; line-height: 28px; font-weight: 700; text-align: center; }
.cart-layout { display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: start; margin-top: 21px; }
.cart-lines { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.line { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; padding: 16px; border-bottom: 1px solid #eee; }
.line:last-child { border-bottom: 0; }
.line .slot { width: 90px; height: 90px; border: 1px solid #eee; border-radius: 6px; }
.line .slot > img { object-fit: contain; }
.line__name { font-weight: 700; font-size: 15px; }
.line__meta { color: #6c757d; font-size: 13px; line-height: 19px; }
.line__right { text-align: right; }
.line__price { font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.line .qty button { width: 30px; height: 34px; }
.line .qty input { width: 38px; height: 34px; }
.line__remove { margin-top: 8px; font-size: 13px; text-decoration: underline; color: #6c757d; }
.summary { padding: 21px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.summary h2 { font-size: 14px; line-height: 16.8px; font-weight: 700; text-transform: uppercase; margin-bottom: 14px; }
.summary__row { display: flex; justify-content: space-between; padding: 6px 0; }
.summary__row--total { margin-top: 8px; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 18px; font-weight: 700; }
.fulfil { display: grid; gap: 7px; margin-bottom: 14px; }
.fulfil label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; }
.fulfil label.is-on { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.fulfil input { margin-top: 3px; accent-color: #000; }
.fulfil small { display: block; color: #6c757d; }
.summary .btn { width: 100%; margin-top: 14px; text-transform: uppercase; }
.summary .note { margin-top: 12px; font-size: 12.6px; color: #6c757d; }
.error-box { margin-top: 12px; padding: 10px; border: 1px solid #ec9a9a; background: #fef2f2; border-radius: 5px; color: #7a1c1c; }

.text-page { padding: 40px 30.5px 0; }
.text-page .card { max-width: 1000px; }
.text-page h1 { font-size: 35px; line-height: 42px; font-weight: 400; margin-bottom: 14px; }

/* ---- Cart sidebar ---- */
.sidebar-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.sidebar-backdrop.is-open { opacity: 1; visibility: visible; }
.sidebar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; width: 640px; max-width: 100vw; display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform .3s ease; }
.sidebar.is-open { transform: none; }
.sidebar__head { display: flex; justify-content: space-between; align-items: center; padding: 21px 42px 14px; }
.sidebar__head h2, .sidebar__sub { font-size: 14px; line-height: 16.8px; font-weight: 700; text-transform: uppercase; }
.sidebar__body { flex: 1; overflow-y: auto; padding: 0 42px; overscroll-behavior: contain; }
.sidebar__foot { padding: 14px 42px 28px; border-top: 1px solid #eee; }
.sidebar__foot .summary__row { font-weight: 700; }
.sidebar__foot .btn { width: 100%; margin-top: 7px; text-transform: uppercase; }
.sidebar .btn-soft { font-weight: 400; }
.sidebar .line { padding: 14px 0; }

/* ---- Modal ---- */
.modal-back { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.5); }
.modal { width: 100%; max-width: 460px; padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.modal h2 { font-size: 20px; margin-bottom: 8px; }
.modal p { color: #6c757d; margin-bottom: 14px; }
.modal input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #dee2e6; border-radius: 5px; }
.modal__err { margin-top: 6px; color: #b4402f; font-size: 13px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---- Consent banner ---- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; gap: 21px; padding: 25px 46px 20px 21px; background: #000; color: #fff; }
.consent__text { flex: 1; }
.consent__title { font-size: 21px; line-height: 25.2px; font-weight: 500; margin-bottom: 7px; }
.consent p { font-size: 16px; line-height: 24px; }
.consent a { color: #fff; text-decoration: underline; }
.consent__actions { display: flex; flex-direction: column; gap: 14px; }
.consent__actions button { width: 110px; height: 43px; border-radius: 700px; background: #f8f9fa; color: #000; font-size: 16px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 400; transform: translate(-50%, 30px); padding: 10px 18px; border-radius: 6px; background: #000; color: #fff; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   RESPONSIVE (below 992px the old site switched to its mobile header)
   ========================================================================== */
@media (max-width: 1439px) {
  .search { left: auto; right: 430px; width: min(503px, calc(100vw - 900px)); }
  .families__grid { grid-template-columns: repeat(4, 1fr); }
  .collections__grid { grid-template-columns: repeat(3, 1fr); }
  .store-grid { grid-template-columns: 2fr 1fr; }
  .coty { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1199px) {
  .grid4 { grid-template-columns: repeat(3, 1fr); }
  .cat-btns { grid-template-columns: repeat(5, 1fr); margin-bottom: 42px; }
  .pdp { grid-template-columns: 1fr; row-gap: 21px; }
  .pdp__preview .slot { width: 100%; }
}
@media (max-width: 991px) {
  .hdr { height: 167px; }
  .hdr__bar { display: block; height: 167px; padding: 0; }
  .hdr__burger { display: block; position: absolute; left: 18px; top: 18px; width: 26px; height: 26px; }
  .hdr__burger span, .hdr__burger span::before, .hdr__burger span::after { position: absolute; left: 0; width: 26px; height: 3px; background: #000; content: ""; }
  .hdr__burger span { top: 11px; }
  .hdr__burger span::before { top: -8px; }
  .hdr__burger span::after { top: 8px; }
  .hdr__logo { position: absolute; left: 50%; top: 14px; width: 120px; height: 20px; transform: translateX(-50%); }
  .hdr__logo .slot { width: 120px; height: 20px; }
  .hdr__name { position: absolute; left: 0; right: 0; top: 64px; margin: 14px 0 0; text-align: center; }
  .search { left: 11px; right: 52px; top: 113px; width: auto; }
  .hdr__scan { display: grid; place-items: center; position: absolute; right: 10px; top: 116px; width: 34px; height: 34px; color: #2f3540; }
  .hdr__right { right: 12px; height: auto; top: 0; display: block; width: 110px; }
  .lang { position: absolute; right: 0; top: 0; margin: 0; }
  .lang__btn { padding: 0; height: 43px; }
  .acct { display: none; }
  .hdr__cart { position: absolute; right: 44px; top: 44px; margin: 0; }
  .nav { position: fixed; inset: 0; z-index: 250; height: auto; border: 0; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; }
  .nav.is-open { transform: none; }
  .nav__list { display: block; height: auto; padding: 47px 17px 40px 18px; }
  .nav__item { margin: 0 0 20px; }
  .nav__item--end { margin: 0 0 20px; }
  .nav__link { justify-content: space-between; padding: 14px 0; font-size: 22px; line-height: 28.6px; border: 0; }
  .nav__link.is-active { border: 0; text-decoration: underline; }
  .nav__drop { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; padding: 0 0 0 14px; }
  .nav__item.is-open .nav__drop { display: block; }
  .nav__item:hover .nav__drop { display: none; }
  .nav__item.is-open:hover .nav__drop { display: block; }
  .nav__drop a { font-size: 18px; padding: 10px 0; }
  .nav__close { display: grid; place-items: center; position: absolute; right: 17px; top: 22px; width: 32px; height: 32px; }
  .nav__mobile-only { display: block; }

  .hero { display: block; height: auto; margin: 15px 10.5px 0; border-radius: 0; }
  .hero__media .slot { width: 100%; height: 461px; }
  .hero__body { padding: 42px 42px 49px; }
  .hero__btn { width: 50%; }
  .shelf { padding: 0 10.5px; }
  .shelf__title { text-align: center; }
  .shelf__row .pcard { flex-basis: 100%; }
  .shelf__arrow--prev { left: -8px; }
  .shelf__arrow--next { right: -8px; }
  .guides { padding: 42px 10.5px; }
  .guides__title { font-size: 32px; line-height: 44px; }
  .guides__row { flex-direction: column; align-items: center; }
  .guide { width: 100%; max-width: 375px; }
  .coty { display: block; height: auto; }
  .coty__text { padding: 42px 10px; }
  .coty__media .slot { margin: 0; height: 280px; }
  .families { padding: 42px 10.5px; }
  .families__grid { grid-template-columns: repeat(2, 1fr); }
  .families__title, .collections__title { font-size: 32px; line-height: 40px; }
  .collections { padding: 42px 10.5px; }
  .collections__grid { grid-template-columns: 1fr; }
  .reviews { padding: 0 10.5px; }
  .review { flex-basis: 100%; }
  .welcome { margin: 30px 10.5px 0; padding: 20px; }
  .hours-tiles { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .subscribe { margin: 42px 10.5px 0; height: auto; padding: 260px 20px 30px; }
  .subscribe__media { left: 50%; top: -30px; width: 360px; height: 280px; transform: translateX(-50%); }
  .subscribe__body { position: static; }
  .ftr { padding: 60px 10.5px 0; }
  .ftr__grid { grid-template-columns: 1fr; }
  .ftr__hours { margin-top: 21px; }
  .ftr__links { margin: 21px 0 0; }
  .cat-head { padding: 30px 10.5px; }
  .products { padding: 21px 10.5px 42px; }
  .cat-btns { grid-template-columns: repeat(2, 1fr); }
  .grid4 { grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 14px; }
  .item { height: auto; min-height: 337px; }
  .item__brand, .item__name { width: auto; padding-right: 36px; }
  .item__media, .item__media .slot { width: 130px; height: 130px; }
  .wish { top: 150px; }
  .pdp-wrap { padding: 20px 10.5px 0; }
  .qty-row { flex-wrap: wrap; }
  .qty-row .btn-grad { flex: 1 1 140px; width: auto; }
  .specs { grid-template-columns: 1fr; }
  .banner { height: 220px; margin-top: 15px; }
  .banner h1 { font-size: 48px; line-height: 64px; }
  .store-grid { grid-template-columns: 1fr; padding: 28px 10.5px 0; }
  .cart-page, .text-page { padding: 20px 10.5px 0; }
  .cart-layout { grid-template-columns: 1fr; }
  .consent { flex-direction: column; padding: 20px; }
  .consent__actions { flex-direction: row; }
}
@media (max-width: 575px) {
  .grid4 { grid-template-columns: 1fr; }
  .families__grid { grid-template-columns: 1fr; }
  .line { grid-template-columns: 70px 1fr; }
  .line .slot { width: 70px; height: 70px; }
  .line__right { grid-column: 2; text-align: left; }
}
@media (min-width: 992px) { .nav__mobile-only { display: none; } }

/* Colors page variants (measured separately from the homepage versions) */
.page-title-band h1 { font-size: 42px; line-height: 50.4px; font-weight: 300; }
.page-title-band { padding: 54px 30.5px 63px; }
.families--page { padding: 84px 30.5px 104px; }
.families--page .families__title { margin-bottom: 29px; }
.families--page .families__grid { grid-template-columns: repeat(4, 1fr); column-gap: 21px; row-gap: 21px; }
.collections--page { background: transparent; padding-top: 85px; }

/* Phone corrections from the screenshot loop (must stay after the page variants) */
@media (max-width: 991px) {
  .hero__text { margin-bottom: 21px; }
  .guides__title { font-size: 42px; line-height: 63px; }
  .guide { max-width: 286px; }
  .guide__card { height: 248px; }
  .guide__overlay { opacity: 1; padding: 20px; }
  .guide__overlay .btn { width: 100%; }
  .coty__kicker { font-size: 36px; line-height: 44px; white-space: nowrap; }
  .coty__year { font-size: 72px; line-height: 80px; }
  .families, .families--page { padding: 42px 5px 42px; }
  .families__title, .collections__title { font-size: 42px; line-height: 50.4px; }
  .families__grid, .families--page .families__grid { grid-template-columns: 1fr; row-gap: 7px; }
  .families--page .families__title { margin-bottom: 21px; }
  .collections, .collections--page { padding: 42px 5px; }
  .page-title-band { padding: 30px 10.5px; }
}

@media (max-width: 991px) {
  .collections__grid { grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 21px; }
  .coll__media { grid-template-columns: 1fr 22px; height: 170px; }
  .coll__media .slot { height: 170px; }
  .coll__name { margin-top: 8px; font-size: 18px; line-height: 22px; }
  .ftr { text-align: center; }
  .ftr__name { max-width: none; font-size: 20px; line-height: 26px; }
  .ftr__addr, .ftr__phone { font-size: 14px; line-height: 21px; }
  .ftr__hours { justify-content: center; grid-template-columns: auto auto; column-gap: 28px; }
  .ftr__links { flex-direction: row; justify-content: space-between; width: auto; }
  .ftr__links a { flex: 1; font-size: 12.6px; line-height: 17px; }
  .ftr__bottom { font-size: 14px; line-height: 21px; }
}

/* Real image assets */
.coll__media { display: block; }
.coll__media .slot { height: 402px; background: #d8d3c7; }
.coty__year { width: 250px; height: 87px; margin-top: 11px; }
.coty__year .slot { width: 250px; height: 87px; }
.coty__year .slot > img { object-fit: contain; }
.subscribe { background: #e7eaef url("../img/subscribe-bg.webp") no-repeat 0 0 / auto 126%; }
.subscribe__phone {
  position: absolute; left: 183px; top: 100px; width: 90px; height: 160px;
  transform: matrix3d(2.26274, 1.6, -1.6, 0, -2.26274, 1.6, -1.6, 0, 0, .707107, .707107, 0, 0, 0, 0, 1);
  transform-origin: 45px 80px;
}
.subscribe__phone img { width: 72px; height: 160px; margin-left: 9px; object-fit: contain; }
@media (max-width: 991px) {
  .coll__media { height: auto; }
  .coll__media .slot { height: auto; aspect-ratio: 446 / 402; }
  .coty__year { margin-left: auto; margin-right: auto; }
  .subscribe { background-size: auto 260px; padding-top: 250px; }
  .subscribe__phone { left: 50%; top: 40px; margin-left: -45px; transform: matrix3d(1.13, .8, -.8, 0, -1.13, .8, -.8, 0, 0, .707107, .707107, 0, 0, 0, 0, 1); }
}

/* ==========================================================================
   CENTERED CONTAINER
   The original caps content at 1379px (a 1400px Bootstrap container) and
   centers it; below that width it keeps the 30.5px side gutter.
   ========================================================================== */
@media (min-width: 1440px) {
  :root { --side: max(30.5px, calc((100% - 1379px) / 2)); }
  .hdr__bar, .nav__list, .shelf, .reviews, .ftr, .cat-head, .products, .pdp-wrap,
  .store-grid, .cart-page, .text-page, .collections, .page-title-band, .families--page {
    padding-left: max(30.5px, calc((100% - 1379px) / 2));
    padding-right: max(30.5px, calc((100% - 1379px) / 2));
  }
  .families { padding-left: max(41px, calc((100% - 1359px) / 2)); padding-right: max(41px, calc((100% - 1359px) / 2)); }
  .hero, .welcome, .subscribe {
    margin-left: max(30.5px, calc((100% - 1379px) / 2));
    margin-right: max(30.5px, calc((100% - 1379px) / 2));
  }
  .hdr__right { right: max(30.5px, calc((100% - 1379px) / 2)); }
  .search { left: calc(max(30.5px, calc((100% - 1379px) / 2)) + 508.5px); }
}

/* Color of the Year photo: 11px off the center line, 10px in from the right edge. */
@media (min-width: 992px) {
  .coty { grid-template-columns: 1fr 1fr; }
  .coty__media { padding: 0 10px 0 11px; }
  .coty__media .slot { width: 100%; margin-left: 0; }
}

/* ==========================================================================
   COLOR PICKER (measured from the original at 1920 / 1440 / 390px)
   ========================================================================== */
.btn-soft.is-chosen { font-weight: 700; box-shadow: none; }
.cp { position: fixed; inset: 0; z-index: 500; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: #212529; }
.cp__inner { padding: 28px 42px 42px; }
.cp__head { position: relative; display: flex; align-items: flex-start; gap: 42px; min-height: 58px; }
.cp__title { flex: none; width: 336px; margin: 12px 0 0; font-size: 28px; line-height: 33.6px; font-weight: 500; }
.cp__disclaimer { flex: 1; max-width: 1233px; padding: 7px; background: #fef2f2; border: 1px solid #ec9a9a; border-radius: 5px; font-size: 13.125px; line-height: 19.6875px; color: #464343; }
.cp__close { position: absolute; right: 0; top: 20px; width: 32px; height: 32px; display: grid; place-items: center; color: #6c757d; }
.cp__close:hover { color: #000; }
.cp__search { position: relative; display: block; margin: 27px 0 7px; }
.cp__search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #5a6270; }
.cp__search input { width: 100%; height: 43px; padding: 0 15px 0 46px; border: 1px solid #dee2e6; border-radius: 5.25px; font-size: 17.5px; color: #212529; }
.cp__search input::placeholder { color: #6c757d; }
.cp__search input:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.15); }
.cp__label { margin: 0 0 6px; font-size: 14px; line-height: 16.8px; font-weight: 700; }
.cp__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.cp__pill {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 125px; height: 43px; padding: 8.4px 14px;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 999px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  font-size: 15.4px; line-height: 18.48px; font-weight: 500; color: #212529;
}
.cp__pill:hover { border-color: #adadad; }
.cp__pill.is-on { border-color: #212529; box-shadow: inset 0 0 0 1px #212529; }
.cp__dot { width: 16px; height: 16px; flex: none; border-radius: 999px; border: 1px solid rgba(0,0,0,.2); }
.cp__toggles { display: flex; flex-wrap: wrap; column-gap: 21px; row-gap: 23px; margin-bottom: 16px; }
.cp__toggle { display: inline-flex; align-items: center; cursor: pointer; font-size: 13px; line-height: 19.5px; font-weight: 700; text-transform: uppercase; color: #000; }
.cp__toggle span { padding-left: 6px; }
.cp__switch {
  appearance: none; -webkit-appearance: none; flex: none;
  position: relative; width: 44px; height: 25px; margin: 0;
  background: #e1e8f8; border: 1px solid #dee2e6; border-radius: 28px; cursor: pointer;
  transition: background .15s;
}
.cp__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.cp__switch:checked { background: #1a3c6e; border-color: #1a3c6e; }
.cp__switch:checked::after { left: 21px; }
.cp__switch:focus-visible { outline: 2px solid #1a3c6e; outline-offset: 2px; }
.cp__count { margin-bottom: 10px; font-size: 17.5px; line-height: 21px; font-weight: 500; }
.cp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 11px 10.5px; padding: 0 4px; }
.cp__card { display: flex; flex-direction: column; overflow: hidden; border-radius: 5.25px; background: #fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); text-align: left; }
.cp__card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.cp__card:focus-visible { outline: 2px solid #1a3c6e; outline-offset: 2px; }
.cp__swatch { display: block; height: 120px; }
.cp__name { display: flex; align-items: center; min-height: 48px; padding: 10.5px; font-size: 12.6px; line-height: 15.12px; color: #111; }
.cp__more { height: 1px; }

@media (max-width: 1439px) {
  .cp__head { gap: 62px; }
  .cp__title { width: 100px; margin-top: 3px; }
  .cp__close { top: 26px; }
  .cp__search { margin-top: 35px; }
  .cp__pills { gap: 4.5px; }
  .cp__pill { flex: 1 1 110px; width: auto; }
}
@media (max-width: 991px) {
  .cp__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .cp__inner { padding: 16px 14px 28px; }
  .cp__head { gap: 12px; }
  .cp__title { width: 50px; margin-top: 24px; }
  .cp__close { top: 60px; right: -4px; }
  .cp__search { margin-top: 36px; }
  .cp__pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-right: -14px; }
  .cp__pill { flex: 0 0 auto; width: auto; min-width: 104px; }
  .cp__toggles { row-gap: 22px; }
  .cp__grid { grid-template-columns: 1fr; padding: 0 4px; }
}