:root{
  --bg: #f6f1ea;
  --panel: rgba(255, 255, 255, 0.78);
  --text: #1d1916;
  --muted: rgba(29, 25, 22, 0.70);
  --gold: #b78949;
  --beige: #fbf7f1;
  --brown: #6a4a33;
  --stroke: rgba(29, 25, 22, 0.10);
  --shadow: 0 22px 70px rgba(29,25,22,.14);
  --shadow-soft: 0 12px 34px rgba(29,25,22,.10);
  --accent: #b78949;
  --accent-2: #8e5f3a;
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
html{overflow-y:scroll; scrollbar-gutter: stable;}
body{
  margin:0;
  background:
    radial-gradient(1100px 640px at 18% 2%, rgba(183, 137, 73, 0.18), transparent 60%),
    radial-gradient(900px 600px at 86% 18%, rgba(29, 25, 22, 0.05), transparent 64%),
    var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}

.container{width:min(1100px, calc(100% - 32px)); margin:0 auto;}

.topbar{position:sticky; top:0; z-index:10; backdrop-filter: blur(12px); background: rgba(244, 238, 231, 0.72); border-bottom:1px solid var(--stroke);}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px; min-height:92px;}
.brand{font-family:"Playfair Display", serif; font-weight:600; letter-spacing:.3px; color:var(--text); text-decoration:none; font-size:20px;}
.brand span{color:var(--gold)}

.brand--logo{display:flex; align-items:center; gap:10px; flex:0 0 92px;}
.brand__logo{height:68px; width:68px; object-fit:contain; display:block; filter: drop-shadow(0 14px 28px rgba(29,25,22,.22));}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.nav{display:flex; gap:10px; align-items:center;}
.nav a{color:rgba(29,25,22,.80); text-decoration:none; font-weight:600; padding:9px 12px; border-radius:999px; border:1px solid transparent; background: transparent; transition: background .14s ease, border-color .14s ease, transform .14s ease;}
.nav a:hover{color:var(--text); background: rgba(255,255,255,.55); border-color: rgba(29,25,22,.12);}
.nav a:active{transform: translateY(1px)}

.nav__cart{position:relative; padding:9px 12px; display:inline-flex; align-items:center; justify-content:center; min-width:44px;}
.nav__cartIcon{display:inline-flex; align-items:center; justify-content:center;}
.nav__badge{position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:11px; font-weight:800; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #1d1916; border:1px solid rgba(29,25,22,.18); box-shadow: 0 10px 20px rgba(183,137,73,.22);}

.admin-topbar{position:relative}
.admin-nav__toggle{display:none}
.admin-nav__burger{display:none; width:44px; height:40px; border:1px solid rgba(30,26,23,.18); border-radius:999px; background: rgba(255,255,255,.55); align-items:center; justify-content:center; gap:4px; padding:0 12px;}
.admin-nav__burger span{display:block; width:18px; height:2px; background: rgba(30,26,23,.78); border-radius:99px;}

.admin-menu__dropdown{max-height: calc(100vh - 120px); overflow-y:auto; -webkit-overflow-scrolling: touch;}
.admin-menu__more summary::-webkit-details-marker{display:none;}
.admin-menu__more summary{list-style:none;}

.admin-nav--mobile{display:none}

@media (max-width: 700px){
  .topbar__inner{gap:10px; align-items:center;}
  .brand--logo{flex-basis:88px;}
  .brand__logo{height:64px; width:64px;}
  .admin-nav--desktop{display:none}
  .admin-nav--mobile{display:block}
  .admin-nav__burger{display:inline-flex; margin-left:auto;}
  .admin-nav{display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); background: rgba(255,255,255,0.92); border:1px solid rgba(30,26,23,.12); border-radius:16px; box-shadow: var(--shadow-soft); padding:10px; flex-direction:column; gap:10px;}
  .admin-nav a{padding:8px 10px; border-radius:12px;}
  .admin-nav a:hover{background: rgba(181, 138, 76, 0.10)}
  .admin-nav form{padding:4px 6px;}
  .admin-nav__toggle:checked ~ .admin-nav{display:flex;}

  .admin-menu__dropdown{max-width: min(92vw, 360px);}
}

