:root{
  --pine:#0B3331; --pine-deep:#082825; --ever:#16524A; --sage:#9CB5AA;
  --bone:#F5F2EB; --paper:#FBFAF6; --ink:#161A18; --stone:#8A8E86; --line:#e6e0d3;
  --saffron:#D69A3C; --clay:#C26B4A; --plum:#6E4A6B; --ocean:#2E6E8E;
  --serif:"Playfair Display",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --wrap:1200px; --r:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}
.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--stone);font-weight:500}
.mono{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M14 16H34L14 38H34' fill='none' stroke='%23123f3b' stroke-width='2.4' transform='rotate(-16 24 26)'/%3E%3C/svg%3E");background-size:52px 52px}
.mono.light{opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M14 16H34L14 38H34' fill='none' stroke='%23F5F2EB' stroke-width='2.4' transform='rotate(-16 24 26)'/%3E%3C/svg%3E")}

/* buttons */
.btn{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.3px;padding:13px 26px;border-radius:5px;
  cursor:pointer;border:1px solid transparent;transition:transform .15s,background .2s,color .2s,border-color .2s;
  display:inline-flex;gap:8px;align-items:center;justify-content:center}
.btn:active{transform:scale(.98)}
.btn-pine{background:var(--pine);color:var(--bone)}.btn-pine:hover{background:var(--pine-deep)}
.btn-bone{background:var(--bone);color:var(--pine)}.btn-bone:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--pine);border-color:var(--line)}.btn-ghost:hover{border-color:var(--pine)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px;font-size:13px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.logo{display:inline-block;height:24px;color:var(--pine)}.logo svg{height:100%;width:auto}
.menu{display:flex;gap:28px;list-style:none;font-size:14px;font-weight:500}
.menu a{padding:4px 0;position:relative}.menu a:hover{color:var(--ever)}
.icons{display:flex;gap:16px;align-items:center}
.icons a,.icons button{background:none;border:none;cursor:pointer;color:var(--ink);display:flex;position:relative}
.icons svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.5;fill:none}
.cart-c{position:absolute;top:-7px;right:-9px;background:var(--clay);color:#fff;font-size:10px;font-weight:600;
  min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.burger{display:none}.burger svg{stroke:currentColor;stroke-width:1.6;fill:none;width:24px;height:24px}

/* flash */
.flash{background:var(--ever);color:var(--bone);text-align:center;padding:10px;font-size:14px}

/* hero */
.hero{position:relative;background:var(--pine);color:var(--bone);overflow:hidden}
.hero .inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:80px 0}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6vw,78px);line-height:1.03;letter-spacing:-.5px}
.hero h1 em{font-style:italic;color:var(--sage)}
.hero p{margin-top:20px;max-width:430px;color:#cdd9d2;font-size:16px}
.hero .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero-card{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/5;background:var(--ever);display:flex;align-items:flex-end;padding:24px;max-width:380px;margin-left:auto}
.hero-card .fig{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero-card .fig svg{width:60%;stroke:var(--sage);stroke-width:2;fill:none}
.hero-card .band{position:relative;z-index:2;background:rgba(8,40,37,.55);border-radius:6px;padding:12px 16px}
.hero-card .band .k{font-size:11px;letter-spacing:2px;color:var(--sage)}
.hero-card .band .t{font-family:var(--serif);font-size:21px;color:var(--bone)}
.spectrum{position:absolute;left:0;right:0;bottom:0;height:8px;display:flex;z-index:3}.spectrum span{flex:1}

/* sections */
section{padding:76px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:16px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.2vw,40px);color:var(--pine);line-height:1.05}
.link{font-size:13px;font-weight:500;color:var(--ever);border-bottom:1px solid var(--saffron);padding-bottom:3px}

/* categories */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cat{position:relative;border-radius:10px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;padding:28px;color:var(--bone)}
.cat.clothing{background:var(--pine)}.cat.access{background:var(--clay)}
.cat .fig{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);width:44%}
.cat .fig svg{width:100%;stroke:rgba(245,242,235,.85);stroke-width:2;fill:none}
.cat .meta{position:relative;z-index:2}
.cat .meta h3{font-family:var(--serif);font-size:28px;font-weight:600;margin:4px 0 6px}

