:root{
  --bg:#090909;
  --panel:#11110f;
  --panel-2:#171713;
  --gold:#c7a253;
  --gold-soft:#e6cf98;
  --text:#f5f0e8;
  --muted:#a8a197;
  --line:rgba(199,162,83,.25);
  --danger:#e47e72;
  --ok:#8fc596;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.nav{position:sticky;top:0;z-index:20;background:rgba(9,9,9,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:Georgia,serif;letter-spacing:.24em;font-size:1.06rem}
.brand span{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:26px;color:#d8d1c7;font-size:.92rem}
.nav-links a:hover{color:var(--gold-soft)}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--gold);background:var(--gold);color:#0b0b0a;padding:13px 20px;border-radius:999px;font-weight:750;cursor:pointer;transition:.2s}
.btn:hover,.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-outline{background:transparent;color:var(--gold-soft)}
.hero{min-height:760px;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 48%,rgba(199,162,83,.18),transparent 30%),linear-gradient(90deg,#090909 0%,#090909 45%,rgba(9,9,9,.35) 72%,#090909 100%)}
.hero-shoe{position:absolute;right:4%;top:15%;width:min(52vw,720px);opacity:.98;filter:drop-shadow(0 32px 50px rgba(0,0,0,.62));transform:rotate(-5deg)}
.hero-content{position:relative;z-index:2;max-width:690px;padding:88px 0}
.eyebrow{text-transform:uppercase;letter-spacing:.25em;color:var(--gold);font-size:.77rem;font-weight:800}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:500;line-height:1.05;margin:0}
h1{font-size:clamp(3.4rem,8vw,7.7rem);letter-spacing:-.045em;margin:18px 0 22px}
.hero p{font-size:1.15rem;color:#c8c0b6;max-width:560px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.section{padding:105px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:52px}
.section h2{font-size:clamp(2.5rem,5vw,4.6rem);letter-spacing:-.03em}
.section-lead{color:var(--muted);font-size:1.05rem;max-width:580px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature{padding:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(199,162,83,.08),rgba(255,255,255,.02));border-radius:var(--radius);min-height:200px}
.feature .num{color:var(--gold);font-family:Georgia,serif;font-size:2.1rem;margin-bottom:38px}
.feature h3{font-size:1.5rem;margin-bottom:9px}
.feature p{margin:0;color:var(--muted);font-size:.92rem}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{border-radius:var(--radius);overflow:hidden;background:var(--panel);border:1px solid rgba(255,255,255,.07)}
.product-media{aspect-ratio:4/3;background:linear-gradient(145deg,#232018,#0d0d0b);display:grid;place-items:center;padding:18px}
.product-media img{width:100%;height:100%;object-fit:contain}
.product-info{padding:22px}
.product-info h3{font-size:1.5rem}
.product-info p{margin:8px 0 0;color:var(--muted)}
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}
.story-art{min-height:540px;background:linear-gradient(135deg,#241f16,#0e0e0b);border-radius:var(--radius);border:1px solid var(--line);position:relative;overflow:hidden;display:grid;place-items:center}
.story-art img{width:88%;filter:drop-shadow(0 32px 45px #000)}
.story-copy{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:50px;display:flex;flex-direction:column;justify-content:center}
.story-copy h2{font-size:clamp(2.5rem,4.5vw,4.5rem)}
.story-copy p{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{padding:30px 20px;border-top:1px solid var(--gold);background:linear-gradient(180deg,rgba(199,162,83,.07),transparent)}
.step strong{display:block;color:var(--gold);font-size:.8rem;letter-spacing:.14em;margin-bottom:18px}
.step h3{font-size:1.45rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.9rem}
.cta-box{padding:70px;border:1px solid var(--gold);border-radius:32px;background:radial-gradient(circle at 85% 15%,rgba(199,162,83,.18),transparent 30%),#0d0d0b;display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-box h2{font-size:clamp(2.4rem,5vw,4.2rem);max-width:680px}
.page-hero{padding:100px 0 65px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 80% 0%,rgba(199,162,83,.14),transparent 35%)}
.page-hero h1{font-size:clamp(3rem,7vw,6.5rem)}
.page-hero p{max-width:720px;color:var(--muted);font-size:1.08rem}
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}
.form-side,.form-card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:34px}
.form-side{background:linear-gradient(160deg,#1a1710,#0e0e0c)}
.form-side h2{font-size:2.4rem}
.form-side p{color:var(--muted)}
.field{margin-bottom:20px}
label{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:#d6cdbf;margin-bottom:8px}
input,select,textarea{width:100%;background:#0b0b0a;border:1px solid #323028;border-radius:14px;color:var(--text);font:inherit;padding:15px 16px;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(199,162,83,.08)}
.help{font-size:.84rem;color:var(--muted);margin-top:7px}
.notice{border:1px solid var(--line);background:rgba(199,162,83,.07);padding:16px 18px;border-radius:14px;color:#d8cdb9;font-size:.9rem;margin:18px 0}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.status{margin-top:15px;font-size:.9rem;min-height:24px}.status.ok{color:var(--ok)}.status.err{color:var(--danger)}
.success-card{max-width:780px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:44px}
.success-icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);font-size:2rem;margin-bottom:22px}
.summary{margin:28px 0;border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden}
.summary-row{display:flex;justify-content:space-between;gap:20px;padding:14px 17px;border-bottom:1px solid rgba(255,255,255,.06)}
.summary-row:last-child{border-bottom:0}.summary-row span:first-child{color:var(--muted)}
.admin-shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 78px)}
.sidebar{border-right:1px solid rgba(255,255,255,.07);padding:30px 20px;background:#0c0c0b}
.sidebar h3{font-family:Inter,sans-serif;font-size:.9rem;color:var(--gold);letter-spacing:.13em;margin-bottom:24px}
.sidebar a{display:block;padding:12px 14px;border-radius:12px;color:#bfb7ac;margin-bottom:5px}.sidebar a.active{background:#191711;color:var(--gold-soft)}
.admin-main{padding:34px}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.admin-top h1{font-size:3rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}.stat{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:20px}.stat span{color:var(--muted);font-size:.83rem}.stat strong{display:block;font-size:2.2rem;font-family:Georgia,serif;margin-top:8px}
.orders{display:grid;gap:12px}.order-card{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:20px;display:grid;grid-template-columns:1.2fr 1fr auto;gap:20px;align-items:center}.order-meta small{display:block;color:var(--muted)}.order-meta strong{font-size:1.1rem}.badge{display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--gold-soft);font-size:.78rem}.order-actions{display:flex;gap:8px;flex-wrap:wrap}.mini-btn{border:1px solid #333129;background:#151410;color:#ddd4c8;padding:9px 12px;border-radius:10px;cursor:pointer}.mini-btn:hover{border-color:var(--gold)}
.empty{padding:45px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px}
.token-box{max-width:480px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;margin:60px auto}
footer{padding:50px 0;color:#978f85}.footer-inner{display:flex;justify-content:space-between;gap:30px;border-top:1px solid rgba(255,255,255,.06);padding-top:28px}.footer-links{display:flex;gap:20px}
.mobile-toggle{display:none}
@media(max-width:900px){
 .nav-links{display:none}.mobile-toggle{display:block;color:var(--gold);background:none;border:0;font-size:1.4rem}.hero{min-height:680px}.hero-shoe{width:80vw;right:-30%;top:24%;opacity:.55}.section-head,.story,.form-wrap{grid-template-columns:1fr}.grid-4,.steps{grid-template-columns:repeat(2,1fr)}.products{grid-template-columns:repeat(2,1fr)}.cta-box{padding:45px;display:block}.cta-box .btn{margin-top:24px}.admin-shell{grid-template-columns:1fr}.sidebar{display:none}.order-card{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.container{width:min(100% - 28px,1180px)}.hero{min-height:640px}.hero-content{padding:70px 0}.hero-shoe{width:105vw;right:-49%;top:27%}.section{padding:76px 0}.grid-4,.steps,.products{grid-template-columns:1fr}.story-art{min-height:360px}.story-copy,.form-side,.form-card,.success-card{padding:25px}.cta-box{padding:32px}.footer-inner{display:block}.footer-links{margin-top:16px;flex-wrap:wrap}.admin-main{padding:20px}.stats{grid-template-columns:1fr}.admin-top{align-items:flex-start}.summary-row{display:block}.summary-row span{display:block;margin-bottom:3px}}
@media(max-width:900px){
 .nav.open .nav-inner{height:auto;min-height:78px;flex-wrap:wrap;padding:18px 0}
 .nav.open .nav-links{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:5px;padding:10px 0 18px}
 .nav.open .nav-links a{padding:12px 4px}
 .nav.open .nav-cta{margin-top:5px}
}

/* Admin password login */
.admin-login-box{margin-top:clamp(55px,10vh,110px);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.password-wrap{position:relative}
.password-wrap input{padding-right:90px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--gold-soft);font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;padding:8px 10px;border-radius:9px}
.password-toggle:hover{background:rgba(199,162,83,.08)}
.admin-login-btn{width:100%}
.admin-login-btn:disabled{opacity:.65;cursor:wait;transform:none}

/* Website editor */
.sidebar-link{display:block;width:100%;text-align:left;padding:12px 14px;border:0;border-radius:12px;color:#bfb7ac;margin-bottom:5px;background:transparent;font:inherit;cursor:pointer}
.sidebar-link:hover{color:var(--gold-soft);background:#14130f}
.sidebar-link.active{background:#191711;color:var(--gold-soft)}
.admin-subtitle{margin:8px 0 0;color:var(--muted)}
.editor-notice{border:1px solid var(--line);background:rgba(199,162,83,.07);padding:16px 18px;border-radius:14px;color:#d8cdb9;margin-bottom:22px}
.editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.editor-panel{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:24px}
.editor-panel h2{font-size:2rem;margin-bottom:22px}
.editor-panel textarea{resize:vertical;min-height:112px}
.editor-savebar{position:sticky;bottom:16px;z-index:12;margin:22px 0 48px;padding:15px;background:rgba(17,17,15,.92);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;gap:18px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.editor-savebar .status{margin:0}
.editor-photo-title{margin-top:8px}
.media-editor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-bottom:50px}
.media-editor-card{overflow:hidden;background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:20px}
.media-editor-preview{aspect-ratio:4/3;background:linear-gradient(145deg,#232018,#0d0d0b);display:grid;place-items:center;overflow:hidden}
.media-editor-preview img{width:100%;height:100%;object-fit:contain}
.media-editor-body{padding:19px}
.media-editor-body h3{font-size:1.3rem;margin-bottom:6px}
.media-editor-body p{font-size:.86rem;color:var(--muted);margin:0 0 13px}
.media-file{padding:11px;font-size:.88rem;margin-bottom:12px}
.media-actions{display:flex;gap:8px;flex-wrap:wrap}
.media-actions .mini-btn{flex:1;min-width:120px}
.media-actions .mini-btn:disabled,.editor-savebar .btn:disabled{opacity:.58;cursor:wait}
@media(max-width:1050px){.media-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
 .sidebar{display:flex;flex-wrap:wrap;gap:7px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:16px}
 .sidebar h3{width:100%;margin:0 0 8px}
 .sidebar a,.sidebar-link{width:auto;margin:0;padding:10px 12px}
 .editor-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
 .media-editor-grid{grid-template-columns:1fr}
 .editor-panel{padding:19px}
 .editor-savebar{display:block;bottom:8px}
 .editor-savebar .btn{width:100%}
 .editor-savebar .status{margin-top:10px}
}

/* ==========================================================
   APPRECIETE v3.2 — CREAM + FOREST GREEN THEME
   Reference palette supplied by user:
   Cream #C3A281 (dominant) / Green #106B42 (accent)
   ========================================================== */
:root{
  --bg:#C3A281;
  --panel:#D1B394;
  --panel-2:#B98E66;
  --gold:#106B42;
  --gold-soft:#0D5435;
  --text:#123C2B;
  --muted:#5F533F;
  --line:rgba(16,107,66,.28);
  --danger:#8E2E27;
  --ok:#106B42;
}
body{background:#C3A281;color:var(--text)}
.nav{background:rgba(195,162,129,.92);border-bottom:1px solid rgba(16,107,66,.18)}
.brand{color:#123C2B}.brand span{color:#106B42}
.nav-links{color:#214D39}.nav-links a:hover{color:#106B42}
.nav-cta,.btn{border-color:#106B42;background:#106B42;color:#F2E6D8;box-shadow:0 8px 22px rgba(16,107,66,.13)}
.btn-outline{background:transparent;color:#106B42;border-color:#106B42}
.btn-outline:hover{background:#106B42;color:#F2E6D8}
.mobile-toggle{color:#106B42}

.hero{background:#C3A281;border-bottom-color:rgba(16,107,66,.18)}
.hero:before{background:radial-gradient(circle at 78% 48%,rgba(16,107,66,.24),transparent 32%),linear-gradient(90deg,#C3A281 0%,#C3A281 43%,rgba(195,162,129,.38) 72%,#C3A281 100%)}
.hero-shoe{filter:drop-shadow(0 34px 45px rgba(37,45,30,.26))}
.eyebrow{color:#106B42}
.hero p{color:#554A3A}
.section{border-bottom-color:rgba(16,107,66,.14)}
.section:nth-of-type(even){background:rgba(239,220,199,.16)}
.section-lead{color:#5F533F}
.feature{border-color:rgba(16,107,66,.24);background:linear-gradient(180deg,rgba(239,220,199,.32),rgba(16,107,66,.035));box-shadow:0 12px 28px rgba(68,55,39,.06)}
.feature .num{color:#106B42}.feature p{color:#5F533F}
.product-card{background:#D0B293;border-color:rgba(16,107,66,.18);box-shadow:0 14px 32px rgba(68,55,39,.07)}
.product-media{background:linear-gradient(145deg,#D9BFA4,#B9916D)}
.product-info p{color:#5F533F}
.story-art{background:linear-gradient(135deg,#D9BFA4,#B98E66);border-color:rgba(16,107,66,.24)}
.story-art img{filter:drop-shadow(0 30px 38px rgba(50,43,34,.25))}
.story-copy{background:#D1B394;border-color:rgba(16,107,66,.18)}
.story-copy p{color:#5F533F}
.step{border-top-color:#106B42;background:linear-gradient(180deg,rgba(16,107,66,.075),transparent)}
.step strong{color:#106B42}.step p{color:#5F533F}
.cta-box{border-color:#106B42;background:radial-gradient(circle at 85% 15%,rgba(16,107,66,.18),transparent 33%),#D1B394;box-shadow:0 18px 42px rgba(68,55,39,.09)}
.page-hero{border-bottom-color:rgba(16,107,66,.2);background:radial-gradient(circle at 80% 0%,rgba(16,107,66,.18),transparent 38%)}
.page-hero p{color:#5F533F}

.form-side,.form-card{background:#D1B394;border-color:rgba(16,107,66,.2)}
.form-side{background:linear-gradient(160deg,#D8BDA1,#BE9773)}
.form-side p{color:#5F533F}
label{color:#264C3A}
input,select,textarea{background:#E1C8AF;border-color:rgba(16,107,66,.28);color:#123C2B}
input::placeholder,textarea::placeholder{color:#786956}
input:focus,select:focus,textarea:focus{border-color:#106B42;box-shadow:0 0 0 3px rgba(16,107,66,.12)}
.help{color:#5F533F}
.notice{border-color:rgba(16,107,66,.25);background:rgba(16,107,66,.07);color:#3F4F3E}
.success-card{background:#D1B394;border-color:rgba(16,107,66,.25)}
.success-icon{border-color:#106B42;color:#106B42}
.summary{border-color:rgba(16,107,66,.18)}
.summary-row{border-bottom-color:rgba(16,107,66,.13)}
.summary-row span:first-child{color:#5F533F}

/* Admin — cream main area, green navigation accents */
.admin-shell{background:#C3A281}
.sidebar{background:#106B42;border-right-color:rgba(8,57,34,.22)}
.sidebar h3{color:#F0DECB}
.sidebar a,.sidebar-link{color:#E8D3BD}
.sidebar a:hover,.sidebar-link:hover{color:#FFF6EC;background:rgba(255,255,255,.09)}
.sidebar a.active,.sidebar-link.active{background:#C3A281;color:#0D5435}
.admin-main{background:#C3A281}
.stat,.order-card,.token-box,.editor-panel,.media-editor-card{background:#D1B394;border-color:rgba(16,107,66,.18);box-shadow:0 10px 26px rgba(68,55,39,.05)}
.stat span,.order-meta small,.admin-subtitle,.empty,.media-editor-body p{color:#5F533F}
.badge{border-color:rgba(16,107,66,.28);color:#0D5435;background:rgba(16,107,66,.06)}
.mini-btn{border-color:rgba(16,107,66,.25);background:#E1C8AF;color:#123C2B}
.mini-btn:hover{border-color:#106B42;background:#D8B99A}
.empty{border-color:rgba(16,107,66,.3)}
.admin-login-box{box-shadow:0 30px 90px rgba(68,55,39,.18)}
.password-toggle{color:#106B42}.password-toggle:hover{background:rgba(16,107,66,.08)}
.editor-notice{border-color:rgba(16,107,66,.25);background:rgba(16,107,66,.07);color:#3F4F3E}
.editor-savebar{background:rgba(209,179,148,.94);border-color:rgba(16,107,66,.25);box-shadow:0 18px 50px rgba(68,55,39,.13)}
.media-editor-preview{background:linear-gradient(145deg,#D9BFA4,#B9916D)}
.media-file{background:#E1C8AF;color:#123C2B;border-color:rgba(16,107,66,.22)}

footer{color:#5F533F}.footer-inner{border-top-color:rgba(16,107,66,.16)}
@media(max-width:900px){
 .sidebar{border-bottom-color:rgba(8,57,34,.22)}
 .sidebar a.active,.sidebar-link.active{background:#C3A281;color:#0D5435}
}

/* ==========================================================
   APPRECIETE v3.4 — GREEN HEADER
   Exact reference green #106B42, cream #C3A281
   ========================================================== */
.nav{
  background:#106B42;
  border-bottom:1px solid rgba(195,162,129,.38);
  box-shadow:0 8px 24px rgba(8,71,43,.12);
}
.nav .brand{
  color:#C3A281;
}
.nav .brand span{
  color:#F0DDC9;
}
.nav .nav-links{
  color:#E9D2BA;
}
.nav .nav-links a:hover{
  color:#FFFFFF;
}
.nav .nav-cta{
  background:#C3A281;
  border-color:#C3A281;
  color:#106B42;
  box-shadow:none;
}
.nav .nav-cta:hover{
  background:#D0B08F;
  color:#0D5435;
}
.nav .mobile-toggle{
  color:#C3A281;
}
@media(max-width:900px){
  .nav.open .nav-links{color:#E9D2BA}
}

/* ==========================================================
   APPRECIETE v3.5 — CUSTOMER PHOTO UPLOAD
   ========================================================== */
.customer-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.customer-upload-box{display:flex;min-height:150px;border:2px dashed rgba(16,107,66,.38);border-radius:18px;background:rgba(225,200,175,.48);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;cursor:pointer;transition:.2s;text-transform:none;letter-spacing:normal;color:#123C2B}
.customer-upload-box:hover{border-color:#106B42;background:rgba(225,200,175,.78);transform:translateY(-1px)}
.customer-upload-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#106B42;color:#F0DDC9;font-size:1.7rem;line-height:1;margin-bottom:10px}
.customer-upload-box strong{font-size:1rem;color:#123C2B}
.customer-upload-box small{display:block;color:#5F533F;font-size:.8rem;margin-top:5px;font-weight:500}
.customer-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.customer-photo-preview{display:grid;grid-template-columns:68px 1fr;gap:10px;align-items:center;background:rgba(225,200,175,.7);border:1px solid rgba(16,107,66,.2);border-radius:13px;padding:8px;min-width:0}
.customer-photo-preview img{width:68px;height:58px;object-fit:cover;border-radius:9px;background:#D1B394}
.customer-photo-preview div{min-width:0}.customer-photo-preview strong{font-size:.78rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#123C2B}.customer-photo-preview small{display:block;color:#5F533F;font-size:.72rem;margin-top:2px}
@media(max-width:620px){.customer-photo-grid{grid-template-columns:1fr}}

/* ==========================================================
   APPRECIETE v3.6 — SUBTLE LEATHER HERO BACKGROUND
   Cream remains dominant; texture is deliberately subdued.
   ========================================================== */
.hero{
  isolation:isolate;
  background:#C3A281;
}
.hero-leather-bg{
  position:absolute;
  inset:-2%;
  z-index:0;
  background-image:url("leather-texture.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.28;
  filter:saturate(.58) contrast(.82) brightness(1.02) blur(.45px);
  transform:scale(1.035);
  pointer-events:none;
}
.hero:before{
  z-index:1;
  background:
    radial-gradient(circle at 76% 48%,rgba(16,107,66,.15),transparent 31%),
    linear-gradient(90deg,
      rgba(195,162,129,.90) 0%,
      rgba(195,162,129,.77) 42%,
      rgba(195,162,129,.50) 69%,
      rgba(195,162,129,.72) 100%);
  pointer-events:none;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(102,67,39,.035));
  pointer-events:none;
}
.hero-shoe{
  z-index:4;
  filter:drop-shadow(0 34px 48px rgba(37,45,30,.30));
}
.hero-content{z-index:5}
@media(max-width:900px){
  .hero-leather-bg{opacity:.22;background-position:56% center}
  .hero:before{background:linear-gradient(90deg,rgba(195,162,129,.93),rgba(195,162,129,.69))}
}


/* APPRECIETE v3.7 — Admin hero background opacity control */
.range-label-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:10px}
.range-label-row label{margin:0}
.range-label-row strong{font-size:1rem;color:#106B42;background:rgba(16,107,66,.08);border:1px solid rgba(16,107,66,.18);padding:6px 10px;border-radius:999px;min-width:58px;text-align:center}
.opacity-range{width:100%;height:8px;padding:0;border:0;background:transparent;box-shadow:none;accent-color:#106B42;cursor:pointer}
.opacity-range:focus{box-shadow:none;border:0}
.range-hints{display:flex;justify-content:space-between;color:#6b5c48;font-size:.78rem;margin-top:6px}
.hero-opacity-field .help{margin-top:9px}

/* ==========================================================
   APPRECIETE v3.8 — GLOBAL LEATHER TEXTURE ON CREAM AREAS
   Applies the leather texture not only in hero, but across all
   cream-themed website surfaces. Controlled by the same admin
   background texture image and opacity setting.
   ========================================================== */
:root{
  --site-leather-image:url("leather-texture.jpg");
  --site-leather-opacity:.16;
}
body{
  position:relative;
  background-color:#C3A281;
}
/* Global cream texture wash */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(195,162,129,.88), rgba(195,162,129,.88)),
    var(--site-leather-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--site-leather-opacity);
  filter:saturate(.58) contrast(.9) brightness(1.02) blur(.6px);
}
/* Keep content above the global texture */
.nav,.hero,.section,.page-hero,footer,.admin-shell,.token-box,.admin-login-box{position:relative;z-index:0}

/* Apply subtle leather texture to cream surfaces */
.hero,
.section,
.page-hero,
.story-art,
.story-copy,
.feature,
.product-card,
.product-media,
.form-side,
.form-card,
.notice,
.success-card,
.summary,
.stat,
.order-card,
.token-box,
.editor-panel,
.media-editor-card,
.editor-savebar,
.media-editor-preview,
.customer-upload-box,
.customer-photo-preview,
.cta-box,
.step,
.empty,
input,
select,
textarea,
.mini-btn,
.media-file{
  background-image:
    linear-gradient(rgba(195,162,129,.90), rgba(195,162,129,.90)),
    var(--site-leather-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Keep some elements a bit lighter/darker while still textured */
.form-side,
.story-art,
.product-media,
.media-editor-preview{
  background-image:
    linear-gradient(rgba(217,191,164,.88), rgba(185,142,102,.88)),
    var(--site-leather-image) !important;
}

.feature,
.notice,
.badge,
.step,
.empty{
  background-blend-mode:normal;
}

/* Preserve green header/sidebar without texture */
.nav,
.sidebar,
.sidebar a.active,
.sidebar-link.active,
.nav-cta,
.btn,
.btn-outline:hover,
.customer-upload-icon{
  background-image:none !important;
}

/* Slightly smoother readability over textured cream sections */
.hero p,
.section-lead,
.story-copy p,
.form-side p,
.help,
.summary-row span:first-child,
.notice,
.media-editor-body p,
.customer-upload-box small,
.customer-photo-preview small,
.empty,
.step p,
.product-info p{
  text-shadow:0 1px 0 rgba(255,245,235,.12);
}

/* Let admin opacity slider control whole site, not only hero */
.hero-leather-bg{
  opacity:calc(var(--site-leather-opacity) * 1.35);
}

/* ==========================================================
   APPRECIETE v3.9 — DYNAMIC CUSTOM SHOE PREVIEW
   The left-side shoe follows the selected Collection type.
   ========================================================== */
.custom-preview-block{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(16,107,66,.18);
}
.custom-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
  color:#31513f;
  font-size:.78rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.custom-preview-head strong{
  color:#106B42;
  font-size:.85rem;
  letter-spacing:.04em;
}
.custom-shoe-preview{
  width:100%;
  max-height:360px;
  min-height:260px;
  object-fit:contain;
  object-position:center;
  margin:0 auto;
  filter:drop-shadow(0 25px 30px rgba(45,40,30,.20));
  transition:opacity .22s ease, transform .22s ease, filter .22s ease;
}
.custom-shoe-preview.is-changing{
  opacity:.18;
  transform:translateY(5px) scale(.985);
  filter:drop-shadow(0 14px 22px rgba(45,40,30,.12));
}
@media(max-width:900px){
  .custom-shoe-preview{max-height:300px;min-height:210px}
}

/* ==========================================================
   APPRECIETE v4.0 — SEAMLESS LEATHER CANVAS
   One continuous leather texture for all cream areas.
   Cards use translucent cream glass instead of repeating the
   leather image, eliminating visible joins and cropped seams.
   ========================================================== */
html{background:#C3A281}
body{
  isolation:isolate;
  background:#C3A281;
  min-height:100vh;
}

/* A single continuous texture layer across the whole website. */
body::before{
  content:"";
  position:fixed;
  inset:-2%;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(195,162,129,.74),rgba(195,162,129,.74)),
    var(--site-leather-image);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:var(--site-leather-opacity);
  filter:saturate(.62) contrast(.88) brightness(1.04) blur(.35px);
  transform:scale(1.025);
}

/* Do not restart/crop the texture on each section. */
.hero,
.section,
.page-hero,
.admin-shell,
.admin-main,
footer{
  background-image:none !important;
  background-color:transparent !important;
}

/* The old independent hero texture is disabled so the canvas stays continuous. */
.hero-leather-bg{display:none !important}

/* Smooth tonal treatment in hero without a hard bottom join. */
.hero{border-bottom:0 !important}
.hero::before{
  background:
    radial-gradient(circle at 77% 47%,rgba(16,107,66,.10),transparent 34%),
    linear-gradient(90deg,
      rgba(195,162,129,.43) 0%,
      rgba(195,162,129,.22) 44%,
      rgba(195,162,129,.04) 72%,
      rgba(195,162,129,.18) 100%) !important;
}
.hero::after{
  background:linear-gradient(180deg,
    rgba(195,162,129,0) 0%,
    rgba(195,162,129,0) 74%,
    rgba(195,162,129,.20) 92%,
    rgba(195,162,129,.34) 100%) !important;
}

/* Remove hard section dividers. Replace with a soft intentional fade. */
.section{
  position:relative;
  border-bottom:0 !important;
}
.section + .section::before,
.hero + .section::before,
.page-hero + .section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-46px;
  height:92px;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(195,162,129,0),
    rgba(231,205,177,.11) 46%,
    rgba(195,162,129,0));
  z-index:0;
}
.section > .container{position:relative;z-index:1}

/* Shared frosted cream surface for cards and form panels.
   No repeated texture image = no internal seams. */
.feature,
.product-card,
.story-copy,
.form-side,
.form-card,
.notice,
.success-card,
.summary,
.stat,
.order-card,
.token-box,
.editor-panel,
.media-editor-card,
.editor-savebar,
.customer-upload-box,
.customer-photo-preview,
.cta-box,
.step,
.empty,
input,
select,
textarea,
.mini-btn,
.media-file{
  background-image:none !important;
  background-color:rgba(215,184,151,.61) !important;
  border-color:rgba(16,107,66,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,231,.26),
    0 12px 34px rgba(89,61,36,.055);
  backdrop-filter:blur(2.5px);
  -webkit-backdrop-filter:blur(2.5px);
}

/* Slightly richer surfaces where imagery sits. */
.story-art,
.product-media,
.media-editor-preview{
  background-image:linear-gradient(145deg,
    rgba(225,198,170,.70),
    rgba(183,139,101,.48)) !important;
  background-color:rgba(205,169,135,.58) !important;
  border-color:rgba(16,107,66,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,232,.22),
    0 16px 38px rgba(78,56,37,.07);
}

/* Inputs should be calm and readable, not patterned. */
input,
select,
textarea,
.media-file{
  background-color:rgba(231,207,183,.68) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
input:focus,
select:focus,
textarea:focus{
  background-color:rgba(238,217,196,.78) !important;
  box-shadow:0 0 0 3px rgba(16,107,66,.10), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Keep cards visually separate while preserving the continuous material beneath. */
.feature,
.product-card,
.story-copy,
.form-side,
.form-card,
.notice,
.success-card,
.stat,
.order-card,
.token-box,
.editor-panel,
.media-editor-card,
.cta-box{
  overflow:hidden;
}

/* Remove the visible texture cut inside upload/card surfaces. */
.customer-upload-box{
  background:rgba(221,193,164,.56) !important;
  border-style:dashed !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.customer-upload-box:hover{
  background:rgba(229,204,178,.70) !important;
}
.notice{
  background:rgba(212,184,151,.54) !important;
}

/* Soft page hero continuation into its content. */
.page-hero{
  border-bottom:0 !important;
}
.page-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-44px;height:88px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(195,162,129,.18),rgba(195,162,129,0));
}

/* Footer shares the same continuous canvas. */
footer{border-top:0 !important}
.footer-inner{border-top-color:rgba(16,107,66,.13) !important}

/* Admin remains readable while cream panels inherit the same material canvas. */
.admin-shell{background:transparent !important}
.admin-main{background:transparent !important}
.sidebar{background:#106B42 !important;background-image:none !important}

@media(max-width:900px){
  body::before{background-position:54% center;filter:saturate(.60) contrast(.9) brightness(1.04)}
  .section + .section::before,.hero + .section::before,.page-hero + .section::before{top:-34px;height:68px}
}

/* ==========================================================
   APPRECIETE v4.1 — EDITABLE GREEN LEATHER HEADER LAYER
   Header can now use its own admin-managed leather texture.
   ========================================================== */
:root{
  --header-leather-image:url("header-leather-green.png");
  --header-leather-opacity:.18;
}

.nav{
  position:sticky;
  top:0;
  overflow:hidden;
  isolation:isolate;
  background:#106B42 !important;
}
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(16,107,66,.62), rgba(16,107,66,.62)),
    var(--header-leather-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--header-leather-opacity);
  filter:saturate(.95) contrast(.96) brightness(.92) blur(.2px);
  transform:scale(1.02);
}
.nav-inner,
.nav .brand,
.nav .nav-links,
.nav .nav-cta,
.nav .mobile-toggle{
  position:relative;
  z-index:1;
}

/* keep button clean and readable above textured header */
.nav .nav-cta{
  background:#C3A281 !important;
  border-color:#C3A281 !important;
  color:#106B42 !important;
}

/* Slightly soften border on textured header */
.nav{
  border-bottom:1px solid rgba(221,193,164,.32) !important;
  box-shadow:0 10px 26px rgba(8,71,43,.10);
}

/* ==========================================================
   APPRECIETE v4.4 — CUSTOMER ORDER TRACKING
   ========================================================== */
.track-section{padding-top:72px}
.track-layout{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.55fr);gap:28px;align-items:start}
.track-search-card,.track-result{border:1px solid rgba(16,107,66,.22);border-radius:26px;background:rgba(218,190,161,.48);backdrop-filter:blur(9px);box-shadow:0 18px 44px rgba(75,55,35,.07)}
.track-search-card{padding:30px;position:sticky;top:104px}
.track-search-card h2{font-size:2.45rem;margin:10px 0 12px}.track-search-card>p{color:var(--muted);margin:0 0 24px}.track-submit{width:100%}
.track-result{padding:34px;min-height:520px}
.track-empty-state{min-height:445px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:580px;margin:auto;color:var(--muted)}
.track-empty-state h2{font-size:2rem;color:var(--text);margin:15px 0 8px}.track-empty-state p{max-width:500px}.track-empty-icon{width:68px;height:68px;border:1px solid rgba(16,107,66,.3);border-radius:50%;display:grid;place-items:center;color:#106B42;font-size:1.7rem;background:rgba(195,162,129,.5)}
.track-order-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid rgba(16,107,66,.16)}
.track-order-head h2{font-size:clamp(2rem,4vw,3.3rem);margin:9px 0 8px}.track-order-head p{margin:0;color:var(--muted)}
.track-current-pill{min-width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#106B42;color:#F2E6D8;font-weight:800;white-space:nowrap}.track-current-pill.cancelled{width:auto;padding:0 18px;border-radius:999px;background:#8E2E27}
.track-progress-summary{padding:25px 0 8px}.track-progress-copy{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:10px}.track-progress-copy span{color:var(--muted);font-size:.84rem}.track-progress-bar{height:8px;border-radius:999px;background:rgba(16,107,66,.11);overflow:hidden}.track-progress-bar span{display:block;height:100%;border-radius:inherit;background:#106B42;transition:width .45s ease}
.tracking-timeline{margin-top:18px}.tracking-step{display:grid;grid-template-columns:46px 1fr;gap:16px;position:relative;padding:0 0 27px}.tracking-step:last-child{padding-bottom:0}.tracking-step:not(:last-child)::before{content:"";position:absolute;left:22px;top:43px;bottom:-1px;width:1px;background:rgba(16,107,66,.22)}
.tracking-marker{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(16,107,66,.3);font-family:Georgia,serif;font-size:1.05rem;background:rgba(220,192,164,.9);color:#106B42;position:relative;z-index:1}
.tracking-step.done .tracking-marker{background:#106B42;color:#F2E6D8}.tracking-step.current .tracking-marker{background:#C3A281;color:#106B42;border:2px solid #106B42;box-shadow:0 0 0 5px rgba(16,107,66,.09)}.tracking-step.future{opacity:.5}
.tracking-step-content{padding-top:3px}.tracking-step-title{display:flex;justify-content:space-between;gap:18px;align-items:baseline}.tracking-step-title h3{font-size:1.4rem}.tracking-step-title time{font-size:.77rem;color:var(--muted);white-space:nowrap}.tracking-step-content p{margin:8px 0 0;color:var(--muted);font-size:.93rem;max-width:720px}
.track-cancelled-note{margin-top:25px;border:1px solid rgba(142,46,39,.26);background:rgba(142,46,39,.06);color:#704039;padding:18px;border-radius:16px}

/* Admin tracking controls */
.tracking-order-card{grid-template-columns:1.1fr .9fr minmax(260px,.85fr)}
.tracking-updated{display:block;color:var(--muted);font-size:.75rem;margin-top:8px}.tracking-admin-actions{display:block}.tracking-admin-label{font-size:.72rem;margin-bottom:6px}.tracking-admin-select{padding:10px 12px;margin-bottom:9px;background:rgba(225,200,175,.72);font-size:.85rem}.tracking-save-btn{width:100%}.tracking-save-btn:disabled{opacity:.6;cursor:wait}.tracking-badge{max-width:100%;white-space:normal;line-height:1.35}

@media(max-width:980px){.track-layout{grid-template-columns:1fr}.track-search-card{position:static}.tracking-order-card{grid-template-columns:1fr}.track-result{min-height:auto}.track-empty-state{min-height:300px}}
@media(max-width:620px){.track-result,.track-search-card{padding:22px}.track-order-head{display:block}.track-current-pill{margin-top:18px}.track-progress-copy,.tracking-step-title{display:block}.tracking-step-title time{display:block;margin-top:4px}.tracking-step{grid-template-columns:40px 1fr}.tracking-marker{width:38px;height:38px}.tracking-step:not(:last-child)::before{left:19px;top:38px}}