/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,400&family=Jost:wght@300;400;500&display=swap');

:root{
  --bg:#15101c; --bg-soft:#1d1628; --card:#241c33; --card-2:#2b2240;
  --cream:#efe8f6; --cream-dim:#c3b4d6; --dim2:#8f80a6;
  --amethyst:#a87fd6; --bright:#c6a3ee; --line:rgba(168,127,214,.2);
  --shadow:0 24px 60px -28px rgba(0,0,0,.85); --ink:#1c0f2a; --warn:#e0a458;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:'Jost',sans-serif;font-weight:300;line-height:1.6;overflow-x:hidden;min-height:100vh}
/* full-site background image layer (image + overlay injected by ThemeStyle) */
.site-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;overflow:hidden}
.site-bg .bg-move{position:absolute;inset:-6%;will-change:transform}
/* video background: scale the iframe to cover the viewport, hide controls/edges */
.site-bg-video .bg-move{inset:0}
.site-bg-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100vh;min-width:177.77vh;border:0;pointer-events:none}
a{color:inherit;text-decoration:none}
button{font-family:'Jost';cursor:pointer}
.serif{font-family:'Fraunces',serif}
.wrap{position:relative;z-index:1}
.container{max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,56px)}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px clamp(18px,5vw,56px);border-bottom:1px solid var(--line);position:-webkit-sticky;position:sticky;top:0;z-index:40;
  background:rgba(21,16,28,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{font-family:'Fraunces',serif;font-size:clamp(21px,2.6vw,28px);letter-spacing:.06em}
.brand span{color:var(--amethyst);font-style:italic}
nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nl{background:none;border:none;color:var(--cream-dim);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;transition:color .2s}
.nl:hover{color:var(--bright)}
.pill{border:1px solid var(--line);color:var(--cream);padding:8px 16px;border-radius:30px;background:none;font-size:12.5px;letter-spacing:.1em;display:inline-flex;gap:8px;align-items:center;transition:.2s}
.pill:hover{border-color:var(--amethyst);color:var(--bright)}
.badge{background:var(--amethyst);color:var(--ink);border-radius:20px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;padding:0 6px}

.hero{text-align:center;padding:clamp(54px,9vw,104px) 20px clamp(34px,5vw,60px);max-width:740px;margin:0 auto}
.eyebrow{color:var(--amethyst);letter-spacing:.34em;text-transform:uppercase;font-size:11.5px;margin-bottom:22px}
.hero h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(38px,7.5vw,76px);line-height:1.05}
.hero h1 em{font-style:italic;color:var(--bright)}
.hero p{color:var(--cream-dim);margin-top:20px;font-size:clamp(15px,2vw,18px)}

