/* ===================================================================
   ELORACO.STORE — shared styles (store + admin)
   =================================================================== */
:root{
  --paper:#FDFCFA; --paper-2:#F6F3EE; --ink:#16130F; --muted:#8B8378; --rule:#E7E1D8;
  --olive:#6B7256; --sold:#B8AFA4; --sale:#8A3A32;
  --fs:15px; --wrap:1180px; --gut:24px; --top:62px;
  --display:'Cormorant Garamond',Georgia,serif;
  --ui:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
@media(min-width:1600px){:root{--fs:16px;--wrap:1420px;--gut:34px}}
@media(min-width:2000px){:root{--fs:17px;--wrap:1680px;--gut:44px}}
@media(min-width:2560px){:root{--fs:19px;--wrap:2020px;--gut:56px}}
@media(max-width:380px){:root{--fs:14px;--gut:18px}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-weight:300;
  font-size:var(--fs);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-size:.68em;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:400}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
[hidden]{display:none !important}

/* ---------- header ---------- */
.announce{background:var(--ink);color:var(--paper);padding:.6em 0;
  font-size:.66em;letter-spacing:.24em;text-transform:uppercase;overflow:hidden}
.ann-track{display:flex;width:max-content;animation:ann-slide var(--ann-dur,30s) linear infinite}
.ann-run{display:flex;flex:none;white-space:nowrap}
.ann-item{padding:0 2.6em;position:relative}
/* A small dot between messages, so a repeated line still reads as a list. */
.ann-item::after{content:"";position:absolute;right:-.2em;top:50%;width:3px;height:3px;
  border-radius:50%;background:currentColor;opacity:.5;transform:translateY(-50%)}
.announce:hover .ann-track{animation-play-state:paused}
@keyframes ann-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Movement that cannot be stopped is a problem for some readers, so anyone
   who has asked their device for less motion gets a still, centred line. */
@media(prefers-reduced-motion:reduce){
  .ann-track{animation:none;width:100%;justify-content:center}
  .ann-run:nth-child(2),.ann-item:nth-child(n+2){display:none}
  .ann-item::after{display:none}
}
.site-header{position:sticky;top:0;z-index:40;background:rgba(253,252,250,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.header-in{display:flex;align-items:center;gap:1.4em;position:relative;
  padding:1.3em var(--gut);max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:.7em;cursor:pointer;flex:none}
.brand-logo{height:2.76em;width:auto;max-width:11.5em;object-fit:contain}
.brand-mark{width:2.5em;height:2.5em;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;flex:none}
.brand-mark span{font-family:var(--display);font-size:1.3em;font-style:italic;line-height:1;padding-bottom:.1em}
.brand-name{font-family:var(--display);font-size:1.28em;letter-spacing:.13em;line-height:1}
.brand-tag{font-size:.55em;letter-spacing:.26em;color:var(--muted);text-transform:uppercase;margin-top:.3em}
.header-spacer{flex:1}
.header-actions{display:flex;align-items:center;gap:.9em;margin-left:auto;flex:none}

/* The header carries the name and nothing else. The circled monogram repeats
   the E already in the wordmark, and the tagline belongs in the footer — both
   are hidden here, not removed, so the footer still shows the full lockup. */
.site-header .brand-mark,
.site-header .brand-tag{display:none}
.site-header .brand-name{font-size:1.1em;letter-spacing:.3em;font-weight:400}

/* From tablet up the wordmark sits dead centre, with the icons to the right.
   Below that it stays in the flow so a long name can never run into them. */
@media(min-width:720px){
  .site-header .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}

/* Bare icons — no circles. Three outlined circles on the right were echoing
   the monogram and making the bar feel busy. */
.icon-btn{width:auto;height:auto;padding:.35em;border:none;border-radius:0;background:none;
  display:grid;place-items:center;color:var(--ink);position:relative;opacity:.7;
  transition:opacity .2s}
.icon-btn:hover{opacity:1;color:var(--ink)}
.icon-btn.solid{opacity:.85}
.icon-btn[hidden]{display:none !important}
.cart-count{position:absolute;top:-.15em;right:-.3em;min-width:1.3em;height:1.3em;border-radius:50%;
  background:var(--ink);color:var(--paper);font-size:.6em;display:grid;place-items:center;padding:0 .3em;
  letter-spacing:0;transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.cart-count.show{transform:scale(1)}
@media(max-width:600px){
  .site-header .brand-name{font-size:1em;letter-spacing:.22em}
  .brand-logo{height:2.3em}
  .header-in{padding:1em var(--gut)}
  .header-actions{gap:.6em}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--paper-2);border-bottom:1px solid var(--rule);
  height:calc(100svh - var(--top));min-height:440px;max-height:1200px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;display:flex;align-items:center}
.slide.is-on{opacity:1;pointer-events:auto}
.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(22,19,15,.62),rgba(22,19,15,.12) 64%)}
.slide-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%;z-index:2}
.slide-in.on-img{color:#fff}
.slide-in.on-img .eyebrow{color:rgba(255,255,255,.75)}
.slide h2{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,7vw,7rem);
  line-height:1;margin:.25em 0 .28em;max-width:13ch;letter-spacing:-.01em}