.hero{padding:56px 0 72px;}
.hero__card{
  background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
  border:1px solid rgba(30,26,23,.10);
  border-radius:22px;
  padding:28px;
  box-shadow: var(--shadow);
}
.eyebrow{color:var(--gold); margin:0 0 12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:12px;}
h1{font-family:"Playfair Display", serif; font-size: clamp(30px, 4vw, 46px); line-height:1.05; margin:0 0 12px;}
.lead{color:var(--muted); margin:0 0 22px; font-size:16px; max-width:62ch;}

.actions{display:flex; flex-wrap:wrap; gap:12px;}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:999px; text-decoration:none; font-weight:700; border:1px solid transparent; max-width:100%; letter-spacing:.01em;}
.btn--primary{background: linear-gradient(180deg, rgba(183,137,73,1), rgba(142,95,58,1)); color:#1d1916; border-color: rgba(183,137,73,.42);}
.btn--primary{transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; box-shadow: 0 12px 26px rgba(183, 137, 73, .18);}
.btn--primary:hover{filter:brightness(1.03); transform: translateY(-1px); box-shadow: 0 16px 34px rgba(183, 137, 73, .22);}
.btn--ghost{background: transparent; border-color: rgba(30,26,23,.18); color: rgba(30,26,23,.88);}
.btn--ghost{transition: border-color .14s ease, background .14s ease, transform .14s ease;}
.btn--ghost:hover{border-color: rgba(30,26,23,.30); background: rgba(255,255,255,.65)}

.footer{border-top:1px solid var(--stroke); background: rgba(235, 229, 223, 0.72);}
.footer__inner{display:flex; flex-direction:column; gap:6px; padding:20px 0; color:var(--muted); font-size:13px;}
.footer__meta{opacity:.85}
.footer a{color:inherit; text-decoration:none; font-weight:600;}
.footer a:hover{text-decoration:underline;}

.page{padding:56px 0;}

.muted{color:var(--muted)}

.grid{display:grid; grid-template-columns: 1fr; gap:14px; margin-top:18px;}
.card{background: rgba(255,255,255,0.74); border:1px solid rgba(30,26,23,.10); border-radius:18px; overflow:hidden; box-shadow: var(--shadow);}
.card{transition: transform .18s ease, box-shadow .18s ease;}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow-soft);}
.card__media{display:block; aspect-ratio: 4/3; background: rgba(30,26,23,0.03);}
.card__media img{width:100%; height:100%; object-fit:cover; display:block;}
.card__placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:"Playfair Display", serif; letter-spacing:.12em; color: rgba(184,149,90,.85);}
.card__body{padding:14px 14px 16px;}
.card__title{margin:0 0 8px; font-size:18px; font-weight:600; font-family:"Playfair Display", serif; letter-spacing:.2px;}
.card__title a{color:var(--text); text-decoration:none;}
.card__title a:hover{color:var(--brown)}
.card__meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.price{color:var(--brown); font-weight:700;}
.price--big{font-size:22px; margin:0 0 6px;}
.tag{font-size:12px; color:rgba(106,74,51,.92); border:1px solid rgba(30,26,23,.18); background: rgba(255,255,255,.55); padding:4px 10px; border-radius:999px;}
.tag--discount{background:linear-gradient(180deg, #d9534f, #c9302c); color:#fff; border-color:rgba(217,83,79,.5); font-weight:700}
.tag--big{padding:6px 14px; font-size:13px}
.tag--discount.tag--big{padding:8px 16px; font-size:14px}
.card__actions{display:flex; gap:10px; align-items:center;}
.qty{width:74px; background: rgba(255, 255, 255, 0.86); color: var(--text); border:1px solid rgba(30,26,23,.14); border-radius:999px; padding:10px 12px;}

.detail{display:grid; grid-template-columns: 1fr; gap:18px; margin-top:18px;}
.detail__media{border-radius:18px; overflow:hidden; border:1px solid rgba(30,26,23,.10); background: rgba(30,26,23,0.03);}
.detail__media img{width:100%; height:auto; max-height:520px; object-fit:cover; display:block;}
.detail__placeholder{height:320px; display:flex; align-items:center; justify-content:center; font-family:"Playfair Display", serif; letter-spacing:.12em; color: rgba(184,149,90,.85);}
.detail__thumbs{display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:10px; padding:12px; background: rgba(255,255,255,0.50); border-top:1px solid rgba(30,26,23,.10);}
.detail__thumb{display:block; width:100%; aspect-ratio: 4/3; border-radius:12px; overflow:hidden; border:1px solid rgba(30,26,23,.10); background: rgba(30,26,23,0.03); padding:0; cursor:pointer;}
.detail__thumb:focus{outline:none; box-shadow: 0 0 0 4px rgba(181, 138, 76, .18); border-color: rgba(181, 138, 76, .55);}
.detail__thumb--active{border-color: rgba(181, 138, 76, .75); box-shadow: 0 10px 20px rgba(183,137,73,.16);}
.detail__thumb img{width:100%; height:100%; object-fit:cover; display:block; max-height:none;}
.detail__content p{color:var(--muted)}
.detail__actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px;}

.cart{display:grid; grid-template-columns: 1fr; gap:16px; margin-top:18px;}
.cart__items{display:flex; flex-direction:column; gap:10px;}
.line{display:grid; grid-template-columns: 1fr; gap:10px; padding:14px; background: rgba(255,255,255,0.74); border:1px solid rgba(30,26,23,.10); border-radius:16px;}
.line__title{font-weight:700;}
.line__meta{color:var(--muted); font-size:13px; margin-top:2px;}
.line__qty{display:flex; gap:10px; align-items:center;}
.line__total{font-weight:800; color:var(--brown);}

.summary{border-radius:18px; border:1px solid rgba(30,26,23,.10); background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.54)); padding:16px; height:max-content;}
.summary__row{display:flex; justify-content:space-between; padding:8px 0; color:var(--muted)}
.summary__row--total{color:var(--text); font-weight:800; border-top:1px solid rgba(240,228,210,.14); margin-top:8px; padding-top:12px;}

