/* ============================================================ Aurelis™ — Editorial Maison Full stylesheet · critical above-the-fold in Design language: pure white pages · dark cinematic sections Tom Ford / Chanel / La Mer luxury editorial register ============================================================ */ /* ─── shared layout ─── */ .section-head{max-width:720px;margin:0 auto clamp(44px,7vw,80px);text-align:center;padding:0 18px} .section-head h2{ font-size:clamp(2.2rem,4.8vw,3.6rem);color:var(--forest);margin:16px 0; letter-spacing:.02em;font-weight:600} .section-head h2 em{ font-style:italic; background:var(--grad-sunset);-webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .eyebrow{font-weight:500} .section-head__sub{ color:var(--ink);font-weight:400;font-size:1rem; max-width:50ch;margin:0 auto;line-height:1.75} .divider{width:40px;height:1px;background:var(--gold);margin:0 auto;opacity:.7} section{padding:clamp(72px,10vw,128px) clamp(18px,5vw,52px)} .wrap{max-width:var(--maxw);margin:0 auto} /* ─── grain overlay ─── */ .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ─── scroll reveal ─── */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .95s var(--ease),transform .95s var(--ease)} .reveal.in{opacity:1;transform:none} /* ─── trust marquee strip ─── */ .trust-strip{ background:linear-gradient(135deg,#0A0907 0%,#181614 100%); color:var(--cream);padding:0;overflow:hidden;position:relative;z-index:2; border-top:1px solid rgba(190,148,40,.12); border-bottom:1px solid rgba(190,148,40,.12)} .trust-strip__track{ display:flex;gap:64px;white-space:nowrap; padding:20px 0;animation:marquee 36s linear infinite;width:max-content} .trust-strip:hover .trust-strip__track{animation-play-state:paused} .trust-strip__track span{ font-family:var(--label);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem; display:inline-flex;align-items:center;gap:12px;color:rgba(250,250,248,.55)} .trust-strip__track span::before{content:"◆";color:var(--gold);font-size:.55rem;opacity:.7} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ─── ingredients ─── */ .ingredients{position:relative;z-index:2;background:var(--white)} .ingredient-grid{max-width:var(--maxw);margin:0 auto;display:grid; grid-template-columns:repeat(3,1fr);gap:1px; border:1px solid var(--line);outline:1px solid var(--line)} .ing-card{ position:relative;padding:32px 28px; background:#F7F2D8;cursor:pointer;overflow:hidden; transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s; border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .ing-card:hover{background:#EDE4B8;z-index:2; box-shadow:0 24px 48px -28px rgba(0,0,0,.22)} .ing-card__icon{width:40px;height:40px;color:var(--gold);margin-bottom:18px;opacity:.75} .ing-card::after{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:var(--grad-sunset);transform:scaleX(0);transform-origin:left; transition:transform .5s var(--ease)} .ing-card:hover::after{transform:scaleX(1)} .ing-card:nth-of-type(3n+1) .ing-card__icon{color:var(--forest)} .ing-card:nth-of-type(3n+2) .ing-card__icon{color:var(--gold)} .ing-card:nth-of-type(3n+3) .ing-card__icon{color:var(--berry)} .ing-card h3{font-size:1.15rem;color:var(--forest);letter-spacing:.02em} .ing-card .inci-name{ font-family:var(--label);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--matte4);margin:5px 0 14px} .ing-card__role{font-size:.84rem;color:var(--gold);font-weight:500;margin-bottom:10px} .ing-card__note{ font-size:.84rem;color:var(--ink-soft);font-weight:400; max-height:0;opacity:0;overflow:hidden; transition:max-height .5s var(--ease),opacity .4s,margin .5s} .ing-card.open .ing-card__note{max-height:160px;opacity:1;margin-top:6px} .ing-card__plus{ position:absolute;top:22px;right:22px;width:18px;height:18px; color:var(--line);transition:transform .4s,color .3s} .ing-card:hover .ing-card__plus{color:var(--gold)} .ing-card.open .ing-card__plus{transform:rotate(45deg);color:var(--gold)} .inci{max-width:860px;margin:clamp(48px,7vw,72px) auto 0;text-align:center; border-top:1px solid var(--line);padding-top:clamp(36px,5vw,52px)} .inci h3{font-size:1.45rem;color:var(--forest);margin-bottom:16px;letter-spacing:.02em} .inci__label{ font-family:var(--label);letter-spacing:.22em;font-size:.68rem; color:var(--gold);text-transform:uppercase;margin:0 0 10px} .inci__list{font-size:.84rem;color:var(--ink-soft);line-height:1.9;font-weight:400; max-width:60ch;margin:0 auto 16px} .inci__note{font-size:.76rem;color:var(--matte4);font-style:italic} @media(max-width:980px){.ingredient-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.ingredient-grid{grid-template-columns:1fr}} /* ─── story (dark section) ─── */ .story{ background:linear-gradient(160deg,#0A0907 0%,#141210 55%,#0C0B09 100%); color:var(--cream);text-align:center;position:relative;z-index:2; border-top:1px solid rgba(190,148,40,.08)} .story .eyebrow{color:var(--gold-2)} .story h2{ color:#FAFAF8;font-size:clamp(2.2rem,4.4vw,3.2rem); max-width:20ch;margin:18px auto 0;letter-spacing:.02em} .story h2 em{font-style:italic;color:var(--gold-2)} .story__quote{ font-family:var(--serif);font-style:italic; font-size:clamp(1.3rem,2.5vw,1.85rem); max-width:26ch;margin:clamp(40px,6vw,64px) auto; color:rgba(250,250,248,.55);line-height:1.5} .story__cols{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px; max-width:980px;margin:0 auto;text-align:left; border:1px solid rgba(255,255,255,.06)} .story__cols>div{padding:32px 28px;border-right:1px solid rgba(255,255,255,.06)} .story__cols p{font-weight:400;color:rgba(250,250,248,.82);font-size:.94rem;line-height:1.75} .story__cols b{color:var(--gold-2);font-family:var(--serif);font-style:italic;font-weight:400} .story__formulated{ margin-top:56px;font-family:var(--label);letter-spacing:.2em; text-transform:uppercase;font-size:.68rem;color:rgba(190,148,40,.6)} @media(max-width:760px){.story__cols{grid-template-columns:1fr}} /* ─── ceremony ─── */ .ceremony-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; max-width:var(--maxw);margin:0 auto; border:1px solid var(--line);counter-reset:step} .ceremony-card{ position:relative;padding:40px 32px; border-right:1px solid var(--line);background:#F7F2D8; transition:background .4s} .ceremony-card:hover{background:var(--white)} .ceremony-card::before{ counter-increment:step;content:"0" counter(step); font-family:var(--serif);font-size:3rem; color:var(--line);display:block;margin-bottom:18px;letter-spacing:.02em} .ceremony-card h3{font-size:1.18rem;color:var(--forest);margin-bottom:10px;letter-spacing:.02em} .ceremony-card p{font-size:.88rem;color:var(--ink-soft);font-weight:400;line-height:1.7} .ceremony-card .time{ font-family:var(--label);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);margin-top:18px;display:block} @media(max-width:860px){.ceremony-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:440px){.ceremony-grid{grid-template-columns:1fr}} /* ─── benefits ─── */ .benefits{background:var(--white);border-top:1px solid var(--line)} .benefit-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; max-width:var(--maxw);margin:0 auto; border:1px solid var(--line)} .benefit-card{ padding:36px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); background:#F7F2D8;transition:background .4s var(--ease)} .benefit-card:hover{background:var(--white)} .benefit-card svg{width:36px;height:36px;margin-bottom:18px;opacity:.65} .benefit-card:nth-of-type(6n+1) svg{color:var(--forest)} .benefit-card:nth-of-type(6n+2) svg{color:var(--gold)} .benefit-card:nth-of-type(6n+3) svg{color:var(--berry)} .benefit-card:nth-of-type(6n+4) svg{color:var(--coral)} .benefit-card:nth-of-type(6n+5) svg{color:var(--teal)} .benefit-card:nth-of-type(6n+6) svg{color:var(--saffron)} .benefit-card h3{font-size:1.08rem;color:var(--forest);margin-bottom:8px;letter-spacing:.02em} .benefit-card p{font-size:.86rem;color:var(--ink-soft);font-weight:400;line-height:1.65} @media(max-width:860px){.benefit-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.benefit-grid{grid-template-columns:1fr}} /* ─── skin guide ─── */ .skinguide{max-width:720px;margin:0 auto;text-align:center} .skinguide__opts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:28px 0} .skinguide__opts button{ font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;padding:10px 22px; border:1px solid var(--line);background:#F7F2D8;border-radius:100px; cursor:pointer;transition:.3s;color:var(--ink-soft)} .skinguide__opts button.active,.skinguide__opts button:hover{ background:var(--forest);color:#FAFAF8;border-color:var(--forest)} .skinguide__out{ min-height:70px;font-size:1rem;color:var(--ink-soft);font-weight:400; background:#F7F2D8;border:1px solid var(--line);padding:26px;line-height:1.7} .skinguide__patch{font-size:.76rem;color:var(--matte4);font-style:italic;margin-top:14px} /* ─── comparison table ─── */ .compare-table{ max-width:920px;margin:0 auto; border:1px solid var(--line);overflow:hidden;font-size:.88rem} .compare-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr} .compare-row>div{padding:16px 20px;border-bottom:1px solid var(--line)} .compare-row--head>div{ background:var(--forest);color:#FAFAF8; font-family:var(--label);letter-spacing:.1em; text-transform:uppercase;font-size:.7rem} .compare-row--head .is-us{background:var(--gold);color:#0A0907} .compare-row .is-us{background:#EDE4B8;font-weight:500;color:var(--forest)} .compare-row span.y{color:var(--forest)}.compare-row span.n{color:var(--matte4)} @media(max-width:620px){.compare-table{font-size:.76rem}.compare-row>div{padding:10px 8px}} /* ─── reviews ─── */ .reviews{background:var(--white);border-top:1px solid var(--line)} .reviews__summary{text-align:center;margin-bottom:48px} .reviews__stars{color:var(--gold);font-size:1.3rem;letter-spacing:4px;opacity:.85} .reviews__summary b{ font-family:var(--serif);font-size:2.6rem; color:var(--forest);display:block;margin-top:8px;letter-spacing:.02em} .review-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; max-width:var(--maxw);margin:0 auto; border:1px solid var(--line)} .review-card{ padding:32px 28px;border-right:1px solid var(--line); background:#F7F2D8;transition:background .4s} .review-card:hover{background:var(--white)} .review-card .stars{color:var(--gold);font-size:.85rem;letter-spacing:3px;opacity:.75} .review-card p{ font-size:.9rem;color:var(--ink-soft);font-weight:400; margin:14px 0;line-height:1.7;font-style:italic} .review-card .who{font-size:.78rem;color:var(--forest);font-weight:500;letter-spacing:.04em} .review-card .who span{ color:var(--matte4);font-family:var(--label);font-size:.62rem; letter-spacing:.12em;text-transform:uppercase;margin-left:8px} @media(max-width:860px){.review-grid{grid-template-columns:1fr}} /* ─── shop (dark section) ─── */ .shop{ background:linear-gradient(160deg,#0A0907 0%,#141210 55%,#0C0B09 100%); color:#FAFAF8; border-top:1px solid rgba(190,148,40,.08)} .shop .section-head h2{color:#FAFAF8} .shop .eyebrow{color:var(--gold-2)} .shop .section-head h2 em{ font-style:italic;color:var(--gold-2); -webkit-text-fill-color:var(--gold-2);background:none} .shop .section-head__sub{color:rgba(250,250,248,.48)} .variant-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px; max-width:760px;margin:0 auto 32px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06)} .variant-card{ position:relative;padding:38px 30px 34px; background:rgba(255,255,255,.02);cursor:pointer;text-align:center; transition:.4s var(--ease);border-right:1px solid rgba(255,255,255,.06)} .variant-card:hover{background:rgba(255,255,255,.05)} .variant-card.sel{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--accent,#BE9428)} .variant-card .badge{ position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--accent,#BE9428);color:#0A0907; font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; font-weight:600;padding:5px 16px;border-radius:100px;white-space:nowrap} .variant-card .vname{ font-family:var(--serif);font-size:1.65rem;line-height:1.1; color:#FAFAF8;letter-spacing:.02em} .variant-card .vline{ font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(250,250,248,.38);margin-top:8px} .variant-card .price{margin-top:18px} .variant-card .price s{color:rgba(250,250,248,.25);font-size:.88rem} .variant-card .price b{ font-family:var(--serif);font-size:1.5rem; color:var(--gold-2);margin-left:6px;font-weight:400} .variant-card .perml{font-size:.7rem;color:rgba(250,250,248,.3);margin-top:4px} .shop__panel{ max-width:560px;margin:0 auto; background:rgba(255,255,255,.04); border:1px solid rgba(190,148,40,.2);padding:28px} .shop__row{ display:flex;align-items:center;justify-content:space-between; gap:14px;margin-bottom:18px;flex-wrap:wrap} .qty{display:inline-flex;border:1px solid rgba(190,148,40,.35);overflow:hidden} .qty button{ background:transparent;color:#FAFAF8;border:0; width:38px;height:38px;font-size:1.1rem;cursor:pointer} .qty span{min-width:40px;display:grid;place-items:center;font-family:var(--serif)} .sub-toggle{display:flex;align-items:center;gap:10px;font-size:.84rem;color:rgba(250,250,248,.55)} .sub-toggle input{accent-color:var(--gold);width:18px;height:18px} .coupon-row{display:flex;gap:8px;margin:10px 0 18px} .coupon-row input{ flex:1;background:rgba(255,255,255,.05); border:1px solid rgba(190,148,40,.3);color:#FAFAF8; padding:11px 14px;font-family:var(--sans); letter-spacing:.1em;text-transform:uppercase} .freeship{font-size:.78rem;color:var(--honey);margin-bottom:14px} .freeship__bar{height:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px} .freeship__bar i{display:block;height:100%;background:var(--gold);transition:width .5s var(--ease)} .shop__total{ display:flex;justify-content:space-between;align-items:baseline; font-family:var(--serif);font-size:1.4rem;color:var(--gold-2); border-top:1px solid rgba(190,148,40,.2);padding-top:16px;margin-top:10px} @media(max-width:760px){.variant-grid{grid-template-columns:1fr}} /* ─── sticky mobile cart ─── */ .sticky-cart{ position:fixed;left:0;right:0;bottom:0;z-index:55;display:none; align-items:center;justify-content:space-between;gap:12px;padding:14px 18px; background:var(--forest);border-top:1px solid rgba(190,148,40,.25); box-shadow:0 -12px 32px -16px rgba(0,0,0,.5)} .sticky-cart b{color:var(--gold-2);font-family:var(--serif);font-size:1.1rem} .sticky-cart small{display:block;color:rgba(250,250,248,.4);font-size:.68rem} @media(max-width:860px){.sticky-cart{display:flex}} /* ─── FAQ ─── */ .faq{max-width:800px;margin:0 auto} .faq-item{border-bottom:1px solid var(--line)} .faq-q{ width:100%;text-align:left;background:none;border:0; padding:24px 4px;font-family:var(--serif);font-size:1.05rem; color:var(--forest);cursor:pointer;letter-spacing:.02em; display:flex;justify-content:space-between;align-items:center;gap:16px; transition:color .3s} .faq-q:hover{color:var(--gold)} .faq-q::after{content:"+";color:var(--line);font-size:1.6rem;transition:transform .4s,color .3s} .faq-q:hover::after{color:var(--gold)} .faq-item.open .faq-q::after{transform:rotate(45deg);color:var(--gold)} .faq-a{ max-height:0;overflow:hidden; transition:max-height .5s var(--ease); color:var(--ink-soft);font-weight:400;font-size:.92rem;line-height:1.7} .faq-item.open .faq-a{max-height:320px} .faq-a p{padding:0 4px 24px} /* ─── footer ─── */ .footer{ background:linear-gradient(160deg,#0A0907 0%,#141210 100%); color:rgba(250,250,248,.45); padding:clamp(52px,8vw,88px) clamp(18px,5vw,52px) 44px; border-top:1px solid rgba(190,148,40,.08)} .footer__grid{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:36px;max-width:var(--maxw);margin:0 auto} .footer__brand{font-family:var(--serif);font-size:1.55rem;color:#FAFAF8;letter-spacing:.06em} .footer__brand sup{color:var(--gold);font-size:.48em} .footer h4{ font-family:var(--label);letter-spacing:.18em;text-transform:uppercase; font-size:.68rem;color:var(--gold);margin:0 0 16px;opacity:.7} .footer a{ display:block;font-size:.84rem;padding:5px 0; color:rgba(250,250,248,.4);transition:color .3s} .footer a:hover{color:var(--gold)} .footer__legal{ max-width:var(--maxw);margin:48px auto 0; border-top:1px solid rgba(255,255,255,.05);padding-top:26px; font-size:.72rem;color:rgba(250,250,248,.25);line-height:1.8} .footer__legal b{color:rgba(250,250,248,.4)} @media(max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}} @media(max-width:440px){.footer__grid{grid-template-columns:1fr}} /* ─── toast ─── */ .toast-wrap{position:fixed;top:80px;right:20px;z-index:9998;display:flex;flex-direction:column;gap:10px} .toast{ background:var(--forest);color:#FAFAF8;padding:14px 20px;font-size:.84rem; border-left:3px solid var(--gold);box-shadow:0 20px 40px -20px rgba(0,0,0,.55); animation:toastIn .4s var(--ease);max-width:320px} .toast.err{border-left-color:#B85040} @keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} /* ─── modal / checkout ─── */ .modal-root{ position:fixed;inset:0;z-index:9000;display:none; align-items:center;justify-content:center;padding:18px; background:rgba(10,9,7,.72);backdrop-filter:blur(12px)} .modal-root.open{display:flex} .modal{ background:linear-gradient(160deg,#141210 0%,#0F0E0C 55%,#141210 100%); border:1px solid rgba(190,148,40,.2); max-width:520px;width:100%;max-height:92vh;overflow:auto; box-shadow:0 60px 120px -30px rgba(0,0,0,.85); animation:modalIn .45s var(--ease)} @keyframes modalIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} .modal__head{ display:flex;justify-content:space-between;align-items:center; padding:24px 28px;border-bottom:1px solid rgba(190,148,40,.15); background:linear-gradient(90deg,rgba(190,148,40,.07),transparent)} .modal__head h3{color:var(--honey);font-size:1.25rem;letter-spacing:.02em} .modal__close{ background:none;border:0;font-size:1.5rem;cursor:pointer; color:rgba(190,148,40,.45);line-height:1;transition:color .3s} .modal__close:hover{color:var(--honey)} .modal__steps{display:flex;gap:6px;padding:16px 28px 0} .modal__steps i{flex:1;height:2px;background:rgba(255,255,255,.08)} .modal__steps i.on{background:var(--grad-sunset)} .modal__body{padding:24px 28px;color:rgba(250,250,248,.75)} .field{margin-bottom:16px} .field label{ display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase; color:rgba(250,250,248,.38);margin-bottom:7px} .field input,.field select,.field textarea{ width:100%;padding:12px 14px; border:1px solid rgba(190,148,40,.2); background:rgba(255,255,255,.04); font-family:var(--sans);font-size:.92rem;color:rgba(250,250,248,.82)} .field input::placeholder{color:rgba(250,250,248,.22)} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--gold); box-shadow:0 0 0 3px rgba(190,148,40,.15); background:rgba(255,255,255,.07)} .field.row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .pay-opts{display:grid;gap:10px} .pay-opt{ display:flex;align-items:center;gap:12px; border:1px solid rgba(190,148,40,.18);padding:14px; cursor:pointer;transition:.3s;color:rgba(250,250,248,.65)} .pay-opt:hover{border-color:rgba(190,148,40,.45);background:rgba(255,255,255,.04)} .pay-opt.sel{ border-color:var(--gold);background:rgba(190,148,40,.1); box-shadow:0 0 0 1px rgba(190,148,40,.25) inset} .pay-opt input{accent-color:var(--gold)} .order-summary{ background:rgba(255,255,255,.04); border:1px solid rgba(190,148,40,.18); padding:18px;margin-bottom:18px;font-size:.88rem} .order-summary .line{ display:flex;justify-content:space-between; padding:4px 0;color:rgba(250,250,248,.5)} .order-summary .line.total{ border-top:1px solid rgba(190,148,40,.18);margin-top:10px;padding-top:12px; font-family:var(--serif);font-size:1.2rem;color:var(--honey)} /* ─── login / admin ─── */ #login,#admin{background:var(--white);min-height:100svh} .auth-view{min-height:100svh;padding:120px 18px 60px;max-width:420px;margin:0 auto} .auth-view h2{ font-family:var(--serif);color:var(--forest); text-align:center;margin-bottom:28px;font-size:2rem;letter-spacing:.04em} .auth-view .field label{color:var(--ink-soft)} .auth-view .field input{ background:#F7F2D8;border:1px solid var(--line);color:var(--ink)} .auth-view .field input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(190,148,40,.12); background:#F7F2D8} .admin{padding:96px clamp(14px,4vw,40px) 60px;max-width:1180px;margin:0 auto;color:var(--ink)} .admin__tabs{ display:flex;gap:0;flex-wrap:wrap; border-bottom:1px solid var(--line);margin-bottom:28px} .admin__tabs button{ background:none;border:0;padding:12px 20px;font-family:var(--sans);font-size:.82rem; letter-spacing:.06em;cursor:pointer;color:var(--ink-soft); border-bottom:2px solid transparent;transition:.3s;text-transform:uppercase} .admin__tabs button:hover{color:var(--forest)} .admin__tabs button.active{color:var(--forest);border-bottom-color:var(--forest)} .admin__panel{display:none}.admin__panel.active{display:block} .admin table{width:100%;border-collapse:collapse;font-size:.84rem} .admin th,.admin td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)} .admin th{ font-family:var(--label);letter-spacing:.1em;text-transform:uppercase; font-size:.68rem;color:var(--matte4);background:var(--white)} .admin tr:hover td{background:#EDE4B8} .admin .card-edit{ border:1px solid var(--line);padding:22px;margin-bottom:16px;background:#F7F2D8} .admin .card-edit .field input, .admin .card-edit .field select, .admin .card-edit .field textarea{ background:#F7F2D8;border:1px solid var(--line);color:var(--ink)} .admin .card-edit .field input:focus, .admin .card-edit .field select:focus, .admin .card-edit .field textarea:focus{ border-color:var(--gold);box-shadow:0 0 0 3px rgba(190,148,40,.12)} .badge-status{ font-size:.68rem;padding:3px 10px;letter-spacing:.07em; text-transform:uppercase;font-family:var(--label)} .badge-status.new{background:#FEF9E8;color:#8A6A1F;border:1px solid #E8D48A} .badge-status.paid{background:#EEF6F0;color:#1A4A2A;border:1px solid #A8D4B0} .badge-status.shipped{background:#EEF2FA;color:#1A3060;border:1px solid #A0B4D8} /* ─── skeleton shimmer ─── */ .skeleton{ background:linear-gradient(90deg,#E0D69E 25%,#EDE4B8 37%,#E0D69E 63%); background-size:400% 100%;animation:shimmer 1.4s infinite} @keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}} /* ─── cookie banner ─── */ .cookie{ position:fixed;left:16px;right:16px;bottom:16px;z-index:8000; background:var(--forest);color:rgba(250,250,248,.75); border:1px solid rgba(190,148,40,.25);padding:16px 22px; display:flex;gap:16px;align-items:center;justify-content:space-between; flex-wrap:wrap;max-width:720px;margin:0 auto;font-size:.82rem; box-shadow:0 24px 60px -24px rgba(0,0,0,.65)} .cookie button{flex:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} .trust-strip__track,.badge-float,.scroll-hint i{animation:none} }