.oc-hair-route-grid{overflow:clip}.oc-hair-route-grid__header{display:grid;gap:clamp(1.25rem,3vw,2rem);margin-block-end:clamp(2rem,5vw,4rem)}.oc-hair-route-grid__eyebrow,.oc-hair-route-grid__route-label,.oc-hair-route-grid__card-action,.oc-hair-route-grid__footer-link{font-size:.75rem;font-weight:600;letter-spacing:.13em;line-height:1.4;text-transform:uppercase}.oc-hair-route-grid__eyebrow{margin:0;color:rgb(var(--text-color) / .72)}.oc-hair-route-grid__heading{max-width:15ch;margin:0;font-family:var(--heading-font-family);font-size:clamp(2rem,3.6vw,3.75rem);font-style:var(--heading-font-style);font-weight:var(--heading-font-weight);letter-spacing:var(--heading-letter-spacing);line-height:1.06;text-transform:var(--heading-text-transform)}.oc-hair-route-grid__introduction{max-width:39rem;color:rgb(var(--text-color) / .72)}.oc-hair-route-grid__list{display:flex;align-items:stretch;gap:clamp(.75rem,1.5vw,1.5rem);width:max-content;min-width:100%;margin:0;padding:0;list-style:none}.oc-hair-route-grid__slider{--oc-hair-card-width: min(84vw, 27rem);--oc-hair-card-width-desktop: min(42vw, 31rem)}.oc-hair-route-grid__item{flex:0 0 var(--oc-hair-slide-width);width:var(--oc-hair-slide-width);max-width:min(100%,var(--oc-hair-slide-width));min-width:0;scroll-snap-align:start;scroll-snap-stop:always}.oc-hair-route-grid__card{position:relative;display:grid;min-height:clamp(19rem,72vw,30rem);overflow:hidden;border:1px solid rgb(var(--text-color) / .16);background:rgb(var(--background));color:rgb(var(--text-color));isolation:isolate}.oc-hair-route-grid__card-link{position:relative;z-index:2;align-self:end;color:inherit;text-decoration:none}.oc-hair-route-grid__item--text-only .oc-hair-route-grid__card-link{align-self:stretch}.oc-hair-route-grid__item--text-only .oc-hair-route-grid__card-content{height:100%}.oc-hair-route-grid__media,.oc-hair-route-grid__media picture,.oc-hair-route-grid__media video-media,.oc-hair-route-grid__media video-media>img,.oc-hair-route-grid__media video-media>video,.oc-hair-route-grid__image,.oc-hair-route-grid__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.oc-hair-route-grid__media.oc-hair-slider__media{z-index:1;inset:50% auto auto 50%;width:min(100%,var(--oc-hair-media-width, 100%));height:var(--oc-hair-route-media-height, 100%);max-height:100%;margin:0;translate:-50% -50%}.oc-hair-route-grid__image,.oc-hair-route-grid__media :is(img,video){object-fit:var(--oc-hair-media-fit, cover);transition:transform .6s cubic-bezier(.22,1,.36,1)}.oc-hair-route-grid__media:after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0000000f 20%,#000000c7);content:"";pointer-events:none}.oc-hair-route-grid__media--placeholder{display:grid;place-items:center;padding:1.5rem;background:linear-gradient(145deg,rgb(255 255 255 / .07),transparent 52%),#282828;color:#faf8f5b8;text-align:center}.oc-hair-route-grid__media--placeholder span{max-width:19rem;font-size:.75rem;font-weight:600;letter-spacing:.15em;line-height:1.45;text-transform:uppercase}.oc-hair-route-grid__card-content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.85rem;min-width:0;padding:clamp(1.25rem,3vw,2.5rem)}.oc-hair-route-grid__item:not(.oc-hair-route-grid__item--text-only) .oc-hair-route-grid__card-content{color:#fff;text-shadow:0 1px 20px rgb(0 0 0 / .28)}.oc-hair-route-grid__route-label,.oc-hair-route-grid__card-title,.oc-hair-route-grid__card-copy,.oc-hair-route-grid__card-action{margin:0}.oc-hair-route-grid__route-label{opacity:.82}.oc-hair-route-grid__card-title{max-width:18ch;font-family:var(--heading-font-family);font-size:clamp(1.45rem,2.15vw,2.25rem);font-style:var(--heading-font-style);font-weight:var(--heading-font-weight);letter-spacing:var(--heading-letter-spacing);line-height:1.08;text-transform:var(--heading-text-transform)}.oc-hair-route-grid__card-copy{max-width:34rem;opacity:.88}.oc-hair-route-grid__card-copy>:first-child{margin-block-start:0}.oc-hair-route-grid__card-copy>:last-child{margin-block-end:0}.oc-hair-route-grid__card-action{display:inline-flex;align-items:center;align-self:flex-start;gap:.65rem;min-height:44px;padding-block:.65rem;border-block-end:1px solid currentColor}.oc-hair-route-grid__card-action span{transition:transform .22s ease}.oc-hair-route-grid__item--text-only .oc-hair-route-grid__card{background:rgb(var(--text-color) / .035)}.oc-hair-route-grid__item--text-only .oc-hair-route-grid__card-content{justify-content:space-between}.oc-hair-route-grid[data-layout=feature_cards] .oc-hair-route-grid__item--text-only .oc-hair-route-grid__card-content{justify-content:flex-end;color:#faf8f5;text-shadow:0 1px 20px rgb(0 0 0 / .28)}.oc-hair-route-grid[data-layout=feature_cards] .oc-hair-route-grid__item--text-only .oc-hair-route-grid__card{background:#282828}.oc-hair-route-grid__diagnostic,.oc-hair-route-grid__empty{margin:0;padding:1rem;border:1px dashed currentColor;background:rgb(var(--text-color) / .04);color:rgb(var(--text-color));font-size:.875rem}.oc-hair-route-grid__item>.oc-hair-route-grid__diagnostic{margin-block-start:.5rem}.oc-hair-route-grid__item--diagnostic .oc-hair-route-grid__diagnostic{display:grid;align-content:center;min-height:10rem}.oc-hair-route-grid__footer{display:flex;justify-content:flex-end;margin-block-start:clamp(1.5rem,3vw,2.5rem)}.oc-hair-route-grid__footer-link{min-height:44px;padding-block:.75rem;border-block-end:1px solid currentColor}.oc-hair-route-grid__card-link:focus-visible,.oc-hair-route-grid__footer-link:focus-visible{outline:3px solid currentColor;outline-offset:4px}.oc-hair-route-grid[data-layout=compact_tiles] .oc-hair-route-grid__list{--oc-hair-slide-width: min(48vw, 18rem)}.oc-hair-route-grid[data-layout=compact_tiles] .oc-hair-route-grid__card{min-height:clamp(13rem,52vw,18rem)}.oc-hair-route-grid[data-layout=compact_tiles] .oc-hair-route-grid__card-content{gap:.55rem;padding:clamp(1rem,2.5vw,1.5rem)}.oc-hair-route-grid[data-layout=compact_tiles] .oc-hair-route-grid__card-title{font-size:clamp(1.2rem,2vw,1.75rem)}.oc-hair-route-grid[data-layout=compact_tiles] .oc-hair-route-grid__card-copy{display:none}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__card{min-height:clamp(16rem,66vw,19rem);border:0;border-inline-end:1px solid rgb(var(--text-color) / .16);border-block-end:1px solid rgb(var(--text-color) / .16);background:transparent}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__list{gap:0;border-block-start:1px solid rgb(var(--text-color) / .16);border-inline-start:1px solid rgb(var(--text-color) / .16)}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__card-content{justify-content:flex-start;padding:clamp(1.25rem,2.5vw,2.2rem)}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__route-label{margin-block-end:auto;color:rgb(var(--text-color) / .7)}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__card-title{max-width:16ch;font-size:clamp(1.25rem,1.7vw,1.65rem)}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__card-copy{color:rgb(var(--text-color) / .7)}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__card-action{font-size:.6875rem}@media screen and (max-width:699px){.oc-hair-route-grid[data-layout=feature_cards][data-card-count="3"] .oc-hair-route-grid__item:first-child .oc-hair-route-grid__card{min-height:min(32.5rem,calc(100svh - 2rem))}}@media screen and (min-width:700px){.oc-hair-route-grid__header{grid-template-columns:minmax(0,1.4fr) minmax(18rem,.75fr);align-items:end}.oc-hair-route-grid__eyebrow{grid-column:1 / -1}.oc-hair-route-grid__introduction{justify-self:end}.oc-hair-route-grid[data-layout=compact_tiles] .oc-hair-route-grid__list{--oc-hair-slide-width: min(30vw, 20rem)}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__list{--oc-hair-slide-width: min(42vw, 26rem)}}@media screen and (min-width:1000px){.oc-hair-route-grid[data-layout=feature_cards][data-card-count="3"] .oc-hair-route-grid__list{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);grid-template-rows:repeat(2,minmax(16.25rem,auto));grid-auto-flow:row}.oc-hair-route-grid[data-layout=feature_cards][data-card-count="3"] .oc-hair-route-grid__item:first-child{grid-column:1;grid-row:1 / span 2}.oc-hair-route-grid[data-layout=feature_cards][data-card-count="3"] .oc-hair-route-grid__item:nth-child(2){grid-column:2;grid-row:1}.oc-hair-route-grid[data-layout=feature_cards][data-card-count="3"] .oc-hair-route-grid__item:nth-child(3){grid-column:2;grid-row:2}.oc-hair-route-grid[data-layout=feature_cards][data-card-count="3"] .oc-hair-route-grid__item:first-child .oc-hair-route-grid__card{min-height:36.875rem}.oc-hair-route-grid[data-layout=feature_cards][data-card-count="3"] .oc-hair-route-grid__item:nth-child(n+2) .oc-hair-route-grid__card{min-height:17.5rem}.oc-hair-route-grid[data-layout=feature_cards] .oc-hair-route-grid__list{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;grid-auto-rows:minmax(15rem,auto)}.oc-hair-route-grid[data-layout=feature_cards] .oc-hair-route-grid__item{grid-column:span 3}.oc-hair-route-grid[data-layout=feature_cards] .oc-hair-route-grid__item:first-child{grid-column:span 6;grid-row:span 2}.oc-hair-route-grid[data-layout=feature_cards] .oc-hair-route-grid__item:nth-child(n+4){grid-column:span 4}.oc-hair-route-grid[data-layout=feature_cards] .oc-hair-route-grid__card{height:100%;min-height:15rem}.oc-hair-route-grid[data-layout=feature_cards] .oc-hair-route-grid__item:first-child .oc-hair-route-grid__card{min-height:31.5rem}.oc-hair-route-grid[data-layout=compact_tiles] .oc-hair-route-grid__list{--oc-hair-slide-width: min(23vw, 22rem)}.oc-hair-route-grid[data-layout=editorial_resources] .oc-hair-route-grid__list{--oc-hair-slide-width: min(23vw, 24rem)}}@media(hover:hover)and (pointer:fine){.oc-hair-route-grid__card:hover .oc-hair-route-grid__image,.oc-hair-route-grid__card:hover .oc-hair-route-grid__media :is(img,video){transform:scale(1.025)}.oc-hair-route-grid__card:hover .oc-hair-route-grid__card-action span{transform:translate(.25rem)}}@media(prefers-reduced-motion:reduce){.oc-hair-route-grid__image,.oc-hair-route-grid__media :is(img,video),.oc-hair-route-grid__card-action span{transition:none}.oc-hair-route-grid__card:hover .oc-hair-route-grid__image,.oc-hair-route-grid__card:hover .oc-hair-route-grid__media :is(img,video),.oc-hair-route-grid__card:hover .oc-hair-route-grid__card-action span{transform:none}}@media(forced-colors:active){.oc-hair-route-grid__card,.oc-hair-route-grid__diagnostic,.oc-hair-route-grid__empty{border:1px solid CanvasText;background:Canvas;color:CanvasText}.oc-hair-route-grid__media{display:none}.oc-hair-route-grid__item:not(.oc-hair-route-grid__item--text-only) .oc-hair-route-grid__card-content{color:CanvasText;text-shadow:none}.oc-hair-route-grid__card-action,.oc-hair-route-grid__footer-link{border-color:LinkText}}
/*# sourceMappingURL=/cdn/shop/t/30/assets/oc-hair-route-grid.css.map */