.checkout{display:grid; grid-template-columns: 1fr; gap:16px; margin-top:18px;}
.form{background: rgba(255,255,255,0.74); border:1px solid rgba(30,26,23,.10); border-radius:18px; padding:16px;}
.form label{display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:13px; min-width:0;}
.form input, .form textarea, .form select{background: rgba(255,255,255,0.86); color: var(--text); border:1px solid rgba(30,26,23,.14); border-radius:14px; padding:10px 12px; font-size:14px; width:100%; max-width:100%; min-width:0;}
.form select{min-width:0 !important;}
.form input, .form textarea{transition: border-color .14s ease, box-shadow .14s ease;}
.form input:focus, .form textarea:focus{outline:none; border-color: rgba(181, 138, 76, .45); box-shadow: 0 0 0 4px rgba(181, 138, 76, .14);}
.form textarea{resize:vertical}
.form__grid{display:grid; grid-template-columns: 1fr; gap:12px; margin-bottom:14px;}
.form__grid > *{min-width:0;}
.span2{grid-column: 1 / -1;}

.form input[type="date"]{text-align:left;}

.sale-item-row input[type="hidden"]{display:none;}
.sale-item-row .sale-item-desc[data-sale-desc]{display:none;}
.sale-item-row [data-sale-qty]{display:block !important;}
.sale-item-row [data-sale-unit]{display:block !important;}
.sale-item-row input[name="item_description"]{display:none !important;}
.sale-item-row input[name="item_qty"]{display:block !important;}
.sale-item-row [data-sale-search]{display:none;}
.sale-item-row .sale-item-del{width:auto; min-width:44px; justify-self:end;}
.sale-item-row{display:grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) minmax(0, 70px) minmax(0, 160px) 44px; gap:10px; align-items:center; width:100%;}
.sale-item-row > *{min-width:0;}
.sale-item-product{background: rgba(255,255,255,0.86); color: var(--text); border:1px solid rgba(30,26,23,.14); border-radius:14px; padding:10px 12px; font-size:14px; width:100%;}
.sale-item-desc,.sale-item-qty,.sale-item-unit{width:100%;}