/* product grid + card */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card .ph{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.card:hover .ph{transform:translateY(-4px)}
.card .ph .picon{width:52%;height:52%;display:flex}
.card .ph .picon svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;fill:none}
.card .tag{position:absolute;top:12px;left:12px;background:rgba(245,242,235,.92);color:var(--pine);font-size:10.5px;font-weight:600;letter-spacing:.5px;padding:4px 9px;border-radius:20px;text-transform:uppercase}
.card .add{position:absolute;bottom:12px;left:12px;right:12px;background:var(--bone);color:var(--pine);border:none;font-family:var(--sans);font-size:13px;font-weight:500;padding:11px;border-radius:5px;cursor:pointer;opacity:0;transform:translateY(8px);transition:.25s}
.card:hover .add{opacity:1;transform:none}
.card .info{display:flex;justify-content:space-between;align-items:baseline;margin-top:13px;gap:10px}
.card .info .name{font-size:14.5px;font-weight:500}
.card .info .cat-l{font-size:11.5px;color:var(--stone)}
.card .info .price{font-family:var(--serif);font-size:17px;color:var(--pine);white-space:nowrap}
@media(hover:none){.card .add{opacity:1;transform:none}}

/* product detail */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pdp .media{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pdp .media .picon{width:46%;height:46%}.pdp .media .picon svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;fill:none}
.pdp h1{font-family:var(--serif);font-size:clamp(30px,4vw,46px);color:var(--pine);font-weight:600;line-height:1.05;margin-top:6px}
.pdp .price{font-family:var(--serif);font-size:26px;color:var(--ever);margin:14px 0}
.pdp .desc{color:#3a423f;margin:18px 0}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:8px 0 18px}
.qty button{width:42px;height:44px;background:#fff;border:none;font-size:18px;cursor:pointer;color:var(--pine)}
.qty input{width:52px;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);font-family:var(--sans);font-size:15px}

/* generic page + forms */
.page{padding:60px 0;min-height:60vh}
.page h1{font-family:var(--serif);font-size:clamp(28px,4vw,42px);color:var(--pine);font-weight:600}
.lead{color:var(--stone);margin-top:8px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:var(--sans);font-size:15px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ever)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* cart + summary */
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}
.line-item{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.line-item .thumb{width:74px;height:90px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center}
.line-item .thumb .picon{width:54%;height:54%}.line-item .thumb svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.2;fill:none}
.line-item .grow{flex:1}
.summary{background:var(--pine);color:var(--bone);border-radius:10px;padding:26px;position:relative;overflow:hidden}
.summary h3{font-family:var(--serif);font-size:22px;margin-bottom:16px}
.summary .r{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;color:#cdd9d2}
.summary .r.total{border-top:1px solid rgba(245,242,235,.2);margin-top:8px;padding-top:14px;color:var(--bone);font-size:18px;font-family:var(--serif)}

/* tracking timeline */
.tl{list-style:none;margin-top:8px}
.tl li{position:relative;padding:0 0 26px 30px}
.tl li::before{content:"";position:absolute;left:7px;top:4px;bottom:-4px;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl li .dot{position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--sage)}
.tl li.done .dot{background:var(--ever);border-color:var(--ever)}
.tl li .st{font-weight:600;color:var(--pine)}
.tl li .note{font-size:13.5px;color:var(--stone)}
.tl li .time{font-size:12px;color:var(--stone)}

/* status badge */
.badge{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.3px;padding:4px 11px;border-radius:20px;text-transform:capitalize}
.b-pending,.b-confirmed{background:#fdf0d8;color:#9a6a14}
.b-processing{background:#dfeaf2;color:#235a78}
.b-shipped,.b-out_for_delivery{background:#e7e0ee;color:#5a3d58}
.b-delivered{background:#dcebe2;color:#2c5a3a}
.b-cancelled{background:#f2dcd6;color:#9a3b2c}

/* footer */
footer.site{background:var(--pine-deep);color:#bcd0c8;padding:56px 0 26px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot-name{font-family:var(--serif);font-size:24px;color:var(--bone);font-weight:600;letter-spacing:2px}
.foot-brand p{margin-top:14px;font-size:14px;max-width:280px;color:#9fb2ab}
.foot-soc{display:flex;gap:12px;margin-top:18px}
.foot-soc a{width:36px;height:36px;border:1px solid rgba(245,242,235,.2);border-radius:50%;display:flex;align-items:center;justify-content:center}
.foot-soc a:hover{background:rgba(245,242,235,.1);border-color:var(--sage)}
.foot-soc svg{width:17px;height:17px;stroke:var(--bone);stroke-width:1.6;fill:none}
.foot-col h5{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sage);margin-bottom:14px;font-weight:600}
.foot-col a{display:block;font-size:14px;padding:5px 0;color:#bcd0c8}.foot-col a:hover{color:var(--bone)}
.foot-bottom{display:flex;justify-content:space-between;margin-top:44px;padding-top:22px;border-top:1px solid rgba(245,242,235,.12);font-size:12.5px;color:#8aa49b;flex-wrap:wrap;gap:10px}

/* ===================== ADMIN ===================== */
.admin{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--pine);color:var(--bone);padding:26px 18px;position:sticky;top:0;height:100vh}
.side .brand{height:22px;color:var(--bone);margin:6px 8px 26px}
.side .brand svg{height:100%}
.side nav a{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:7px;color:#bcd0c8;font-size:14px;font-weight:500;margin-bottom:3px}
.side nav a:hover{background:rgba(245,242,235,.08);color:var(--bone)}
.side nav a.active{background:var(--ever);color:var(--bone)}
.side .out{margin-top:auto;font-size:13px;color:#8aa49b;padding:11px 14px}
.main{padding:34px 38px;background:var(--paper)}
.main h1{font-family:var(--serif);font-size:30px;color:var(--pine);font-weight:600;margin-bottom:4px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 0 34px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}
.stat .k{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--stone)}
.stat .v{font-family:var(--serif);font-size:30px;color:var(--pine);margin-top:6px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:13px 16px;font-size:14px;border-bottom:1px solid var(--line)}
th{background:#f3efe6;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--stone);font-weight:600}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#faf8f2}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs a{font-size:13px;padding:7px 14px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.tabs a.active{background:var(--pine);color:var(--bone);border-color:var(--pine)}
.card-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px;margin-bottom:20px}
.card-box h3{font-family:var(--serif);font-size:19px;color:var(--pine);margin-bottom:14px}
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--pine);position:relative}
.login-box{position:relative;z-index:2;background:var(--paper);border-radius:12px;padding:38px;width:360px;max-width:90%}
.login-box .l{height:26px;color:var(--pine);margin-bottom:18px}.login-box .l svg{height:100%}

@media(max-width:960px){
  .hero .inner{grid-template-columns:1fr;gap:28px;padding:56px 0}
  .hero-card{margin:0 auto}
  .pdp{grid-template-columns:1fr;gap:28px}
  .cart-layout{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .admin{grid-template-columns:1fr}
  .side{position:static;height:auto;display:flex;flex-direction:column}
  .side nav{display:flex;flex-wrap:wrap}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .menu{display:none}.burger{display:flex;background:none;border:none;cursor:pointer;color:var(--ink)}
  .cats{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .row2{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .main{padding:24px 18px}.stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  table{display:block;overflow-x:auto;white-space:nowrap}
}
@media(max-width:400px){.grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* admin order detail responsive */
@media(max-width:860px){ .order-grid{grid-template-columns:1fr !important} }

/* ===================== language toggle ===================== */
.lang-toggle{font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:5px 12px;line-height:1}
.lang-toggle:hover{border-color:var(--pine);color:var(--pine)}
.side .lang-toggle{color:var(--bone);border-color:rgba(245,242,235,.3)}

/* ===================== RTL ===================== */
[dir="rtl"]{text-align:right}
[dir="rtl"] body{font-family:var(--sans)}
[dir="rtl"] .hero p,[dir="rtl"] .hero .cta{ } /* flex handles itself */
[dir="rtl"] .summary .r,[dir="rtl"] .foot-bottom,[dir="rtl"] .sec-head,[dir="rtl"] .nav,
[dir="rtl"] .line-item,[dir="rtl"] .stat,[dir="rtl"] .order-grid{direction:rtl}
[dir="rtl"] .cart-c{right:auto;left:-9px}
[dir="rtl"] .tl li{padding:0 30px 26px 0}
[dir="rtl"] .tl li::before{left:auto;right:7px}
[dir="rtl"] .tl li .dot{left:auto;right:0}
[dir="rtl"] .field label,[dir="rtl"] th,[dir="rtl"] td{text-align:right}
[dir="rtl"] .summary .mono,[dir="rtl"] .hero .mono{transform:scaleX(-1)}
[dir="rtl"] .menu a::after{left:auto;right:0}
[dir="rtl"] .badge{direction:rtl}
/* keep the logo & latin wordmark direction stable */
[dir="rtl"] .logo,[dir="rtl"] .foot-name,[dir="rtl"] .price,[dir="rtl"] .serif{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .info{direction:rtl}
[dir="rtl"] .info .price{direction:ltr}