@property --logo-p{syntax: "<number>"; inherits: true; initial-value: 0;}@property --logo-m{syntax: "<number>"; inherits: true; initial-value: 0;}:root{--hang-h: clamp(96px, min(8vw, 14.5vh), 136px);--hang-x: clamp(20px, 4vw - 24px, 72px);--hang-y: calc(104px - var(--nav-top) + var(--inset));--hang-edge: calc(var(--hang-x) + var(--hang-h) * .9326);--float-h: clamp(64px, min(5vw, 9vh), 80px);--float-gap: 40px;--float-y: calc(var(--nav-control) + var(--float-gap));--small-edge: calc(var(--hang-x) + var(--float-h) * .9326);--small-y: calc(108px - var(--nav-top));--shrink-run: calc(var(--hang-y) + var(--hang-h) - var(--float-y) + 8px);--page-edge: var(--gutter);--gutter-base: clamp(1rem, 3.5vw, 4rem)}@supports (width: round(1.5px,1px)){:root{--hang-h: round(clamp(96px, min(8vw, 14.5vh), 136px), 1px);--hang-x: round(clamp(20px, 4vw - 24px, 72px), 1px);--hang-y: round(104px - var(--nav-top) + var(--inset), 1px);--float-h: round(clamp(64px, min(5vw, 9vh), 80px), 1px);--small-edge: round(var(--hang-x) + var(--float-h) * .9326, 1px)}}@media(min-width:1024px){:root[data-frame=hanging]{--page-edge: var(--hang-edge);--gutter: var(--page-edge)}:root[data-frame=small]{--page-edge: var(--small-edge);--gutter: var(--page-edge)}:root[data-frame=none]{--page-edge: var(--hang-edge);--gutter: var(--page-edge)}:root[data-frame=none] .catalog-shell{--gutter: var(--hang-x)}:root:is([data-frame=hanging],[data-frame=small],[data-frame=none]) .shell{width:100%}:root:is([data-frame=hanging],[data-frame=small],[data-frame=none]) .row-body{--edge: 0px}:root[data-frame=hanging] .shell[data-logo-hang]{margin-top:-28px}:root[data-frame=hanging] .product-layout{--lead-top: 104px}:root:is([data-frame=hanging],[data-frame=small],[data-frame=none]) [data-follow-nav] c4-product-row{grid-template-columns:calc(var(--page-edge) + var(--inset)) minmax(0,1fr) auto calc(var(--page-edge) + var(--inset))}}c4-navigation[data-logo-frame=hanging] .brand{gap:0;padding-block:0;transition:translate .65s var(--nav-spring),top .45s var(--nav-ease),opacity .25s var(--nav-ease),visibility .25s}c4-navigation[data-logo-frame] .mark{transition:clip-path .45s var(--nav-ease)}c4-navigation[data-logo-frame=hanging]:not([data-logo-small]):not([data-logo-menu]:has(details[open],dialog[open])) .brand .mark-glass--block{opacity:1}c4-navigation[data-logo-frame=hanging]:not([data-logo-small]):not([data-logo-menu]:has(details[open],dialog[open])) .brand .d{fill-opacity:.3}c4-navigation[data-logo-frame=hanging]:not([data-logo-small]):not([data-logo-menu]:has(details[open],dialog[open])) .brand-caption{display:none}c4-navigation[data-logo-compact][data-logo-small] .brand .mark{clip-path:inset(0 53.2% 0 0)}c4-navigation[data-logo-frame=hanging]:not([data-logo-small]) .brand :is(.d,.f){stroke:none}@media(min-width:1024px){c4-navigation[data-logo-frame=hanging][data-logo-scroll=into]:not([data-logo-small]):not([data-logo-menu]:has(details[open])) .brand{translate:calc(var(--hang-x) - var(--nav-gutter)) var(--hang-y)}c4-navigation[data-logo-frame=hanging][data-logo-scroll=into]:not([data-logo-small]):not([data-logo-menu]:has(details[open])) .brand svg{height:var(--hang-h)}c4-navigation[data-logo-frame=hanging][data-logo-scroll=float] .brand{--logo-p: 0;--logo-m: 0;transition:--logo-p .65s var(--nav-spring),--logo-m .55s var(--nav-spring),top .45s var(--nav-ease),opacity .25s var(--nav-ease),visibility .25s;translate:calc((var(--hang-x) - var(--nav-gutter)) * (1 - var(--logo-m))) calc((var(--hang-y) + (var(--float-y) - var(--hang-y)) * var(--logo-p)) * (1 - var(--logo-m)))}c4-navigation[data-logo-frame=hanging][data-logo-scroll=float][data-logo-small] .brand{--logo-p: 1}c4-navigation[data-logo-frame=hanging][data-logo-scroll=float][data-logo-menu]:has(details[open]) .brand{--logo-m: 1}c4-navigation[data-logo-frame=hanging][data-logo-scroll=float] .brand svg{transition:none;height:calc((var(--hang-h) + (var(--float-h) - var(--hang-h)) * var(--logo-p)) * (1 - var(--logo-m)) + 64px * var(--logo-m))}@supports (animation-timeline: view()){:root:has(c4-navigation[data-logo-frame=hanging][data-logo-scroll=float]){timeline-scope:--hang}:root:has(c4-navigation[data-logo-frame=hanging][data-logo-scroll=float]) [data-logo-hang]{view-timeline:--hang block;view-timeline-inset:calc(var(--nav-top) + var(--float-y) - 8px) 0px}c4-navigation[data-logo-frame=hanging][data-logo-scroll=float] .brand{animation:logo-shrink linear both;animation-timeline:--hang;animation-range:exit-crossing calc(100% - var(--shrink-run)) exit-crossing 100%}}@keyframes logo-shrink{0%{--logo-p: 0}to{--logo-p: 1}}c4-navigation[data-logo-frame=hanging][data-logo-scroll=float][data-logo-small] .brand .mark-glass--block{opacity:1}c4-navigation[data-logo-frame=hanging][data-logo-scroll=float][data-logo-small] .brand .d{fill-opacity:.3}:root[data-frame=hanging] [data-follow-nav] c4-product-row{grid-template-columns:calc(var(--page-edge) + var(--inset)) minmax(0,1fr) auto var(--hang-x)}:root[data-frame=hanging] :is(.row-heading,.stockist-rail .rail-head){padding-right:0;margin-right:calc(var(--hang-x) - var(--page-edge))}:root[data-frame=hanging] .row-filters{padding-left:var(--hang-x)}:root[data-frame=hanging] [data-filtered]{--filters: calc(var(--page-edge) + var(--inset))}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement,.logo-corner{position:absolute;z-index:31;top:var(--nav-top);left:var(--hang-x);display:flex;align-items:center;width:max-content;max-width:210px;min-height:var(--nav-control);margin:0;padding:0;background:none;color:var(--corner-ink, var(--ink));font:500 var(--nav-type, 14px) / 1.25 var(--font-display);text-align:left;transition:opacity .18s var(--nav-ease),visibility .18s}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement-close{display:none}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement-cta{white-space:nowrap}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement-arrow{display:inline-block;margin-left:.3em;vertical-align:-.12em;line-height:0;transition:translate .45s var(--nav-spring)}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement-arrow svg{width:.95em;height:.95em}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement a:hover{text-decoration:none}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement a:hover .announcement-arrow{translate:3px 0}:root:has(c4-navigation[data-logo-corner=announcement]) .announcement :is(.announcement-cta,a:not(:has(.announcement-cta))){text-decoration:underline;text-decoration-color:var(--corner-line, currentColor);text-decoration-thickness:1.5px;text-underline-offset:3px}:root:has(c4-navigation[data-logo-corner=announcement][data-condensed]) .announcement,:root:has(c4-navigation[data-logo-corner=announcement][data-logo-menu] details[open]) .announcement,c4-navigation[data-condensed] .logo-corner,c4-navigation[data-logo-menu]:has(details[open]) .logo-corner{opacity:0;visibility:hidden}c4-navigation[data-logo-frame=small][data-ready] .brand{gap:0;padding-block:0;translate:calc(var(--hang-x) - var(--nav-gutter)) var(--small-y);transition:translate .55s var(--nav-spring),top .45s var(--nav-ease),opacity .25s var(--nav-ease),visibility .25s}c4-navigation[data-logo-frame=small][data-ready] .brand svg{height:var(--float-h)}c4-navigation[data-logo-frame=small] .brand .mark-glass--block{opacity:1}c4-navigation[data-logo-frame=small] .brand .d{fill-opacity:.3}c4-navigation[data-logo-frame=small] .brand-caption{display:none}c4-navigation[data-logo-frame=small][data-logo-menu]:has(details[open]) .brand{translate:0 0}c4-navigation[data-logo-frame=small][data-logo-menu]:has(details[open]) .brand svg{height:64px}}c4-navigation[data-logo-frame=small]{--logo-rest-y: var(--small-y)}c4-navigation[data-logo-frame=hanging]{--logo-rest-y: var(--float-y)}.logo-probe{position:absolute;top:0;left:0;width:var(--float-h);height:var(--logo-rest-y, 0px);visibility:hidden;pointer-events:none}@media(min-width:1024px){c4-navigation[data-logo-park]:not([data-logo-menu]:has(details[open],dialog[open])) .brand{position:absolute;margin-top:var(--logo-park, 0px)}}c4-navigation[data-logo-frame][data-logo-gone]:not([data-logo-menu]:has(details[open],dialog[open])) .brand{opacity:0;visibility:hidden}@media(min-width:1024px){c4-navigation[data-logo-frame=none][data-ready] .brand{position:absolute;top:var(--nav-top);gap:0;padding-block:0;translate:calc(var(--hang-x) - var(--nav-gutter)) var(--float-y)}c4-navigation[data-logo-frame=none][data-ready] .brand svg{height:var(--float-h)}c4-navigation[data-logo-frame=none] .brand-caption{display:none}c4-navigation[data-logo-frame=none][data-condensed] .brand .mark-glass--block{opacity:0}c4-navigation[data-logo-frame=none][data-condensed] .brand .d{fill-opacity:1}c4-navigation[data-logo-frame=none][data-condensed] .brand :is(.d,.f){stroke:none}}@media(max-width:1023px){.logo-corner{display:none}c4-navigation[data-logo-frame=hanging][data-ready] .brand{position:fixed;top:calc(var(--nav-top) + var(--announce, 0px));left:var(--nav-gutter)}c4-navigation[data-logo-frame=hanging][data-logo-small] .brand{gap:0;padding-block:0}c4-navigation[data-logo-frame=hanging][data-logo-small] .brand svg{height:var(--nav-control)}c4-navigation[data-logo-frame=hanging]:not([data-logo-small]):not([data-logo-menu]:has(dialog[open])) .brand{translate:var(--inset) calc(96px - 12px - var(--nav-top) + var(--inset))}c4-navigation[data-logo-frame=hanging]:not([data-logo-small]):not([data-logo-menu]:has(dialog[open])) .brand svg{height:100px}}@media(prefers-reduced-motion:reduce){c4-navigation[data-logo-frame] :is(.brand,.brand svg,.mark){transition:none}}@media(min-width:1024px){:root[data-frame=small] .product-stage-caption{left:calc(var(--float-h) * .804 + 20px)}:root[data-frame=hanging] .product-stage-caption{left:calc(var(--hang-h) * .804 + 20px)}}@media(min-width:1024px){:root:is([data-frame=small],[data-frame=hanging]) .product-bar-inner{padding-left:var(--gutter)}:root:is([data-frame=small],[data-frame=hanging]) .product-bar-name{max-width:calc(50vw - var(--gutter) - 220px)}}
/*# sourceMappingURL=/cdn/shop/t/34/assets/page-frame.css.map */