.cropper__frame{width:100%; aspect-ratio:4/3; border-radius:16px; border:1px solid rgba(30,26,23,.12); background: rgba(30,26,23,0.03); overflow:hidden; position:relative; touch-action:none;}
.cropper__img{position:absolute; top:0; left:0; transform: translate(0px, 0px); will-change: transform; user-select:none; -webkit-user-drag:none; pointer-events:none;}
.cropper__controls{display:flex; gap:12px; align-items:center; margin-top:10px;}
.cropper__zoom{display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:13px; width: min(520px, 100%);}
.cropper__controls input[type="range"]{width:100%; accent-color: var(--gold);}

table th{color: rgba(30,26,23,.72)}
table td{color: rgba(30,26,23,.92)}

table{font-size:14px}
thead th{font-weight:700}
tbody tr:hover{background: rgba(255,255,255,.55)}

h2{font-family:"Playfair Display", serif; font-weight:600; letter-spacing:.1px;}

@media (min-width: 700px){
  .footer__inner{flex-direction:row; justify-content:space-between; align-items:center}
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px;}
  .cart{grid-template-columns: 1.65fr 1fr;}
  .line{grid-template-columns: 1.2fr auto auto auto; align-items:center;}
  .detail{grid-template-columns: 1.1fr 0.9fr; align-items:start;}
  .checkout{grid-template-columns: 1.55fr 1fr;}
  .form__grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 700px){
  .month-filter{flex-direction:column; align-items:stretch !important;}
  .month-filter label{width:100%;}
  .month-filter button{width:100%;}

  .sale-item-row{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; padding:12px; border:1px solid rgba(30,26,23,.12); border-radius:16px; background: rgba(255,255,255,0.62); box-shadow: 0 10px 26px rgba(29,25,22,.06); margin-top:10px;}
  .sale-item-row [data-sale-search]{display:block;}
  .sale-item-product{flex: 1 1 100%;}
  .sale-item-desc{flex: 1 1 100%;}
  .sale-item-qty{flex: 0 0 74px;}
  .sale-item-unit{flex: 1 1 160px; min-width:0;}
  .sale-item-del{flex: 0 0 auto; margin-left:auto;}

  .form input, .form textarea, .form select{font-size:16px;}

  .stack-on-mobile{flex-direction:column !important; align-items:stretch !important;}
  .stack-on-mobile > *{width:100%; max-width:100%; min-width:0 !important;}
  .stack-on-mobile > a{width:auto;}
}

@media (min-width: 980px){
  .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

.toast{position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:680px; margin:0 auto; border-radius:18px; border:1px solid rgba(29,25,22,.18); background: rgba(255,255,255,.74); color: rgba(29,25,22,.92); box-shadow: 0 26px 80px rgba(29,25,22,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding:14px 14px 14px 14px; display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:start; animation: toastIn .18s ease-out;}
.toast__inner{display:flex; flex-direction:column; gap:10px; min-width:0;}
.toast__message{font-weight:700; letter-spacing:.01em;}
.toast__actions{display:flex; flex-wrap:wrap; gap:10px;}
.toast__btn{padding:10px 14px;}
.toast__close{appearance:none; border:0; background: rgba(29,25,22,.10); color: rgba(29,25,22,.90); width:36px; height:36px; border-radius:999px; cursor:pointer; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;}
.toast__close:hover{background: rgba(29,25,22,.16);}
.toast--hide{animation: toastOut .18s ease-in forwards;}

@keyframes toastIn{from{transform: translateY(10px); opacity:0}to{transform: translateY(0); opacity:1}}
@keyframes toastOut{from{transform: translateY(0); opacity:1}to{transform: translateY(10px); opacity:0}}

@media (min-width: 700px){
  .toast{left:24px; right:24px; bottom:24px;}
}