.slide p{max-width:42ch;font-size:1em;opacity:.86}
.slide-cta{display:inline-block;margin-top:2em;font-size:.72em;letter-spacing:.2em;text-transform:uppercase;
  padding:1.1em 2.2em;border:1px solid currentColor;border-radius:2px;transition:background .25s,color .25s}
.slide-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.slide-in.on-img .slide-cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.dots{position:absolute;left:0;right:0;bottom:1.8em;display:flex;gap:.5em;justify-content:center;z-index:3}
.dot{width:1.8em;height:2px;background:rgba(22,19,15,.2);transition:background .3s}
.dot.is-on{background:var(--ink)}
.hero.has-img .dot{background:rgba(255,255,255,.4)}
.hero.has-img .dot.is-on{background:#fff}
.hero-note{position:absolute;left:var(--gut);bottom:1.6em;z-index:3;font-size:.62em;
  letter-spacing:.18em;color:var(--muted);text-transform:uppercase}

/* ---------- section heads ---------- */
.sec-head{position:relative;text-align:center;padding:4.6em 0 1.4em;
  border-bottom:1px solid var(--rule);margin-bottom:1.9em}
.sec-head h3{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.08}
.sec-head p{font-size:.8em;color:var(--muted);margin-top:.3em;max-width:48ch;margin-left:auto;margin-right:auto}
.arrows{display:flex;gap:.45em;position:absolute;right:0;bottom:1.2em}
.arrow{width:2.4em;height:2.4em;border:1px solid var(--rule);border-radius:50%;display:grid;
  place-items:center;font-size:.95em;transition:background .2s,border-color .2s}
.arrow:hover{background:var(--paper-2);border-color:var(--ink)}
@media(max-width:700px){.arrows{display:none}}

/* ---------- hot strip ---------- */
.strip-wrap{position:relative}
.strip{display:flex;gap:1.1em;overflow-x:auto;scrollbar-width:none;
  padding-bottom:.8em;justify-content:safe center}
.strip::-webkit-scrollbar{display:none}
.strip>.card{flex:0 0 calc((100% - 1.1em)/2)}
@media(min-width:760px){.strip>.card{flex:0 0 calc((100% - 2.2em)/3)}}
@media(min-width:1200px){.strip>.card{flex:0 0 calc((100% - 3.3em)/4)}}
@media(min-width:1900px){.strip>.card{flex:0 0 calc((100% - 4.4em)/5)}}
.arrow-nav{position:absolute;top:32%;z-index:6;width:2.7em;height:2.7em;border-radius:50%;
  border:1px solid var(--rule);background:rgba(253,252,250,.95);display:none;place-items:center;
  font-size:1em;color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.arrow-nav:hover{color:var(--ink);border-color:var(--ink);background:var(--paper)}
.arrow-nav.prev{left:-1.3em}
.arrow-nav.next{right:-1.3em}
@media(min-width:900px){.arrow-nav{display:grid}}

/* ---------- search + filters ---------- */
.searchbar{display:flex;align-items:center;gap:.7em;max-width:30em;margin:0 auto;
  border-bottom:1px solid var(--rule);padding-bottom:.6em;transition:border-color .25s}
.searchbar:focus-within{border-color:var(--ink)}
.searchbar svg{flex:none;color:var(--muted)}
.searchbar input{flex:1;border:none;background:none;font-size:.93em;padding:.15em 0}
.searchbar input::placeholder{color:var(--muted)}
.searchbar button{font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.searchbar button:hover{color:var(--ink)}
.filters{display:flex;gap:.35em;justify-content:center;flex-wrap:wrap;padding:1.6em 0 0}
.filters.sub{padding:.5em 0 .4em}
.filter-btn{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;padding:.55em 1em;
  border:1px solid transparent;border-radius:2px;color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.filter-btn:hover{color:var(--ink)}
.filter-btn.is-on{color:var(--ink);border-color:var(--rule);background:var(--paper-2)}
.filter-btn.sale{color:var(--sale)}
.filter-btn.type{font-family:var(--display);font-size:1.05em;letter-spacing:.06em;text-transform:none;padding:.35em .8em}
.result-line{text-align:center;padding-bottom:.4em}
.scrub-hint{text-align:center;padding-bottom:2em;font-size:.74em;color:var(--muted)}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.2em 1.4em}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr);gap:3.4em 2.2em}}
@media(min-width:1500px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{text-align:left;width:100%;display:block;cursor:pointer;animation:rise .55s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card-media{position:relative;aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:2px;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease;touch-action:pan-y}
.card:hover .card-media{transform:translateY(-5px);box-shadow:0 14px 34px -22px rgba(22,19,15,.45)}
.cm-img{width:100%;height:100%;object-fit:cover}
.cm-bars{position:absolute;left:.6em;right:.6em;bottom:.6em;display:flex;gap:3px;z-index:2}
.cm-bars i{flex:1;height:2px;background:rgba(22,19,15,.15);transition:background .2s}
.cm-bars i.is-on{background:var(--ink)}
.card-sku{position:absolute;left:.7em;top:.7em;font-size:.6em;letter-spacing:.18em;color:var(--muted);z-index:2}
.tag{position:absolute;right:.7em;top:.7em;font-size:.6em;letter-spacing:.18em;text-transform:uppercase;
  padding:.35em .7em;border-radius:2px;background:var(--paper);border:1px solid var(--rule);z-index:2}
.tag.new{color:var(--olive);border-color:var(--olive)}
.tag.sale{background:var(--sale);color:#fff;border-color:var(--sale);top:2.8em}
.veil{position:absolute;inset:0;background:rgba(253,252,250,.66);display:grid;place-items:center;z-index:3}
.veil-mark{font-size:.66em;letter-spacing:.3em;text-transform:uppercase;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:.4em 1em;background:var(--paper)}
.card-body{padding-top:.85em}
.card-name{font-family:var(--display);font-size:1.3em;line-height:1.25}
.card-meta{font-size:.8em;color:var(--muted);margin-top:.1em;min-height:1.3em}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:.45em}
.card-price{font-size:.87em}
.was{color:var(--muted);text-decoration:line-through;margin-right:.5em}
.now{color:var(--sale)}
.heart{color:var(--muted);flex:none;padding:.2em;line-height:0;transition:color .2s,transform .2s}
.heart:hover{color:var(--ink);transform:scale(1.12)}
.heart.is-on{color:var(--sale)}
.card.is-sold .card-name,.card.is-sold .card-price{color:var(--sold)}
.empty{grid-column:1/-1;text-align:center;padding:4.5em 0;color:var(--muted)}
.empty strong{display:block;font-family:var(--display);font-size:1.6em;color:var(--ink);font-weight:400;margin-bottom:.3em}

/* skeleton while loading */
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,#EFEBE4 50%,var(--paper-2) 75%);
  background-size:400% 100%;animation:shimmer 1.4s linear infinite;border-radius:2px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.skel-card{aspect-ratio:4/5}
.skel-line{height:.9em;margin-top:.8em}
.skel-line.short{width:55%}

/* ---------- lookbook ---------- */
.look-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.look{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:clamp(320px,40vw,620px);width:100%}
.look-left{height:100%;min-height:0}
.look-right{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:100%;min-height:0}
@media(max-width:640px){
  .look{grid-template-columns:1fr;height:auto;gap:5px}
  .look-left{height:min(104vw,420px)}
  .look-right{height:auto}
  .look-right>.look-cell{height:min(48vw,210px)}
}
.look-cell{position:relative;overflow:hidden;background:var(--paper-2);height:100%;min-height:0}
.look-cell img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.look-cell:hover img{transform:scale(1.04)}
.look-cap{position:absolute;left:0;right:0;bottom:0;padding:2.2em 1em .8em;color:#fff;
  font-size:.76em;letter-spacing:.04em;line-height:1.35;
  background:linear-gradient(to top,rgba(22,19,15,.62),transparent)}
.look-foot{text-align:center;margin-top:2em}

/* ---------- reviews ---------- */
.rev-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  justify-content:safe center;border:1px solid var(--rule);border-radius:2px;background:var(--rule);gap:1px}
.rev-track::-webkit-scrollbar{display:none}
.review{flex:0 0 100%;scroll-snap-align:start;background:var(--paper);padding:2.2em 1.8em 1.9em}
@media(min-width:860px){.review{flex:0 0 calc(33.3333% - .667px)}}
.stars{color:var(--olive);letter-spacing:.24em;font-size:.75em}
.review blockquote{font-family:var(--display);font-style:italic;font-size:1.35em;line-height:1.45;margin:.7em 0 .9em}
.review cite{font-style:normal;font-size:.66em;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rev-dots{display:flex;gap:.4em;justify-content:center;margin-top:1.4em}
.rev-dot{width:1.5em;height:2px;background:rgba(22,19,15,.16);transition:background .3s}
.rev-dot.is-on{background:var(--ink)}
.rev-cta{text-align:center;margin-top:1.6em}
.rev-cta button{font-size:.7em;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--rule);padding-bottom:.3em;transition:color .2s,border-color .2s}
.rev-cta button:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--rule);margin-top:6em;background:var(--paper-2)}
.foot-top{display:grid;grid-template-columns:1fr;gap:2.6em;padding:4em 0 3em}
@media(min-width:760px){.foot-top{grid-template-columns:1.5fr 1fr 1fr;gap:2.4em}}
@media(min-width:1100px){.foot-top{grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:3em}}
.foot-brand .brand{pointer-events:none}
.foot-brand .brand-logo{height:3.6em;max-width:14em}
.foot-brand p{font-size:.85em;color:var(--muted);max-width:32ch;margin-top:.9em;line-height:1.7}
.foot-col h5{font-size:.68em;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:1.1em}
.foot-col ul{list-style:none;display:grid;gap:.65em}
.foot-col button,.foot-col a{font-size:.87em;color:var(--muted);transition:color .2s;text-align:left}
.foot-col button:hover,.foot-col a:hover{color:var(--ink)}
.socials{display:flex;gap:.5em;margin-top:1.4em}
.social{width:2.4em;height:2.4em;border:1px solid var(--rule);border-radius:50%;display:grid;place-items:center;
  color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.social:hover{color:var(--paper);border-color:var(--ink);background:var(--ink)}
.signup{display:flex;align-items:center;gap:.6em;border-bottom:1px solid var(--rule);padding-bottom:.55em;margin-top:1em}
.signup input{flex:1;border:none;background:none;font-size:.87em;padding:.15em 0}
.signup button{font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.foot-bottom{border-top:1px solid var(--rule);padding:1.5em 0 2.4em;display:flex;
  justify-content:space-between;gap:1em;flex-wrap:wrap;font-size:.72em;color:var(--muted)}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(22,19,15,.32);z-index:60;opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.is-open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(30em,100%);background:var(--paper);z-index:70;
  display:flex;flex-direction:column;transform:translateX(101%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);border-left:1px solid var(--rule)}
.drawer.is-open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.2em 1.4em;border-bottom:1px solid var(--rule);flex:none}
.drawer-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.drawer-foot{padding:1.2em 1.4em 1.5em;border-top:1px solid var(--rule);flex:none}
.x-btn{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.x-btn:hover{color:var(--ink)}
.pd-media{aspect-ratio:4/5;background:var(--paper-2);position:relative;overflow:hidden;touch-action:pan-y}
.pd-media img{width:100%;height:100%;object-fit:cover}
.pd-nav{position:absolute;top:50%;transform:translateY(-50%);width:2.3em;height:2.3em;border-radius:50%;
  background:rgba(253,252,250,.94);display:grid;place-items:center;z-index:4;font-size:.95em;line-height:1;border:1px solid var(--rule)}
.pd-nav.prev{left:.8em}.pd-nav.next{right:.8em}
.pd-count{position:absolute;bottom:.8em;right:.8em;z-index:4;font-size:.6em;letter-spacing:.18em;
  background:rgba(253,252,250,.94);padding:.35em .7em;border:1px solid var(--rule)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:5px 5px 0;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.thumb{aspect-ratio:4/5;overflow:hidden;border:1px solid transparent;opacity:.5;transition:opacity .2s,border-color .2s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-on{opacity:1;border-color:var(--ink)}
.pd-in{padding:1.6em 1.4em 2em}
.pd-name{font-family:var(--display);font-size:2em;line-height:1.15;margin:.25em 0 .1em}
.pd-price{font-size:1.12em;margin-top:.5em}
.spec{border-top:1px solid var(--rule);margin-top:1.6em}
.spec-row{display:flex;justify-content:space-between;gap:1.4em;padding:.72em 0;border-bottom:1px solid var(--rule);font-size:.87em}
.spec-row dt{color:var(--muted)}
.spec-row dd{text-align:right}
.pd-note{font-size:.87em;color:var(--muted);margin-top:1.3em;line-height:1.7}
.info-in{padding:1.8em 1.4em 2.4em}
.info-in h4{font-family:var(--display);font-weight:400;font-size:1.7em;margin-bottom:.5em}
.info-in p{font-size:.9em;color:var(--muted);margin-bottom:1em;line-height:1.75}
.cart-row{display:flex;gap:1em;padding:1.2em 1.4em;border-bottom:1px solid var(--rule)}
.cart-thumb{width:4em;height:5em;background:var(--paper-2);border:1px solid var(--rule);flex:none;overflow:hidden}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-info{flex:1;min-width:0}
.cart-name{font-family:var(--display);font-size:1.2em;line-height:1.2}
.remove{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.5em}
.remove:hover{color:var(--sale)}
.total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35em}
.total-row .amt{font-family:var(--display);font-size:1.75em}
.saved-row{display:flex;justify-content:space-between;font-size:.8em;color:var(--sale);margin-bottom:.9em}

/* ---------- checkout ---------- */
.co{padding:1.6em 1.4em 2.2em}
.co .field label{margin-bottom:.45em}
.co-err{background:#F6EBE9;border:1px solid #E3CDC8;color:var(--sale);
  font-size:.85em;padding:.8em 1em;border-radius:2px;margin-bottom:1.4em;line-height:1.5}
.co-sum{border-top:1px solid var(--rule);margin-bottom:1em}
.co-line{display:flex;justify-content:space-between;gap:1.2em;align-items:baseline;
  padding:.7em 0;border-bottom:1px solid var(--rule);font-size:.87em}
.co-line i{font-style:normal;color:var(--muted);font-size:.85em;letter-spacing:.08em}
.co-line.co-total{font-family:var(--display);font-size:1.25em;border-bottom:none;padding-top:.9em}
.co-small{font-size:.78em;color:var(--muted);line-height:1.6;margin-bottom:1.8em}
.pays{display:grid;gap:.5em;margin-bottom:1.2em}
.pay-opt{text-align:left;border:1px solid var(--rule);border-radius:2px;padding:.9em 1em;
  background:var(--paper);transition:border-color .2s,background .2s}
.pay-opt:hover{border-color:var(--muted)}
.pay-opt.is-on{border-color:var(--ink);background:var(--paper-2)}
.pay-opt strong{display:block;font-size:.95em;font-weight:400}
.pay-opt span{font-size:.78em;color:var(--muted)}
.co-bank{border:1px solid var(--rule);border-left:2px solid var(--olive);border-radius:2px;
  background:var(--paper-2);padding:1em 1.1em;font-size:.87em;line-height:1.75;margin-bottom:.5em}
.co-done{text-align:center;padding-top:3em}
.co-done h3{font-family:var(--display);font-weight:300;font-size:2.1em;margin-bottom:.5em}
.co-done p{font-size:.9em;color:var(--muted);line-height:1.75;margin-bottom:1em}
.co-done strong{color:var(--ink);letter-spacing:.06em}

/* ---------- orders (admin) ---------- */
.ord{border:1px solid var(--rule);border-radius:2px;background:#fff;margin-bottom:.8em;overflow:hidden}
.ord-top{display:flex;align-items:center;gap:1em;padding:.9em 1.1em;flex-wrap:wrap;cursor:pointer}
.ord-ref{font-family:var(--display);font-size:1.25em;line-height:1;flex:none}
.ord-who{flex:1;min-width:9em;font-size:.85em}
.ord-who span{display:block;font-size:.85em;color:var(--muted)}
.ord-amt{font-size:.9em;flex:none}
.pill{font-size:.6em;letter-spacing:.16em;text-transform:uppercase;padding:.4em .7em;
  border-radius:2px;border:1px solid var(--rule);color:var(--muted);flex:none;white-space:nowrap}
.pill.new{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill.confirmed{color:var(--olive);border-color:var(--olive)}
.pill.dispatched{color:#6A5B3E;border-color:#D8C9A8}
.pill.delivered{color:var(--sold);border-color:var(--rule)}
.pill.cancelled{color:var(--sale);border-color:#E3CDC8}
.ord-body{border-top:1px solid var(--rule);padding:1.1em;background:var(--paper);font-size:.87em}
.ord-body dl{display:grid;grid-template-columns:7em 1fr;gap:.45em 1em;margin-bottom:1em}
.ord-body dt{color:var(--muted);font-size:.9em}
.ord-body dd{line-height:1.6}
.ord-items{border-top:1px solid var(--rule);margin-bottom:1em}
.ord-items div{display:flex;justify-content:space-between;gap:1em;padding:.5em 0;border-bottom:1px solid var(--rule)}
.ord-acts{display:flex;gap:.4em;flex-wrap:wrap}

/* ---------- buttons / toast ---------- */
.btn{display:block;width:100%;text-align:center;font-size:.72em;letter-spacing:.2em;text-transform:uppercase;
  padding:1.3em 1.4em;border-radius:2px;transition:opacity .2s,background .2s}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{opacity:.86}
.btn-ink[disabled]{background:var(--sold);cursor:not-allowed;opacity:1}
.btn-line{border:1px solid var(--ink);margin-top:.6em}
.btn-line:hover{background:var(--paper-2)}
.btn-wa{background:var(--olive);color:#fff;display:flex;align-items:center;justify-content:center;gap:.6em}
.btn-wa:hover{opacity:.88}
.wa-note{font-size:.72em;color:var(--muted);text-align:center;margin-top:.7em;line-height:1.55}
.toast{position:fixed;left:50%;bottom:1.8em;transform:translate(-50%,6em);background:var(--ink);color:var(--paper);
  padding:.85em 1.5em;border-radius:2px;font-size:.72em;letter-spacing:.16em;text-transform:uppercase;z-index:95;
  transition:transform .35s;max-width:90vw;text-align:center}
.toast.is-on{transform:translate(-50%,0)}
.toast.bad{background:var(--sale)}

/* ===================================================================
   ADMIN
   =================================================================== */
.login{max-width:22em;margin:0 auto;padding:5em var(--gut) 8em;text-align:center}
.login h2{font-family:var(--display);font-weight:300;font-size:2.2em;margin:.4em 0 .2em}
.login p{font-size:.87em;color:var(--muted);margin-bottom:1.8em}
.login input{width:100%;padding:.9em;background:#fff;border:1px solid var(--rule);
  border-radius:2px;margin-bottom:.6em;text-align:center}
.linkish{display:block;margin:1.1em auto 0;font-size:.8em;color:var(--muted);
  background:none;border:none;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.linkish:hover{color:var(--ink)}
.admin{padding:2.2em 0 6em}
.admin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.4em;flex-wrap:wrap;
  padding-bottom:1.4em;border-bottom:1px solid var(--rule)}
.admin-head h2{font-family:var(--display);font-weight:300;font-size:2.3em}
.tabs{display:flex;gap:.25em;padding:1.4em 0 0;flex-wrap:wrap}
.tab{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;padding:.65em 1em;
  border:1px solid transparent;border-radius:2px;color:var(--muted)}
.tab.is-on{color:var(--ink);background:var(--paper-2);border-color:var(--rule)}
.admin-cols{display:grid;grid-template-columns:1fr;gap:2.8em;padding-top:1.7em}
@media(min-width:900px){.admin-cols{grid-template-columns:23em 1fr;gap:3.2em}}
.panel{border:1px solid var(--rule);border-radius:2px;background:#fff;padding:1.3em;margin-bottom:1.4em}
.panel h3{font-family:var(--display);font-weight:400;font-size:1.4em;margin-bottom:.2em}
.panel .hint{font-size:.8em;color:var(--muted);margin-bottom:1.2em;line-height:1.6}
/* editing an existing piece — the panel should not look like the add form */
.panel.editing{border-color:var(--olive);box-shadow:0 0 0 1px var(--olive)}
.panel.editing h3{color:var(--olive)}
.field{margin-bottom:.9em}
.field label{display:block;font-size:.66em;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.4em}
.field input,.field select,.field textarea{width:100%;padding:.65em .72em;background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;font-size:.92em;font-weight:300}
.field textarea{resize:vertical;min-height:4.5em}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.spec-edit{display:grid;grid-template-columns:1fr 1.3fr auto;gap:.4em;margin-bottom:.4em;align-items:center}
.spec-edit input{padding:.55em .6em;background:var(--paper);border:1px solid var(--rule);border-radius:2px;font-size:.87em;width:100%}
.spec-edit button{color:var(--muted);font-size:1em;padding:0 .3em}
.spec-edit button:hover{color:var(--sale)}
.addrow{font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--rule);padding-bottom:.2em;margin-top:.3em}
.addrow:hover{color:var(--ink);border-color:var(--ink)}
.drop{border:1px dashed var(--rule);border-radius:2px;background:var(--paper);padding:1.4em;text-align:center;cursor:pointer;transition:border-color .2s}
.drop:hover{border-color:var(--olive)}
.drop p{font-size:.8em;color:var(--muted)}
.drop strong{display:block;font-size:.87em;color:var(--ink);font-weight:400;margin-bottom:.15em}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em;margin-top:.7em}
.shot{aspect-ratio:4/5;border:1px solid var(--rule);overflow:hidden;position:relative;background:var(--paper-2)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot button{position:absolute;top:2px;right:2px;width:1.15em;height:1.15em;background:var(--ink);
  color:var(--paper);font-size:.66em;line-height:1;border-radius:50%;z-index:2}
.shot .cover{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);
  font-size:.55em;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:.15em}
.shot.busy{display:grid;place-items:center}
.logo-preview{border:1px solid var(--rule);border-radius:2px;background:var(--paper);padding:1.2em;
  display:grid;place-items:center;margin-top:.6em}
.logo-preview img{max-height:4.5em;width:auto}
.rows{border-top:1px solid var(--rule)}
.row{display:flex;align-items:center;gap:.9em;padding:.85em 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.row-thumb{width:2.9em;height:3.6em;background:var(--paper-2);border:1px solid var(--rule);flex:none;overflow:hidden;position:relative}
.row-thumb img{width:100%;height:100%;object-fit:cover}
.row-thumb b{position:absolute;right:1px;bottom:1px;background:var(--ink);color:var(--paper);font-size:.55em;padding:1px 4px;font-weight:400}
.row-main{flex:1;min-width:9em}
.row-name{font-family:var(--display);font-size:1.2em;line-height:1.2}
.row-sub{font-size:.72em;color:var(--muted);letter-spacing:.05em;margin-top:.1em}
.row-acts{display:flex;gap:.35em;flex:none;flex-wrap:wrap}
.mini{font-size:.66em;letter-spacing:.14em;text-transform:uppercase;padding:.55em .75em;
  border:1px solid var(--rule);border-radius:2px;transition:background .2s}
.mini:hover{background:var(--paper-2)}
.mini.danger{color:var(--sale);border-color:#e6d1cc}
.mini.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.row.is-sold .row-name{color:var(--sold)}
.row.is-sold .row-thumb{filter:grayscale(1);opacity:.6}
.stats{display:flex;gap:1.8em;flex-wrap:wrap;padding:1em 0 .4em}
.stat .n{font-family:var(--display);font-size:1.85em;line-height:1}
.stat .l{font-size:.66em;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.2em}
.switch{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.72em 0;border-bottom:1px solid var(--rule)}
.switch:last-child{border-bottom:none}
.switch-l strong{display:block;font-size:.92em;font-weight:400}
.switch-l span{font-size:.72em;color:var(--muted)}
.toggle{width:2.7em;height:1.5em;border-radius:1em;background:var(--rule);position:relative;flex:none;transition:background .25s}
.toggle::after{content:'';position:absolute;top:.19em;left:.19em;width:1.12em;height:1.12em;border-radius:50%;background:#fff;transition:transform .25s}
.toggle.is-on{background:var(--olive)}
.toggle.is-on::after{transform:translateX(1.2em)}
.banner-mini{display:flex;gap:.8em;padding:.8em 0;border-bottom:1px solid var(--rule);align-items:center}
.banner-thumb{width:5em;height:2.9em;background:var(--paper-2);border:1px solid var(--rule);flex:none;overflow:hidden}
.banner-thumb img{width:100%;height:100%;object-fit:cover}
.chips{display:flex;gap:.4em;flex-wrap:wrap;margin-bottom:.9em}
.chip{display:flex;align-items:center;gap:.45em;border:1px solid var(--rule);border-radius:2px;
  padding:.45em .7em;font-size:.8em;background:var(--paper)}
.chip button{color:var(--muted);font-size:.9em;line-height:1}
.chip button:hover{color:var(--sale)}
.saving{position:fixed;top:.6em;right:.6em;z-index:96;background:var(--olive);color:#fff;
  font-size:.66em;letter-spacing:.18em;text-transform:uppercase;padding:.5em 1em;border-radius:2px;
  opacity:0;transition:opacity .25s;pointer-events:none}
.saving.on{opacity:1}
.setup-warn{max-width:38em;margin:4em auto;padding:2em;border:1px solid var(--sale);border-radius:2px;background:#fff}
.setup-warn h2{font-family:var(--display);font-weight:400;font-size:1.8em;margin-bottom:.5em}
.setup-warn p{font-size:.9em;color:var(--muted);margin-bottom:.8em;line-height:1.7}
.setup-warn code{background:var(--paper-2);padding:.15em .4em;border-radius:2px;font-size:.9em;color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}