:root{
  --green:#2d7438;
  --green-dark:#1f5c2c;
  --green-pale:#edf7ec;
  --cream:#f7f0e5;
  --paper:#fffaf3;
  --ink:#172019;
  --muted:#727972;
  --line:#dfd5c7;
  --danger:#ae4444;
  --shadow:0 8px 24px rgba(75,54,34,.09);
}
*{box-sizing:border-box}
html,body,#app{min-height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--cream);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
input,select,textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffdf9;
  color:var(--ink);
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:#7aa27d;box-shadow:0 0 0 3px rgba(45,116,56,.10)
}
.primary,.secondary,.danger,.nav-btn{
  border:0;border-radius:9px;padding:10px 13px;font-weight:800
}
.primary{background:var(--green);color:#fff}
.primary:hover{background:#276633}
.secondary{background:#fff;color:var(--ink);border:1px solid #d6ddd4}
.danger{background:#fff1f0;color:var(--danger);border:1px solid #efc7c3}
.message{padding:10px 12px;border-radius:10px;margin:12px 0}
.message.error{background:#fff0f0;color:#8f3737}
.message.success{background:#eef7eb;color:#315f2c}
.spinner{padding:40px;text-align:center;color:var(--muted)}

/* Login */
.center-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:30px;
  background:
    linear-gradient(90deg,rgba(248,242,232,.94),rgba(248,242,232,.70)),
    url("login-bg.jpg") center/cover no-repeat;
}
.auth-card{
  width:min(420px,100%);
  background:rgba(255,251,244,.95);
  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;
  padding:28px;
  box-shadow:0 24px 65px rgba(35,28,20,.23);
}
.auth-logo{display:block;width:225px;height:auto;margin:0 auto 12px}
.auth-card h1{text-align:center;margin:0 0 8px;font-size:25px}
.auth-card p{text-align:center;color:var(--muted)}
.auth-tagline{
  font-family:"Segoe Script","Bradley Hand","Brush Script MT",cursive;
  font-size:22px!important;line-height:1.1;color:#33291f!important
}
.auth-sub{font-size:10px!important;letter-spacing:.14em;font-weight:800}

/* Desktop */
.app-shell{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:100vh}
.sidebar{
  background:#101713;color:#fff;padding:16px 12px;
  position:sticky;top:0;height:100vh
}
.brand{
  text-align:center;padding:4px 4px 14px;
  border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px
}
.desktop-logo-plate{
  width:142px;min-height:82px;margin:0 auto 8px;background:#fffdf9;border-radius:11px;
  display:flex;align-items:center;justify-content:center;padding:6px
}
.desktop-logo{display:block;width:126px;max-height:68px;object-fit:contain}
.mobile-logo{display:none}
.brand-copy strong{display:block;font-size:13px}
.brand-copy small{display:block;font-size:8px;letter-spacing:.11em;color:#b1bbb2;margin-top:3px}
.desktop-nav{display:flex;flex-direction:column;gap:6px}
.nav-btn{background:transparent;color:#fff;text-align:left;padding:10px 11px;font-size:13px}
.nav-btn.active,.nav-btn:hover{background:var(--green)}
.mobile-bottom-nav,.mobile-more-menu{display:none}

.content{
  width:100%;
  padding:24px 28px 40px;
  background:
    radial-gradient(circle at 93% 7%,rgba(172,144,109,.08),transparent 290px),
    linear-gradient(180deg,#fbf7f0,#f4ecdf);
}
.page-head{
  position:relative;
  min-height:112px;
  padding:18px 20px;
  margin-bottom:18px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  overflow:hidden;
  border:1px solid #e1d6c8;border-radius:18px;box-shadow:var(--shadow);
  background:
    linear-gradient(90deg,rgba(255,251,244,.99) 0%,rgba(255,251,244,.97) 56%,rgba(255,251,244,.70) 72%,rgba(255,251,244,.18) 100%),
    url("approved-vintage-decor.jpg") right center/430px 100% no-repeat;
}
.page-head h1{margin:0 0 4px;font-family:Georgia,"Times New Roman",serif;font-size:28px}
.page-head p{margin:0;color:var(--muted);font-size:13px;max-width:620px}
.script-accent{
  margin-top:5px;
  font-family:"Segoe Script","Bradley Hand","Brush Script MT",cursive;
  font-size:15px;color:#5d4635
}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:22px}
.metric{
  min-height:92px;padding:14px;border:1px solid #d8e3d5;border-radius:12px;
  background:linear-gradient(145deg,#f4faf2,#e9f4e7);box-shadow:var(--shadow)
}
.metric span{display:block;color:#697268;font-size:11px;font-weight:750}
.metric strong{display:block;margin-top:6px;color:#18592c;font-size:23px}
h2{font-size:22px;margin:16px 0 12px}
.card,.panel{background:var(--paper);border:1px solid #e2d8cb;border-radius:14px;box-shadow:var(--shadow)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,290px));gap:13px}
.item-card{padding:11px}
.item-card img,.photo-placeholder{width:100%;height:175px;border-radius:9px;object-fit:cover;background:#eef1ec}
.photo-placeholder{display:grid;place-items:center;color:#909890}
.item-title-row,.item-footer{display:flex;justify-content:space-between;gap:8px;align-items:center}
.item-card h3{font-size:15px;line-height:1.25;margin:10px 0 4px}
.meta{font-size:12px;color:var(--muted)}
.pill{font-size:10px;font-weight:800;padding:5px 8px;border-radius:999px;background:#dcf0db;color:#266630}
.pill.sold{background:#f6dfdb;color:#8b3535}
.pill.sale{background:#fff0cf;color:#8a5b00}
.price-line{margin:8px 0;font-size:13px}
.old-price{text-decoration:line-through;color:var(--muted)}
.sale-price{color:#a84444}
.sale-note{font-size:11px;font-weight:800;color:#8a5b00;background:#fff7df;padding:6px 8px;border-radius:7px}
.item-footer{border-top:1px solid #ebe6de;padding-top:8px;margin-top:8px}
.profit{color:var(--green);font-weight:800}
.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.actions button{font-size:11px;padding:7px 9px}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{max-width:230px}
.panel{padding:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.full{grid-column:1/-1}
.preview{display:block;width:100%;max-width:330px;height:220px;object-fit:cover;margin-top:10px;border-radius:10px}
.empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;background:#fffdf9}
table{width:100%;border-collapse:collapse;background:#fffdf9;border-radius:12px;overflow:hidden}
th,td{padding:11px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
th{background:#f2ece2}
.small{font-size:12px;color:var(--muted)}

/* Photo */
.photo-upload-box{
  position:relative;display:flex;align-items:center;gap:12px;min-height:76px;padding:12px;
  border:1px dashed #bdcbbb;border-radius:11px;background:#fafcf8;overflow:hidden
}
.photo-upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo-action-icon{width:44px;height:44px;border-radius:11px;background:#e3f1e1;display:grid;place-items:center;font-size:20px}
.photo-upload-box strong{display:block;color:#1d552c}
.photo-upload-box span{display:block;font-size:11px;color:var(--muted);margin-top:2px}

/* Pricing */
.pricing-calculator{border:1px solid #d7ccbd;background:#fff8ed;border-radius:13px;padding:14px}
.pricing-title-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pricing-title-row h3{margin:0 0 4px}
.pricing-title-row p{margin:0;color:var(--muted);font-size:12px}
.pricing-badge{background:#e7f2e5;color:#276530;font-size:11px;font-weight:800;padding:6px 8px;border-radius:999px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.readout{min-height:42px;display:flex;align-items:center;padding:10px;border:1px solid var(--line);border-radius:9px;background:white;font-weight:800}
.readout.recommended{color:var(--green);font-size:18px}
.quick-markups{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.quick-markups>span{font-size:11px;color:var(--muted);font-weight:700}
.markup-chip{border:1px solid #bfd0bb;background:white;color:var(--green-dark);border-radius:999px;padding:6px 9px;font-weight:800}
.profit-box{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#eaf4e7;padding:12px;border-radius:11px;margin-top:12px}
.profit-box span{display:block;font-size:11px;color:var(--muted)}
.profit-box strong{font-size:19px;color:var(--green)}

/* Flash sale */
.flash-list{display:grid;gap:8px}
.flash-item-row{display:grid;grid-template-columns:auto 55px 1fr auto;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:10px;background:white}
.flash-item-row input{width:auto}
.flash-item-row img,.flash-thumb-placeholder{width:55px;height:48px;object-fit:cover;border-radius:7px}
.flash-item-info{display:flex;flex-direction:column;gap:2px}
.flash-item-info span{font-size:11px;color:var(--muted)}
.flash-item-price{text-align:right}

/* Mobile */
@media(max-width:950px){
  .app-shell{display:block;padding-bottom:82px}
  .sidebar{position:sticky;top:0;z-index:30;height:auto;padding:0;background:#fff;border-bottom:1px solid #e5d9ca}
  .brand{
    position:relative;display:flex;align-items:center;justify-content:flex-start;
    min-height:126px;padding:14px 16px;margin:0;border:0;
    background:
      linear-gradient(90deg,rgba(251,247,239,.99) 0%,rgba(251,247,239,.96) 36%,rgba(251,247,239,.46) 66%,rgba(251,247,239,.05) 100%),
      url("approved-vintage-decor.jpg") right center/auto 126px no-repeat;
  }
  .desktop-logo-plate,.desktop-logo,.brand-copy,.desktop-nav{display:none!important}
  .mobile-logo{display:block;width:160px;max-width:46vw;max-height:92px;object-fit:contain}
  .content{padding:16px 15px 28px}
  .page-head{
    min-height:112px;padding:16px 16px;margin-bottom:15px;
    background:
      linear-gradient(90deg,rgba(255,251,244,.99),rgba(255,251,244,.97) 62%,rgba(255,251,244,.55) 82%,rgba(255,251,244,.12)),
      url("approved-vintage-decor.jpg") right center/270px 112px no-repeat
  }
  .page-head h1{font-family:Inter,system-ui,sans-serif;font-size:28px}
  .page-head p{font-size:13px;max-width:62%}
  .script-accent{font-size:12px}
  .page-head .primary{font-size:12px;padding:10px 12px}
  .metrics{grid-template-columns:repeat(2,1fr);gap:10px}
  .metric{min-height:96px;padding:14px}
  .metric span{font-size:11px}
  .metric strong{font-size:23px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
  .full{grid-column:auto}

  .mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:#fff;border-top:1px solid #dddeda;box-shadow:0 -4px 18px rgba(0,0,0,.07);
    padding:5px 5px calc(5px + env(safe-area-inset-bottom))
  }
  .mobile-nav-btn{
    border:0;background:transparent;color:#525852;min-height:55px;padding:4px 2px;
    font-size:10px;font-weight:750;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:10px
  }
  .mobile-nav-btn.active{color:var(--green);background:#edf7ed}
  .nav-icon{font-size:20px;line-height:1}
  .mobile-add{
    color:#fff!important;background:var(--green)!important;border-radius:50%;
    width:60px;height:60px;justify-self:center;transform:translateY(-14px);
    box-shadow:0 7px 18px rgba(47,113,56,.23)
  }
  .mobile-more-menu{
    display:grid;position:fixed;right:12px;bottom:78px;z-index:50;min-width:175px;padding:8px;
    background:#fffaf3;border:1px solid var(--line);border-radius:13px;box-shadow:0 14px 34px rgba(0,0,0,.16)
  }
  .mobile-more-item{border:0;background:transparent;text-align:left;padding:11px;border-radius:8px;font-weight:750}
  .mobile-more-item.active,.mobile-more-item:hover{background:#edf7ed;color:var(--green)}
}

@media(max-width:620px){
  .brand{min-height:112px;padding:10px 14px;background-size:auto 112px}
  .mobile-logo{width:148px;max-width:45vw;max-height:82px}

  .content{padding:14px 14px 30px}
  .page-head{min-height:104px;padding:14px 13px;background-size:245px 104px}
  .page-head h1{font-size:25px}
  .page-head p{font-size:12px;max-width:58%}
  .script-accent{font-size:11px}
  .page-head .primary{font-size:11px;padding:9px 10px;max-width:120px}

  .metrics{gap:9px}
  .metric{min-height:86px;padding:12px}
  .metric span{font-size:10px}
  .metric strong{font-size:21px}
  h2{font-size:21px;margin:18px 0 11px}

  .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filters input{grid-column:1/-1;max-width:none}
  .filters select{max-width:none}
  .filters input,.filters select{padding:9px 10px;font-size:12px}

  .card-grid{grid-template-columns:1fr;gap:9px}
  .item-card{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:11px;padding:10px}
  .item-card img,.photo-placeholder{width:88px;height:88px;grid-column:1;grid-row:1/7}
  .item-title-row,.item-card>.meta,.price-line,.sale-note,.item-footer,.item-card>.actions{grid-column:2}
  .item-card h3{margin:0 0 3px;font-size:14px;line-height:1.2}
  .meta{font-size:10px}
  .price-line{font-size:12px;margin:5px 0}
  .profit{font-size:11px}
  .item-footer{margin-top:3px;padding-top:5px}
  .item-card>.actions{gap:4px;margin-top:6px}
  .item-card>.actions button{font-size:9px;padding:6px}

  .panel{padding:13px;box-shadow:none}
  .form-grid{gap:10px}
  label{font-size:11px}
  .photo-upload-box{min-height:68px;padding:10px}
  input,select,textarea{padding:9px 10px;font-size:13px}
  .pricing-calculator{padding:11px}
  .pricing-title-row{display:block}
  .pricing-badge{display:inline-block;margin-top:7px}
  .pricing-grid{grid-template-columns:1fr 1fr;gap:7px}
  .pricing-grid>div:last-child{grid-column:1/-1}
  .quick-markups{gap:5px}
  .markup-chip{font-size:10px;padding:5px 7px}
  .profit-box{gap:5px;padding:9px}
  .profit-box span{font-size:9px}
  .profit-box strong{font-size:15px}
  table{display:block;overflow-x:auto}
  th,td{font-size:10px;padding:8px}
}


/* =========================================================
   DESKTOP ONLY FIX
   Mobile/tablet rules below 951px are intentionally untouched.
   ========================================================= */

@media(min-width:951px){

  .app-shell{
    grid-template-columns:220px minmax(0,1fr)!important;
    background:#f5eee3!important;
  }

  .sidebar{
    width:220px!important;
    padding:18px 14px!important;
  }

  .desktop-logo-plate{
    width:168px!important;
    min-height:98px!important;
    margin-bottom:10px!important;
  }

  .desktop-logo{
    width:150px!important;
    max-height:82px!important;
  }

  .brand-copy strong{
    font-size:15px!important;
  }

  .brand-copy small{
    font-size:9px!important;
    letter-spacing:.12em!important;
  }

  .nav-btn{
    font-size:14px!important;
    padding:11px 12px!important;
  }

  .content{
    width:100%!important;
    max-width:1500px!important;
    margin:0 auto!important;
    padding:28px 34px 48px!important;
    background:
      radial-gradient(circle at 92% 6%,rgba(173,145,110,.09),transparent 330px),
      linear-gradient(180deg,#fbf7f0,#f4ecdf)!important;
  }

  .page-head{
    min-height:138px!important;
    padding:24px 28px!important;
    margin-bottom:22px!important;
    border-radius:22px!important;
    background:
      linear-gradient(90deg,
        rgba(255,251,244,.99) 0%,
        rgba(255,251,244,.98) 50%,
        rgba(255,251,244,.80) 65%,
        rgba(255,251,244,.18) 100%
      ),
      url("approved-vintage-decor.jpg") right center/470px 138px no-repeat!important;
  }

  .page-head h1{
    font-size:34px!important;
  }

  .page-head p{
    font-size:15px!important;
    max-width:650px!important;
  }

  .script-accent{
    font-size:17px!important;
  }

  .page-head .primary{
    font-size:14px!important;
    padding:13px 18px!important;
  }

  .metrics{
    grid-template-columns:repeat(4,minmax(210px,1fr))!important;
    gap:16px!important;
    margin-bottom:28px!important;
  }

  .metric{
    min-height:120px!important;
    padding:20px!important;
    border-radius:16px!important;
  }

  .metric span{
    font-size:13px!important;
  }

  .metric strong{
    font-size:30px!important;
    margin-top:8px!important;
  }

  .content > h2{
    font-size:28px!important;
    margin:24px 0 16px!important;
  }

  .card-grid{
    grid-template-columns:repeat(auto-fit,minmax(300px,340px))!important;
    gap:18px!important;
    max-width:1180px!important;
    justify-content:start!important;
  }

  .item-card{
    padding:16px!important;
    border-radius:18px!important;
  }

  .item-card img,
  .photo-placeholder{
    height:240px!important;
    border-radius:12px!important;
  }

  .item-card h3{
    font-size:18px!important;
    line-height:1.25!important;
  }

  .meta{
    font-size:13px!important;
  }

  .price-line{
    font-size:16px!important;
  }

  .profit{
    font-size:15px!important;
  }

  .actions button{
    font-size:12px!important;
    padding:9px 11px!important;
  }

  .filters{
    display:grid!important;
    grid-template-columns:minmax(320px,1.5fr) repeat(3,minmax(180px,.8fr))!important;
    gap:12px!important;
    max-width:1180px!important;
  }

  .filters input,
  .filters select{
    max-width:none!important;
  }

  .panel,
  .flash-panel,
  table{
    max-width:1180px!important;
  }

  .panel{
    padding:22px!important;
  }

  .form-grid{
    gap:15px!important;
  }

  .pricing-calculator{
    padding:18px!important;
  }
}

/* Multiple item photos */
.photo-preview-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.photo-preview-tile{position:relative;width:112px}
.photo-preview-tile img{display:block;width:112px;height:92px;object-fit:cover;border-radius:10px;border:1px solid #ddd2c2;background:#fff}
.photo-preview-tile span{display:block;margin-top:4px;font-size:10px;color:var(--muted);text-align:center}
.remove-photo{position:absolute;top:5px;right:5px;width:25px;height:25px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#a33;font-size:18px;line-height:22px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}
@media(max-width:950px){.photo-preview-tile,.photo-preview-tile img{width:88px}.photo-preview-tile img{height:76px}}


/* =========================================================
   ITEM DETAILS + PHOTO ORDERING
   ========================================================= */

.item-open-target{cursor:pointer}
.item-card h3.item-open-target:hover{text-decoration:underline}

.photo-preview-tile{cursor:grab}
.photo-preview-tile.dragging{opacity:.55}
.photo-order-controls{
  display:flex;
  justify-content:center;
  gap:4px;
  margin-top:5px;
}
.photo-order-controls button{
  width:28px;
  height:26px;
  padding:0;
  border:1px solid #d8d2c7;
  border-radius:7px;
  background:#fff;
  font-weight:800;
  cursor:pointer;
}
.photo-order-controls button:disabled{
  opacity:.3;
  cursor:default;
}
.photo-order-controls .remove-photo{
  position:static;
  color:#a63b3b;
  border-color:#efcaca;
  background:#fff6f5;
}

.item-detail-layout{
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(480px,1.1fr);
  gap:20px;
  max-width:1180px;
}
.item-detail-gallery,.item-detail-info{padding:18px}
.detail-main-photo{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#eee8df;
}
.detail-main-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  background:#f6f1e9;
}
.detail-thumbnails{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.detail-thumb{
  width:78px;
  height:66px;
  border:2px solid transparent;
  border-radius:9px;
  padding:2px;
  background:#fff;
  cursor:pointer;
}
.detail-thumb.active{border-color:var(--green)}
.detail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:6px;
}
.detail-title-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  border-bottom:1px solid #e7dfd3;
  padding-bottom:14px;
}
.detail-title-row h2{
  margin:0 0 6px;
  font-size:26px;
  line-height:1.2;
}
.detail-pricing{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:10px;
  margin:16px 0;
}
.detail-pricing>div{
  padding:12px;
  border-radius:12px;
  background:#edf6ed;
}
.detail-pricing span,.detail-field span,.detail-description>span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  margin-bottom:4px;
}
.detail-pricing strong{font-size:18px}
.detail-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
  padding:14px 0;
  border-top:1px solid #e7dfd3;
  border-bottom:1px solid #e7dfd3;
}
.detail-field strong{
  display:block;
  font-size:14px;
  word-break:break-word;
}
.detail-description{padding-top:16px}
.detail-description p{
  margin:6px 0 0;
  line-height:1.55;
  white-space:normal;
}
.detail-actions{margin-top:18px}

@media(max-width:950px){
  .item-detail-layout{
    grid-template-columns:1fr;
    gap:12px;
    max-width:100%;
  }
  .item-detail-gallery,.item-detail-info{padding:12px}
  .detail-main-photo img{aspect-ratio:1/1}
  .detail-thumbnails{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:3px;
  }
  .detail-thumb{
    min-width:68px;
    width:68px;
    height:58px;
  }
  .detail-title-row h2{font-size:20px}
  .detail-pricing{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .detail-pricing strong{font-size:16px}
  .detail-fields{grid-template-columns:1fr 1fr}
  .detail-actions button{font-size:11px}
}


/* CLEAN MOBILE TOOLBAR — isolated from desktop */
.mobile-topbar{display:none}
@media(max-width:950px){
  html,body,#app,.app-shell,.content{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .sidebar{position:sticky!important;top:0!important;z-index:30!important;width:100%!important;height:auto!important;padding:0!important;background:#fffaf2!important;border-bottom:1px solid #ded3c4!important}
  .brand{display:block!important;width:100%!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:#fffaf2!important;text-align:left!important}
  .brand::before,.brand::after{display:none!important;content:none!important}
  .desktop-logo,.brand-copy,.desktop-nav,.mobile-logo{display:none!important}
  .mobile-topbar{box-sizing:border-box!important;display:grid!important;grid-template-columns:112px minmax(0,1fr) auto!important;align-items:center!important;gap:11px!important;width:100%!important;max-width:100%!important;height:72px!important;padding:8px 12px!important;background:linear-gradient(90deg,#fffaf2 0%,#fffdf8 72%,#f2eadc 100%)!important;box-shadow:0 3px 14px rgba(74,56,35,.07)!important}
  .mobile-topbar-logo{display:block!important;width:108px!important;max-width:108px!important;height:54px!important;object-fit:contain!important;object-position:left center!important;background:transparent!important}
  .mobile-topbar-copy{min-width:0!important;line-height:1.1!important}
  .mobile-topbar-copy strong{display:block!important;margin:0 0 4px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#17251b!important;font-size:15px!important;font-weight:850!important;letter-spacing:-.2px!important}
  .mobile-topbar-copy span{display:block!important;color:#6e766f!important;font-size:10px!important;font-weight:700!important;white-space:nowrap!important}
  .mobile-topbar-actions{display:flex!important;align-items:center!important;gap:6px!important}
  .mobile-topbar-btn{width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;border:1px solid #d6dfd3!important;border-radius:50%!important;background:#edf5e9!important;color:#2f7138!important;font-size:18px!important;font-weight:800!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}
  .content{padding-top:14px!important}
}
@media(max-width:420px){
  .mobile-topbar{grid-template-columns:98px minmax(0,1fr) auto!important;gap:8px!important;height:68px!important;padding:7px 9px!important}
  .mobile-topbar-logo{width:96px!important;max-width:96px!important;height:50px!important}
  .mobile-topbar-copy strong{font-size:13px!important}
  .mobile-topbar-copy span{font-size:9px!important}
  .mobile-topbar-actions{gap:4px!important}
  .mobile-topbar-btn{width:31px!important;height:31px!important;min-width:31px!important;font-size:16px!important}
}


/* =========================================================
   MOBILE REFINEMENT — 2026-09-15
   Keeps the successful mobile structure and desktop intact.
   ========================================================= */
@media(max-width:950px){
  /* More balanced, compact top toolbar */
  .mobile-topbar{
    grid-template-columns:92px minmax(0,1fr) auto!important;
    height:66px!important;
    gap:9px!important;
    padding:7px 11px!important;
  }
  .mobile-topbar-logo{
    width:88px!important;
    max-width:88px!important;
    height:47px!important;
  }
  .mobile-topbar-copy strong{
    font-size:14px!important;
    letter-spacing:-.15px!important;
  }
  .mobile-topbar-copy span{
    font-size:9.5px!important;
  }
  .mobile-topbar-btn{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    font-size:17px!important;
  }

  /* Clean Dashboard banner: no text-containing source image */
  .page-head{
    min-height:110px!important;
    padding:16px 17px!important;
    margin-bottom:15px!important;
    border-radius:18px!important;
    background:
      linear-gradient(90deg,
        rgba(255,251,244,1) 0%,
        rgba(255,251,244,.99) 51%,
        rgba(255,251,244,.92) 64%,
        rgba(255,251,244,.38) 100%
      ),
      url("vintage-objects.jpg") right center/205px 110px no-repeat!important;
  }
  .page-head h1{
    font-size:27px!important;
    line-height:1.05!important;
  }
  .page-head p{
    font-size:12.5px!important;
    max-width:45%!important;
    line-height:1.35!important;
  }
  .page-head .primary{
    position:relative!important;
    z-index:2!important;
    max-width:132px!important;
    padding:10px 12px!important;
    font-size:11.5px!important;
    white-space:nowrap!important;
  }
}

@media(max-width:420px){
  .mobile-topbar{
    grid-template-columns:82px minmax(0,1fr) auto!important;
    height:63px!important;
    gap:7px!important;
    padding:6px 8px!important;
  }
  .mobile-topbar-logo{
    width:79px!important;
    max-width:79px!important;
    height:44px!important;
  }
  .mobile-topbar-copy strong{font-size:12.5px!important}
  .mobile-topbar-copy span{font-size:8.7px!important}
  .mobile-topbar-actions{gap:4px!important}
  .mobile-topbar-btn{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    font-size:16px!important;
  }

  .page-head{
    min-height:106px!important;
    padding:14px!important;
    background:
      linear-gradient(90deg,
        rgba(255,251,244,1) 0%,
        rgba(255,251,244,.99) 54%,
        rgba(255,251,244,.90) 67%,
        rgba(255,251,244,.34) 100%
      ),
      url("vintage-objects.jpg") right center/180px 106px no-repeat!important;
  }
  .page-head h1{font-size:25px!important}
  .page-head p{font-size:11.5px!important;max-width:43%!important}
  .page-head .primary{
    max-width:122px!important;
    padding:9px 10px!important;
    font-size:10.5px!important;
  }
}


/* =========================================================
   MOBILE DASHBOARD CLEANUP — 2026-09-15
   Removes redundant banner Add button and guarantees a
   completely clean text zone on the left.
   ========================================================= */
@media(max-width:950px){
  /* The mobile bottom navigation already provides Add Item. */
  .page-head .primary{
    display:none!important;
  }

  .page-head{
    min-height:106px!important;
    padding:16px 17px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    background:
      linear-gradient(90deg,
        #fffaf2 0%,
        #fffaf2 56%,
        rgba(255,250,242,.98) 62%,
        rgba(255,250,242,.80) 72%,
        rgba(255,250,242,.28) 100%
      ),
      url("vintage-objects.jpg") right center/190px 106px no-repeat!important;
  }

  .page-head h1{
    position:relative!important;
    z-index:2!important;
    margin-bottom:7px!important;
  }

  .page-head p{
    position:relative!important;
    z-index:2!important;
    max-width:42%!important;
    margin:0!important;
  }
}

@media(max-width:420px){
  .page-head{
    min-height:102px!important;
    padding:14px!important;
    background:
      linear-gradient(90deg,
        #fffaf2 0%,
        #fffaf2 58%,
        rgba(255,250,242,.98) 64%,
        rgba(255,250,242,.80) 73%,
        rgba(255,250,242,.28) 100%
      ),
      url("vintage-objects.jpg") right center/172px 102px no-repeat!important;
  }
  .page-head p{max-width:44%!important}
}


/* =========================================================
   CONSOLIDATED BOTANICAL MOBILE DESIGN
   Dashboard + Inventory + Sales
   One shared mobile styling block to prevent page conflicts.
   ========================================================= */

.brand-slogan{
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-weight:500;
  color:#171d18;
  line-height:1.08;
  transform:rotate(-2deg);
}
.brand-slogan span{font-size:1.15em}

@media(max-width:950px){
  html,body,#app,.app-shell,.content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  html,body,#app{overflow-x:hidden!important}

  /* Shared mobile header. Ivy is built from the botanical image itself,
     so there is no screenshot/status-bar imagery baked into the app. */
  .mobile-topbar{
    position:relative!important;
    overflow:visible!important;
  }
  .mobile-topbar::before{
    content:""!important;
    position:absolute!important;
    left:-8px!important;
    top:-7px!important;
    width:78px!important;
    height:108px!important;
    background:url("sales-hero-botanical-vibrant.jpg") left center/150px auto no-repeat!important;
    opacity:.96!important;
    pointer-events:none!important;
    z-index:1!important;
    border-radius:0 0 70% 0;
  }
  .mobile-topbar>*{position:relative!important;z-index:2!important}

  /* ---------- DASHBOARD ---------- */
  .dashboard-hero{
    min-height:166px!important;
    padding:17px 18px!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    background:
      linear-gradient(90deg,
        #fffaf2 0%,#fffaf2 40%,
        rgba(255,250,242,.95) 48%,
        rgba(255,250,242,.40) 63%,
        rgba(255,250,242,.03) 82%),
      url("sales-hero-botanical-vibrant.jpg") right center/62% 100% no-repeat!important;
  }
  .dashboard-hero .hero-copy{
    width:52%!important;
    min-width:0!important;
    position:relative!important;
    z-index:2!important;
  }
  .dashboard-hero h1{
    font-size:29px!important;
    white-space:nowrap!important;
    margin:0 0 6px!important;
  }
  .dashboard-hero p{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  .dashboard-hero .brand-slogan{
    margin-top:15px!important;
    font-size:15px!important;
  }

  /* Botanical details on Dashboard metrics only. */
  .dashboard-hero + .metrics .metric{
    position:relative!important;
    overflow:hidden!important;
    background-color:#eef8ee!important;
    background-repeat:no-repeat!important;
    background-position:right bottom!important;
    background-size:auto 82%!important;
  }
  .dashboard-hero + .metrics .metric span,
  .dashboard-hero + .metrics .metric strong{
    position:relative!important;
    z-index:2!important;
  }
  .dashboard-hero + .metrics .metric:nth-child(1){
    background-image:linear-gradient(90deg,#eff9ef 0%,#eff9ef 60%,rgba(239,249,239,.12) 80%),url("sales-items-plant-vibrant.jpg")!important;
  }
  .dashboard-hero + .metrics .metric:nth-child(2){
    background-image:linear-gradient(90deg,#eff9ef 0%,#eff9ef 60%,rgba(239,249,239,.12) 80%),url("sales-revenue-plant-vibrant.jpg")!important;
  }
  .dashboard-hero + .metrics .metric:nth-child(3){
    background-image:linear-gradient(90deg,#eff9ef 0%,#eff9ef 58%,rgba(239,249,239,.10) 78%),url("sales-average-plant-vibrant.jpg")!important;
  }
  .dashboard-hero + .metrics .metric:nth-child(4){
    background-image:linear-gradient(90deg,#eff9ef 0%,#eff9ef 55%,rgba(239,249,239,.10) 76%),url("sales-actual-plant-vibrant.jpg")!important;
  }

  /* ---------- INVENTORY ---------- */
  /* Inventory is the page-head immediately followed by the filter panel. */
  .page-head:has(+ .filters){
    min-height:158px!important;
    padding:17px 18px!important;
    position:relative!important;
    overflow:hidden!important;
    background:
      linear-gradient(90deg,
        #fffaf2 0%,#fffaf2 43%,
        rgba(255,250,242,.95) 51%,
        rgba(255,250,242,.40) 67%,
        rgba(255,250,242,.03) 84%),
      url("sales-hero-botanical-vibrant.jpg") right center/59% 100% no-repeat!important;
  }
  .page-head:has(+ .filters)>div{
    width:55%!important;
    position:relative!important;
    z-index:2!important;
  }
  .page-head:has(+ .filters) h1{
    font-size:29px!important;
    margin:0 0 7px!important;
  }
  .page-head:has(+ .filters) p{
    max-width:185px!important;
    margin:0!important;
    font-size:12.5px!important;
    line-height:1.3!important;
  }
  .secondary-slogan{
    margin-top:13px!important;
    font-size:14px!important;
    line-height:1.08!important;
  }
  #inventoryAdd{display:none!important}
  .filters{
    background:rgba(255,253,248,.96)!important;
    border:1px solid #ded3c4!important;
    border-radius:18px!important;
    box-shadow:0 5px 18px rgba(71,56,38,.05)!important;
  }

  /* ---------- SALES ---------- */
  .sales-hero{
    min-height:178px!important;
    padding:16px 18px!important;
    position:relative!important;
    overflow:hidden!important;
    background:
      linear-gradient(90deg,
        #fffaf2 0%,#fffaf2 41%,
        rgba(255,250,242,.92) 49%,
        rgba(255,250,242,.28) 65%,
        rgba(255,250,242,.02) 82%),
      url("sales-hero-botanical-vibrant.jpg") right center/62% 100% no-repeat!important;
  }
  .sales-hero>div{width:55%!important;position:relative!important;z-index:2!important}
  .sales-hero h1{font-size:30px!important;margin:0 0 5px!important}
  .sales-hero p{font-size:12px!important;line-height:1.3!important;max-width:190px!important;margin:0!important}
  .sales-hero .painted-slogan{
    position:relative!important;
    display:inline-block!important;
    margin-top:12px!important;
    max-width:205px!important;
    padding:10px 14px!important;
    background:#fbf3df!important;
    color:#173624!important;
    border:3px double #294d35!important;
    border-radius:44% 38% 42% 36% / 36% 44% 38% 42%!important;
    box-shadow:inset 0 0 0 2px rgba(41,77,53,.14)!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.055em!important;
    line-height:1.22!important;
    transform:rotate(-2deg)!important;
    text-align:center!important;
  }
  .sales-hero .painted-slogan::after{
    content:" ❧"!important;
    font-size:14px!important;
  }

  .sales-metric{
    position:relative!important;
    overflow:hidden!important;
    background-color:#eef8ee!important;
    background-repeat:no-repeat!important;
    background-position:right bottom!important;
    background-size:auto 92%!important;
  }
  .sales-metric span,.sales-metric strong{position:relative!important;z-index:2!important}
  .metric-items{
    background-image:linear-gradient(90deg,#eff9ef 0%,#eff9ef 58%,rgba(239,249,239,.12) 78%),url("sales-items-plant-vibrant.jpg")!important;
  }
  .metric-revenue{
    background-image:linear-gradient(90deg,#eff9ef 0%,#eff9ef 58%,rgba(239,249,239,.12) 78%),url("sales-revenue-plant-vibrant.jpg")!important;
  }
  .metric-actual{
    background-image:linear-gradient(90deg,#eff9ef 0%,#eff9ef 52%,rgba(239,249,239,.10) 73%),url("sales-actual-plant-vibrant.jpg")!important;
  }
  .metric-average{
    background-image:linear-gradient(90deg,#eff9ef 0%,#eff9ef 55%,rgba(239,249,239,.10) 76%),url("sales-average-plant-vibrant.jpg")!important;
  }

  .sales-empty{
    min-height:150px!important;
    padding:38px 18px 28px!important;
    text-align:center!important;
    background:#fffdf9!important;
  }
  .sales-empty-leaf{
    margin:10px auto 2px!important;
    color:#235d37!important;
    font-size:18px!important;
    letter-spacing:8px!important;
  }
  .sales-empty-script{
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive!important;
    font-size:14px!important;
    color:#202a22!important;
    font-weight:500!important;
    margin-top:4px!important;
  }
}

@media(max-width:420px){
  .mobile-topbar::before{
    width:70px!important;
    height:102px!important;
    background-size:140px auto!important;
  }

  .dashboard-hero{
    min-height:158px!important;
    padding:15px!important;
  }
  .dashboard-hero .hero-copy{width:54%!important}
  .dashboard-hero h1{font-size:27px!important}
  .dashboard-hero p{font-size:12px!important}
  .dashboard-hero .brand-slogan{font-size:13.5px!important;margin-top:13px!important}

  .page-head:has(+ .filters){
    min-height:150px!important;
    padding:15px!important;
  }
  .page-head:has(+ .filters)>div{width:57%!important}
  .page-head:has(+ .filters) h1{font-size:27px!important}
  .page-head:has(+ .filters) p{font-size:11.5px!important;max-width:165px!important}
  .secondary-slogan{font-size:12.5px!important;margin-top:11px!important}

  .sales-hero{
    min-height:168px!important;
    padding:15px!important;
  }
  .sales-hero>div{width:56%!important}
  .sales-hero h1{font-size:28px!important}
  .sales-hero p{font-size:11.5px!important}
  .sales-hero .painted-slogan{
    max-width:185px!important;
    font-size:9px!important;
    padding:9px 11px!important;
  }

  .dashboard-hero + .metrics .metric,
  .sales-metric{
    background-size:auto 88%!important;
  }
}


/* =========================================================
   LOCKED BOTANICAL FINISH
   Fixes header ivy and restores crisp hero photography.
   ========================================================= */
@media(max-width:950px){

  /* Clean ivy only — no baked logo, books, phone status bar or hero image. */
  .mobile-topbar::before{
    content:""!important;
    position:absolute!important;
    left:-5px!important;
    top:-8px!important;
    width:118px!important;
    height:188px!important;
    background:url("header-ivy-clean.png") left top/118px auto no-repeat!important;
    opacity:1!important;
    pointer-events:none!important;
    z-index:3!important;
    border-radius:0!important;
  }
  .mobile-topbar>*{
    position:relative!important;
    z-index:4!important;
  }

  /* Keep the ivy decorative rather than covering the logo text. */
  .mobile-topbar-logo{
    position:relative!important;
    z-index:5!important;
  }

  /* Richer, less washed-out Dashboard hero. */
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        #fffaf2 0%,#fffaf2 34%,
        rgba(255,250,242,.93) 43%,
        rgba(255,250,242,.50) 53%,
        rgba(255,250,242,.10) 67%,
        rgba(255,250,242,0) 78%),
      url("sales-hero-botanical-vibrant.jpg") right center/66% 100% no-repeat!important;
  }

  /* Richer, less washed-out Inventory hero. */
  .page-head:has(+ .filters){
    background:
      linear-gradient(90deg,
        #fffaf2 0%,#fffaf2 35%,
        rgba(255,250,242,.93) 44%,
        rgba(255,250,242,.48) 54%,
        rgba(255,250,242,.09) 68%,
        rgba(255,250,242,0) 79%),
      url("sales-hero-botanical-vibrant.jpg") right center/64% 100% no-repeat!important;
  }

  /* Sales remains the richest botanical hero. */
  .sales-hero{
    background:
      linear-gradient(90deg,
        #fffaf2 0%,#fffaf2 33%,
        rgba(255,250,242,.91) 42%,
        rgba(255,250,242,.42) 51%,
        rgba(255,250,242,.07) 65%,
        rgba(255,250,242,0) 75%),
      url("sales-hero-botanical-vibrant.jpg") right center/67% 100% no-repeat!important;
  }

  /* Keep the approved metric-card plant imagery crisp. */
  .dashboard-hero + .metrics .metric,
  .sales-metric{
    background-blend-mode:normal!important;
  }
}

@media(max-width:420px){
  .mobile-topbar::before{
    left:-5px!important;
    top:-7px!important;
    width:105px!important;
    height:170px!important;
    background-size:105px auto!important;
  }
}


/* =========================================================
   APPROVED HEADER IVY CORRECTION
   Final correction to match the locked visual reference.
   ========================================================= */
@media(max-width:950px){
  .mobile-topbar{
    position:relative!important;
    overflow:visible!important;
  }

  /* Narrow trailing ivy: frames the logo instead of covering it. */
  .mobile-topbar::before{
    content:""!important;
    position:absolute!important;
    left:-2px!important;
    top:-18px!important;
    width:54px!important;
    height:132px!important;
    background:url("header-ivy-approved.png") left top/54px 132px no-repeat!important;
    opacity:1!important;
    pointer-events:none!important;
    z-index:6!important;
    border-radius:0!important;
  }

  .mobile-topbar-logo{
    position:relative!important;
    z-index:5!important;
    margin-left:5px!important;
  }

  .mobile-topbar-copy,
  .mobile-topbar-actions{
    position:relative!important;
    z-index:7!important;
  }
}

@media(max-width:420px){
  .mobile-topbar::before{
    left:-1px!important;
    top:-15px!important;
    width:48px!important;
    height:120px!important;
    background-size:48px 120px!important;
  }
  .mobile-topbar-logo{
    margin-left:4px!important;
  }
}


/* =========================================================
   HEADER IVY FINAL LOCK — 2026-09-17
   Matches approved Dashboard option 2: logo remains fully readable;
   ivy lives mainly in the upper-left margin and trails down the edge.
   ========================================================= */
@media(max-width:950px){
  .mobile-topbar{position:relative!important;overflow:visible!important;}
  .mobile-topbar::before{
    left:-34px!important;
    top:-18px!important;
    width:58px!important;
    height:138px!important;
    background:url("header-ivy-approved.png") left top/58px 138px no-repeat!important;
    opacity:1!important;
    z-index:4!important;
    pointer-events:none!important;
  }
  .mobile-topbar-logo{
    position:relative!important;
    z-index:6!important;
    margin-left:8px!important;
  }
  .mobile-topbar-copy,.mobile-topbar-actions{position:relative!important;z-index:7!important;}
}
@media(max-width:420px){
  .mobile-topbar::before{
    left:-30px!important;
    top:-15px!important;
    width:52px!important;
    height:124px!important;
    background-size:52px 124px!important;
  }
  .mobile-topbar-logo{margin-left:7px!important;}
}


/* =========================================================
   STRUCTURAL MOBILE HEADER FIX — 2026-09-21
   Ivy now occupies its own grid column. It is not a pseudo-element and
   cannot horizontally overlap the logo. Earlier ivy overlay rules are
   explicitly disabled below.
   ========================================================= */
@media(max-width:950px){
  .mobile-topbar::before,
  .mobile-topbar::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }

  .mobile-topbar{
    position:relative!important;
    display:grid!important;
    grid-template-columns:44px 92px minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    height:72px!important;
    padding:7px 10px 7px 5px!important;
    overflow:visible!important;
  }

  .mobile-ivy-slot{
    display:block!important;
    position:relative!important;
    width:44px!important;
    height:72px!important;
    overflow:visible!important;
    align-self:stretch!important;
    z-index:1!important;
    pointer-events:none!important;
  }
  .mobile-ivy-slot img{
    display:block!important;
    position:absolute!important;
    top:-12px!important;
    left:0!important;
    width:42px!important;
    height:132px!important;
    object-fit:contain!important;
    object-position:top left!important;
    max-width:none!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  .mobile-topbar-logo{
    display:block!important;
    position:relative!important;
    z-index:3!important;
    margin:0!important;
    width:92px!important;
    max-width:92px!important;
    height:51px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  .mobile-topbar-copy{
    position:relative!important;
    z-index:3!important;
    min-width:0!important;
  }
  .mobile-topbar-copy strong{
    font-size:13.5px!important;
    line-height:1.05!important;
  }
  .mobile-topbar-copy span{
    font-size:9px!important;
  }
  .mobile-topbar-actions{
    position:relative!important;
    z-index:3!important;
    gap:5px!important;
  }
}

@media(max-width:420px){
  .mobile-topbar{
    grid-template-columns:38px 91px minmax(0,1fr) auto!important;
    column-gap:6px!important;
    height:68px!important;
    padding:6px 8px 6px 4px!important;
  }
  .mobile-ivy-slot{
    width:38px!important;
    height:68px!important;
  }
  .mobile-ivy-slot img{
    top:-9px!important;
    left:0!important;
    width:36px!important;
    height:119px!important;
  }
  .mobile-topbar-logo{
    width:91px!important;
    max-width:91px!important;
    height:49px!important;
  }
  .mobile-topbar-copy strong{font-size:12.5px!important;}
  .mobile-topbar-copy span{font-size:8.7px!important;}
  .mobile-topbar-actions{gap:4px!important;}
}


/* =========================================================
   IVY FULL-VISIBLE FIX — 2026-09-22
   Keeps the ivy in its own column, but widens that column so
   the leaves are not clipped at the right edge.
   ========================================================= */
@media(max-width:950px){
  .mobile-topbar{
    grid-template-columns:62px 92px minmax(0,1fr) auto!important;
    column-gap:7px!important;
  }

  .mobile-ivy-slot{
    width:62px!important;
    overflow:visible!important;
  }

  .mobile-ivy-slot img{
    left:0!important;
    width:60px!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:top left!important;
  }
}

@media(max-width:420px){
  .mobile-topbar{
    grid-template-columns:56px 91px minmax(0,1fr) auto!important;
    column-gap:6px!important;
  }

  .mobile-ivy-slot{
    width:56px!important;
  }

  .mobile-ivy-slot img{
    left:0!important;
    width:54px!important;
    max-width:none!important;
  }
}


/* VIBRANT PLANT RESTORE FIX — 2026-09-22 */
.metric-card{background-color:#eff9ef!important;}

/* =========================================================
   FINAL MOBILE HEADER LOCKUP — 2026-09-22
   Ivy + logo are one transparent image. This eliminates the
   clipping/overlap cycle because their relationship can no longer
   change independently at different phone widths.
   ========================================================= */
@media(max-width:950px){
  .mobile-topbar::before,
  .mobile-topbar::after{content:none!important;display:none!important;}

  .mobile-ivy-slot,
  .mobile-topbar-logo{display:none!important;}

  .mobile-topbar{
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:7px!important;
    height:78px!important;
    padding:4px 8px 4px 3px!important;
    overflow:visible!important;
  }

  .mobile-brand-lockup{
    display:block!important;
    position:relative!important;
    z-index:4!important;
    width:148px!important;
    height:auto!important;
    max-width:none!important;
    margin:0!important;
    transform:translateY(6px)!important;
    object-fit:contain!important;
    pointer-events:none!important;
  }

  .mobile-topbar-copy{
    min-width:0!important;
    position:relative!important;
    z-index:5!important;
  }
  .mobile-topbar-copy strong{
    display:block!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:12px!important;
    line-height:1.05!important;
    letter-spacing:-.15px!important;
  }
  .mobile-topbar-copy span{
    display:block!important;
    white-space:nowrap!important;
    font-size:8.2px!important;
  }
  .mobile-topbar-actions{position:relative!important;z-index:5!important;gap:4px!important;}
  .mobile-topbar-btn{width:30px!important;height:30px!important;min-width:30px!important;font-size:16px!important;}
}

@media(max-width:420px){
  .mobile-topbar{
    grid-template-columns:142px minmax(0,1fr) auto!important;
    column-gap:6px!important;
    height:76px!important;
    padding:4px 7px 4px 2px!important;
  }
  .mobile-brand-lockup{width:140px!important;transform:translateY(6px)!important;}
  .mobile-topbar-copy strong{font-size:11.2px!important;}
  .mobile-topbar-copy span{font-size:7.7px!important;}
  .mobile-topbar-btn{width:29px!important;height:29px!important;min-width:29px!important;font-size:15px!important;}
}

/* =========================================================
   FLOWER HEADER + FLIPPED DASHBOARD HERO — FINAL MOBILE OVERRIDE
   2026-09-22
   - No ivy in header
   - No top Add / Settings buttons
   - Transparent logo on left
   - User-approved native bouquet on right
   - Dashboard plants on LEFT, text on RIGHT
   ========================================================= */
@media(max-width:950px){
  /* Permanently disable all earlier ivy/lockup experiments. */
  .mobile-topbar::before,
  .mobile-topbar::after,
  .mobile-ivy-slot,
  .mobile-brand-lockup,
  .mobile-topbar-actions{
    display:none!important;
    content:none!important;
  }

  .mobile-topbar{
    display:grid!important;
    grid-template-columns:104px minmax(0,1fr) 76px!important;
    align-items:center!important;
    column-gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    height:78px!important;
    padding:5px 8px 5px 12px!important;
    overflow:visible!important;
    background:linear-gradient(90deg,#fffaf2 0%,#fffdf8 72%,#f6efe4 100%)!important;
  }

  .mobile-topbar-logo.flower-header-logo{
    display:block!important;
    position:relative!important;
    z-index:3!important;
    width:104px!important;
    max-width:104px!important;
    height:54px!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:left center!important;
    background:transparent!important;
  }

  .mobile-topbar-copy{
    min-width:0!important;
    position:relative!important;
    z-index:3!important;
  }
  .mobile-topbar-copy strong{
    display:block!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:13.2px!important;
    line-height:1.05!important;
    letter-spacing:-.15px!important;
  }
  .mobile-topbar-copy span{
    display:block!important;
    margin-top:3px!important;
    white-space:nowrap!important;
    font-size:9px!important;
  }

  .mobile-header-bouquet{
    display:block!important;
    position:relative!important;
    z-index:2!important;
    justify-self:end!important;
    width:76px!important;
    height:76px!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center!important;
    pointer-events:none!important;
  }

  /* Dashboard hero only: plants left, copy right. */
  .dashboard-hero{
    min-height:166px!important;
    padding:17px 18px!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
    overflow:hidden!important;
    background:
      linear-gradient(270deg,
        #fffaf2 0%,
        #fffaf2 35%,
        rgba(255,250,242,.95) 43%,
        rgba(255,250,242,.55) 54%,
        rgba(255,250,242,.12) 68%,
        rgba(255,250,242,0) 80%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/66% 100% no-repeat!important;
  }

  .dashboard-hero .hero-copy{
    width:48%!important;
    min-width:0!important;
    margin-left:auto!important;
    position:relative!important;
    z-index:3!important;
    text-align:left!important;
  }
  .dashboard-hero h1{
    margin:0 0 6px!important;
    font-size:29px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  .dashboard-hero p{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  .dashboard-hero .brand-slogan{
    margin-top:15px!important;
    font-size:15px!important;
    line-height:1.08!important;
  }
}

@media(max-width:420px){
  .mobile-topbar{
    grid-template-columns:96px minmax(0,1fr) 66px!important;
    column-gap:6px!important;
    height:74px!important;
    padding:4px 6px 4px 9px!important;
  }
  .mobile-topbar-logo.flower-header-logo{
    width:96px!important;
    max-width:96px!important;
    height:50px!important;
  }
  .mobile-topbar-copy strong{font-size:11.8px!important;}
  .mobile-topbar-copy span{font-size:8.2px!important;}
  .mobile-header-bouquet{
    width:66px!important;
    height:70px!important;
  }

  .dashboard-hero{
    min-height:158px!important;
    padding:15px!important;
    background:
      linear-gradient(270deg,
        #fffaf2 0%,
        #fffaf2 37%,
        rgba(255,250,242,.95) 45%,
        rgba(255,250,242,.56) 56%,
        rgba(255,250,242,.12) 69%,
        rgba(255,250,242,0) 80%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/67% 100% no-repeat!important;
  }
  .dashboard-hero .hero-copy{width:49%!important;}
  .dashboard-hero h1{font-size:27px!important;}
  .dashboard-hero p{font-size:12px!important;}
  .dashboard-hero .brand-slogan{font-size:13.5px!important;margin-top:13px!important;}
}


/* =========================================================
   FINAL ALIGNMENT PATCH
   2026-09-22
   - Nudge top toolbar title block to a more central position
   - Keep bouquet on right and logo fully visible on left
   - Restore dashboard copy to the previously approved centered-right placement
   ========================================================= */
@media(max-width:950px){
  .mobile-topbar{
    grid-template-columns:108px minmax(0,1fr) 74px!important;
    column-gap:10px!important;
    padding:5px 10px 5px 12px!important;
  }
  .mobile-topbar-logo.flower-header-logo{
    width:108px!important;
    max-width:108px!important;
    height:56px!important;
  }
  .mobile-topbar-copy{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .mobile-topbar-copy strong{
    font-size:13.4px!important;
  }
  .mobile-topbar-copy span{
    font-size:9.2px!important;
  }
  .mobile-header-bouquet{
    width:74px!important;
    height:74px!important;
  }

  .dashboard-hero{
    padding:18px 22px 18px 18px!important;
    background:
      linear-gradient(270deg,
        #fffaf2 0%,
        #fffaf2 34%,
        rgba(255,250,242,.96) 42%,
        rgba(255,250,242,.58) 54%,
        rgba(255,250,242,.14) 68%,
        rgba(255,250,242,0) 80%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/66% 100% no-repeat!important;
  }
  .dashboard-hero .hero-copy{
    width:46%!important;
    margin-left:auto!important;
    margin-right:10px!important;
  }
  .dashboard-hero h1{
    font-size:29px!important;
    margin:4px 0 8px!important;
  }
  .dashboard-hero p{
    font-size:13px!important;
    line-height:1.24!important;
  }
  .dashboard-hero .brand-slogan{
    margin-top:16px!important;
    font-size:15px!important;
  }
}

@media(max-width:420px){
  .mobile-topbar{
    grid-template-columns:100px minmax(0,1fr) 64px!important;
    column-gap:8px!important;
    padding:4px 8px 4px 10px!important;
  }
  .mobile-topbar-logo.flower-header-logo{
    width:100px!important;
    max-width:100px!important;
    height:52px!important;
  }
  .mobile-topbar-copy{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .mobile-topbar-copy strong{font-size:12px!important;}
  .mobile-topbar-copy span{font-size:8.3px!important;}
  .mobile-header-bouquet{width:64px!important;height:68px!important;}

  .dashboard-hero{
    min-height:160px!important;
    padding:16px 18px 16px 15px!important;
    background:
      linear-gradient(270deg,
        #fffaf2 0%,
        #fffaf2 36%,
        rgba(255,250,242,.96) 44%,
        rgba(255,250,242,.60) 56%,
        rgba(255,250,242,.16) 69%,
        rgba(255,250,242,0) 80%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/67% 100% no-repeat!important;
  }
  .dashboard-hero .hero-copy{
    width:47%!important;
    margin-right:8px!important;
  }
  .dashboard-hero h1{font-size:27px!important;margin:4px 0 7px!important;}
  .dashboard-hero p{font-size:12px!important;}
  .dashboard-hero .brand-slogan{font-size:13.7px!important;margin-top:14px!important;}
}


/* =========================================================
   FINAL CLOUDLFARE MOBILE ALIGNMENT CORRECTION — 2026-09-22
   The toolbar title is centered independently between the logo and bouquet,
   and the Dashboard copy is held in the approved centered-right position.
   ========================================================= */
@media(max-width:950px){
  .mobile-topbar{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    height:80px!important;
    padding:5px 10px 5px 12px!important;
    overflow:visible!important;
  }
  .mobile-topbar-logo.flower-header-logo{
    flex:0 0 auto!important;
    width:108px!important;
    max-width:108px!important;
    height:56px!important;
    margin:0!important;
  }
  .mobile-topbar-copy{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:45%!important;
    padding:0!important;
    text-align:center!important;
    z-index:4!important;
  }
  .mobile-topbar-copy strong{
    display:block!important;
    margin:0!important;
    font-size:13.2px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .mobile-topbar-copy span{
    display:block!important;
    margin-top:4px!important;
    font-size:9.2px!important;
    white-space:nowrap!important;
  }
  .mobile-header-bouquet{
    flex:0 0 auto!important;
    width:72px!important;
    height:74px!important;
    margin-left:auto!important;
  }

  .dashboard-hero{
    min-height:166px!important;
    padding:18px 20px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    background:
      linear-gradient(270deg,
        #fffaf2 0%,
        #fffaf2 34%,
        rgba(255,250,242,.97) 42%,
        rgba(255,250,242,.60) 54%,
        rgba(255,250,242,.16) 68%,
        rgba(255,250,242,0) 80%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/66% 100% no-repeat!important;
  }
  .dashboard-hero .hero-copy{
    width:46%!important;
    margin-left:auto!important;
    margin-right:7px!important;
    padding-top:4px!important;
    text-align:left!important;
  }
  .dashboard-hero h1{
    margin:0 0 8px!important;
    font-size:29px!important;
    line-height:1.05!important;
  }
  .dashboard-hero p{
    margin:0!important;
    font-size:13px!important;
    line-height:1.24!important;
  }
  .dashboard-hero .brand-slogan{
    margin-top:16px!important;
    font-size:15px!important;
    line-height:1.08!important;
  }
}

@media(max-width:420px){
  .mobile-topbar{height:76px!important;padding:4px 8px 4px 10px!important;}
  .mobile-topbar-logo.flower-header-logo{width:100px!important;max-width:100px!important;height:52px!important;}
  .mobile-topbar-copy{width:46%!important;}
  .mobile-topbar-copy strong{font-size:11.8px!important;}
  .mobile-topbar-copy span{font-size:8.2px!important;}
  .mobile-header-bouquet{width:64px!important;height:68px!important;}
  .dashboard-hero{
    min-height:160px!important;
    padding:16px 17px!important;
    background:
      linear-gradient(270deg,
        #fffaf2 0%,
        #fffaf2 36%,
        rgba(255,250,242,.97) 44%,
        rgba(255,250,242,.62) 56%,
        rgba(255,250,242,.18) 69%,
        rgba(255,250,242,0) 80%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/67% 100% no-repeat!important;
  }
  .dashboard-hero .hero-copy{width:47%!important;margin-right:6px!important;padding-top:3px!important;}
  .dashboard-hero h1{font-size:27px!important;margin-bottom:7px!important;}
  .dashboard-hero p{font-size:12px!important;}
  .dashboard-hero .brand-slogan{font-size:13.7px!important;margin-top:14px!important;}
}


/* FINAL APPROVED CACHE-BUST PATCH 2026-09-22 13:05 */


/* =========================================================
   FINAL DASHBOARD TEXT ALIGNMENT — 2026-09-23
   Matches REFERENCE_FINAL_TARGET_DASHBOARD.png.
   Only the Dashboard hero copy position is changed.
   ========================================================= */
@media(max-width:950px){
  .dashboard-hero .hero-copy{
    width:41%!important;
    margin-left:auto!important;
    margin-right:7px!important;
    padding-top:4px!important;
    text-align:left!important;
  }
  .dashboard-hero h1{
    margin:0 0 8px!important;
    font-size:29px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  .dashboard-hero p{
    margin:0!important;
    width:100%!important;
    max-width:none!important;
    font-size:13px!important;
    line-height:1.24!important;
    white-space:nowrap!important;
  }
  .dashboard-hero .brand-slogan{
    margin-top:16px!important;
    margin-left:-2px!important;
    width:100%!important;
    font-size:15px!important;
    line-height:1.08!important;
    text-align:center!important;
  }
}

@media(max-width:420px){
  .dashboard-hero .hero-copy{
    width:42%!important;
    margin-right:5px!important;
    padding-top:3px!important;
  }
  .dashboard-hero h1{font-size:27px!important;margin-bottom:7px!important;}
  .dashboard-hero p{font-size:12px!important;}
  .dashboard-hero .brand-slogan{
    font-size:13.7px!important;
    margin-top:14px!important;
    margin-left:-1px!important;
  }
}

/* =========================================================
   FINAL SMALL VERTICAL NUDGE — 2026-09-23
   Moves the complete Dashboard text block slightly upward only.
   ========================================================= */
@media(max-width:950px){
  .dashboard-hero .hero-copy{
    transform:translateY(-9px)!important;
  }
}
@media(max-width:420px){
  .dashboard-hero .hero-copy{
    transform:translateY(-8px)!important;
  }
}

/* =========================================================
   DESKTOP DASHBOARD REFINEMENT + MOBILE NAV LOCK
   2026-09-23
   Desktop rules are isolated above 950px. The approved mobile
   dashboard remains unchanged, apart from a stronger fixed-nav lock.
   ========================================================= */

@media (min-width:951px){
  /* Give the desktop application a slightly wider, more editorial canvas. */
  .app-shell{
    grid-template-columns:230px minmax(0,1fr)!important;
    background:#f6efe4!important;
  }
  .sidebar{
    width:230px!important;
    padding:18px 14px!important;
    background:linear-gradient(180deg,#0d1711 0%,#101a14 100%)!important;
  }
  .content{
    max-width:1680px!important;
    padding:30px 34px 54px!important;
  }

  /* Desktop navigation styling inspired by the approved mockup. */
  .desktop-nav{gap:8px!important;margin-top:8px!important}
  .nav-btn{
    position:relative!important;
    min-height:48px!important;
    padding:12px 12px 12px 48px!important;
    border-radius:12px!important;
    font-size:14px!important;
    display:flex!important;
    align-items:center!important;
  }
  .nav-btn::before{
    position:absolute!important;
    left:15px!important;
    width:22px!important;
    text-align:center!important;
    font-size:21px!important;
    line-height:1!important;
    color:#f7faf6!important;
    font-weight:500!important;
  }
  .nav-btn[data-view="dashboard"]::before{content:"⌂"}
  .nav-btn[data-view="inventory"]::before{content:"◇"}
  .nav-btn[data-view="add"]::before{content:"＋"}
  .nav-btn[data-view="sales"]::before{content:"▥"}
  .nav-btn[data-view="flashsale"]::before{content:"◇"}
  .nav-btn[data-view="settings"]::before{content:"⚙"}

  /* Dashboard hero: same visual language as the locked mobile version. */
  .dashboard-hero{
    position:relative!important;
    min-height:330px!important;
    padding:30px 34px!important;
    margin-bottom:20px!important;
    border-radius:22px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 46%,
        rgba(255,250,242,.72) 58%,
        rgba(255,250,242,.98) 72%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/61% 100% no-repeat!important;
  }
  .dashboard-hero::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    right:18px!important;
    bottom:-13px!important;
    width:220px!important;
    height:300px!important;
    background:url("header-bouquet-final-20260922.png") center bottom/contain no-repeat!important;
    pointer-events:none!important;
    opacity:.98!important;
  }
  .dashboard-hero .hero-copy{
    position:relative!important;
    z-index:2!important;
    width:39%!important;
    margin:0 220px 0 auto!important;
    padding:0!important;
    text-align:center!important;
    transform:none!important;
  }
  .dashboard-hero h1{
    margin:0 0 8px!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:58px!important;
    line-height:1!important;
    letter-spacing:-1.8px!important;
    white-space:nowrap!important;
  }
  .dashboard-hero p{
    margin:0!important;
    max-width:none!important;
    width:100%!important;
    font-size:24px!important;
    line-height:1.15!important;
    color:#747b74!important;
    white-space:nowrap!important;
  }
  .dashboard-hero .brand-slogan{
    width:100%!important;
    margin:20px 0 0!important;
    font-size:24px!important;
    line-height:1.1!important;
    text-align:center!important;
    transform:rotate(-2deg)!important;
  }

  /* Desktop botanical metric cards. */
  .dashboard-hero + .metrics{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    margin-bottom:26px!important;
  }
  .dashboard-hero + .metrics .metric{
    position:relative!important;
    overflow:hidden!important;
    min-height:128px!important;
    padding:20px!important;
    border-radius:17px!important;
    background-color:#eef8ee!important;
    background-repeat:no-repeat!important;
    background-position:right bottom!important;
    background-size:auto 94%!important;
    box-shadow:0 8px 24px rgba(75,54,34,.06)!important;
  }
  .dashboard-hero + .metrics .metric::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,#eff9ef 0%,#eff9ef 48%,rgba(239,249,239,.78) 58%,rgba(239,249,239,.05) 84%);
  }
  .dashboard-hero + .metrics .metric span,
  .dashboard-hero + .metrics .metric strong{
    position:relative!important;
    z-index:2!important;
  }
  .dashboard-hero + .metrics .metric span{font-size:15px!important}
  .dashboard-hero + .metrics .metric strong{font-size:34px!important;margin-top:12px!important}
  .dashboard-hero + .metrics .metric:nth-child(1){background-image:url("sales-items-plant-vibrant.jpg")!important}
  .dashboard-hero + .metrics .metric:nth-child(2){background-image:url("sales-average-plant-vibrant.jpg")!important}
  .dashboard-hero + .metrics .metric:nth-child(3){background-image:url("sales-revenue-plant-vibrant.jpg")!important}
  .dashboard-hero + .metrics .metric:nth-child(4){background-image:url("sales-actual-plant-vibrant.jpg")!important}

  /* Recent Items: three wide horizontal cards across the desktop. */
  .content > h2{
    margin:22px 0 14px!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:32px!important;
  }
  .dashboard-hero ~ .card-grid{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
    justify-content:stretch!important;
  }
  .dashboard-hero ~ .card-grid .item-card{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto auto 1fr!important;
    column-gap:16px!important;
    align-content:start!important;
    padding:14px!important;
    border-radius:18px!important;
  }
  .dashboard-hero ~ .card-grid .item-card > img,
  .dashboard-hero ~ .card-grid .item-card > .photo-placeholder{
    grid-column:1!important;
    grid-row:1 / span 6!important;
    width:150px!important;
    height:184px!important;
    border-radius:12px!important;
    object-fit:cover!important;
    align-self:start!important;
  }
  .dashboard-hero ~ .card-grid .item-title-row,
  .dashboard-hero ~ .card-grid .item-card > .meta,
  .dashboard-hero ~ .card-grid .price-line,
  .dashboard-hero ~ .card-grid .sale-note,
  .dashboard-hero ~ .card-grid .item-footer,
  .dashboard-hero ~ .card-grid .item-card > .actions{
    grid-column:2!important;
    min-width:0!important;
  }
  .dashboard-hero ~ .card-grid .item-title-row{align-items:flex-start!important}
  .dashboard-hero ~ .card-grid .item-card h3{
    margin:2px 0 6px!important;
    font-size:15px!important;
    line-height:1.18!important;
  }
  .dashboard-hero ~ .card-grid .item-card .meta{font-size:11px!important}
  .dashboard-hero ~ .card-grid .price-line{font-size:13px!important;margin:8px 0!important}
  .dashboard-hero ~ .card-grid .item-footer{margin-top:4px!important;padding-top:8px!important}
  .dashboard-hero ~ .card-grid .profit{font-size:13px!important}
  .dashboard-hero ~ .card-grid .actions{
    align-self:end!important;
    gap:5px!important;
    margin-top:8px!important;
  }
  .dashboard-hero ~ .card-grid .actions button{font-size:10px!important;padding:7px 8px!important}
}

/* Large desktop tuning so the hero remains balanced on very wide screens. */
@media (min-width:1350px){
  .dashboard-hero{min-height:350px!important}
  .dashboard-hero::after{right:24px!important;width:245px!important;height:320px!important}
  .dashboard-hero .hero-copy{margin-right:245px!important;width:37%!important}
  .dashboard-hero h1{font-size:64px!important}
  .dashboard-hero p{font-size:25px!important}
  .dashboard-hero .brand-slogan{font-size:26px!important}
}

/* Strong iOS/mobile bottom-navigation lock. */
@media (max-width:950px){
  .mobile-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    z-index:9999!important;
    margin:0!important;
    transform:translateZ(0)!important;
    -webkit-transform:translateZ(0)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    padding-bottom:calc(5px + env(safe-area-inset-bottom))!important;
  }
  .content{
    padding-bottom:calc(102px + env(safe-area-inset-bottom))!important;
  }
  .mobile-more-menu{
    position:fixed!important;
    bottom:calc(82px + env(safe-area-inset-bottom))!important;
    z-index:10000!important;
  }
}

/* =========================================================
   DESKTOP FINAL POLISH — 2026-09-23
   - Shorter hero
   - Dashboard copy slightly left/up
   - Larger, higher bouquet
   - Larger metric botanicals
   Mobile rules remain untouched.
   ========================================================= */
@media (min-width:951px){
  .dashboard-hero{
    min-height:300px!important;
    padding:24px 32px!important;
    margin-bottom:18px!important;
  }
  .dashboard-hero::after{
    right:14px!important;
    bottom:-4px!important;
    width:248px!important;
    height:286px!important;
    background-size:contain!important;
  }
  .dashboard-hero .hero-copy{
    width:38%!important;
    margin-right:258px!important;
    transform:translate(-10px,-12px)!important;
  }
  .dashboard-hero h1{font-size:56px!important;}
  .dashboard-hero p{font-size:23px!important;}
  .dashboard-hero .brand-slogan{font-size:23px!important;margin-top:17px!important;}

  .dashboard-hero + .metrics .metric{
    min-height:120px!important;
    background-size:auto 104%!important;
  }
}

@media (min-width:1350px){
  .dashboard-hero{
    min-height:315px!important;
  }
  .dashboard-hero::after{
    right:20px!important;
    bottom:-2px!important;
    width:278px!important;
    height:305px!important;
  }
  .dashboard-hero .hero-copy{
    width:36%!important;
    margin-right:292px!important;
    transform:translate(-14px,-14px)!important;
  }
  .dashboard-hero h1{font-size:61px!important;}
  .dashboard-hero p{font-size:24px!important;}
  .dashboard-hero .brand-slogan{font-size:25px!important;}
  .dashboard-hero + .metrics .metric{
    background-size:auto 108%!important;
  }
}

/* =========================================================
   APPROVED DESKTOP HERO FINAL — 2026-09-23
   - Reduce the stretched botanical/pot section
   - Move Dashboard copy slightly further right
   - Desktop only; locked mobile layout remains untouched
   ========================================================= */
@media (min-width:951px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 43%,
        rgba(255,250,242,.72) 55%,
        rgba(255,250,242,.98) 69%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/56% 100% no-repeat!important;
  }
  .dashboard-hero .hero-copy{
    width:36%!important;
    margin-right:258px!important;
    transform:translate(30px,-12px)!important;
  }
}

@media (min-width:1350px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 43%,
        rgba(255,250,242,.72) 55%,
        rgba(255,250,242,.98) 69%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/55% 100% no-repeat!important;
  }
  .dashboard-hero .hero-copy{
    width:34%!important;
    margin-right:292px!important;
    transform:translate(42px,-14px)!important;
  }
}

/* =========================================================
   FULL DESKTOP BOTANICAL REFRESH — 2026-09-23
   Applies only to desktop. Mobile + approved Dashboard remain locked.
   Inventory · Add Item · Sales · Flash Sale · Settings
   ========================================================= */
@media (min-width:951px){
  /* Shared page canvas */
  .content{padding:28px 30px 48px!important;}
  .content .page-head:not(.dashboard-hero){
    position:relative!important;
    overflow:hidden!important;
    min-height:188px!important;
    margin:0 0 20px!important;
    padding:30px 34px!important;
    border:1px solid #ded4c6!important;
    border-radius:22px!important;
    box-shadow:0 10px 28px rgba(63,49,33,.07)!important;
    background-color:#fffaf2!important;
  }
  .content .page-head:not(.dashboard-hero)>div{position:relative!important;z-index:2!important;max-width:48%!important;}
  .content .page-head:not(.dashboard-hero) h1{
    margin:0 0 8px!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:46px!important;
    line-height:1!important;
    letter-spacing:-.8px!important;
    color:#122219!important;
  }
  .content .page-head:not(.dashboard-hero) p{font-size:16px!important;line-height:1.35!important;color:#737a73!important;max-width:520px!important;}
  .content .page-head:not(.dashboard-hero) .brand-slogan,
  .content .page-head:not(.dashboard-hero) .painted-slogan{
    margin-top:12px!important;
    font-size:20px!important;
    line-height:1.08!important;
    color:#1f3326!important;
  }

  /* Inventory hero — copy left, botanical/books right. */
  .inventory-hero{
    background:
      linear-gradient(90deg,#fffaf2 0%,#fffaf2 43%,rgba(255,250,242,.91) 53%,rgba(255,250,242,.20) 73%),
      url("sales-hero-botanical-vibrant.jpg") right center/52% 100% no-repeat!important;
  }
  .inventory-hero .primary{
    position:absolute!important;right:28px!important;top:50%!important;transform:translateY(-50%)!important;z-index:3!important;
    padding:14px 22px!important;border-radius:12px!important;font-size:15px!important;
  }
  .filters{
    display:grid!important;grid-template-columns:1.45fr 1fr 1fr 1fr!important;gap:14px!important;
    margin:0 0 18px!important;padding:0!important;background:transparent!important;border:0!important;
  }
  .filters input,.filters select{height:48px!important;border-radius:12px!important;background:#fffdfa!important;}
  #inventoryGrid.card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;max-width:none!important;width:100%!important;
  }
  #inventoryGrid .item-card{border-radius:18px!important;padding:14px!important;box-shadow:0 8px 22px rgba(65,49,31,.06)!important;}
  #inventoryGrid .item-card>img,#inventoryGrid .photo-placeholder{height:260px!important;border-radius:13px!important;object-fit:cover!important;}

  /* Add Item hero + form */
  .add-hero{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    background:
      linear-gradient(90deg,rgba(255,250,242,.04) 0%,rgba(255,250,242,.14) 40%,rgba(255,250,242,.95) 57%,#fffaf2 100%),
      url("sales-hero-botanical-vibrant.jpg") left center/48% 100% no-repeat!important;
  }
  .add-hero>div{margin-left:auto!important;max-width:50%!important;text-align:left!important;}
  #itemForm.panel{max-width:none!important;width:100%!important;border-radius:20px!important;padding:24px!important;box-shadow:0 10px 28px rgba(63,49,33,.06)!important;}
  #itemForm .form-grid{column-gap:18px!important;row-gap:14px!important;}
  #itemForm input,#itemForm select,#itemForm textarea{border-radius:10px!important;}
  #itemForm .photo-upload-box{min-height:80px!important;border-radius:14px!important;background:#f5fbf5!important;}
  #itemForm .pricing-calculator{border-radius:16px!important;background:#fffaf2!important;box-shadow:inset 0 0 0 1px #ded4c6!important;padding:20px!important;}
  #itemForm .pricing-grid{gap:14px!important;}
  #itemForm .actions{justify-content:flex-end!important;margin-top:16px!important;}
  #itemForm .actions .primary{min-width:140px!important;}

  /* Sales */
  .sales-hero{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    background:
      linear-gradient(90deg,rgba(255,250,242,.03) 0%,rgba(255,250,242,.10) 38%,rgba(255,250,242,.92) 56%,#fffaf2 100%),
      url("sales-hero-botanical-vibrant.jpg") left center/50% 100% no-repeat!important;
  }
  .sales-hero>div{margin-left:auto!important;max-width:49%!important;}
  .sales-hero + .metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin-bottom:22px!important;}
  .sales-hero + .metrics .sales-metric{
    min-height:120px!important;border-radius:17px!important;padding:20px!important;background-position:right bottom!important;background-size:auto 100%!important;
    box-shadow:0 8px 22px rgba(65,49,31,.06)!important;
  }
  .sales-hero + .metrics .sales-metric span{font-size:15px!important;}
  .sales-hero + .metrics .sales-metric strong{font-size:34px!important;margin-top:10px!important;}
  .sales-empty{
    min-height:300px!important;border:1px solid #e2d9cc!important;border-radius:18px!important;background:#fff!important;
    box-shadow:0 8px 22px rgba(65,49,31,.05)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  }
  .sales-empty::before{content:"❦";display:block;font-size:42px;color:#8ca88d;margin-bottom:8px;}

  /* Flash Sale */
  .flash-hero{
    background:
      linear-gradient(90deg,#fffaf2 0%,#fffaf2 46%,rgba(255,250,242,.88) 57%,rgba(255,250,242,.18) 76%),
      url("sales-hero-botanical-vibrant.jpg") right center/50% 100% no-repeat!important;
  }
  .flash-panel{max-width:none!important;width:100%!important;border-radius:20px!important;padding:22px!important;box-shadow:0 10px 28px rgba(63,49,33,.06)!important;}
  .flash-panel .form-grid{gap:16px!important;}
  .flash-panel input{border-radius:10px!important;height:46px!important;}
  .flash-panel .quick-markups{gap:9px!important;}
  .flash-panel .markup-chip{padding:9px 16px!important;border-radius:999px!important;background:#eff8ef!important;color:#145b2b!important;font-weight:800!important;}
  .flash-panel .sale-toolbar{margin:16px 0 10px!important;gap:10px!important;}
  .flash-item-row{min-height:64px!important;border-radius:12px!important;margin-bottom:10px!important;padding:8px 12px!important;background:#fff!important;box-shadow:0 2px 8px rgba(67,51,33,.025)!important;}
  .flash-item-row img,.flash-thumb-placeholder{width:62px!important;height:50px!important;border-radius:8px!important;object-fit:cover!important;}
  .flash-item-info strong{font-size:14px!important;}
  .flash-item-info span{font-size:11px!important;}
  .flash-item-price{font-size:14px!important;}
  .flash-panel>.actions{margin-top:14px!important;}

  /* Settings */
  .settings-hero{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    background:
      linear-gradient(90deg,rgba(255,250,242,.03) 0%,rgba(255,250,242,.12) 39%,rgba(255,250,242,.94) 58%,#fffaf2 100%),
      url("sales-hero-botanical-vibrant.jpg") left center/48% 100% no-repeat!important;
  }
  .settings-hero>div{margin-left:auto!important;max-width:50%!important;}
  .settings-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important;align-items:stretch!important;}
  .settings-card{border-radius:18px!important;padding:22px!important;box-shadow:0 8px 22px rgba(65,49,31,.055)!important;margin:0!important;}
  .settings-card h2{font-family:Georgia,"Times New Roman",serif!important;font-size:26px!important;margin:0 0 4px!important;}
  .settings-card-head{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;margin-bottom:16px!important;}
  .settings-card-head p{margin:0!important;color:#6f756f!important;}
  .settings-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e6f3e6;color:#5f9369;font-size:20px;}
  .settings-account-box{padding:18px!important;border:1px solid #d7e5d7!important;border-radius:14px!important;background:#f7fbf7!important;}
  .settings-account-box>p:first-child{font-size:17px!important;}
  .settings-account-box>p:first-child span{color:#17652f!important;}
  .settings-info-list{display:grid!important;gap:10px!important;}
  .settings-info-row{display:flex!important;align-items:center!important;gap:13px!important;padding:13px 14px!important;border:1px solid #d8e5d8!important;border-radius:12px!important;background:#f7fbf7!important;}
  .settings-info-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e7f4e7;color:#18703a;font-weight:800;font-size:18px;}
  .settings-info-row strong,.settings-info-row small{display:block!important;}
  .settings-info-row strong{color:#145b2b!important;}
  .settings-info-row small{margin-top:2px;color:#727872!important;}
  .about-card{grid-column:1 / -1!important;}
  .about-row{display:grid!important;grid-template-columns:64px 1fr auto!important;align-items:center!important;gap:14px!important;padding:16px!important;border:1px solid #d8e5d8!important;border-radius:14px!important;background:#f7fbf7!important;}
  .about-leaf{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e7f4e7;color:#2f7c42;font-size:30px;}
  .about-row strong,.about-row span,.about-row small{display:block!important;}
  .about-row strong{font-size:16px!important;color:#145b2b!important;}
  .version-badge{padding:10px 14px!important;border-radius:10px!important;background:#e9f5e9!important;color:#1c6b35!important;font-weight:800!important;}
}

@media (min-width:1350px){
  .content .page-head:not(.dashboard-hero){min-height:205px!important;padding:34px 40px!important;}
  .content .page-head:not(.dashboard-hero) h1{font-size:52px!important;}
  #inventoryGrid .item-card>img,#inventoryGrid .photo-placeholder{height:280px!important;}
}

/* =========================================================
   DESKTOP HERO IMAGE ASPECT-RATIO FIX — 2026-09-23
   Prevents botanical artwork on non-dashboard desktop pages
   from being stretched horizontally. Mobile remains unchanged.
   ========================================================= */
@media (min-width:951px){
  .content .page-head.inventory-hero,
  .content .page-head.add-hero,
  .content .page-head.sales-hero,
  .content .page-head.flash-hero,
  .content .page-head.settings-hero{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    background:#fffaf2!important;
  }

  .content .page-head.inventory-hero::before,
  .content .page-head.add-hero::before,
  .content .page-head.sales-hero::before,
  .content .page-head.flash-hero::before,
  .content .page-head.settings-hero::before{
    content:""!important;
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    width:50%!important;
    z-index:0!important;
    background-image:url("sales-hero-botanical-vibrant.jpg")!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    pointer-events:none!important;
  }

  /* Image sits to the right on Inventory and Flash Sale. */
  .content .page-head.inventory-hero::before,
  .content .page-head.flash-hero::before{
    right:0!important;
    left:auto!important;
    background-position:center center!important;
  }

  /* Image sits to the left on Add Item, Sales and Settings. */
  .content .page-head.add-hero::before,
  .content .page-head.sales-hero::before,
  .content .page-head.settings-hero::before{
    left:0!important;
    right:auto!important;
    background-position:center center!important;
  }

  /* Soft fade into the cream text area while preserving image proportions. */
  .content .page-head.inventory-hero::after,
  .content .page-head.flash-hero::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:linear-gradient(90deg,#fffaf2 0%,#fffaf2 48%,rgba(255,250,242,.90) 56%,rgba(255,250,242,.30) 69%,rgba(255,250,242,0) 82%)!important;
    pointer-events:none!important;
  }

  .content .page-head.add-hero::after,
  .content .page-head.sales-hero::after,
  .content .page-head.settings-hero::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:linear-gradient(90deg,rgba(255,250,242,0) 18%,rgba(255,250,242,.28) 35%,rgba(255,250,242,.88) 48%,#fffaf2 58%,#fffaf2 100%)!important;
    pointer-events:none!important;
  }

  .content .page-head.inventory-hero > *,
  .content .page-head.add-hero > *,
  .content .page-head.sales-hero > *,
  .content .page-head.flash-hero > *,
  .content .page-head.settings-hero > *{
    position:relative!important;
    z-index:2!important;
  }

  /* Keep the approved text-side placement. */
  .content .page-head.add-hero > div,
  .content .page-head.sales-hero > div,
  .content .page-head.settings-hero > div{
    margin-left:auto!important;
    max-width:48%!important;
  }
}


/* =========================================================
   DESKTOP HERO COMPOSITION FIX — 2026-09-23
   Uses dedicated wide banner assets so artwork keeps natural
   proportions. This overrides the earlier cover/crop approach.
   Dashboard and all mobile styling remain unchanged.
   ========================================================= */
@media (min-width:951px){
  .content .page-head.inventory-hero::after,
  .content .page-head.add-hero::after,
  .content .page-head.sales-hero::after,
  .content .page-head.flash-hero::after,
  .content .page-head.settings-hero::after{
    content:none!important;
    display:none!important;
  }

  .content .page-head.inventory-hero::before,
  .content .page-head.flash-hero::before,
  .content .page-head.add-hero::before,
  .content .page-head.sales-hero::before,
  .content .page-head.settings-hero::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:cover!important;
    pointer-events:none!important;
    z-index:0!important;
  }

  .content .page-head.inventory-hero::before,
  .content .page-head.flash-hero::before{
    background-image:url("desktop-botanical-banner-right.jpg")!important;
  }

  .content .page-head.add-hero::before,
  .content .page-head.sales-hero::before,
  .content .page-head.settings-hero::before{
    background-image:url("desktop-botanical-banner-left.jpg")!important;
  }

  .content .page-head.inventory-hero > *,
  .content .page-head.add-hero > *,
  .content .page-head.sales-hero > *,
  .content .page-head.flash-hero > *,
  .content .page-head.settings-hero > *{
    position:relative!important;
    z-index:2!important;
  }
}


/* =========================================================
   SALES DESKTOP VINTAGE FINAL — 2026-10-01
   Desktop only. Mobile and approved Dashboard remain locked.
   ========================================================= */
@media (min-width:951px){
  .content .page-head.sales-hero{
    position:relative!important;
    min-height:230px!important;
    padding:30px 42px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    background:#fffaf2 url("sales-desktop-hero-final-20261001.jpg") center center/cover no-repeat!important;
    border:1px solid #dfd4c5!important;
    border-radius:22px!important;
    box-shadow:0 8px 24px rgba(69,52,34,.055)!important;
  }

  .content .page-head.sales-hero::before,
  .content .page-head.sales-hero::after{
    content:none!important;
    display:none!important;
  }

  .content .page-head.sales-hero > div{
    position:relative!important;
    z-index:2!important;
    width:37%!important;
    max-width:500px!important;
    margin:0 0 0 auto!important;
    text-align:left!important;
  }

  .content .page-head.sales-hero h1{
    margin:0 0 8px!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:54px!important;
    line-height:1!important;
    letter-spacing:-.7px!important;
    color:#13251a!important;
  }

  .content .page-head.sales-hero p{
    margin:0!important;
    max-width:none!important;
    font-size:18px!important;
    line-height:1.3!important;
    color:#738078!important;
  }

  .content .page-head.sales-hero .painted-slogan{
    position:relative!important;
    display:block!important;
    box-sizing:border-box!important;
    width:360px!important;
    max-width:100%!important;
    margin:20px 0 0!important;
    padding:17px 28px!important;
    background:linear-gradient(180deg,#fff8e9 0%,#f7ecd5 100%)!important;
    border:3px double #284a36!important;
    border-radius:50%!important;
    box-shadow:
      inset 0 0 0 2px rgba(40,74,54,.10),
      0 4px 10px rgba(74,55,31,.08)!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:17px!important;
    font-weight:700!important;
    line-height:1.28!important;
    letter-spacing:.045em!important;
    color:#1a3324!important;
    text-align:center!important;
    transform:rotate(-1deg)!important;
  }

  .content .page-head.sales-hero .painted-slogan::before{
    content:"❧"!important;
    position:absolute!important;
    left:20px!important;
    bottom:12px!important;
    font-size:17px!important;
    color:#28553a!important;
  }

  .content .page-head.sales-hero .painted-slogan::after{
    content:"❧"!important;
    position:absolute!important;
    right:20px!important;
    bottom:12px!important;
    font-size:17px!important;
    color:#28553a!important;
    transform:scaleX(-1)!important;
  }

  .sales-hero + .metrics{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    margin:18px 0 22px!important;
  }

  .sales-hero + .metrics .sales-metric{
    min-height:122px!important;
    padding:20px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background-position:right bottom!important;
    background-repeat:no-repeat!important;
    background-size:auto 96%!important;
    box-shadow:0 8px 22px rgba(65,49,31,.055)!important;
  }

  .sales-hero + .metrics .sales-metric span{
    font-size:15px!important;
    font-weight:750!important;
    color:#667167!important;
  }

  .sales-hero + .metrics .sales-metric strong{
    margin-top:10px!important;
    font-size:34px!important;
    line-height:1!important;
    color:#12602e!important;
  }

  .sales-hero + .metrics .metric-items{
    background-image:
      linear-gradient(90deg,#eff9ef 0%,#eff9ef 55%,rgba(239,249,239,.16) 76%),
      url("sales-items-plant-vibrant.jpg")!important;
  }

  .sales-hero + .metrics .metric-revenue{
    background-image:
      linear-gradient(90deg,#eff9ef 0%,#eff9ef 54%,rgba(239,249,239,.14) 76%),
      url("sales-revenue-plant-vibrant.jpg")!important;
  }

  .sales-hero + .metrics .metric-actual{
    background-image:
      linear-gradient(90deg,#eff9ef 0%,#eff9ef 52%,rgba(239,249,239,.12) 73%),
      url("sales-actual-plant-vibrant.jpg")!important;
  }

  .sales-hero + .metrics .metric-average{
    background-image:
      linear-gradient(90deg,#eff9ef 0%,#eff9ef 52%,rgba(239,249,239,.12) 74%),
      url("sales-average-plant-vibrant.jpg")!important;
  }

  .sales-empty{
    min-height:300px!important;
    border:1px solid #e1d7ca!important;
    border-radius:20px!important;
    background:
      linear-gradient(180deg,#fffefb 0%,#fffdf9 100%)!important;
    box-shadow:0 8px 22px rgba(65,49,31,.045)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
}

@media (min-width:1350px){
  .content .page-head.sales-hero{
    min-height:238px!important;
  }
}


/* =========================================================
   SALES DESKTOP BALANCE FINAL — 2026-10-01
   Desktop-only refinement:
   - smaller botanical hero artwork
   - more cream breathing room
   - slightly larger vintage tag
   Mobile and approved Dashboard remain unchanged.
   ========================================================= */
@media (min-width:951px){
  .content .page-head.sales-hero{
    min-height:230px!important;
    padding:28px 46px!important;
    background:#fffaf2 url("sales-desktop-hero-balanced-final-20261001.jpg") center center/cover no-repeat!important;
  }

  .content .page-head.sales-hero > div{
    width:39%!important;
    max-width:520px!important;
    margin-left:auto!important;
    margin-right:28px!important;
  }

  .content .page-head.sales-hero h1{
    font-size:58px!important;
    margin-bottom:10px!important;
  }

  .content .page-head.sales-hero p{
    font-size:18px!important;
  }

  .content .page-head.sales-hero .painted-slogan{
    width:390px!important;
    max-width:100%!important;
    margin-top:20px!important;
    padding:18px 30px!important;
    font-size:18px!important;
  }
}


/* =========================================================
   SALES DESKTOP APPROVED HERO FIX — 2026-10-01
   Uses the approved Sales mockup botanical composition directly.
   Desktop Sales only. Mobile and Dashboard remain locked.
   ========================================================= */
@media (min-width:951px){
  .content .page-head.sales-hero{
    min-height:230px!important;
    padding:28px 46px!important;
    background:#fffaf2 url("sales-desktop-approved-hero-final-20261001.jpg") center center/cover no-repeat!important;
  }

  .content .page-head.sales-hero > div{
    width:39%!important;
    max-width:520px!important;
    margin-left:auto!important;
    margin-right:28px!important;
  }

  .content .page-head.sales-hero h1{
    font-size:58px!important;
    margin-bottom:10px!important;
  }

  .content .page-head.sales-hero p{
    font-size:18px!important;
  }

  .content .page-head.sales-hero .painted-slogan{
    width:390px!important;
    max-width:100%!important;
    margin-top:20px!important;
    padding:18px 30px!important;
    font-size:18px!important;
  }
}


/* SALES DESKTOP TEXT BALANCE — actual rendered element */
@media (min-width: 951px) {
  .content .page-head.sales-hero > div {
    transform: translateX(-72px) !important;
  }
}


/* =========================================================
   SALES DESKTOP FINAL BALANCED HERO — 2026-10-01
   Uses the approved hero image with Sales copy positioned left.
   The text/tag are baked into the desktop hero, so the live HTML
   copy is hidden on desktop only. Mobile remains unchanged.
   ========================================================= */
@media (min-width:951px){
  .content .page-head.sales-hero{
    min-height:230px!important;
    padding:0!important;
    background:#fffaf2 url("sales-desktop-final-balanced-hero-20261001.jpg") center center/cover no-repeat!important;
  }

  .content .page-head.sales-hero::before,
  .content .page-head.sales-hero::after{
    content:none!important;
    display:none!important;
  }

  .content .page-head.sales-hero > div{
    display:none!important;
    transform:none!important;
  }
}


/* SALES DESKTOP FINAL LEFT-BALANCED HERO — desktop only */
@media (min-width:951px){
  .content .page-head.sales-hero{
    min-height:230px!important;
    padding:0!important;
    background:#fffaf2 url("sales-desktop-final-balanced-left-20261001.jpg") center center/cover no-repeat!important;
  }
  .content .page-head.sales-hero > div{
    display:none!important;
  }
}


/* SALES DESKTOP TRUE LEFT MOVE — v7 */
@media (min-width:951px){
  .content .page-head.sales-hero{
    min-height:230px!important;
    padding:0!important;
    background:#fffaf2 url("sales-desktop-hero-true-left-v7.jpg") center center/cover no-repeat!important;
  }
  .content .page-head.sales-hero > div{
    display:none!important;
  }
}


/* =========================================================
   DASHBOARD DESKTOP HERO ZOOM RESTORE — v9
   Desktop only.
   Restores the left botanical image to the closer approved crop.
   Dashboard text, bouquet, metrics, mobile and Sales remain unchanged.
   ========================================================= */
@media (min-width:951px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 46%,
        rgba(255,250,242,.72) 58%,
        rgba(255,250,242,.98) 72%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/61% 100% no-repeat!important;
  }
}

@media (min-width:1350px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 46%,
        rgba(255,250,242,.72) 58%,
        rgba(255,250,242,.98) 72%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/62% 100% no-repeat!important;
  }
}


/* =========================================================
   DASHBOARD DESKTOP HERO SCALE-DOWN — v10
   Makes the left botanical dashboard hero image a little smaller
   on desktop only, while keeping text, bouquet, metrics and other
   pages unchanged.
   ========================================================= */
@media (min-width: 951px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 44%,
        rgba(255,250,242,.72) 56%,
        rgba(255,250,242,.98) 71%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/58% 100% no-repeat !important;
  }
}

@media (min-width: 1350px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 44%,
        rgba(255,250,242,.72) 56%,
        rgba(255,250,242,.98) 71%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/59% 100% no-repeat !important;
  }
}


/* =========================================================
   DASHBOARD DESKTOP HERO SCALE-DOWN — v11
   Shrink the left dashboard hero artwork further on desktop.
   ========================================================= */
@media (min-width: 951px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 40%,
        rgba(255,250,242,.72) 51%,
        rgba(255,250,242,.98) 66%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/52% 100% no-repeat !important;
  }
}

@media (min-width: 1350px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.02) 0%,
        rgba(255,250,242,.05) 40%,
        rgba(255,250,242,.72) 51%,
        rgba(255,250,242,.98) 66%,
        #fffaf2 100%),
      url("dashboard-hero-botanical-left-final-20260923.jpg") left center/53% 100% no-repeat !important;
  }
}


/* =========================================================
   DASHBOARD DESKTOP TRUE IMAGE SCALE FIX — v12
   Desktop only.
   Uses a new padded hero asset so the actual pots/plants/books
   are genuinely smaller, rather than just changing the background box.
   Mobile, Dashboard text, bouquet, metrics and Sales are unchanged.
   ========================================================= */
@media (min-width:951px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.01) 0%,
        rgba(255,250,242,.04) 42%,
        rgba(255,250,242,.70) 55%,
        rgba(255,250,242,.97) 70%,
        #fffaf2 100%),
      url("dashboard-hero-desktop-smaller-v12.jpg") left center/58% 100% no-repeat !important;
  }
}

@media (min-width:1350px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.01) 0%,
        rgba(255,250,242,.04) 42%,
        rgba(255,250,242,.70) 55%,
        rgba(255,250,242,.97) 70%,
        #fffaf2 100%),
      url("dashboard-hero-desktop-smaller-v12.jpg") left center/58% 100% no-repeat !important;
  }
}


/* =========================================================
   DASHBOARD CLEAN SINGLE-HERO FIX — v14
   Desktop only.
   Removes the duplicated/nested hero problem by returning to the
   original live Dashboard container from v12.
   The botanical artwork is slightly smaller and the live copy is
   moved left for better balance. Mobile and Sales are unchanged.
   ========================================================= */
@media (min-width:951px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.01) 0%,
        rgba(255,250,242,.04) 40%,
        rgba(255,250,242,.70) 53%,
        rgba(255,250,242,.97) 68%,
        #fffaf2 100%),
      url("dashboard-hero-desktop-smaller-v12.jpg") left center/54% 100% no-repeat!important;
  }

  .dashboard-hero .hero-copy{
    visibility:visible!important;
    transform:translate(-28px,-12px)!important;
  }
}

@media (min-width:1350px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.01) 0%,
        rgba(255,250,242,.04) 40%,
        rgba(255,250,242,.70) 53%,
        rgba(255,250,242,.97) 68%,
        #fffaf2 100%),
      url("dashboard-hero-desktop-smaller-v12.jpg") left center/55% 100% no-repeat!important;
  }

  .dashboard-hero .hero-copy{
    transform:translate(-36px,-14px)!important;
  }
}


/* =========================================================
   DASHBOARD FINAL TARGET — v17
   Desktop only.
   Uses the approved smaller botanical composition with the full
   trailing vine visible. Keeps the live Dashboard copy and bouquet.
   ========================================================= */
@media (min-width:951px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,0) 0%,
        rgba(255,250,242,.02) 43%,
        rgba(255,250,242,.52) 50%,
        rgba(255,250,242,.94) 59%,
        #fffaf2 68%,
        #fffaf2 100%),
      url("dashboard-hero-target-v17.jpg") left center/52% 100% no-repeat!important;
  }
}

@media (min-width:1350px){
  .dashboard-hero{
    background:
      linear-gradient(90deg,
        rgba(255,250,242,0) 0%,
        rgba(255,250,242,.02) 43%,
        rgba(255,250,242,.52) 50%,
        rgba(255,250,242,.94) 59%,
        #fffaf2 68%,
        #fffaf2 100%),
      url("dashboard-hero-target-v17.jpg") left center/52% 100% no-repeat!important;
  }
}


/* =========================================================
   INVENTORY VINTAGE BOTANICAL APPROVED DESIGN — v18
   Desktop only. Leaves the left navigation colours unchanged.
   ========================================================= */
.search-wrap{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box}
.search-wrap .search-icon{font-size:18px;line-height:1;color:#7b827b;flex:0 0 auto}
.search-wrap input{flex:1;min-width:0;border:0!important;outline:none;background:transparent!important;box-shadow:none!important;padding:0!important}

@media (min-width:951px){
  .content .page-head.inventory-hero{
    position:relative!important;
    overflow:hidden!important;
    padding:0!important;
    min-height:0!important;
    width:100%!important;
    aspect-ratio:1420 / 272!important;
    border-radius:22px!important;
    background:#fffaf2 url("inventory-hero-approved-v18.jpg") center center/100% 100% no-repeat!important;
    box-shadow:0 10px 28px rgba(63,49,33,.08)!important;
    border:1px solid #ded4c6!important;
    isolation:isolate!important;
  }
  .content .page-head.inventory-hero::before,
  .content .page-head.inventory-hero::after{display:none!important;content:none!important}
  .content .page-head.inventory-hero>div{visibility:hidden!important;pointer-events:none!important}
  .content .page-head.inventory-hero .primary{
    position:absolute!important;
    z-index:5!important;
    top:25.5%!important;
    right:2.2%!important;
    transform:none!important;
    margin:0!important;
    min-width:145px!important;
    padding:14px 24px!important;
    border-radius:13px!important;
    font-size:16px!important;
    font-weight:800!important;
    background:#247f3f!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.55)!important;
    box-shadow:0 8px 18px rgba(38,91,48,.18)!important;
  }

  .inventory-filters{
    display:grid!important;
    grid-template-columns:1.4fr 1fr 1fr 1fr!important;
    gap:14px!important;
    margin:18px 0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }
  .inventory-filters .search-wrap,
  .inventory-filters select{
    height:50px!important;
    border:1px solid #ddcfbe!important;
    border-radius:13px!important;
    background:#fffaf4!important;
    box-shadow:0 2px 8px rgba(75,51,32,.03)!important;
  }
  .inventory-filters .search-wrap{padding:0 15px!important}
  .inventory-filters .search-icon{font-size:20px!important;color:#7c827d!important}
  .inventory-filters input{font-size:15px!important;color:#303630!important}
  .inventory-filters select{padding:0 15px!important;font-size:15px!important;color:#303630!important}

  #inventoryGrid.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
  #inventoryGrid .item-card{
    position:relative!important;
    overflow:hidden!important;
    border-radius:18px!important;
    border:1px solid #e1d5c6!important;
    background:linear-gradient(180deg,#fffdf8 0%,#fffaf2 100%)!important;
    box-shadow:0 8px 24px rgba(70,48,31,.055)!important;
    padding:14px!important;
  }
  #inventoryGrid .item-card::after{
    content:""!important;
    position:absolute!important;
    right:-36px!important;
    bottom:-44px!important;
    width:145px!important;
    height:205px!important;
    background:url("inventory-native-botanical-v18.png") center/contain no-repeat!important;
    opacity:.18!important;
    pointer-events:none!important;
    z-index:0!important;
    transform:rotate(-8deg)!important;
  }
  #inventoryGrid .item-card>*{position:relative;z-index:1}
  #inventoryGrid .item-card>img,
  #inventoryGrid .photo-placeholder{height:270px!important;border-radius:13px!important;object-fit:cover!important}
  #inventoryGrid .item-title-row{align-items:flex-start!important;gap:10px!important}
  #inventoryGrid .item-card h3{font-family:Georgia,"Times New Roman",serif!important;font-size:18px!important;line-height:1.12!important;margin:0!important}
  #inventoryGrid .item-card .meta{font-size:12px!important;color:#777c76!important;margin-top:6px!important}
  #inventoryGrid .price-line{font-size:15px!important;margin:10px 0 8px!important}
  #inventoryGrid .profit{font-size:14px!important}
  #inventoryGrid .actions button{background:#fffdf8!important}
  #inventoryGrid .actions .danger{background:#fff7f6!important}
}

@media (min-width:1350px){
  #inventoryGrid .item-card>img,
  #inventoryGrid .photo-placeholder{height:290px!important}
}

/* =========================================================
   INVENTORY SINGLE BUTTON / ART PRESERVE FIX — v20
   Built directly from approved v18.
   Keeps all v18 imagery unchanged and turns the live Add Item
   control into an invisible clickable hotspot over the button
   already present in the hero artwork.
   Desktop Inventory only.
   ========================================================= */
@media (min-width:951px){
  .content .page-head.inventory-hero .primary{
    position:absolute!important;
    top:27.5%!important;
    right:1.2%!important;
    width:10.7%!important;
    height:21%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    border-radius:14px!important;
    z-index:5!important;
  }
  .content .page-head.inventory-hero .primary:hover,
  .content .page-head.inventory-hero .primary:focus,
  .content .page-head.inventory-hero .primary:active{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:transparent!important;
    outline:none!important;
  }
}


/* =========================================================
   INVENTORY BOTANICAL FINAL — v21
   Desktop Inventory only.
   - Uses the latest approved richer botanical hero
   - Smaller baked-in Add Item button with invisible live hotspot
   - Restores botanical sidebar and page accents
   - Leaves Dashboard, Sales and mobile unchanged
   ========================================================= */
@media (min-width:951px){

  .content .page-head.inventory-hero{
    background:#fffaf2 url("inventory-hero-approved-v21.jpg") center center/100% 100% no-repeat!important;
  }

  /* Invisible clickable hotspot over the single baked-in Add Item button. */
  .content .page-head.inventory-hero .primary{
    position:absolute!important;
    top:27%!important;
    right:1.35%!important;
    width:9.3%!important;
    height:18%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    border-radius:12px!important;
    z-index:7!important;
  }

  .content .page-head.inventory-hero .primary:hover,
  .content .page-head.inventory-hero .primary:focus,
  .content .page-head.inventory-hero .primary:active{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:transparent!important;
    outline:none!important;
  }

  /* Botanical flourish along the lower part of the left navigation.
     Navigation colours themselves remain unchanged. */
  .sidebar{
    position:sticky!important;
    overflow:hidden!important;
  }

  .sidebar::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:48%!important;
    background:url("inventory-sidebar-botanical-v21.jpg") bottom left/100% auto no-repeat!important;
    opacity:.82!important;
    pointer-events:none!important;
    z-index:0!important;
  }

  .sidebar > *{
    position:relative!important;
    z-index:1!important;
  }

  /* Restore richer native botanical decoration through the Inventory page. */
  #inventoryGrid{
    position:relative!important;
    z-index:1!important;
  }

  #inventoryGrid .item-card::after{
    width:155px!important;
    height:215px!important;
    right:-28px!important;
    bottom:-38px!important;
    opacity:.28!important;
  }

  /* Extra soft botanical accents around the Inventory content canvas. */
  #content{
    position:relative!important;
  }

  #content::before{
    content:""!important;
    position:absolute!important;
    top:285px!important;
    right:-24px!important;
    width:230px!important;
    height:230px!important;
    background:url("inventory-native-botanical-v18.png") center/contain no-repeat!important;
    opacity:.18!important;
    transform:rotate(77deg)!important;
    pointer-events:none!important;
    z-index:0!important;
  }

  #content::after{
    content:""!important;
    position:absolute!important;
    left:-22px!important;
    bottom:-35px!important;
    width:245px!important;
    height:300px!important;
    background:url("inventory-native-botanical-v18.png") center/contain no-repeat!important;
    opacity:.12!important;
    transform:rotate(-20deg)!important;
    pointer-events:none!important;
    z-index:0!important;
  }

  .content > *{
    position:relative!important;
    z-index:1!important;
  }
}


/* =========================================================
   INVENTORY BOTANICAL POLISH — v22
   - Moves live Add Item hotspot left slightly
   - Restores/matches softer botanical imagery on item cards
   - Restores the soft top-right botanical accent above the grid
   ========================================================= */
@media (min-width:951px){
  .content .page-head.inventory-hero .primary{
    top:27.1%!important;
    right:2.15%!important;
    width:8.9%!important;
    height:17.8%!important;
    border-radius:12px!important;
  }

  /* Soft top-right botanical detail under the filters, matching the approved mockup. */
  #content::before{
    top:294px!important;
    right:0!important;
    width:360px!important;
    height:90px!important;
    background:url("content-top-right-botanical-v22-clean.png") right top/contain no-repeat!important;
    opacity:.8!important;
    transform:none!important;
  }

  /* Keep the bottom-left page flourish but soften it a touch. */
  #content::after{
    left:-18px!important;
    bottom:-28px!important;
    width:236px!important;
    height:290px!important;
    opacity:.10!important;
  }

  /* Item card botanical corners, closer to the approved decorative look. */
  #inventoryGrid .item-card::after{
    width:132px!important;
    height:135px!important;
    right:-2px!important;
    bottom:-1px!important;
    background:url("card-corner-botanical-v22-good.png") right bottom/contain no-repeat!important;
    opacity:.9!important;
    transform:none!important;
  }

  #inventoryGrid .item-card:nth-child(2n)::after{
    right:-4px!important;
    bottom:-2px!important;
    width:128px!important;
    height:132px!important;
    transform:scale(0.98) rotate(-5deg)!important;
    opacity:.82!important;
  }

  #inventoryGrid .item-card:nth-child(3n)::after{
    right:-3px!important;
    bottom:-3px!important;
    width:136px!important;
    height:138px!important;
    transform:scale(1.02) rotate(4deg)!important;
    opacity:.86!important;
  }
}


/* INVENTORY CONFIRMED TARGET — v23 */
@media (min-width:951px){
  .content .page-head.inventory-hero{
    background:#fffaf2 url("inventory-hero-confirmed-v23.jpg") center center/100% 100% no-repeat!important;
  }
  .content .page-head.inventory-hero .primary{
    top:27.0%!important;
    right:3.15%!important;
    width:8.65%!important;
    height:18.0%!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    text-indent:-9999px!important;
    z-index:9!important;
  }
  .content .page-head.inventory-hero .primary:hover,
  .content .page-head.inventory-hero .primary:focus,
  .content .page-head.inventory-hero .primary:active{
    background:transparent!important;border:0!important;box-shadow:none!important;color:transparent!important;outline:none!important;
  }
  #content::before{
    content:""!important;
    top:294px!important;
    right:-2px!important;
    width:300px!important;
    height:106px!important;
    background:url("inventory-top-right-botanical-v23.png") right top/contain no-repeat!important;
    opacity:.72!important;
    transform:none!important;
  }
  #content::after{display:none!important;}
  #inventoryGrid .item-card::after{
    right:-4px!important;bottom:-4px!important;width:144px!important;height:174px!important;
    background:url("inventory-card-botanical-v23-1.png") right bottom/contain no-repeat!important;
    opacity:.92!important;transform:none!important;
  }
  #inventoryGrid .item-card:nth-child(2n)::after{
    right:-4px!important;bottom:-4px!important;width:144px!important;height:174px!important;
    background-image:url("inventory-card-botanical-v23-2.png")!important;opacity:.88!important;transform:none!important;
  }
  #inventoryGrid .item-card:nth-child(3n)::after{
    right:-4px!important;bottom:-4px!important;width:158px!important;height:178px!important;
    background-image:url("inventory-card-botanical-v23-3.png")!important;opacity:.90!important;transform:none!important;
  }
  #inventoryGrid .item-card>*{position:relative!important;z-index:2!important;}
  .sidebar::after{height:49%!important;opacity:.86!important;}
}


/* INVENTORY LAYOUT TWEAKS — v24 */
@media (min-width:951px){
  /* Pull the main content slightly left so the toolbar row fits the space better. */
  .content{padding:30px 24px 54px 20px!important;}

  /* Hide the baked-in button area and replace it with a smaller live button shifted left. */
  .content .page-head.inventory-hero::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:6!important;
    top:11.8%!important;
    right:0.65%!important;
    width:14.4%!important;
    height:28.5%!important;
    border-radius:16px!important;
    background:rgba(255,250,242,.94)!important;
    border:1px solid rgba(223,209,189,.92)!important;
    box-shadow:0 2px 10px rgba(79,60,38,.06)!important;
    pointer-events:none!important;
  }

  .content .page-head.inventory-hero .primary{
    top:18.0%!important;
    right:4.9%!important;
    width:auto!important;
    min-width:122px!important;
    height:auto!important;
    padding:11px 18px!important;
    border-radius:12px!important;
    background:#2e8a45!important;
    border:1px solid rgba(255,255,255,.65)!important;
    box-shadow:0 8px 16px rgba(38,91,48,.16)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.15!important;
    text-indent:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    z-index:8!important;
  }

  .content .page-head.inventory-hero .primary:hover,
  .content .page-head.inventory-hero .primary:focus,
  .content .page-head.inventory-hero .primary:active{
    background:#27773b!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.7)!important;
    box-shadow:0 8px 16px rgba(38,91,48,.18)!important;
    outline:none!important;
  }
}


/* INVENTORY HERO/CONTENT FIX — v25 */
@media (min-width:951px){
  /* Refine content alignment a touch to the left. */
  .content{padding:30px 24px 54px 18px!important;}

  /* Use cleaned hero art and remove the problematic v24 overlay. */
  .content .page-head.inventory-hero{
    background:#fffaf2 url("inventory-hero-v25-clean2.jpg") center center/100% 100% no-repeat!important;
  }

  .content .page-head.inventory-hero::after{
    content:none!important;
    display:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
  }

  /* Single live Add Item button, slightly smaller and a bit left. */
  .content .page-head.inventory-hero .primary{
    position:absolute!important;
    top:18.8%!important;
    right:3.85%!important;
    width:auto!important;
    min-width:118px!important;
    height:auto!important;
    padding:10px 18px!important;
    margin:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:12px!important;
    background:#2e8a45!important;
    border:1px solid rgba(255,255,255,.65)!important;
    box-shadow:0 8px 16px rgba(38,91,48,.16)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.15!important;
    text-indent:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    z-index:10!important;
  }

  .content .page-head.inventory-hero .primary:hover,
  .content .page-head.inventory-hero .primary:focus,
  .content .page-head.inventory-hero .primary:active{
    background:#27773b!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.7)!important;
    box-shadow:0 8px 16px rgba(38,91,48,.18)!important;
    outline:none!important;
  }
}


/* INVENTORY HERO BUTTON FINAL FIX — v26 */
@media (min-width:951px){
  /* Keep the confirmed hero artwork with the single baked-in Add Item button. */
  .content .page-head.inventory-hero{
    background:#fffaf2 url("inventory-hero-confirmed-v23.jpg") center center/100% 100% no-repeat!important;
  }

  /* Remove any replacement white box / pseudo button layers. */
  .content .page-head.inventory-hero::before{
    display:none!important;
    content:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
  }
  .content .page-head.inventory-hero::after{
    display:none!important;
    content:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    width:0!important;
    height:0!important;
  }

  /* Keep only one visible Add Item button by making the real button an invisible hotspot. */
  .content .page-head.inventory-hero .primary{
    position:absolute!important;
    top:18.2%!important;
    right:1.55%!important;
    width:10.9%!important;
    height:18.8%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
    border:0!important;
    border-radius:14px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    z-index:12!important;
    cursor:pointer!important;
    appearance:none!important;
    -webkit-appearance:none!important;
  }

  .content .page-head.inventory-hero .primary:hover,
  .content .page-head.inventory-hero .primary:focus,
  .content .page-head.inventory-hero .primary:active{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:transparent!important;
    outline:none!important;
  }
}

/* INVENTORY FINAL LEFT ALIGNMENT — v27 */
@media (min-width:951px){
  /* Move desktop content a subtle amount left without changing any imagery or controls. */
  .content{
    padding-left:10px!important;
  }
}

/* ================================================================
   INVENTORY V46 — SINGLE AUTHORITATIVE DESKTOP LAYOUT
   Preserves the approved V43-V45 geometry and app functionality.
   Replaces blurred mirror reflection; no duplicated/ghosted hero layers.
   Keeps days-in-stock above and clear of decorative card artwork.
   ================================================================ */
@media (min-width:951px){
  .content{
    padding:30px 24px 54px 20px!important;
    margin:0!important;
    width:100%!important;
    max-width:none!important;
    border-left:0!important;
    box-sizing:border-box!important;
  }
  .content .page-head.inventory-hero{
    margin:0!important;
    width:100%!important;
    min-width:0!important;
    transform:none!important;
    position:relative!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    background:#fffaf2 url("inventory-hero-v48-text-left.jpg") center center/100% 100% no-repeat!important;
  }
  .content .page-head.inventory-hero::before,
  .content .page-head.inventory-hero::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }
  /* Add Item remains accessible in the desktop sidebar and mobile bottom bar. */
  .content .page-head.inventory-hero .primary{display:none!important;}
  .content > :not(.page-head.inventory-hero){margin-left:0!important;}

  #content{position:relative!important;}
  #content::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:294px!important;
    right:-2px!important;
    width:300px!important;
    height:106px!important;
    background:url("inventory-top-right-botanical-v23.png") right top/contain no-repeat!important;
    opacity:.72!important;
    transform:none!important;
    pointer-events:none!important;
    z-index:0!important;
  }
  #content::after{content:none!important;display:none!important;}
  #inventoryGrid{position:relative!important;z-index:1!important;}
  #inventoryGrid .item-card{
    position:relative!important;
    overflow:hidden!important;
  }
  /* V47: the decorative PNGs contain ONLY flowers (no baked-in labels).
     Position them below the days-in-stock row, in the bottom-right action area. */
  #inventoryGrid .item-card::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    right:0!important;
    bottom:1px!important;
    width:116px!important;
    height:54px!important;
    background:url("inventory-card-botanical-v47-1.png") right bottom/contain no-repeat!important;
    opacity:.88!important;
    transform:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    pointer-events:none!important;
    z-index:1!important;
  }
  #inventoryGrid .item-card:nth-child(2n)::after{
    background-image:url("inventory-card-botanical-v47-2.png")!important;
    opacity:.88!important;
  }
  #inventoryGrid .item-card:nth-child(3n)::after{
    width:116px!important;
    background-image:url("inventory-card-botanical-v47-3.png")!important;
    opacity:.88!important;
  }
  #inventoryGrid .item-card > *{position:relative!important;z-index:2!important;}
  #inventoryGrid .item-card .item-footer > .meta{
    position:relative!important;
    z-index:5!important;
    flex-shrink:0!important;
    white-space:nowrap!important;
    background:#fffaf2!important;
    padding:3px 5px!important;
    border-radius:6px!important;
    text-shadow:none!important;
  }
  .sidebar::after{height:49%!important;opacity:.86!important;}
  .sidebar .nav-btn:focus,
  .sidebar .nav-btn:focus-visible{outline:none!important;box-shadow:none!important;}
}

/* V49 — INVENTORY BANNER OVERLAP REMOVAL
   The previous desktop #content::before decoration was absolutely
   positioned below the Inventory hero. Suppress only that extra layer.
   The hero background image, dimensions, and card flowers are unchanged. */
@media (min-width:951px){
  #content:has(> .page-head.inventory-hero)::before{
    content:none!important;
    display:none!important;
    background:none!important;
  }
}

/* V51 — INVENTORY HERO MATCHES DASHBOARD LEFT INSET
   The desktop .content container has 20px left padding. Both Dashboard
   and Inventory banners use the normal content width and position.
   V50's negative margin was removed (it pushed Inventory against sidebar).
   No image, content grid, cards, or mobile layout changes. */
@media (min-width:951px){
  #content.content > .page-head.inventory-hero{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
  }
}


/* V52 — INVENTORY BANNER ARTWORK BLEEDS TO SIDEBAR, TEXT STAYS PUT
   The content inset is 20px. Extend ONLY the hero's image surface into that
   inset. The original image still occupies exactly the same on-screen area,
   so its Inventory title and all of the vintage artwork do not shift.
   The narrow reflected left edge fills the extra 20px seamlessly. */
@media (min-width:951px){
  #content.content > .page-head.inventory-hero{
    margin-left:-20px!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    transform:none!important;
    background-color:#fffaf2!important;
    background-image:url("inventory-hero-v48-text-left.jpg"),url("inventory-hero-left-edge-v52.jpg")!important;
    background-position:right center,left center!important;
    background-size:calc(100% - 20px) 100%,20px 100%!important;
    background-repeat:no-repeat,no-repeat!important;
  }
}