.fabric-panels__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-block-end:var(--section-head-gap-mobile, 26px);text-align:center}.fabric-panels__head[data-align=start]{align-items:flex-start;text-align:start}.fabric-panels__head h2{margin:0}.fabric-panels__intro{margin:0;max-width:56ch;color:var(--color-text-muted)}html[data-style=noor] .fabric-panels__head:not([data-align=start]) h2:after{content:"";display:block;width:56px;height:1px;margin:18px auto 0;background:var(--palette-accent)}@media(max-width:749px){html[data-style=noor] .fabric-panels__head:not([data-align=start]) h2:after{margin-block-start:var(--heading-rule-gap-mobile, 18px)}}.fabric-panels__empty{margin:0;padding:var(--space-10) var(--space-4);border:1px dashed var(--color-border);border-radius:var(--radius-media);color:var(--color-text-muted);text-align:center}@property --shade-mid{syntax: "<percentage>"; inherits: true; initial-value: 60%;}@property --shade-stop{syntax: "<percentage>"; inherits: true; initial-value: 88%;}.fabric-panels{--loupe-tilt: -5deg;--shade-mid: 60%;--shade-stop: 88%;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}html[dir=ltr] .fabric-panels{--loupe-tilt: 5deg}.fabric-panels__panel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:none;min-width:0;height:var(--panel-height-mobile, 420px);padding:22px;overflow:hidden;border-radius:var(--radius-media);color:var(--palette-on-media);isolation:isolate}.fabric-panels__media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2}.fabric-panels__media img{object-position:50% 22%}.fabric-panels__media .style-media__placeholder{position:absolute;top:0;right:0;bottom:0;left:0}.fabric-panels__shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(to top,rgb(var(--palette-shade-rgb) / var(--panel-shade, .85)),rgb(var(--palette-shade-rgb) / calc(var(--panel-shade, .85) * .5)) var(--shade-mid, 60%),rgb(var(--palette-shade-rgb) / calc(var(--panel-shade, .85) * .12)) var(--shade-stop, 88%))}.fabric-panels__loupe{position:absolute;inset-block-start:20px;inset-inline-end:20px;width:calc(var(--loupe-size, 128px) * .72);aspect-ratio:var(--ratio-square);border:3px solid rgb(var(--palette-on-media-rgb) / .92);border-radius:var(--radius-round);box-shadow:0 14px 34px rgb(var(--palette-shade-rgb) / .3)}.fabric-panels__loupe img{object-position:50% 50%}.fabric-panels__loupe[data-zoom] img{transform:scale(2.6);transform-origin:50% 62%}.fabric-panels__copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:100%}.fabric-panels__kicker,.fabric-panels__heading,.fabric-panels__list{text-shadow:0 1px 10px rgb(var(--palette-shade-rgb) / .45)}.fabric-panels__kicker{margin:0;color:color-mix(in srgb,var(--palette-gold-light) 45%,var(--palette-on-media));font-size:var(--fs-3);font-weight:700}.fabric-panels__heading{max-width:16ch;margin:0;color:inherit;font-size:var(--fs-8);line-height:var(--heading-line-height, 1.25)}.fabric-panels__list{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none;font-size:var(--fs-4);line-height:1.6}.fabric-panels__list li{display:flex;align-items:baseline;gap:10px}.fabric-panels__list li:before{content:"\2726";content:"\2726" / "";flex:none;color:var(--palette-gold-light);font-size:.7em}.fabric-panels .fabric-panels__button{position:static;gap:10px;min-height:var(--control-min-height, 44px);margin-block-start:var(--space-1);padding:0 20px;border-color:var(--palette-on-media);background:var(--palette-on-media);color:var(--palette-text);font-size:var(--fs-3);font-weight:700}.fabric-panels .fabric-panels__button:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.fabric-panels .fabric-panels__button:hover,.fabric-panels__panel:focus-within .fabric-panels__button{border-color:var(--palette-gold-light);background:var(--palette-gold-light);color:var(--palette-primary-dark)}.fabric-panels .fabric-panels__button:focus-visible{outline:var(--focus-width, 2px) solid var(--palette-on-media);outline-offset:3px}.fabric-panels__button svg{flex:none;width:16px;height:16px}html[dir=ltr] .fabric-panels__button svg{transform:scaleX(-1)}@media(min-width:750px){.fabric-panels__head{margin-block-end:var(--space-10)}.fabric-panels{flex-direction:row;gap:clamp(12px,var(--grid-gap, 18px),18px);height:var(--panel-height, 580px)}.fabric-panels__panel{flex:1 1 0;height:auto;padding:36px}.fabric-panels__loupe{inset-block-start:30px;inset-inline-end:30px;width:var(--loupe-size, 128px)}.fabric-panels__heading{font-size:var(--fs-10)}}@media(min-width:750px)and (hover:hover){.fabric-panels[data-list=hover]{--shade-mid: 52%;--shade-stop: 80%}.fabric-panels[data-list=hover] .fabric-panels__panel:is(:hover,:focus-within){--shade-mid: 60%;--shade-stop: 88%}.fabric-panels__panel:is(:hover,:focus-within){flex-grow:var(--panel-grow, 1.7)}.fabric-panels[data-list=hover] .fabric-panels__list{max-height:0;overflow:hidden;opacity:0}.fabric-panels[data-list=hover] .fabric-panels__panel:is(:hover,:focus-within) .fabric-panels__list{max-height:40em;opacity:1}}@media(prefers-reduced-motion:no-preference){.motion-enabled .fabric-panels__panel{transition:flex-grow var(--motion-unified, .8s) var(--ease-standard),--shade-mid var(--motion-unified, .5s) var(--ease-standard),--shade-stop var(--motion-unified, .5s) var(--ease-standard)}.motion-enabled .fabric-panels__media img{transition:transform var(--motion-unified, 1.4s) var(--ease-standard)}.motion-enabled .fabric-panels__loupe{transition:transform var(--motion-unified, .7s) var(--ease-standard)}.motion-enabled .fabric-panels__list{transition:max-height var(--motion-unified, .7s) var(--ease-standard),opacity var(--motion-unified, .5s) var(--ease-standard)}.motion-enabled .fabric-panels .fabric-panels__button{transition:background-color var(--motion-unified, .3s) var(--ease-standard),border-color var(--motion-unified, .3s) var(--ease-standard),color var(--motion-unified, .3s) var(--ease-standard)}}@media(prefers-reduced-motion:no-preference)and (hover:hover){.motion-enabled .fabric-panels__panel:is(:hover,:focus-within) .fabric-panels__media img{transform:scale(1.05)}.motion-enabled .fabric-panels__panel:is(:hover,:focus-within) .fabric-panels__loupe{transform:scale(1.12) rotate(var(--loupe-tilt))}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/section-fabric-panels.css.map */