:root{ --red:#ff1010; --red-deep:#d90000; --ink:#050505; --paper:#ffffff; --lav:#eef0f8; --muted:#696b75; --line:rgba(5,5,5,.12); --radius:30px; --display:'Space Grotesk',sans-serif; --body:'DM Sans',sans-serif; } *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit} /* Images carry width/height attributes so the browser can reserve their space and avoid layout shift. Those attributes map to the CSS width/height properties as presentational hints, which stay in force whenever no author rule overrides them — so a rule that sets only a width (the logo, at width:120px) left height:379px from the attribute applying, and the logo rendered 120x379, stretched vertically. height:auto restores the intrinsic ratio. Every rule that deliberately sets a height is class-qualified and so more specific than this, and therefore unaffected. max-width keeps an oversized image from widening the page on a phone. */ img{max-width:100%;height:auto}.page-loader{position:fixed;inset:0;z-index:9999;background:#fff;color:#fff;display:grid;place-items:center;transition:opacity .7s,visibility .7s}.page-loader img{width:clamp(96px,26vw,190px);max-width:60vw;height:auto;display:block;animation:loaderPulse 1.1s ease-in-out infinite alternate;filter:drop-shadow(0 10px 30px rgba(255,16,16,.18))}.page-loader.hide{opacity:0;visibility:hidden;pointer-events:none}@keyframes loaderPulse{to{transform:scale(.94);opacity:.55}} .site-header{position:sticky;top:0;z-index:1000;background:rgba(238,238,241,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transition:box-shadow .3s}.site-header.scrolled{box-shadow:0 10px 35px rgba(0,0,0,.08)}.header-inner{max-width:1440px;margin:auto;height:82px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand img{width:120px;height:auto;display:block}.desktop-nav{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.desktop-nav a{position:relative;padding:10px 0}.nav-dropdown{position:relative}.nav-dropdown-toggle{border:0;background:transparent;color:inherit;font:inherit;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:10px 0;display:flex;align-items:center;gap:6px}.nav-dropdown-toggle span{font-size:16px;line-height:1;transition:transform .25s}.nav-dropdown.open .nav-dropdown-toggle span{transform:rotate(180deg)}.nav-dropdown-toggle:after{content:"";position:absolute;left:0;bottom:4px;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s}.nav-dropdown:hover .nav-dropdown-toggle:after,.nav-dropdown.open .nav-dropdown-toggle:after{transform:scaleX(1);transform-origin:left}.nav-dropdown-menu{position:absolute;top:calc(100% + 13px);left:50%;transform:translate(-50%,8px);width:185px;padding:9px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 45px rgba(0,0,0,.14);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.nav-dropdown-menu a{display:block;width:100%;border:0;background:transparent;text-align:left;padding:11px 12px;border-radius:10px;font:700 11px/1 var(--body);letter-spacing:.06em;cursor:pointer;transition:background .2s,color .2s,transform .2s}.nav-dropdown-menu a:hover{background:var(--ink);color:#fff;transform:translateX(3px)}.desktop-nav a:not(.nav-signup):after{content:"";position:absolute;left:0;bottom:4px;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s}.desktop-nav a:not(.nav-signup):hover:after{transform:scaleX(1);transform-origin:left}.nav-login{margin-left:6px}.nav-signup{background:var(--ink);color:#fff!important;padding:12px 19px!important;border-radius:999px;transition:transform .25s,background .25s}.nav-signup:hover{background:var(--red);transform:translateY(-2px)}.menu-toggle{display:none;border:0;background:var(--ink);width:44px;height:44px;border-radius:50%;padding:11px;cursor:pointer}.menu-toggle span{display:block;height:2px;background:#fff;margin:4px 0;transition:.3s}.mobile-nav{display:none}.mobile-categories{border-bottom:1px solid var(--line)}.mobile-categories summary{list-style:none;cursor:pointer;padding:15px 0;font-weight:700;text-transform:uppercase;font-size:12px;display:flex;justify-content:space-between;align-items:center}.mobile-categories summary::-webkit-details-marker{display:none}.mobile-categories summary span{font-size:16px;transition:transform .25s}.mobile-categories[open] summary span{transform:rotate(180deg)}.mobile-category-list{padding:0 0 9px 12px}.mobile-category-list a{display:block;width:100%;text-align:left;border:0;background:transparent;padding:11px 0;font:700 11px/1 var(--body);letter-spacing:.08em;cursor:pointer;color:#555}.mobile-category-list a:hover{color:var(--red)} .hero{background:var(--lav);padding:18px 0 0}.hero-stage{width:min(100%,1650px);margin:auto;position:relative;overflow:hidden;aspect-ratio:1651/740;background:#e8e9f2}.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.035);transition:opacity .9s ease,transform 1.2s cubic-bezier(.22,1,.36,1),visibility .9s}.hero-slide.active{opacity:1;visibility:visible;transform:scale(1)}.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}.hero-stage:after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,rgba(0,0,0,.1));pointer-events:none} .hero-mini{background:var(--lav);padding:16px 34px;display:flex;justify-content:center;gap:34px;flex-wrap:wrap} .hero-mini-dot{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#444;transition:.2s} .hero-mini-dot span{width:9px;height:9px;border-radius:50%;background:var(--red);display:block;transition:transform .2s} .hero-mini-dot:hover{color:var(--red)} .hero-mini-dot:hover span{transform:scale(1.3)} @media(max-width:560px){.hero-mini{gap:16px 22px;padding:14px 18px}.hero-mini-dot{font-size:9.5px}} .hot-products{padding:76px 34px 100px;background:#fff}.product-grid-empty{grid-column:1/-1;text-align:center;color:var(--muted,#777);font-size:13px;padding:30px 0}.section-inner{max-width:1280px;margin:auto}.section-title{display:flex;align-items:center;gap:15px;font:700 24px/1 var(--display);letter-spacing:-.04em;margin-top:0;margin-bottom:42px}.section-title i{height:3px;background:var(--red);width:48px;display:block}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.product-card{min-width:0}.product-image{height:270px;background:linear-gradient(180deg,#f7f7fa,#e8e9f0);border-radius:26px;overflow:hidden;position:relative}.product-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .65s cubic-bezier(.22,1,.36,1)}.product-image span{position:absolute;top:14px;right:16px;font:600 11px/1 var(--display);background:#fff;padding:8px 9px;border-radius:999px}.product-card:hover img{transform:scale(1.08) translateY(-6px)}.visit-shop{display:block;width:min(445px,100%);margin:42px 0 0 auto;transition:transform .3s}.visit-shop img{width:100%;display:block}.visit-shop:hover{transform:translateY(-5px) scale(1.01)} .featured{background:var(--lav);min-height:500px;position:relative;padding:55px max(34px,calc((100vw - 1280px)/2)) 66px;overflow:hidden}.featured-slider{position:relative;min-height:420px}.featured-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.02);transition:opacity .9s ease,transform 1.2s cubic-bezier(.22,1,.36,1),visibility .9s}.featured-slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.featured-copy{padding-right:70px;opacity:0;transform:translateX(-55px);transition:opacity .65s ease .15s,transform .85s cubic-bezier(.22,1,.36,1) .15s}.featured-slide.active .featured-copy{opacity:1;transform:none}.micro-label,.contact-heading>span{font:700 12px/1 var(--display);letter-spacing:.18em}.featured-copy h2{font:700 clamp(2.3rem,5vw,5rem)/.95 var(--display);letter-spacing:-.07em;margin:18px 0;opacity:0;transform:translateY(24px);transition:opacity .65s ease .28s,transform .75s cubic-bezier(.22,1,.36,1) .28s}.featured-slide.active .featured-copy h2{opacity:1;transform:none}.featured-copy p{max-width:580px;color:#30323a;font-size:12px;line-height:1.55;text-transform:uppercase;letter-spacing:.02em;opacity:0;transform:translateX(-32px);transition:opacity .65s ease .4s,transform .8s cubic-bezier(.22,1,.36,1) .4s}.featured-slide.active .featured-copy p{opacity:1;transform:none}.quote-button{display:inline-flex;margin-top:25px;background:#000;color:#fff;border-radius:999px;padding:13px 24px;font:700 13px/1 var(--display);transition:.25s;opacity:0;transform:translateY(18px);transition:opacity .6s ease .52s,transform .7s cubic-bezier(.22,1,.36,1) .52s,background .25s}.featured-slide.active .quote-button{opacity:1;transform:none}.quote-button:hover{background:var(--red);transform:translateY(-3px)}.featured-art{height:420px;position:relative;display:grid;place-items:center;opacity:0;transform:translateX(65px) scale(.96);transition:opacity 1s ease .1s,transform 1.3s cubic-bezier(.22,1,.36,1) .1s}.featured-slide.active .featured-art{opacity:1;transform:none}.art-frame{width:84%;height:88%;border-radius:40px;background:linear-gradient(160deg,#fff3f3,#ff1010);padding:9px;box-shadow:0 35px 55px rgba(0,0,0,.2);opacity:0;transform:scale(.85);transition:opacity 1.1s cubic-bezier(.22,1,.36,1) .18s,transform 1.3s cubic-bezier(.22,1,.36,1) .18s;will-change:opacity,transform}.featured-slide.active .art-frame{opacity:1;transform:scale(1);animation:featuredImageFloat 4.2s ease-in-out .4s infinite}.art-frame img{display:block;width:100%;height:100%;object-fit:cover;border-radius:32px}.featured-art:hover .art-frame{transform:scale(1.03) translateY(-6px)}.featured-controls{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;z-index:5}.featured-dot{width:30px;height:5px;border:0;border-radius:99px;background:#000;opacity:.25;cursor:pointer;padding:0;transition:width .35s ease,opacity .35s ease,background .35s ease}.featured-dot.active{width:52px;opacity:1;background:var(--red)}@keyframes featuredGlow{from{transform:rotate(-3deg) scale(.98);opacity:.82}to{transform:rotate(2deg) scale(1.02);opacity:1}}@keyframes featuredImageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .portfolio{background:#000;color:#fff;padding:70px 0 0;text-align:center;overflow:hidden}.portfolio-label{display:inline-flex;padding:9px 18px;border:2px solid #fff;border-radius:999px;font:700 12px/1 var(--display);letter-spacing:.08em}.portfolio-title{font:700 clamp(3rem,8vw,8rem)/.86 var(--display);letter-spacing:-.075em;margin:125px 20px 70px}.portfolio-line{height:1px;background:rgba(255,255,255,.25);margin:0 34px}.portfolio-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:2px}.portfolio-image{margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;isolation:isolate}.portfolio-image img,.portfolio-image video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.22,1,.36,1),filter .8s}.portfolio-image:hover img,.portfolio-image:hover video{transform:scale(1.05);filter:brightness(1.05)}.portfolio-badge{position:absolute;left:14px;bottom:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:11px;line-height:1;backdrop-filter:blur(3px);pointer-events:none} /* ---- Every tile is the same 16:9 shape, and nothing is ever cropped ---- The grid is locked: three equal columns, two on a tablet, one on a phone, so the section reads as one orderly block however many items the admin has uploaded. The tile shape is fixed rather than following the artwork, which is what keeps the rows even. The trade is that a wide clip or a 2.23:1 photograph does not fill a 16:9 box. Rather than crop it (which is what used to happen - the built-in gallery shots were losing about 40% of their width) or letterbox it against black, app.js puts a blurred copy of the item itself behind it, so the padding is filled with the item's own colours and reads as intentional. `contain` is what shows the artwork whole; the backdrop is what makes the leftover space look deliberate rather than broken. */ /* The blurred fill sits behind the artwork, bled past the tile edges so the soft rim that blur leaves never shows inside the frame. scale() alone would stop a couple of pixels short on a fractional tile width, so the extra 16px inset is what actually guarantees the cover. */ .portfolio-backdrop{ position:absolute;inset:-16px;width:auto;height:auto; object-fit:cover;filter:blur(26px) saturate(1.25) brightness(.72); z-index:0;pointer-events:none; } /* Anything in front of the backdrop: the artwork itself, and the play badge. */ .portfolio-image img:not(.portfolio-backdrop), .portfolio-image video{position:relative;z-index:1} .portfolio-badge{z-index:2} /* ---- Clips and stills both show whole, never cropped ---- The tile keeps the fixed 16:9 shape set above; the artwork letterboxes inside it, and the blurred backdrop fills what is left over. The hover zoom is dropped here because scaling up would shave off the very edges we are trying to show in full. */ .portfolio-image.is-video{background:#000} .portfolio-image.is-video video{object-fit:contain} /* Still frames get the same treatment as clips: shown whole, over their own blurred fill, rather than cropped to fit the tile. This rule has to stay below the shared one above, which sets object-fit:cover. */ .portfolio-image img:not(.portfolio-backdrop){object-fit:contain} .portfolio-image.is-video:hover video{transform:none} .portfolio-image:hover img:not(.portfolio-backdrop){transform:none} .contact-section{background:#fff;padding:110px 34px}.contact-inner{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:80px}.contact-heading h2{font:700 clamp(3.5rem,7vw,7.5rem)/.86 var(--display);letter-spacing:-.08em;margin:20px 0 0}.contact-details{display:flex;flex-direction:column;justify-content:center;gap:15px}.contact-details>a{font:600 clamp(1.25rem,2vw,2rem)/1.1 var(--display);letter-spacing:-.03em;transition:.25s}.contact-details>a:hover{color:var(--red);transform:translateX(5px)}.contact-details p{color:var(--muted);line-height:1.6;margin:14px 0 4px}.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.socials a{border:1px solid var(--line);border-radius:50%;width:42px;height:42px;display:grid;place-items:center;transition:.25s;color:#000}.socials a svg{width:19px;height:19px}.socials a:hover{background:#000;color:#fff;border-color:#000}.footer{background:#f1f2f7;padding:24px 34px;display:flex;justify-content:space-between;gap:20px;font:700 10px/1.2 var(--display);letter-spacing:.08em} .reveal{opacity:0;transform:translateY(35px);transition:opacity .75s ease,transform .85s cubic-bezier(.22,1,.36,1)}.reveal.in-view{opacity:1;transform:none}.product-card:nth-child(4n+1).in-view{transition-delay:.03s}.product-card:nth-child(4n+2).in-view{transition-delay:.10s}.product-card:nth-child(4n+3).in-view{transition-delay:.17s}.product-card:nth-child(4n).in-view{transition-delay:.24s} .auth-body .site-header,.auth-body .footer{display:none}.auth-body .page-loader{display:none}.auth-page{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--lav)}.auth-visual{background:#000;color:#fff;display:flex;align-items:flex-end;padding:60px;min-height:680px;position:relative;overflow:hidden}.auth-visual:before{content:"";position:absolute;width:65vw;height:65vw;right:-30vw;bottom:-40vw;border-radius:50%;background:radial-gradient(circle,#ff1515,transparent 65%);opacity:.9}.auth-visual h1{position:relative;z-index:1;font:700 clamp(4rem,8vw,9rem)/.82 var(--display);letter-spacing:-.09em;margin:0}.auth-box{background:#fff;margin:auto;width:min(500px,calc(100% - 48px));padding:44px;border-radius:30px;box-shadow:0 30px 80px rgba(0,0,0,.12)}.auth-box .eyebrow{font:700 11px/1 var(--display);letter-spacing:.18em;color:var(--red)}.auth-box h2{font:700 42px/.95 var(--display);letter-spacing:-.06em;margin:14px 0}.auth-box>p{color:var(--muted);font-size:14px;line-height:1.5}.auth-form{margin-top:25px}.field{margin-bottom:16px}.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}.field input{width:100%;border:1px solid #d8d9e1;border-radius:12px;padding:14px 15px;outline:0;background:#fafafd;transition:.2s}.field input:focus{border-color:#000;box-shadow:0 0 0 3px rgba(255,16,16,.08)}.auth-submit{width:100%;border:0;background:#000;color:#fff;border-radius:999px;padding:15px;font:700 13px var(--display);cursor:pointer;transition:.25s}.auth-submit:hover{background:var(--red);transform:translateY(-2px)}.auth-error{background:#fff0f0;color:#b00000;border-radius:10px;padding:10px;font-size:12px;margin-bottom:14px}.auth-switch{border:0;background:none;width:100%;margin-top:17px;cursor:pointer;font-size:13px;color:var(--muted)}.auth-switch strong{color:#000}.back-home{display:inline-block;margin-top:20px;font-size:12px;font-weight:700;text-decoration:underline}.auth-loading{opacity:.55;pointer-events:none} @media (max-width:1000px){.header-inner{height:74px;padding:0 22px}.desktop-nav{gap:16px}.product-grid{grid-template-columns:repeat(2,1fr)}.product-image{height:320px}.featured{padding:65px 30px 72px}.featured-slider{min-height:760px}.featured-slide{grid-template-columns:1fr}.featured-copy{padding-right:0}.featured-art{margin-top:25px;height:480px}.portfolio-title{margin-top:90px}.portfolio-images{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-inner{grid-template-columns:1fr;gap:55px}.auth-page{grid-template-columns:1fr}.auth-visual{display:none}.auth-box{margin:70px auto}.footer{flex-direction:column}} @media (max-width:720px){.desktop-nav{display:none}.menu-toggle{display:block}.mobile-nav{display:flex;max-height:0;overflow:hidden;flex-direction:column;background:#fff;padding:0 22px;transition:max-height .4s,padding .4s}.mobile-nav.open{max-height:420px;padding:10px 22px 22px;border-top:1px solid var(--line)}.mobile-nav a{padding:15px 0;border-bottom:1px solid var(--line);font-weight:700;text-transform:uppercase;font-size:12px}.mobile-nav .mobile-signup{background:#000;color:#fff;border-radius:999px;text-align:center;margin-top:12px;border:0}.hero{padding-top:0}.hero-stage{aspect-ratio:1651/740}.hero-slide img{object-fit:cover}.hero-mini{padding:12px 16px;gap:14px 18px}.hot-products{padding:54px 18px 70px}.section-title{font-size:20px;margin-bottom:28px}.product-grid{grid-template-columns:repeat(2,1fr);gap:12px}.product-image{height:210px;border-radius:19px}.product-image span{font-size:9px;padding:6px 7px;top:8px;right:8px}.visit-shop{margin-top:30px}.featured{padding:50px 20px 62px}.featured-slider{min-height:650px}.featured-copy h2{font-size:46px}.featured-art{height:390px}.featured-controls{bottom:18px}.featured-dot{width:24px}.featured-dot.active{width:38px}.portfolio{padding-top:50px}.portfolio-images{grid-template-columns:1fr}.portfolio-image{aspect-ratio:16/9}.portfolio-title{font-size:17vw;margin:85px 15px 45px}.contact-section{padding:75px 20px}.contact-heading h2{font-size:18vw}.contact-details>a{font-size:22px}.footer{padding:22px 20px;font-size:9px}.auth-box{padding:30px 24px;width:calc(100% - 30px);border-radius:22px}.auth-box h2{font-size:36px}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.hero-slide,.product-image img,.featured-slide,.featured-copy,.featured-copy h2,.featured-copy p,.quote-button,.featured-art,.featured-art img{transition:none!important}.featured-art .art-glow,.featured-art img{animation:none!important}.page-loader img{animation:none!important}} /* Category dropdown: generous hit area + no hover gap so the panel stays clickable. */ .nav-dropdown{padding-bottom:8px;margin-bottom:-8px} .nav-dropdown-menu{top:calc(100% + 1px);z-index:1200;pointer-events:none} .nav-dropdown-menu:before{content:"";position:absolute;left:-10px;right:-10px;top:-14px;height:15px} .nav-dropdown.open .nav-dropdown-menu,.nav-dropdown:hover .nav-dropdown-menu{pointer-events:auto} .nav-dropdown-menu button{position:relative;z-index:1;display:flex;align-items:center;width:100%;min-height:42px;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:#111;text-align:left;font:700 11px/1 var(--body);letter-spacing:.08em;cursor:pointer;transition:background .2s,color .2s,transform .2s} .nav-dropdown-menu button:hover,.nav-dropdown-menu button:focus-visible{background:#000;color:#fff;outline:none;transform:translateX(2px)} .nav-dropdown-menu button:active{background:var(--red);color:#fff;transform:translateX(2px) scale(.98)} /* Footer keeps the original four-column EWNS structure while using the current theme. */ .site-footer{background:#080808;color:#fff;margin-top:0} .footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:44px;padding:52px 34px} .footer-col h4{font:700 13px/1 var(--display);letter-spacing:.14em;margin:0 0 18px} .footer-col a,.footer-col button{display:block;color:#aaa;font:400 12px/1.4 var(--body);margin:7px 0;padding:0;border:0;background:none;text-align:left;cursor:pointer;text-decoration:none;transition:color .2s,transform .2s} .footer-col a:hover,.footer-col button:hover{color:#fff;transform:translateX(3px)} .footer-about p{color:#aaa;font:400 12px/1.65 var(--body);max-width:320px;margin:0 0 12px} .contact-mini{color:#aaa;font:400 12px/1.9 var(--body)} .contact-mini a{display:inline;color:#aaa;margin:0} .contact-mini a:hover{color:#fff} .social-row{display:flex;gap:10px;margin-top:18px} .site-footer .social-row .social-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;max-height:38px;flex:0 0 38px;border-radius:50%;background:#1b1b1b;border:1px solid #2a2a2a;color:#ddd;margin:0;font:700 10px/1 var(--display);letter-spacing:.04em;transition:.2s ease;overflow:hidden} .site-footer .social-row .social-btn:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)} .footer-bottom{background:var(--red);color:#fff;text-align:center;padding:14px 20px;font:400 12px/1.3 var(--body)} @media(max-width:950px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:580px){.footer-grid{grid-template-columns:1fr;gap:30px;padding:42px 20px}.footer-bottom{font-size:10px}.site-footer{margin-top:0}} /* FINAL QA: stable Categories interaction — the pointer can travel into the menu without it disappearing. */ @media (min-width:721px){ .nav-dropdown{position:relative;padding:0;margin:0;} .nav-dropdown::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:14px;} .nav-dropdown-menu{ top:calc(100% + 10px) !important; z-index:3000 !important; transition:opacity .18s ease,visibility .18s ease,transform .18s ease !important; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translate(-50%,0) !important; } .nav-dropdown-menu::before{ content:""; position:absolute; left:-20px; right:-20px; top:-14px; height:16px; } .nav-dropdown-menu button{min-height:44px;position:relative;z-index:2;} } /* FINAL QA: compact Visit Shop asset at every breakpoint while preserving its supplied artwork. */ .visit-shop{width:clamp(190px,26vw,310px);margin-left:0;margin-right:auto;} .visit-shop img{width:100%;height:auto;max-width:100%;} @media(max-width:720px){.visit-shop{width:min(205px,62vw);margin-top:28px;}} /* FINAL QA: footer remains readable and touch-friendly on small screens. */ .site-footer a,.site-footer button{min-height:30px;display:flex;align-items:center;} @media(max-width:580px){ .footer-grid{grid-template-columns:1fr;gap:26px;padding:38px 20px;} .footer-col h4{margin-bottom:12px;} .footer-col a,.footer-col button{margin:3px 0;} .site-footer .social-row .social-btn{min-height:38px;display:inline-flex;} } /* V6 — Restored the original premium four-column footer design, adapted to the current EWNS homepage. */ .site-footer{background:#080808;color:#fff;margin-top:76px;border-top:1px solid rgba(255,255,255,.08)} .footer-container{width:min(1160px,calc(100% - 68px));margin:0 auto} .site-footer .footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:44px;padding:56px 0 50px} .site-footer .footer-grid>div{min-width:0} .site-footer .footer-grid h4{font:700 13px/1 var(--display);letter-spacing:.14em;margin:0 0 18px;color:#fff} .site-footer .footer-grid a,.site-footer .footer-grid button{display:block;width:max-content;max-width:100%;color:#aaa;font:400 12px/1.4 var(--body);margin:7px 0;padding:0;border:0;background:none;text-align:left;cursor:pointer;text-decoration:none;transition:color .2s ease,transform .2s ease} .site-footer .footer-grid a:hover,.site-footer .footer-grid button:hover,.site-footer .footer-grid a:focus-visible,.site-footer .footer-grid button:focus-visible{color:#fff;transform:translateX(4px);outline:none} .site-footer .footer-grid p{color:#aaa;font:400 12px/1.65 var(--body);max-width:320px;margin:0 0 12px} .site-footer .contact-mini{color:#aaa;font:400 12px/1.9 var(--body)} .site-footer .contact-mini a{display:inline;color:#aaa;margin:0} .site-footer .contact-mini a:hover{color:#fff} .site-footer .social-row{display:flex;gap:10px;margin-top:18px} .site-footer .social-row a.social-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;max-height:38px;flex:0 0 38px;border-radius:50%;background:#1b1b1b;border:1px solid #2a2a2a;color:#ddd;margin:0;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;overflow:hidden} .site-footer .social-row a.social-btn:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)} .site-footer .social-btn svg{width:18px;height:18px;flex:none} .site-footer .footer-bottom{background:var(--red);color:#fff;text-align:center;padding:14px 20px;font:400 12px/1.3 var(--body);letter-spacing:.01em} @media(max-width:950px){.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:38px 44px}} @media(max-width:580px){.footer-container{width:min(100% - 40px,520px)}.site-footer{margin-top:58px}.site-footer .footer-grid{grid-template-columns:1fr;gap:30px;padding:42px 0}.site-footer .footer-grid a,.site-footer .footer-grid button{min-height:30px;display:flex;align-items:center;margin:3px 0}.site-footer .footer-grid h4{margin-bottom:12px}.site-footer .footer-grid p{max-width:none}.site-footer .social-row a.social-btn{min-height:38px;display:inline-flex}.site-footer .footer-bottom{font-size:10px;padding:13px 16px}} /* V2 EXACT UI RESTORE — footer + authentication */ /* Reference-style four-column footer, adapted to the current EWNS red/black system. */.site-footer{background:#050505;color:#fff;padding:76px 34px 0}.footer-grid{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.35fr .9fr .9fr 1.35fr;gap:50px;padding-bottom:62px}.footer-brand-col{max-width:320px}.footer-logo{display:inline-block}.footer-logo img{width:145px;height:auto;display:block;filter:brightness(0) invert(1)}.footer-brand-col>p{color:#a8a8ad;font-size:13px;line-height:1.7;max-width:280px;margin:22px 0}.footer-socials{display:flex;gap:9px}.footer-socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.24);border-radius:50%;display:grid;place-items:center;font:700 10px var(--display);transition:.25s}.footer-socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}.footer-col{display:flex;flex-direction:column;align-items:flex-start}.footer-col h3{font:700 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;margin:3px 0 22px}.footer-col a{color:#bdbdc2;font-size:13px;margin:0 0 12px;transition:.25s}.footer-col a:hover{color:#fff;transform:translateX(4px)}.footer-contact-col p{color:#bdbdc2;font-size:13px;line-height:1.7;margin:0 0 15px}.footer-contact-col .footer-contact-link{color:#fff;margin-bottom:8px}.footer-bottom{max-width:1280px;margin:auto;border-top:1px solid rgba(255,255,255,.14);min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8f8f95;font:700 10px/1.4 var(--display);letter-spacing:.07em;text-transform:uppercase}.footer-bottom span:last-child{color:#fff} .reveal{opacity:0;transform:translateY(35px);transition:opacity .75s ease,transform .85s cubic-bezier(.22,1,.36,1)}.reveal.in-view{opacity:1;transform:none}.product-card:nth-child(4n+1).in-view{transition-delay:.03s}.product-card:nth-child(4n+2).in-view{transition-delay:.10s}.product-card:nth-child(4n+3).in-view{transition-delay:.17s}.product-card:nth-child(4n).in-view{transition-delay:.24s} /* Animated red/black authentication experience. */.auth-body{background:#050505}.auth-body .site-header,.auth-body .site-footer{display:none}.auth-body .page-loader{display:none}.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);background:#050505;position:relative;overflow:hidden}.auth-visual{color:#fff;display:flex;align-items:flex-end;padding:clamp(35px,6vw,85px);min-height:680px;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 30%,rgba(255,16,16,.28),transparent 26%),#050505}.auth-visual:before,.auth-visual:after{content:"";position:absolute;border:1px solid rgba(255,16,16,.28);border-radius:50%;animation:authOrbit 11s linear infinite}.auth-visual:before{width:42vw;height:42vw;right:-15vw;top:-8vw}.auth-visual:after{width:25vw;height:25vw;left:-10vw;bottom:-10vw;animation-duration:15s;animation-direction:reverse}@keyframes authOrbit{to{transform:rotate(360deg) scale(1.04)}}.auth-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 80%,transparent)}.auth-visual-content{position:relative;z-index:2}.auth-kicker{font:700 11px/1 var(--display);letter-spacing:.2em;color:#ff5555;margin-bottom:18px}.auth-visual h1{font:700 clamp(4rem,8vw,9rem)/.82 var(--display);letter-spacing:-.09em;margin:0}.auth-visual p{max-width:480px;color:#aaa;font-size:13px;line-height:1.7;margin:25px 0 0}.auth-box-wrap{display:grid;place-items:center;padding:30px;background:linear-gradient(135deg,#080808,#151515);position:relative}.auth-box-wrap:before{content:"";position:absolute;width:280px;height:280px;background:var(--red);filter:blur(100px);opacity:.18;right:-120px;top:10%}.auth-box{position:relative;z-index:2;background:#fff;margin:auto;width:min(500px,calc(100% - 36px));padding:clamp(30px,4vw,48px);border-radius:28px;box-shadow:0 30px 90px rgba(0,0,0,.42);animation:authCardIn .75s cubic-bezier(.22,1,.36,1) both}@keyframes authCardIn{from{opacity:0;transform:translateY(25px) scale(.98)}to{opacity:1;transform:none}}.auth-box .eyebrow{font:700 11px/1 var(--display);letter-spacing:.18em;color:var(--red)}.auth-box h2{font:700 44px/.92 var(--display);letter-spacing:-.065em;margin:15px 0 10px}.auth-box>p{color:var(--muted);font-size:13px;line-height:1.55;margin-bottom:26px}.auth-form{margin-top:0}.field{margin-bottom:17px}.field label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}.field input{width:100%;border:1px solid #d8d9e1;border-radius:13px;padding:15px;outline:0;background:#fafafd;transition:border-color .2s,box-shadow .2s,transform .2s}.field input:focus{border-color:#000;box-shadow:0 0 0 3px rgba(255,16,16,.1);transform:translateY(-1px)}.auth-submit{width:100%;border:0;background:#000;color:#fff;border-radius:999px;padding:16px;font:700 13px var(--display);cursor:pointer;transition:.25s;position:relative;overflow:hidden}.auth-submit:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-120%);transition:transform .6s}.auth-submit:hover{background:var(--red);transform:translateY(-2px)}.auth-submit:hover:before{transform:translateX(120%)}.auth-error{background:#fff0f0;color:#b00000;border-left:3px solid var(--red);border-radius:10px;padding:11px;font-size:12px;margin-bottom:14px}.auth-switch{border:0;background:none;width:100%;margin-top:18px;cursor:pointer;font-size:12px;color:var(--muted)}.auth-switch strong{color:#000}.back-home{display:inline-flex;margin-top:19px;font-size:11px;font-weight:700;color:#333;text-decoration:none;transition:.2s}.back-home:hover{color:var(--red);transform:translateX(-3px)}.auth-loading{opacity:.55;pointer-events:none} @media (max-width:1120px){.auth-page{grid-template-columns:1fr}.auth-visual{min-height:360px;align-items:center}.auth-visual-content{width:100%;max-width:700px}.auth-visual h1{font-size:clamp(4rem,12vw,8rem)}.auth-box-wrap{padding:50px 20px}} @media (max-width:720px){.site-footer{padding:56px 20px 0}.footer-grid{grid-template-columns:1fr 1fr;gap:38px 24px;padding-bottom:45px}.footer-brand-col{grid-column:1/-1}.footer-logo img{width:125px;height:auto}.footer-bottom{min-height:82px;align-items:flex-start;flex-direction:column;justify-content:center;padding:17px 0;gap:7px}.auth-visual{display:none}.auth-page{display:block;min-height:100svh}.auth-box-wrap{min-height:100svh;padding:22px 10px;background:radial-gradient(circle at 100% 0,rgba(255,16,16,.2),transparent 32%),#050505}.auth-box{width:100%;max-width:500px;border-radius:23px;padding:29px 23px}.auth-box h2{font-size:38px}.field input{padding:14px}.auth-submit{padding:15px}} @media (max-width:420px){.footer-grid{grid-template-columns:1fr}.footer-brand-col{grid-column:auto}.auth-box{padding:27px 20px}.auth-box h2{font-size:35px}} /* TARGETED FINAL FIX: Categories dropdown and Collections only. */ @media (min-width:721px){ .desktop-nav .nav-dropdown{position:relative;} .desktop-nav .nav-dropdown::after{ content:""; position:absolute; left:-18px; right:-18px; top:100%; height:24px; } .desktop-nav .nav-dropdown-menu{ top:calc(100% + 10px) !important; z-index:5000 !important; } .desktop-nav .nav-dropdown-menu::before{ content:""; position:absolute; left:-24px; right:-24px; top:-24px; height:26px; } .desktop-nav .nav-dropdown-menu button{ position:relative; z-index:2; min-height:44px; width:100%; display:flex; align-items:center; padding:12px 13px; border-radius:10px; white-space:nowrap; } .desktop-nav .nav-dropdown-menu button:hover, .desktop-nav .nav-dropdown-menu button:focus-visible{ background:#000; color:#fff; transform:translateX(3px); } } /* Restore the V2 footer's exact visual language; only the four real collections remain. */ .site-footer{background:#050505;color:#fff;padding:76px 34px 0;margin-top:0} .site-footer .footer-grid{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.35fr .9fr .9fr 1.35fr;gap:50px;padding:0 0 62px} .site-footer .footer-brand-col{max-width:320px} .site-footer .footer-logo{display:inline-block} .site-footer .footer-logo img{width:145px;height:auto;display:block;filter:brightness(0) invert(1)} .site-footer .footer-brand-col>p{color:#a8a8ad;font-size:13px;line-height:1.7;max-width:280px;margin:22px 0} .site-footer .footer-socials{display:flex;gap:9px} .site-footer .footer-socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.24);border-radius:50%;display:grid;place-items:center;color:#fff;transition:.25s} .site-footer .footer-socials a svg{width:18px;height:18px} .site-footer .footer-socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)} .site-footer .footer-col{display:flex;flex-direction:column;align-items:flex-start} .site-footer .footer-col h3{font:700 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;margin:3px 0 22px;color:#fff} .site-footer .footer-col a,.site-footer .footer-col button{width:max-content;max-width:100%;color:#bdbdc2;font-size:13px;margin:0 0 12px;padding:0;border:0;background:none;text-align:left;cursor:pointer;text-decoration:none;min-height:0;display:block;transition:.25s} .site-footer .footer-col a:hover,.site-footer .footer-col button:hover{color:#fff;transform:translateX(4px)} .site-footer .footer-contact-col p{color:#bdbdc2;font-size:13px;line-height:1.7;margin:0 0 15px} .site-footer .footer-contact-col .footer-contact-link{color:#fff;margin-bottom:8px} .site-footer .footer-bottom{max-width:1280px;margin:auto;background:transparent;border-top:1px solid rgba(255,255,255,.14);min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8f8f95;font:700 10px/1.4 var(--display);letter-spacing:.07em;text-transform:uppercase;text-align:left;padding:0} .site-footer .footer-bottom span:last-child{color:#fff} @media(max-width:950px){.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:38px 44px}} @media(max-width:580px){.site-footer{padding:56px 20px 0}.site-footer .footer-grid{grid-template-columns:1fr;gap:30px;padding-bottom:45px}.site-footer .footer-bottom{min-height:82px;align-items:flex-start;flex-direction:column;justify-content:center;padding:17px 0;gap:7px}.site-footer .footer-col a,.site-footer .footer-col button{min-height:30px;display:flex;align-items:center;margin:3px 0}} /* ============ SHOP / CUSTOMIZE / ORDERS / AUTH-GATE ============ */ .page-hero{padding:150px 34px 40px;background:var(--lav);text-align:center} .page-hero h1{font:700 clamp(2.2rem,5vw,3.6rem)/1 var(--display);letter-spacing:-.05em;margin:0 0 10px} .page-hero p{color:var(--muted,#666);font-size:13px;max-width:560px;margin:0 auto} /* Shop */ .shop-wrap{max-width:1280px;margin:auto;padding:38px 34px 100px} .shop-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px} .shop-filter{border:1px solid var(--line);background:#fff;padding:10px 20px;border-radius:999px;font:700 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s} .shop-filter:hover{border-color:var(--red);color:var(--red)} .shop-filter.active{background:var(--ink);border-color:var(--ink);color:#fff} .shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .shop-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s} .shop-card:hover{transform:translateY(-6px);box-shadow:0 22px 45px rgba(0,0,0,.09)} .shop-card-img{height:230px;background:linear-gradient(180deg,#f7f7fa,#e8e9f0);position:relative;overflow:hidden} .shop-card-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .55s cubic-bezier(.22,1,.36,1)} .shop-card:hover .shop-card-img img{transform:scale(1.07)} .shop-card-body{padding:16px 18px 20px} .shop-card-cat{display:inline-block;font:700 10px/1 var(--display);letter-spacing:.1em;color:var(--red);text-transform:uppercase;margin-bottom:8px} .shop-card-body h3{font:700 15px/1.3 var(--display);letter-spacing:-.02em;margin:0 0 14px;min-height:38px} .shop-card-actions{display:flex;flex-direction:column;gap:8px} .btn-customize{display:block;width:100%;text-align:center;background:#000;color:#fff;border:0;border-radius:999px;padding:12px;font:700 12px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.25s} .btn-customize:hover{background:var(--red);transform:translateY(-2px)} .btn-order{display:block;width:100%;text-align:center;background:#fff;color:#000;border:1.5px solid #000;border-radius:999px;padding:12px;font:700 12px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.25s} .btn-order:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)} .shop-empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--muted,#777);font-size:13px} /* Placeholder cards. The grid takes its final shape on the first frame, so the products fade into a laid-out page instead of pushing it around. */ .shop-card.is-skeleton{pointer-events:none;border-color:#ececf3} .shop-card.is-skeleton .shop-card-img{background:#eeeef5} .sk-line{display:block;border-radius:999px;background:#eeeef5;animation:skPulse 1.4s ease-in-out infinite} .sk-sm{width:34%;height:9px;margin-bottom:12px} .sk-lg{width:74%;height:14px;margin-bottom:22px} .sk-btn{width:100%;height:40px;border-radius:999px} @keyframes skPulse{0%,100%{opacity:1}50%{opacity:.5}} @media(prefers-reduced-motion:reduce){.sk-line{animation:none}} @media(max-width:960px){.shop-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.shop-grid{grid-template-columns:1fr}.page-hero{padding:130px 22px 30px}} /* Customize page */ .customize-wrap{max-width:1320px;margin:auto;padding:36px 24px 100px} .customize-grid{display:grid;grid-template-columns:230px 1fr 1fr;gap:24px;align-items:start} .cz-panel{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden} .cz-panel-head{background:var(--ink);color:#fff;font:700 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:16px 18px} .cz-panel-head.red{background:var(--red)} .cz-info-panel{padding:18px} .cz-info-panel label{display:block;margin-bottom:14px} .cz-info-panel input,.cz-info-panel textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 14px;font:600 13px/1 var(--body);background:#f6f6f9;transition:.2s} .cz-info-panel input:focus,.cz-info-panel textarea:focus{outline:none;border-color:var(--red);background:#fff} .cz-upload{position:relative;display:block;text-align:center;background:var(--red);color:#fff;border-radius:10px;padding:13px;font:700 12px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer} .cz-upload input{position:absolute;inset:0;opacity:0;cursor:pointer} .cz-upload-hint{font-size:10px;color:var(--muted,#888);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;display:block;font-weight:700} .cz-upload-filename{font-size:11px;color:var(--red);margin-top:8px;font-weight:700;word-break:break-all} .cz-note{font-size:11.5px;line-height:1.6;color:var(--muted,#666)} .cz-note b{display:block;color:var(--ink);margin-bottom:4px;font-family:var(--display)} /* Short lead-in line above a form, and the two full-width order routes shown for a product that has no live 3D designer. */ .cz-hint{margin:0 0 16px;font-size:12.5px;line-height:1.65;color:var(--muted,#666)} .cz-choice-btn{display:block;width:100%;text-align:center;margin-top:10px;text-decoration:none} .cz-preview-stage{position:relative;border-radius:44% 44% 36% 36%/30% 30% 26% 26%;background:linear-gradient(#fff0f0,#ff1010);min-height:460px;display:flex;align-items:center;justify-content:center;overflow:hidden;animation:featuredGlow 3.6s ease-in-out infinite alternate} .cz-help{text-align:center;margin-top:28px;font:700 13px/1.6 var(--body);color:#333} .cz-help a{color:var(--red);text-decoration:underline} .cz-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:26px} .cz-btn{border:0;border-radius:999px;padding:14px 34px;font:700 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.25s} .cz-btn.primary{background:#000;color:#fff} .cz-btn.primary:hover{background:var(--red);transform:translateY(-2px)} .cz-btn.ghost{background:transparent;border:1px solid var(--line);color:#333} .cz-btn.ghost:hover{border-color:#000} @media(max-width:1000px){.customize-grid{grid-template-columns:1fr}} @media(max-width:560px){.customize-wrap{padding:24px 16px 70px}.cz-preview-stage{min-height:340px;border-radius:32px}.cz-actions{flex-direction:column-reverse}.cz-btn{width:100%;text-align:center}} /* Order info step */ .order-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .order-form-grid label{display:block;font:700 10.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#666;margin-bottom:7px} .order-form-grid input,.order-form-grid select,.order-form-grid textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 14px;font:600 13px/1 var(--body);background:#f6f6f9;transition:.2s} .order-form-grid input:focus,.order-form-grid select:focus,.order-form-grid textarea:focus{outline:none;border-color:var(--red);background:#fff} .order-form-grid .span2{grid-column:1/-1} .order-summary{background:var(--lav);border-radius:16px;padding:20px 22px;margin-bottom:24px;font-size:12.5px;line-height:1.9} .order-summary b{font-family:var(--display)} @media(max-width:640px){.order-form-grid{grid-template-columns:1fr}} /* Auth-gate modal */ .gate-overlay{position:fixed;inset:0;background:rgba(5,5,5,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px;opacity:0;animation:gateIn .3s ease forwards} .gate-card{background:#fff;border-radius:22px;padding:36px 30px;max-width:400px;width:100%;text-align:center;transform:translateY(16px);animation:gateCardIn .35s cubic-bezier(.22,1,.36,1) forwards} .gate-card h3{font:700 20px/1.2 var(--display);letter-spacing:-.03em;margin:0 0 10px} .gate-card p{font-size:12.5px;color:var(--muted,#666);margin:0 0 22px;line-height:1.6} .gate-card .cz-btn{width:100%;margin-bottom:10px} .gate-card .gate-guest{background:transparent;border:1px solid var(--line);color:#333} @keyframes gateIn{to{opacity:1}} @keyframes gateCardIn{to{transform:none}} /* ---------------------------------------------------- Orders tracking page The card is the whole page here, so it carries the work: the customer's own render as the thumbnail, a stage track that shows which stage is current rather than only how many are finished, and the design details they chose folded into a
so a long roster never buries the next order. */ .orders-hero{padding:132px 34px 40px;background:var(--lav)} .orders-hero-inner{max-width:1020px;margin:auto} .orders-eyebrow{font:700 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--red)} .orders-hero h1{font:700 clamp(2.3rem,5.5vw,3.9rem)/.95 var(--display);letter-spacing:-.05em;margin:14px 0 10px} .orders-hero p{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:560px;margin:0} .orders-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:26px 0 0} .orders-stats[hidden]{display:none} .orders-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px} .orders-stat b{display:block;font:700 26px/1 var(--display);letter-spacing:-.04em} .orders-stat span{display:block;margin-top:5px;font:700 9.5px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .orders-wrap{max-width:1020px;margin:auto;padding:52px 24px 100px} .orders-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .orders-filters[hidden]{display:none} .ord-filter{border:1px solid var(--line);background:#fff;color:#444;padding:9px 17px;border-radius:999px;font:700 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s} .ord-filter:hover{border-color:var(--ink);color:var(--ink)} .ord-filter.active{background:var(--ink);border-color:var(--ink);color:#fff} .ord-list{display:flex;flex-direction:column;gap:16px} .ord-card{border:1px solid var(--line);border-radius:22px;background:#fff;padding:20px 22px;transition:box-shadow .3s,border-color .3s} .ord-card[hidden]{display:none} .ord-card:hover{border-color:rgba(5,5,5,.22);box-shadow:0 16px 40px rgba(0,0,0,.07)} .ord-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start} .ord-thumb{width:74px;height:74px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#f7f7fa,#e8e9f0);display:grid;place-items:center;flex:none} .ord-thumb img{width:100%;height:100%;object-fit:cover;display:block} .ord-thumb-letter{font:700 26px/1 var(--display);color:#b9bac6} .ord-head-text{min-width:0} .ord-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px} .ord-tag{font:700 9px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--ink);color:#fff} .ord-tag.subtle{background:var(--lav);color:#4a4c57} .ord-head-text h3{font:700 19px/1.25 var(--display);letter-spacing:-.03em;margin:0 0 9px;overflow-wrap:anywhere} .ord-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;font-size:11.5px;color:var(--muted)} .ord-id{border:1px dashed rgba(5,5,5,.25);background:#fbfbfe;color:#333;border-radius:8px;padding:4px 9px;font:700 11px/1 var(--display);letter-spacing:.05em;cursor:pointer;transition:.2s} .ord-id:hover{border-color:var(--ink);border-style:solid} .ord-id.copied{background:var(--ink);border-color:var(--ink);color:#fff} .ord-status{text-align:right;flex:none} /* nowrap keeps the pill a pill, and the truncation stops a non-standard status typed in the admin panel from widening the whole row on a phone. The five known statuses are far too short to ever reach the ellipsis. */ .ord-pill{display:inline-block;font:700 10px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:999px;background:var(--lav);color:#3a3c46;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} /* Read at a glance: waiting is grey, work in hand is amber, moving is blue, finished is green. The step index comes from STATUS_STEPS, so a renamed stage still lands on the right colour. */ .ord-pill[data-step="1"]{background:#fff3e0;color:#8a5200} .ord-pill[data-step="2"]{background:#ffe9e9;color:#a80d0d} .ord-pill[data-step="3"]{background:#e6f0ff;color:#12448f} .ord-pill[data-step="4"]{background:#e3f6e9;color:#12652f} .ord-updated{display:block;margin-top:7px;font-size:10.5px;color:var(--muted)} .ord-track{margin:20px 0 4px} .ord-track-line{height:5px;border-radius:99px;background:var(--lav);overflow:hidden} .ord-track-line span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--red-deep));transition:width .6s cubic-bezier(.22,1,.36,1)} /* grid-auto-columns rather than repeat(5,…): STATUS_STEPS is the single source of truth for the stages, so the track must not assume how many. */ .ord-steps{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:11px 0 0;padding:0} .ord-steps li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#b6b7c2} .ord-steps li i{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none} .ord-steps li b{font:700 8.5px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase} .ord-steps li.done{color:#8e9099} .ord-steps li.now{color:var(--red)} .ord-steps li.now i{box-shadow:0 0 0 4px rgba(255,16,16,.16)} .ord-details{margin-top:16px;border-top:1px solid var(--line)} .ord-details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 0;font:700 11px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#3a3c46} .ord-details summary::-webkit-details-marker{display:none} .ord-details summary:hover{color:var(--red)} .ord-details summary i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s;flex:none;margin-bottom:3px} .ord-details[open] summary i{transform:rotate(225deg);margin-bottom:0} .ord-details-body{padding:16px 0 2px;display:flex;flex-direction:column;gap:16px} .ord-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:0} .ord-fact dt{font:700 9px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ord-fact dd{margin:6px 0 0;font-size:13px;font-weight:600;overflow-wrap:anywhere} .ord-block h4{font:700 9px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 9px} .ord-swatches,.ord-sizes,.ord-assets{display:flex;flex-wrap:wrap;gap:8px} .ord-swatch{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 6px;font-size:11px;font-weight:600} .ord-swatch i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(5,5,5,.14);flex:none} .ord-size{display:inline-flex;align-items:baseline;gap:6px;background:var(--lav);border-radius:10px;padding:6px 11px;font-size:11.5px;color:#4a4c57} .ord-size b{font:700 11px/1 var(--display);letter-spacing:.05em;color:var(--ink)} .ord-assets a{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:600;transition:.2s} .ord-assets a:hover{border-color:var(--red);color:var(--red)} .ord-notes{margin:0;font-size:12.5px;line-height:1.65;color:#3f414b;background:#fafafd;border-left:2px solid var(--line);border-radius:0 10px 10px 0;padding:11px 14px;overflow-wrap:anywhere} .ord-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} .ord-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:999px;padding:12px 20px;font:700 11px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:.25s} .ord-btn:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)} .ord-btn.ghost{background:transparent;color:#333} .ord-btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff} .orders-empty{text-align:center;border:1px solid var(--line);border-radius:22px;padding:58px 26px;background:#fff} .orders-empty h2{font:700 23px/1.2 var(--display);letter-spacing:-.03em;margin:0 0 10px} .orders-empty p{color:var(--muted);font-size:13px;line-height:1.65;max-width:440px;margin:0 auto} .orders-empty-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px} .orders-filter-empty{text-align:center;color:var(--muted);font-size:13px;padding:34px 0 0} .ord-card.is-skeleton{pointer-events:none;border-color:#ececf3} .ord-card.is-skeleton .ord-thumb{background:#eeeef5} .ord-card.is-skeleton .ord-head{grid-template-columns:auto 1fr} .ord-card.is-skeleton .ord-track-line{background:#eeeef5} @media(max-width:720px){ .orders-hero{padding:104px 20px 34px} .orders-hero p{font-size:12.5px} /* Two columns, and no transform: the stats row sits inside the hero at every width, so the signed-out page (which hides it) is not left with a hero that has no bottom padding. */ .orders-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .orders-stat{padding:12px 13px} .orders-stat b{font-size:21px} .orders-wrap{padding:44px 16px 74px} .ord-card{padding:16px;border-radius:18px} /* The status column moving under the title is what keeps a long product name from squeezing the pill into a two-line sliver on a phone. */ .ord-head{grid-template-columns:auto 1fr;gap:13px} .ord-thumb{width:62px;height:62px;border-radius:13px} .ord-head-text h3{font-size:16.5px} .ord-status{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:11px} .ord-updated{margin:0} .ord-steps{gap:2px} .ord-steps li b{font-size:7.5px;letter-spacing:.02em} .ord-actions .ord-btn{flex:1 1 auto;min-width:140px} .orders-empty{padding:44px 18px;border-radius:18px} } @media(max-width:400px){ /* Five labels stop fitting well before this, so drop to the dots plus the bar and let the pill carry the wording. */ .ord-steps li b{display:none} .ord-steps{gap:0} } @media(prefers-reduced-motion:reduce){ .ord-card,.ord-btn,.ord-track-line span,.ord-details summary i{transition:none} .ord-btn:hover{transform:none} } /* Mobile auth bar — Login/Sign Up/Orders sit to the left of the hamburger, outside the slide-down menu, so they're always reachable on mobile. */ .mobile-right-group{display:flex;align-items:center;gap:10px} .mobile-auth-bar{display:none;align-items:center;gap:8px} @media(max-width:720px){ .mobile-auth-bar{display:flex} .mobile-login-inline,.mobile-signup-inline{font:700 10.5px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;padding:9px 12px;border-radius:999px;white-space:nowrap} .mobile-login-inline{color:var(--ink)} .mobile-signup-inline{background:var(--ink);color:#fff!important} .mobile-orders-inline{font-size:19px;line-height:1;display:grid;place-items:center;width:34px;height:34px} } @media(max-width:480px){ .header-inner{padding:0 14px;gap:12px} .brand img{width:88px} .mobile-right-group{gap:6px} .mobile-auth-bar{gap:5px} .mobile-login-inline,.mobile-signup-inline{font-size:9.5px;padding:8px 9px} .mobile-orders-inline{width:30px;height:30px;font-size:16px} .menu-toggle{width:38px;height:38px;padding:9px} } @media(max-width:360px){ .header-inner{padding:0 10px;gap:6px} .brand img{width:70px} .mobile-auth-bar{gap:4px} .mobile-login-inline,.mobile-signup-inline{font-size:8.5px;padding:7px 8px;letter-spacing:0} .mobile-right-group{gap:5px} .menu-toggle{width:34px;height:34px;padding:8px} } /* ---------------- CUSTOMIZER (V1 image-based live preview) ---------------- Reuses the existing .cz-* language (panels, buttons, red heads) and only adds what the new preview/controls need. Loaded on every page as part of styles.css, but the engine itself is code-split into /customize.js. */ .cz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px} .cz-head h1{font:700 clamp(1.5rem,3.2vw,2.4rem)/1.05 var(--display);letter-spacing:-.04em;margin:6px 0 0} .cz-head-cat{font:700 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--red)} @media(max-width:560px){.cz-head-back{display:none}} .cz-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start} .cz-preview-col{position:sticky;top:100px}.cz-head-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.cz-own-stage{position:relative;background:linear-gradient(180deg,#f7f7fa,#e8e9f0);border:1px dashed var(--line);border-radius:26px;min-height:380px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px}.cz-own-stage img{max-width:100%;max-height:520px;width:auto;height:auto;display:block;border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.14)}.cz-own-empty{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted,#777);text-align:center}.cz-own-empty p{margin:0;font-size:13px;max-width:240px}.cz-upload.dragover{filter:brightness(1.12);outline:2px dashed rgba(255,255,255,.75);outline-offset:-5px} .cz-controls{display:flex;flex-direction:column;gap:16px} .cz-clear-btn{margin-top:10px;border:1px solid var(--line);background:#fff;color:#444;border-radius:999px;padding:9px 16px;font:700 10.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.2s} .cz-clear-btn:hover{border-color:var(--red);color:var(--red)} .cz-error{background:#fff0f0;color:#b00000;border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.5} .cz-empty-state{text-align:center;padding:70px 20px 90px} .cz-empty-state h2{font:700 clamp(1.4rem,3vw,2rem)/1.15 var(--display);letter-spacing:-.04em;margin:0 0 12px} .cz-empty-state p{color:var(--muted,#666);font-size:13.5px;line-height:1.7;max-width:460px;margin:0 auto 26px} .cz-empty-state .cz-btn{display:inline-block} @media(max-width:960px){.cz-layout{grid-template-columns:1fr}.cz-preview-col{position:static}} @media(max-width:560px){.cz-own-stage{min-height:260px;padding:14px;border-radius:20px}.cz-own-stage img{max-height:340px} } .cz-preview-col .cz-view-toggle{margin:0 0 16px} /* Flex/grid rules above out-rank the UA [hidden] rule, so restate it. */ .cz-panel[hidden],.cz-error[hidden],.cz-clear-btn[hidden]{display:none} /* ---------------- 3D CUSTOMIZER ---------------- Same tokens, type and button language as the rest of EWNS — this is an advanced EWNS feature, not a different product. */ .cz3-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start} .cz3-stage{position:sticky;top:100px} .cz3-viewer{position:relative;width:100%;aspect-ratio:4/5;max-height:74vh;background:radial-gradient(ellipse at 50% 38%,#e2e4ea,#c7cad2);border:1px solid var(--line);border-radius:26px;overflow:hidden;touch-action:none;opacity:0;transition:opacity .5s ease} .cz3-stage.ready .cz3-viewer{opacity:1} .cz3-stage.failed .cz3-viewer{opacity:1;background:#f4f4f8} .cz3-viewer canvas{display:block;width:100%;height:100%;cursor:grab} .cz3-viewer canvas:active{cursor:grabbing} .cz3-status{position:absolute;inset:auto 0 0;padding:22px;display:grid;place-items:center;align-content:center;inset:0;background:rgba(247,247,250,.92);z-index:2} .cz3-status-text{font:700 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#555;margin-bottom:14px} .cz3-status-bar{width:min(220px,60%);height:4px;border-radius:99px;background:rgba(0,0,0,.09);overflow:hidden} .cz3-status-bar span{display:block;height:100%;width:0;background:var(--red);transition:width .3s ease} /* Models are served gzipped, which leaves the browser with no decompressed Content-Length to divide by on the very first download of a product whose uncompressed size was never recorded. Rather than a bar frozen at 0%, slide a short segment across so the wait reads as progress. */ .cz3-status-bar.indeterminate span{width:40%;transition:none;animation:cz3Indet 1.1s ease-in-out infinite} @keyframes cz3Indet{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}} @media(prefers-reduced-motion:reduce){.cz3-status-bar.indeterminate span{animation:none;width:100%;opacity:.45;transform:none}} .cz3-error{position:absolute;inset:0;z-index:3;display:grid;place-items:center;align-content:center;padding:32px;text-align:center;background:rgba(247,247,250,.97);font-size:13.5px;line-height:1.7;color:#333} /* display:grid above out-ranks the UA [hidden] rule, so restate it (same fix as the 2D customizer above). */ .cz3-status[hidden],.cz3-error[hidden]{display:none} .cz3-view-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px} .cz3-view-btn{border:1px solid var(--line);background:#fff;color:#333;padding:10px 18px;border-radius:999px;font:700 11px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:.2s} .cz3-view-btn:hover{border-color:var(--red);color:var(--red)} .cz3-view-btn.active{background:var(--ink);border-color:var(--ink);color:#fff} .cz3-rotate-hint{text-align:center;font-size:11px;color:var(--muted,#888);margin:10px 0 0;letter-spacing:.04em} .cz3-controls{display:flex;flex-direction:column;gap:12px} .cz3-panel{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden} .cz3-panel-head{width:100%;border:0;background:#fff;text-align:left;padding:16px 18px;font:700 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .2s} .cz3-panel-head:hover{background:#fafafc} .cz3-panel-head i{width:9px;height:9px;border-right:2px solid #999;border-bottom:2px solid #999;transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s} .cz3-panel.open .cz3-panel-head{background:var(--ink);color:#fff} .cz3-panel.open .cz3-panel-head i{border-color:#fff;transform:rotate(-135deg) translate(-3px,-3px)} .cz3-panel-body{display:none;padding:16px 18px 20px;border-top:1px solid var(--line)} .cz3-panel.open .cz3-panel-body{display:block;animation:cz3In .28s cubic-bezier(.22,1,.36,1)} @keyframes cz3In{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .cz3-zone{margin-bottom:16px} .cz3-zone-label{display:block;font:700 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#666;margin-bottom:8px} .cz3-colorpick{display:flex;align-items:center;gap:10px;cursor:pointer;width:fit-content} .cz3-colorpick input[type=color]{width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;background:none;-webkit-appearance:none;appearance:none} .cz3-colorpick input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:50%} .cz3-colorpick input[type=color]::-webkit-color-swatch{border:0;border-radius:50%} .cz3-colorpick input[type=color]::-moz-color-swatch{border:0;border-radius:50%} .cz3-colorpick-hex{font:700 11px/1 var(--display);letter-spacing:.05em;color:#555} .cz3-placement{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)} .cz3-placement:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .cz3-field,.cz3-field-label{display:block;font:700 10.5px/1.4 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#666;margin-bottom:8px} .cz3-field i{color:var(--red);font-style:normal} .cz3-field input,.cz3-field select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:600 13px/1 var(--body);background:#f6f6f9;transition:.2s} .cz3-field input:focus,.cz3-field select:focus{outline:none;border-color:var(--red);background:#fff} .cz3-field input[type=range]{padding:0;background:transparent;border:0} .cz3-field input[type=color]{padding:2px;height:38px} .cz3-inline{display:flex;gap:10px;flex-wrap:wrap} .cz3-field.small{flex:1 1 110px;margin-bottom:8px} .cz3-place-note{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)} .cz3-logo-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .cz3-logo-drop{display:flex;align-items:center;gap:10px;margin:8px 0 4px;flex-wrap:wrap;row-gap:8px} .cz3-logo-preview{width:56px;height:56px;object-fit:contain;background:#f0f1f6;border-radius:10px;flex:none} .cz3-logo-preview.hidden{display:none} .cz3-logo-drop .cz-upload{flex:1 1 120px;margin:0;min-width:0} /* Had no rule at all, so it kept its default text-input width and could not shrink — that is what pushed the panel wider than a phone screen as soon as a sponsor logo was picked. */ .cz3-sponsor-text{flex:1 1 140px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:600 13px/1 var(--body);background:#f6f6f9;transition:.2s} .cz3-sponsor-text:focus{outline:none;border-color:var(--red);background:#fff} .cz3-logo-clear{border:1px solid var(--line);background:#fff;color:#444;border-radius:999px;padding:9px 14px;font:700 10px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer} .cz3-logo-clear:hover{border-color:var(--red);color:var(--red)} /* Exact placement — the same U/V/W/H numbers the admin 3D tab edits, folded away behind a summary so the simple path stays simple. */ .cz3-place{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#fafafd;overflow:hidden} .cz3-place>summary{cursor:pointer;list-style:none;padding:10px 12px;font:700 10px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#555;display:flex;align-items:center;gap:7px;min-height:38px} .cz3-place>summary::-webkit-details-marker{display:none} .cz3-place>summary::before{content:"+";font-size:14px;line-height:1;color:var(--red);font-weight:700} .cz3-place[open]>summary::before{content:"\2212"} .cz3-place>summary:hover{color:var(--red)} .cz3-place-body{padding:2px 12px 12px} .cz3-sides{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .cz3-sides:empty{display:none} .cz3-sides-label{font:700 9.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#999;margin-right:2px} .cz3-side-btn{border:1px solid var(--line);background:#fff;color:#444;border-radius:999px;padding:8px 12px;font:700 10px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.18s;min-height:32px} .cz3-side-btn:hover{border-color:var(--red);color:var(--red)} .cz3-num-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px} .cz3-num{display:block;font:700 9.5px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#777} .cz3-num i{font-style:normal;font-weight:600;letter-spacing:.02em;text-transform:none;color:#aaa} .cz3-num input{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:9px;padding:9px 8px;text-align:center;font:700 13px/1 var(--body);background:#fff;transition:.2s} .cz3-num input:focus{outline:none;border-color:var(--red)} .cz3-place-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .cz3-place-foot .cz3-hint{margin:8px 0 0;flex:1 1 150px} .cz3-reset{margin-top:8px;border:1px solid var(--line);background:#fff;color:#666;border-radius:999px;padding:8px 14px;font:700 10px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;min-height:32px} .cz3-reset:hover{border-color:var(--red);color:var(--red)} .cz3-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px} .cz3-size{font:700 10px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#666} .cz3-size input{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:9px;padding:9px;text-align:center;font:700 13px/1 var(--body);background:#f6f6f9} .cz3-hint{font-size:11.5px;line-height:1.6;color:var(--muted,#777);margin:10px 0 0} /* minmax(0,…) rather than a bare fr: a plain 1fr track is minmax(auto,1fr), and a text input's automatic minimum size is its intrinsic ~20-character width, which becomes a floor the track cannot shrink below. Four of those floors plus gaps overflow a phone even though the inputs are width:100%. min-width:0 on the controls themselves removes the same floor from the flex/grid item side. */ .cz3-roster-head,.cz3-roster-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.8fr) 32px;gap:8px;align-items:center} .cz3-roster-head{font:700 9.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:8px} .cz3-roster-row{margin-bottom:8px} .cz3-roster-row input,.cz3-roster-row select{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px;font:600 12.5px/1 var(--body);background:#f6f6f9} .cz3-roster-del{border:0;background:rgba(0,0,0,.06);border-radius:8px;height:32px;cursor:pointer;color:#a00} .cz3-add-player{width:100%;margin-top:6px;padding:11px} .cz3-actions{display:flex;gap:10px;margin-top:6px} .cz3-actions .cz-btn{flex:1;padding:14px 18px;text-align:center} .cz3-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:999px;font:700 12px/1 var(--display);letter-spacing:.04em;z-index:3000;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center} .cz3-toast.show{opacity:1;transform:translate(-50%,0)} .cz3-toast.error{background:var(--red)} @media(max-width:960px){ .cz3-layout{grid-template-columns:1fr} .cz3-stage{position:static} .cz3-viewer{aspect-ratio:1;max-height:56vh} } /* ------------------------------------------------------------ PHONE: the 3D model stays on screen while the controls scroll under it. On a desktop the two columns sit side by side, so a colour you pick and the model that shows it are both already in view. On a phone the single column stacks them, and the reader was left scrolling down to a control and back up to check the result, over and over, for every colour, name and number. The fix is a pinned stage. The viewer keeps its own scroll box under the header, the model stays painted in it, and the panel column travels underneath. Nothing in the engine changes: the viewer keeps the same element, the same size and the same touch-action, so OrbitControls still receives every drag and pinch exactly as before. This is a media query rather than a rewrite, so the desktop layout above is untouched. ------------------------------------------------------------ */ @media(max-width:860px){ /* The header is not a fixed overlay here, it is a sticky element of the normal flow, so once the reader has scrolled past it the stage can sit flush at the top of the viewport. Offsetting by the header's own height (74px under 1000px) keeps the two from overlapping while the header is still on screen. */ .cz3-stage{ position:sticky; top:74px; z-index:20; padding-bottom:6px; /* The panels slide under the stage, so it needs an opaque back of its own or the text shows through the gap around the viewer. */ background:var(--paper); box-shadow:0 10px 18px -10px rgba(5,5,5,.16); } .cz3-viewer{aspect-ratio:auto;height:min(46vh,340px);max-height:none} /* The controls column is a normal block again, but the first panel would sit directly under the pinned stage and be partly covered by it, so the column is given that strip of clearance back at the top. */ .cz3-controls{padding-top:14px} /* The hint reads as part of the stage and would otherwise be the thing the reader tries to scroll with. It is a caption, not a control, so it is pulled in tight against the viewer and stops catching taps. */ .cz3-rotate-hint{margin-top:8px;pointer-events:none} /* The engine's loading overlay and its error card are absolutely positioned children of the viewer, so the pinned stage bookkeeping above does not touch them. They are restated here only so a height change to the viewer cannot leave either one clipped. */ .cz3-status,.cz3-error{border-radius:20px} } /* Landscape phones and very short windows: 46vh of a 360px tall viewport is 165px, which is too small to judge a colour on. A floor keeps the model useful and lets the controls column take the rest. */ @media(max-width:860px) and (max-height:520px){ .cz3-viewer{height:min(60vh,300px)} /* A very short window cannot afford the header's full 74px above the stage and still leave room to work, so the header is allowed to scroll away and the stage takes the top of the screen. */ .cz3-stage{top:0} } @media(max-width:560px){ .cz3-viewer{border-radius:20px} /* The tap targets rule below sets a 40px floor on the view buttons and the side picker. Those sit inside the pinned stage, so on a short phone the stage can grow past the space it was given; letting the button row scroll sideways instead of wrapping keeps the stage height predictable. */ .cz3-view-controls{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch} .cz3-view-controls::-webkit-scrollbar{display:none} .cz3-view-btn{flex:0 0 auto} /* Comfortable on a thumb. These are the most-tapped controls in the whole flow (the view switcher, the colour side picker, and a delete that removes a player), and the phone rule above otherwise shrinks the view buttons to about 28px tall. The width is untouched, so the layout does not move. */ .cz3-view-btn{padding:11px 13px;font-size:10px;min-height:40px} .cz3-side-btn{min-height:38px} .cz3-roster-del{height:38px} .cz3-actions{flex-direction:column} .cz3-roster-head,.cz3-roster-row{grid-template-columns:minmax(0,1.3fr) minmax(0,.6fr) minmax(0,.8fr) 34px;gap:6px} /* A sponsor row holds a thumbnail, a text field, an Upload button and a Remove button. Four items on one line cannot fit a phone, and the file input's own label is wide enough to push the row past the viewport, which is what made the panel scroll sideways once a logo was chosen. Wrapping onto a second line keeps every control reachable. */ .cz3-logo-drop{flex-wrap:wrap;row-gap:8px} .cz3-logo-drop .cz-upload{flex:1 1 130px;min-width:0} .cz3-logo-preview{width:48px;height:48px} .cz3-sponsor-text{flex:1 1 100%;order:-1} .cz3-logo-clear{flex:0 0 auto;padding:9px 12px} .cz3-num-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Collapsed technical detail inside the fatal 3D error state. */ .cz3-diagnosis{margin-top:14px;text-align:left;font-size:11.5px;line-height:1.6;color:#666;max-width:440px} .cz3-diagnosis summary{cursor:pointer;font-weight:700;text-align:center;color:#999;letter-spacing:.04em;text-transform:uppercase;font-size:10px} .cz3-diagnosis p{margin:8px 0 0;word-break:break-word} /* ============================================================ ABOUT + CONTACT Two standalone routes rendered by app.js into the same shell every other page uses, so they inherit the header, footer and reveal animations and only need their own body layout. Everything here is built from the tokens already defined at the top of this file, so the pages stay in step with the rest of the site if those ever change. ============================================================ */ .info-page{max-width:1180px;margin:auto;padding:70px 34px 30px} .info-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} /* The About page carries no picture, so its opening text is given a narrower measure and centred rather than stretched across the full page width, which would run the lines far too long to read comfortably. */ .info-intro{max-width:760px;margin:0 auto;text-align:center} .info-intro .info-copy p{font-size:15px} .info-eyebrow{display:inline-block;font:700 10px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:18px} .info-statement{font:700 clamp(2rem,4.2vw,3.4rem)/1.02 var(--display);letter-spacing:-.045em;margin:0 0 22px} .info-copy p{color:var(--muted);line-height:1.75;font-size:14.5px;margin:0 0 16px} .info-copy p:last-child{margin-bottom:0} .info-figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--lav);aspect-ratio:4/3} .info-figure img{width:100%;height:100%;object-fit:cover;display:block} /* The three "what you get" panels. A plain grid so a missing or extra panel never needs a matching CSS change. */ .info-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:70px} .info-card{border:1px solid var(--line);border-radius:22px;padding:28px 26px;background:var(--paper);transition:transform .3s,box-shadow .3s} .info-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.07)} .info-card h3{font:700 15px/1.2 var(--display);letter-spacing:-.01em;margin:0 0 10px} .info-card p{color:var(--muted);font-size:13.5px;line-height:1.7;margin:0} .info-card-num{display:block;font:700 11px/1 var(--display);letter-spacing:.12em;color:var(--red);margin-bottom:14px} /* Closing call to action, shared by both pages. It sits directly above the footer, so on its own black it read as part of it. The tinted bands give the section its own edge and keep the two pages from looking identical. */ .cta-band{background:var(--ink);color:#fff;text-align:center;padding:84px 34px;margin-top:80px} .cta-band.about{background:var(--lav);color:var(--ink)} .cta-band.about p{color:var(--muted)} .cta-band.about .btn-pill.ghost{border-color:var(--line);color:var(--ink)} .cta-band.about .btn-pill.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .cta-band.contact{background:var(--red);color:#fff} .cta-band.contact p{color:rgba(255,255,255,.82)} .cta-band.contact .btn-pill{background:var(--ink);border-color:var(--ink);color:#fff} .cta-band.contact .btn-pill:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff} .cta-band.contact .btn-pill.ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff} .cta-band.contact .btn-pill.ghost:hover{background:#fff;border-color:#fff;color:var(--ink)} .cta-band h2{font:700 clamp(1.9rem,4.4vw,3.2rem)/1.04 var(--display);letter-spacing:-.05em;margin:0 0 14px} .cta-band p{color:rgba(255,255,255,.66);font-size:14px;line-height:1.7;max-width:520px;margin:0 auto 30px} .cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .btn-pill{display:inline-block;padding:14px 30px;border-radius:999px;background:var(--red);color:#fff;font:700 12px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--red);transition:transform .25s,background .25s,color .25s} .btn-pill:hover{transform:translateY(-2px);background:var(--red-deep);border-color:var(--red-deep)} .btn-pill.ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff} .btn-pill.ghost:hover{background:#fff;color:var(--ink);border-color:#fff} .btn-pill.solid-dark{background:var(--ink);border-color:var(--ink)} .btn-pill.solid-dark:hover{background:var(--red);border-color:var(--red)} /* Contact: the ways to reach EWNS on the left, what to send on the right. */ .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start} .contact-methods{display:flex;flex-direction:column;gap:2px} .contact-method{display:block;padding:22px 4px;border-bottom:1px solid var(--line);transition:padding-left .25s} .contact-method:first-child{border-top:1px solid var(--line)} .contact-method:hover{padding-left:12px} .contact-method small{display:block;font:700 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px} .contact-method b{font:600 clamp(1.05rem,2vw,1.5rem)/1.2 var(--display);letter-spacing:-.025em;font-weight:600;display:block;word-break:break-word} .contact-method:hover b{color:var(--red)} .contact-method span{display:block;color:var(--muted);font-size:13px;line-height:1.6;margin-top:6px} .contact-aside{border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;background:var(--lav)} .contact-aside h2{font:700 20px/1.2 var(--display);letter-spacing:-.03em;margin:0 0 14px} .contact-aside ol{margin:0 0 24px;padding-left:20px;color:var(--muted);font-size:13.5px;line-height:1.9} .contact-aside .socials{margin-top:20px} @media (max-width:900px){ .info-page{padding:52px 22px 20px} .info-split,.contact-grid{grid-template-columns:1fr;gap:34px} .info-intro{text-align:left;max-width:none} .info-cards{grid-template-columns:1fr;margin-top:46px} .cta-band{padding:62px 22px;margin-top:56px} .contact-aside{padding:28px 22px} } /* Text that belongs to the document for a screen reader and for Google, but that the design carries visually in another form. The home page's hero is four photographs with no words in the markup, so its

lives here: the page still says what it is without a heading being painted over the art. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ============================================================ 404 Firebase Hosting answers an unknown path with the catch-all rewrite to index.html and an HTTP 200, so without a view of its own every typo URL would just render a second copy of the home page and compete with the real one. renderNotFound() in app.js paints this on any path the router does not know, and sets a noindex tag on the head at the same time. The layout is deliberately plain: no marketing copy, nothing worth indexing, and two ways back into the site. ============================================================ */ .notfound{max-width:640px;margin:auto;padding:120px 34px 40px;text-align:center} .notfound-code{display:block;font:700 clamp(4rem,14vw,8rem)/1 var(--display);letter-spacing:-.08em;color:var(--lav)} .notfound h1{font:700 clamp(1.7rem,4vw,2.6rem)/1.1 var(--display);letter-spacing:-.04em;margin:-10px 0 14px} .notfound p{color:var(--muted);font-size:14px;line-height:1.75;margin:0 auto 30px;max-width:440px} @media(max-width:900px){ .notfound{padding:90px 22px 30px} } /* ---- Hot Products: four category cards (additive) ---- */ .hot-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:22px} .hot-cat-card{position:relative;min-width:0;border-radius:34px;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s} .hot-cat-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(0,0,0,.16)} .hot-cat-card img{display:block;width:100%;height:auto} .hot-cat-visit{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:2;background:#fff;color:#000;border-radius:999px;padding:11px 34px;font:700 clamp(12px,1.3vw,16px)/1 var(--display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.18);transition:background .25s,color .25s,transform .25s} .hot-cat-card:hover .hot-cat-visit,.hot-cat-visit:focus-visible{background:#000;color:#fff} .hot-cat-visit:focus-visible{outline:3px solid #000;outline-offset:3px} /* the "no hot products yet" admin hint should not sit under the category cards */ .hot-products .product-grid-empty{display:none} @media (max-width:1000px){.hot-cat-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:720px){.hot-cat-grid{gap:12px}.hot-cat-card{border-radius:22px}.hot-cat-visit{padding:9px 24px}} /* ---- Product cards: back photo fades over the front on hover (additive) ---- */ .product-image.has-back img,.shop-card-img.has-back img{transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)} .product-image.has-back .img-back,.shop-card-img.has-back .img-back{position:absolute;top:0;left:0;opacity:0;pointer-events:none} .product-card:hover .product-image.has-back img:not(.img-back),.shop-card:hover .shop-card-img.has-back img:not(.img-back){opacity:0} .product-card:hover .product-image.has-back .img-back,.shop-card:hover .shop-card-img.has-back .img-back{opacity:1} @media (prefers-reduced-motion:reduce){.product-image.has-back img,.shop-card-img.has-back img{transition:none!important}} /* "EXPLORE MORE" label is longer than "VISIT": keep it on one line and fit narrow cards */ .hot-cat-visit{white-space:nowrap} @media (max-width:720px){.hot-cat-visit{padding:9px 16px;font-size:11px}} /* ---- Floating WhatsApp support button (additive) ---- */ .support-fab{position:fixed;right:18px;bottom:18px;z-index:900;width:78px;display:block;line-height:0;filter:drop-shadow(0 6px 12px rgba(0,0,0,.28));transition:transform .25s cubic-bezier(.22,1,.36,1)} .support-fab img{width:100%;height:auto;display:block} .support-fab:hover,.support-fab:focus-visible{transform:translateY(-4px) scale(1.06)} @media (max-width:720px){.support-fab{width:62px;right:12px;bottom:12px}} @media print{.support-fab{display:none}} /* ---- Customize page: Front / Back view toggle (additive) ---- */ .cz-view-toggle{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;padding:5px;background:rgba(255,255,255,.92);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.14);z-index:3} .cz-view-toggle button{border:0;background:transparent;color:#000;font:700 12px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s} .cz-view-toggle button.active{background:#000;color:#fff}