.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:0 18px 44px}
.filter{background:none;border:1px solid var(--line);color:var(--cream-dim);padding:10px 22px;border-radius:30px;font-size:12.5px;letter-spacing:.1em;transition:.25s}
.filter:hover{color:var(--cream)}
.filter.active{background:var(--amethyst);border-color:var(--amethyst);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:clamp(18px,3vw,34px);gap:clamp(18px,3vw,34px);padding-bottom:90px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(168,127,214,.45)}
.thumb{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 18%, #3c2c54, #18121f 72%);overflow:hidden}
.thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 24%, rgba(198,163,238,.36), transparent 70%)}
.thumb .scent{font-family:'Fraunces',serif;font-style:italic;font-size:25px;position:relative;z-index:1;text-align:center;padding:0 16px;opacity:.92;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.meta{padding:20px 20px 22px;display:flex;flex-direction:column;gap:3px;flex:1 1}
.meta .cat{color:var(--amethyst);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.meta h3{font-family:'Fraunces',serif;font-weight:400;font-size:21px}
.stars{color:var(--bright);font-size:13px;letter-spacing:1px}
.stars .empty{color:var(--dim2)}
.rcount{color:var(--dim2);font-size:12px}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.price{font-family:'Fraunces',serif;font-size:20px}
.add{background:none;border:1px solid var(--amethyst);color:var(--bright);padding:8px 16px;border-radius:30px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;transition:.25s}
.add:hover{background:var(--amethyst);color:var(--ink)}

.detail{display:grid;grid-template-columns:1fr 1fr;grid-gap:48px;gap:48px;padding:50px 0 40px}
@media(max-width:780px){.detail{grid-template-columns:1fr;gap:28px}}
.big{aspect-ratio:1/1;border-radius:8px;background:radial-gradient(120% 120% at 50% 18%, #3c2c54, #18121f 72%);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.big .scent{font-family:'Fraunces',serif;font-style:italic;font-size:44px;z-index:1;text-shadow:0 2px 22px rgba(0,0,0,.5)}
.big::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 22%, rgba(198,163,238,.36), transparent 70%)}
.big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.dcat{color:var(--amethyst);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.detail h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(32px,4vw,46px);margin:8px 0 6px}
.dprice{font-family:'Fraunces',serif;font-size:26px;margin:14px 0}
.ddesc{color:var(--cream-dim);margin-bottom:24px}
.btn{background:var(--amethyst);border:none;color:var(--ink);padding:14px 30px;border-radius:30px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;transition:.25s}
.btn:hover{background:var(--bright)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--cream)}
.btn.ghost:hover{border-color:var(--amethyst);color:var(--bright)}
.back{display:inline-block;color:var(--cream-dim);letter-spacing:.1em;font-size:13px;padding:30px 0 0}
.back:hover{color:var(--bright)}

.reviews{border-top:1px solid var(--line);padding:40px 0 90px}
.reviews h2{font-family:'Fraunces',serif;font-weight:400;font-size:26px;margin-bottom:6px}
.rev{border-bottom:1px solid var(--line);padding:20px 0}
.rev .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rev .who{font-family:'Fraunces',serif;font-size:17px}
.rev .date{color:var(--dim2);font-size:12px}
.rev .body{color:var(--cream-dim);margin-top:6px}
.revform{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;margin-top:24px;max-width:560px}
.ratepick{display:flex;gap:6px;font-size:26px;margin:10px 0 14px}
.ratepick span{color:var(--dim2);transition:.15s;cursor:pointer}
.ratepick span.lit{color:var(--bright)}

.formwrap{max-width:440px;margin:60px auto 90px}
.formwrap.wide{max-width:620px}
.formcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:34px}
.formcard h1{font-family:'Fraunces',serif;font-weight:300;font-size:30px;margin-bottom:6px}
.sub{color:var(--cream-dim);font-size:14px;margin-bottom:22px}
label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);margin:16px 0 7px}
input,textarea,select{width:100%;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;color:var(--cream);padding:12px 14px;font-family:'Jost';font-size:15px;transition:.2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--amethyst)}
textarea{min-height:110px;resize:vertical}
.full{width:100%;margin-top:22px}
.switch{text-align:center;color:var(--cream-dim);margin-top:18px;font-size:14px}
.switch button{background:none;border:none;color:var(--bright);font-size:14px;text-decoration:underline}
.note{background:rgba(224,164,88,.1);border:1px solid rgba(224,164,88,.3);color:#e9c79a;border-radius:8px;padding:12px 14px;font-size:12.5px;margin-bottom:20px;line-height:1.5}
.err{color:#e98a8a;font-size:13px;margin-top:12px;min-height:18px}
.ok{color:#7fd6a8;font-size:13px;margin-top:12px;min-height:18px}

.admin{padding:44px 0 90px}
.admin h1{font-family:'Fraunces',serif;font-weight:300;font-size:38px;margin-bottom:4px}
table{width:100%;border-collapse:collapse;margin-bottom:28px}
th{text-align:left;color:var(--dim2);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:14px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.mini{padding:6px 12px;border-radius:20px;font-size:11px;letter-spacing:.08em;border:1px solid var(--line);background:none;color:var(--cream);margin-right:6px;transition:.2s}
.mini:hover{border-color:var(--amethyst);color:var(--bright)}
.mini.del:hover{border-color:#e98a8a;color:#e98a8a}
.emptystate{color:var(--dim2);font-style:italic;font-family:'Fraunces',serif;padding:30px 0}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.35s;z-index:50}
.overlay.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);z-index:60;background:var(--bg-soft);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .42s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;box-shadow:-30px 0 80px -30px rgba(0,0,0,.9)}
.drawer.open{transform:none}
.dh{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 16px;border-bottom:1px solid var(--line)}
.dh h2{font-family:'Fraunces',serif;font-weight:400;font-size:23px}
.close{background:none;border:none;color:var(--cream-dim);font-size:26px;line-height:1}
.close:hover{color:var(--bright)}
.items{flex:1 1;overflow-y:auto;padding:8px 24px}
.ci{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--line)}
.ci .ct{width:54px;height:54px;border-radius:4px;flex:none;background:radial-gradient(120% 120% at 50% 20%, #3c2c54, #18121f)}
.ci .info{flex:1 1}.ci h4{font-family:'Fraunces',serif;font-weight:400;font-size:15px}
.ci .cs{color:var(--dim2);font-size:12px}
.qty{display:flex;align-items:center;gap:11px;margin-top:7px}
.qty button{width:23px;height:23px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--cream)}
.qty button:hover{border-color:var(--amethyst);color:var(--bright)}
.cp{font-family:'Fraunces',serif;font-size:15px;white-space:nowrap}
.cempty{text-align:center;color:var(--cream-dim);padding:48px 20px;font-style:italic;font-family:'Fraunces',serif}
.df{padding:20px 24px 26px;border-top:1px solid var(--line)}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.tot span:first-child{color:var(--cream-dim);letter-spacing:.1em;font-size:14px}
.tot .g{font-family:'Fraunces',serif;font-size:27px}

footer{border-top:1px solid var(--line);padding:42px 24px;text-align:center;color:var(--cream-dim);font-size:13px;letter-spacing:.06em}
footer .fb{font-family:'Fraunces',serif;font-style:italic;color:var(--amethyst);font-size:19px;margin-bottom:8px}

/* ---- customizable appearance ---- */
.hero-inner{position:relative;z-index:1}
.hero h1,.hero .eyebrow,.hero p{text-shadow:0 2px 24px rgba(0,0,0,.4)}
.filepick{display:block;margin-top:8px}
.appearance-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:18px;gap:18px}
@media(max-width:560px){.appearance-grid{grid-template-columns:1fr}}
.imgbox{border:1px solid var(--line);border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;margin-top:10px}
.imgbox img{width:100%;height:100%;object-fit:cover}
.imgbox .ph{color:var(--dim2);font-style:italic;font-family:'Fraunces',serif;font-size:14px}

/* ---- order status badges ---- */
.ostatus{display:inline-block;padding:5px 12px;border-radius:20px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;height:-moz-fit-content;height:fit-content;border:1px solid var(--line)}
.s-paid{color:#c6a3ee;border-color:rgba(168,127,214,.5)}
.s-processing{color:#e0a458;border-color:rgba(224,164,88,.5)}
.s-shipped{color:#7fd6a8;border-color:rgba(127,214,168,.5)}
.s-delivered{color:#7fd6a8;background:rgba(127,214,168,.12);border-color:rgba(127,214,168,.5)}
.s-canceled{color:#e98a8a;border-color:rgba(233,138,138,.5)}
@media(max-width:560px){.formcard [style*="grid-template-columns: 1fr 1fr 1fr auto"]{grid-template-columns:1fr 1fr !important}}

/* ---- admin dashboard layout ---- */
.admin-shell{display:flex;gap:34px;align-items:flex-start;padding:44px 0 90px}
.admin-side{position:-webkit-sticky;position:sticky;top:88px;flex:0 0 220px;display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:12px;padding:16px 12px}
.admin-side h1{font-family:'Fraunces',serif;font-weight:300;font-size:30px;margin:0 6px 14px}
.snav{background:none;border:none;text-align:left;color:var(--cream-dim);padding:11px 14px;border-radius:8px;font-size:14.5px;cursor:pointer;transition:.18s;display:flex;justify-content:space-between;align-items:center;gap:8px}
.snav:hover{color:var(--cream);background:rgba(255,255,255,.06)}
.snav.on{background:var(--amethyst);color:var(--ink);font-weight:500}
.snav .num{font-size:11px;opacity:.65;background:rgba(255,255,255,.08);border-radius:20px;padding:1px 8px}
.snav.on .num{background:rgba(0,0,0,.15);opacity:.8}
.admin-main{flex:1 1;min-width:0}
.admin-main .formcard{max-width:none}
.order-controls{display:grid;grid-template-columns:1fr 1fr 1fr auto;grid-gap:10px;gap:10px;align-items:end}
@media(max-width:760px){
  .admin-shell{flex-direction:column;gap:16px}
  .admin-side{position:static;flex:none;width:100%;flex-direction:row;flex-wrap:wrap}
  .admin-side h1{width:100%;margin-bottom:6px}
  .snav{flex:1 1 auto;justify-content:center}
  .order-controls{grid-template-columns:1fr 1fr}
}

/* ---- sold out badge ---- */
.soldout{color:var(--dim2);border:1px solid var(--line);padding:8px 16px;border-radius:30px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---- dashboard stat cards ---- */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:16px;gap:16px}
@media(max-width:880px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px}
.stat-n{font-family:'Fraunces',serif;font-size:30px;line-height:1}
.stat-l{color:var(--cream-dim);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}

/* ---- theme editor controls ---- */
.color-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px;gap:14px}
@media(max-width:560px){.color-grid{grid-template-columns:1fr}}
.color-row{display:flex;align-items:center;gap:12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.color-row input[type=color]{width:42px;height:42px;padding:0;border:none;border-radius:8px;background:none;cursor:pointer;flex:none}
.color-row input[type=color]::-webkit-color-swatch{border:1px solid var(--line);border-radius:6px}
input[type=range]{accent-color:var(--amethyst);height:6px}

/* ---- editable footer + header bar ---- */
.topbar{text-align:center;background:var(--amethyst);color:var(--ink);font-size:12.5px;letter-spacing:.1em;padding:8px 16px;position:relative;z-index:2}
.foot-links{display:flex;gap:20px;justify-content:center;margin-top:12px}
.foot-links a{color:var(--bright);font-size:13px;letter-spacing:.08em;text-decoration:none;transition:.2s}
.foot-links a:hover{color:var(--cream)}
.foot-note{margin-top:14px;color:var(--dim2);font-size:12px}

/* ---- cart line remove button ---- */
.cright{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px}
.ci-remove{background:none;border:none;color:var(--dim2);font-size:18px;line-height:1;cursor:pointer;transition:color .2s;padding:0}
.ci-remove:hover{color:#e98a8a}

/* ---- custom page content ---- */
.page-blocks .pb-heading{font-weight:400;font-size:clamp(22px,3vw,30px);margin:28px 0 10px}
.page-blocks .pb-text{color:var(--cream-dim);font-size:16px;line-height:1.8;margin-bottom:16px;white-space:pre-line}
.page-blocks .pb-image{margin:22px 0}
.page-blocks .pb-image img{width:100%;border-radius:10px;border:1px solid var(--line)}
.page-blocks .pb-image figcaption{color:var(--dim2);font-size:13px;text-align:center;margin-top:8px;font-style:italic}

/* =====================================================================
   MOBILE RESPONSIVENESS — comprehensive pass
   ===================================================================== */
@media (max-width: 720px) {
  /* Header: brand on the left of the top row, nav links wrap below */
  header { padding: 14px 18px; gap: 10px 14px; }
  .brand { font-size: 22px; }
  nav { gap: 14px; flex-wrap: wrap; row-gap: 10px; justify-content: flex-end; }
  .nl { font-size: 12px; letter-spacing: .1em; }
  .pill { padding: 7px 13px; font-size: 12px; }

  /* Hero: smaller, tighter */
  .hero { padding: 48px 18px 30px; }

  /* Product grid: comfortable single/double column with bigger tap targets */
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding-bottom: 60px; }
  .meta { padding: 14px 14px 16px; }
  .meta h3 { font-size: 18px; }
  .add, .soldout { padding: 9px 14px; }

  /* Product detail stacks (already at 780 via .detail), tighten spacing */
  .detail { padding: 28px 0 24px; }

  /* Cart drawer near full-width on phones */
  .drawer { width: 100vw; }

  /* Forms / cards: less padding so content isn't cramped */
  .formcard { padding: 22px 18px; }
  .formwrap, .formwrap.wide { margin: 32px auto 60px; }

  /* Inputs at 16px+ to stop iOS auto-zoom on focus */
  input, textarea, select { font-size: 16px; }

  /* Footer links wrap nicely */
  .foot-links { gap: 16px; flex-wrap: wrap; }
}

/* Tap targets: ensure interactive controls are finger-friendly everywhere */
@media (max-width: 720px) {
  .qty button { width: 30px; height: 30px; }
  .filter { padding: 11px 18px; }
  button, .btn, .pill, .nl, .add { min-height: 40px; }
  .nl { display: inline-flex; align-items: center; }
}

/* Very small phones */
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .meta h3 { font-size: 16px; }
  .hero h1 { font-size: 34px; }
}

/* Admin on mobile: cards full-bleed-ish, order controls already collapse */
@media (max-width: 720px) {
  .admin-shell { padding: 24px 0 70px; }
  .order-controls { grid-template-columns: 1fr 1fr; }
  .stat-grid { gap: 10px; }
  .stat { padding: 16px; }
  .stat-n { font-size: 24px; }
}

/* ---- message inbox (Gmail-style) ---- */
.inbox{display:grid;grid-template-columns:300px 1fr;min-height:440px}
.inbox-list{border-right:1px solid var(--line);overflow-y:auto;max-height:600px}
.inbox-head{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px;border-bottom:1px solid var(--line);font-family:'Fraunces',serif;font-size:18px}
.inbox-row{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:13px 18px;cursor:pointer;transition:background .15s}
.inbox-row:hover{background:rgba(255,255,255,.04)}
.inbox-row.active{background:rgba(168,127,214,.12)}
.inbox-row.unread{border-left:3px solid var(--amethyst)}
.inbox-row.unread .ir-name{font-weight:500;color:var(--cream)}
.ir-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ir-name{font-size:14px;color:var(--cream-dim)}
.ir-date{font-size:11px;color:var(--dim2);white-space:nowrap}
.ir-snippet{font-size:12.5px;color:var(--dim2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-read{padding:22px 24px;overflow-y:auto;max-height:600px}
.inbox-empty{color:var(--dim2);font-style:italic;font-family:'Fraunces',serif;display:flex;align-items:center;justify-content:center;height:100%;min-height:300px}
.inbox-back{display:none;background:none;border:none;color:var(--amethyst);cursor:pointer;margin-bottom:12px;font-size:13px}
@media(max-width:720px){
  .inbox{grid-template-columns:1fr}
  .inbox-list.has-open{display:none}
  .inbox-read{border-top:1px solid var(--line)}
  .inbox-read:not(.has-open) .inbox-empty{display:none}
  .inbox-back{display:inline-block}
}