/* RECODET NEXT 01 — mobile shell + complete Shop journey */
:root{
  --n1-bg:#070706;
  --n1-panel:#12100c;
  --n1-panel-hi:#1b1710;
  --n1-panel-soft:#0d0c0a;
  --n1-gold:#e2b63e;
  --n1-gold-hi:#f3d36c;
  --n1-gold-deep:#9a6811;
  --n1-line:rgba(226,182,62,.24);
  --n1-line-strong:rgba(243,211,108,.46);
  --n1-text:#f7f0df;
  --n1-muted:#aaa18f;
}

/* Shell: keep the page title readable on narrow phones. */
.topbar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:72px!important;
  padding:10px max(12px,env(safe-area-inset-left))!important;
  background:rgba(7,7,6,.97)!important;
  border-bottom:1px solid rgba(226,182,62,.18)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.22)!important;
}
.topbar .brandMark{display:none!important}
.topbar .compactHomeBtn{flex:0 0 52px!important;width:52px!important;height:52px!important;border-radius:17px!important}
.topbar .title{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--n1-text)!important;
  font-size:clamp(20px,6.2vw,30px)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
.topbar .topicons{flex:0 0 auto!important;display:flex!important;gap:7px!important;align-items:center!important}
.topbar .topicons .iconbtn{flex:0 0 48px!important;width:48px!important;height:48px!important;border-radius:16px!important}
.topbar .coinPill{flex:0 0 auto!important}
.topbar .hidden{display:none!important}

main.content{
  width:min(1180px,100%)!important;
  margin:0 auto!important;
  padding-left:clamp(8px,2.2vw,18px)!important;
  padding-right:clamp(8px,2.2vw,18px)!important;
  padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
}
main.content>section{min-width:0!important}

/* Bottom bar: module-specific, equal-width and fully inside the phone. */
#bottomBar.bottombar{
  left:max(7px,env(safe-area-inset-left))!important;
  right:max(7px,env(safe-area-inset-right))!important;
  bottom:calc(7px + env(safe-area-inset-bottom))!important;
  width:auto!important;
  max-width:none!important;
  transform:none!important;
  grid-template-columns:repeat(var(--nav-count),minmax(0,1fr))!important;
  gap:4px!important;
  min-height:77px!important;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;
  border-radius:25px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(31,25,14,.985),rgba(8,8,7,.995))!important;
  border:1px solid rgba(226,182,62,.38)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,240,188,.11)!important;
}
#bottomBar.bottombar button{
  width:100%!important;
  min-width:0!important;
  height:62px!important;
  min-height:62px!important;
  padding:6px 2px 5px!important;
  border-radius:18px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#d4cbbb!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#bottomBar.bottombar button.active{
  color:#181207!important;
  background:linear-gradient(180deg,var(--n1-gold-hi),var(--n1-gold) 58%,var(--n1-gold-deep))!important;
  border-color:rgba(255,231,156,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,252,226,.68),0 8px 18px rgba(0,0,0,.24)!important;
}
#bottomBar .tabIcon{width:31px!important;height:31px!important;flex:0 0 31px!important}
#bottomBar .tabIcon svg{width:24px!important;height:24px!important}
#bottomBar .tabLabel{font-size:9px!important;font-weight:850!important}
#bottomBar .tabBadge{top:5px!important;right:7px!important;min-width:18px!important;height:18px!important;font-size:9px!important}

/* Shared Shop section shell. */
#viewShopExplore,#viewSubcats,#viewProducts,#viewDetail,#viewCart,#viewCheckout,
#viewOrders,#viewShopSaved,#viewShopSell,#viewDelivery,#viewSuccess,#viewHelp{
  width:min(1120px,100%)!important;
  margin:0 auto!important;
  padding-bottom:8px!important;
}
.shopSectionHead{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:4px 2px 14px!important;
}
.shopSectionHead strong{color:var(--n1-text)!important;font-size:clamp(22px,6vw,30px)!important;letter-spacing:-.035em!important}
.shopSectionHead span{color:#d1b45c!important;border:1px solid var(--n1-line)!important;background:rgba(226,182,62,.055)!important;border-radius:999px!important;padding:7px 11px!important;font-size:10px!important;font-weight:850!important}

/* Shop category landing: premium list with useful detail. */
.shopExploreList{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
.shopExploreCard{
  min-height:112px!important;
  padding:12px 14px!important;
  border-radius:22px!important;
  border:1px solid var(--n1-line)!important;
  background:radial-gradient(circle at 100% 0%,rgba(226,182,62,.09),transparent 38%),linear-gradient(155deg,#19150e,#0d0c09)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,238,177,.045)!important;
}
.shopExploreVisual{width:78px!important;height:78px!important;flex:0 0 78px!important;border-radius:20px!important;background:linear-gradient(155deg,#272014,#12100b)!important;border:1px solid rgba(243,211,108,.23)!important}
.shopExploreVisual svg{width:47px!important;height:47px!important}
.shopExploreCopy strong{font-size:17px!important;color:var(--n1-text)!important}
.shopExploreCopy small{font-size:11px!important;line-height:1.35!important;color:var(--n1-muted)!important}
.shopExploreArrow{font-size:31px!important;color:var(--n1-gold)!important}

/* Subcategories: deliberately larger than the old four-column version. */
#viewSubcats .subhead{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 48px!important;
  align-items:center!important;
  gap:8px!important;
  margin:2px 0 14px!important;
}
#viewSubcats .subhead .sectionTitle{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:center!important;font-size:24px!important;color:var(--n1-text)!important}
#subcatGrid.gridCat{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
#subcatGrid .tile{
  min-height:150px!important;
  padding:10px!important;
  border-radius:20px!important;
  border:1px solid var(--n1-line)!important;
  background:linear-gradient(155deg,#19160f,#0c0b09)!important;
  box-shadow:0 13px 26px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,236,174,.04)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
#subcatGrid .tile .img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1.45/1!important;
  border-radius:15px!important;
  overflow:hidden!important;
  border:1px solid rgba(243,211,108,.18)!important;
  background:radial-gradient(circle at 50% 35%,#d2c7a9 0%,#9b8758 56%,#40331c 100%)!important;
}
#subcatGrid .tile .img img{width:100%!important;height:100%!important;object-fit:contain!important;padding:6px!important;background:transparent!important;mix-blend-mode:multiply!important;filter:contrast(1.08) saturate(.9)!important}
#subcatGrid .tile .label{width:100%!important;min-height:34px!important;color:var(--n1-text)!important;font-size:13px!important;font-weight:850!important;line-height:1.25!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}

/* Three-across Shop product catalogue. */
#prodGrid.gridProd,#shopSavedGrid.gridProd{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}
.shopProductCard{
  position:relative!important;
  min-width:0!important;
  padding:5px!important;
  border-radius:15px!important;
  border:1px solid rgba(226,182,62,.20)!important;
  background:linear-gradient(165deg,#17140e,#0c0b09)!important;
  box-shadow:0 11px 24px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,236,171,.035)!important;
}
.shopProductImage{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  border-radius:11px!important;
  border:1px solid rgba(243,211,108,.20)!important;
  background:radial-gradient(circle at 50% 35%,#d7cfb9 0%,#a99363 55%,#554323 100%)!important;
  overflow:hidden!important;
  box-shadow:inset 0 0 18px rgba(30,20,5,.24)!important;
}
.shopProductImage .imgWrap{width:100%!important;height:100%!important;background:transparent!important}
.shopProductImage img,.shopProductImage .imgReal{
  width:100%!important;height:100%!important;object-fit:contain!important;padding:4px!important;
  background:transparent!important;mix-blend-mode:multiply!important;filter:contrast(1.08) saturate(.88) brightness(1.03)!important;
}
.shopProductTitle{min-height:28px!important;margin-top:6px!important;color:var(--n1-text)!important;font-size:9.6px!important;line-height:1.25!important;font-weight:850!important}
.shopProductMeta{display:none!important}
.shopProductBottom{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:3px!important;margin-top:4px!important;min-height:29px!important}
.shopProductBottom strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#efcb5c!important;font-size:8.8px!important}
.shopCartBtn{width:29px!important;height:29px!important;min-height:29px!important;padding:0!important;border-radius:9px!important}
.shopCartBtn span{display:none!important}
.shopCartBtn svg{width:15px!important;height:15px!important}
.shopSaveBtn{top:8px!important;right:8px!important;width:25px!important;height:25px!important;border-radius:8px!important;background:rgba(12,11,8,.90)!important}
.shopSaveBtn svg{width:13px!important;height:13px!important}

/* Product detail: large product stage + dedicated information side. */
.shopDetailLayout{gap:14px!important}
.shopDetailMedia,.shopDetailInfo{border-radius:24px!important;border-color:var(--n1-line)!important;background:radial-gradient(circle at 100% 0%,rgba(226,182,62,.10),transparent 40%),linear-gradient(160deg,#19160f,#0c0b09)!important}
.shopDetailImage.imgbox{
  background:radial-gradient(circle at 50% 40%,#d8d0ba 0%,#aa9565 58%,#594724 100%)!important;
  border-color:rgba(243,211,108,.22)!important;
  box-shadow:inset 0 0 34px rgba(27,18,4,.28)!important;
}
.shopDetailImage img,.shopDetailImage .imgReal{mix-blend-mode:multiply!important;filter:contrast(1.07) saturate(.9) brightness(1.02)!important}
.shopDetailDescription{color:#b8af9d!important}
.shopDetailFacts>div{background:rgba(255,255,255,.018)!important;border-color:rgba(226,182,62,.15)!important}
.shopDetailActions{z-index:15!important}

/* Cart, checkout, orders, delivery and help: same professional Shop language. */
#viewCart>.card,#viewCheckout>.card,#viewOrders>.card,#viewDelivery>.card,#viewHelp>.card,
#viewSuccess>.card{
  padding:18px!important;
  border-radius:24px!important;
  border:1px solid var(--n1-line)!important;
  background:radial-gradient(circle at 100% 0%,rgba(226,182,62,.09),transparent 40%),linear-gradient(160deg,#18150f,#0c0b09)!important;
  box-shadow:0 17px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,237,177,.045)!important;
}
#viewCart>.card>.k,#viewCheckout>.card>.k,#viewOrders>.card>.k,#viewDelivery>.card>.k,#viewHelp .k{font-size:26px!important;letter-spacing:-.035em!important;color:var(--n1-text)!important}
#viewCart>.card>.s,#viewCheckout>.card>.s,#viewOrders>.card>.s,#viewDelivery>.card>.s{color:var(--n1-muted)!important}
.cartRow{
  display:grid!important;grid-template-columns:64px minmax(0,1fr) 38px!important;align-items:center!important;gap:10px!important;
  margin-top:10px!important;padding:9px!important;border-radius:16px!important;border:1px solid rgba(226,182,62,.15)!important;background:rgba(255,255,255,.018)!important;
}
.cartThumb{width:64px!important;height:58px!important;border-radius:12px!important;overflow:hidden!important;background:radial-gradient(circle,#d7cfb8,#8e794c)!important}
.cartThumb img{width:100%!important;height:100%!important;object-fit:contain!important;padding:3px!important;mix-blend-mode:multiply!important}
.cartTitle{color:var(--n1-text)!important;font-size:12px!important;font-weight:850!important}
.cartPrice{color:#e7c45b!important;font-size:11px!important}
.rmBtn{width:36px!important;height:36px!important;border-radius:11px!important;border:1px solid rgba(226,182,62,.18)!important;background:#0d0c09!important;color:#d7cdb9!important}
.totals{margin-top:14px!important;padding:13px 14px!important;border-radius:16px!important;background:rgba(226,182,62,.065)!important;border:1px solid rgba(226,182,62,.17)!important}
.totals .label{color:var(--n1-muted)!important}.totals .value{color:#f1ce62!important;font-size:18px!important;font-weight:900!important}
#viewCheckout .in,#viewDelivery .in{
  width:100%!important;min-height:49px!important;margin-top:10px!important;padding:12px 13px!important;border-radius:14px!important;border:1px solid rgba(226,182,62,.20)!important;background:#0b0a08!important;color:var(--n1-text)!important;
}
#viewCheckout .in:focus,#viewDelivery .in:focus{border-color:var(--n1-line-strong)!important;box-shadow:0 0 0 3px rgba(226,182,62,.08)!important}
#viewCart .btn,#viewCheckout .btn,#viewDelivery .btn{min-height:48px!important;border-radius:14px!important;font-weight:900!important}
.orderRow{margin-top:10px!important;padding:13px!important;border-radius:17px!important;border:1px solid rgba(226,182,62,.16)!important;background:rgba(255,255,255,.018)!important}
.orderId{color:var(--n1-text)!important;font-weight:900!important}.orderMeta{color:var(--n1-muted)!important}.orderTotal{color:#efca5b!important;font-weight:900!important}.orderStatus{display:inline-flex!important;margin-top:6px!important;padding:4px 8px!important;border-radius:999px!important;background:rgba(226,182,62,.09)!important;color:#dfc477!important;font-size:9px!important;font-weight:850!important;text-transform:uppercase!important}

/* Saved/list screens. */
#viewShopSaved .shopEmpty,#viewProducts .shopEmpty{border-radius:22px!important;border:1px solid var(--n1-line)!important;background:linear-gradient(160deg,#18150f,#0c0b09)!important}
.shopListProductCard{padding:18px!important;border-radius:24px!important;box-shadow:0 17px 34px rgba(0,0,0,.30)!important}
.shopListingRow{border-radius:16px!important;border:1px solid rgba(226,182,62,.16)!important;background:rgba(255,255,255,.018)!important}

/* Mobile specifics. */
@media(max-width:760px){
  .topbar{gap:7px!important;padding-left:8px!important;padding-right:8px!important}
  .topbar .compactHomeBtn{flex-basis:48px!important;width:48px!important;height:48px!important;border-radius:15px!important}
  .topbar .title{font-size:23px!important}
  .topbar .topicons{gap:5px!important}
  .topbar .topicons .iconbtn{flex-basis:46px!important;width:46px!important;height:46px!important;border-radius:15px!important}
  .shopDetailLayout{grid-template-columns:1fr!important}
  .shopDetailMedia{min-height:0!important;padding:10px!important}
  .shopDetailImage.imgbox{height:270px!important;min-height:270px!important}
  .shopDetailInfo{padding:16px!important}
  .shopDetailActions{position:sticky!important;bottom:88px!important;margin:18px -6px -6px!important;padding:7px!important;border-radius:17px!important;background:rgba(12,11,8,.96)!important}
  #viewCart>.card,#viewCheckout>.card,#viewOrders>.card,#viewDelivery>.card,#viewHelp>.card{padding:14px!important;border-radius:21px!important}
}
@media(max-width:360px){
  .topbar .title{font-size:20px!important}
  .topbar .compactHomeBtn{flex-basis:44px!important;width:44px!important;height:44px!important}
  .topbar .topicons .iconbtn{flex-basis:42px!important;width:42px!important;height:42px!important}
  #prodGrid.gridProd,#shopSavedGrid.gridProd{gap:5px!important}
  .shopProductCard{padding:4px!important;border-radius:13px!important}
  .shopProductTitle{font-size:8.7px!important;min-height:25px!important}
  #subcatGrid.gridCat{gap:7px!important}
  #subcatGrid .tile{min-height:139px!important;padding:8px!important;border-radius:17px!important}
  #bottomBar.bottombar{left:4px!important;right:4px!important;gap:2px!important;padding-left:4px!important;padding-right:4px!important}
  #bottomBar .tabLabel{font-size:8px!important}
}
@media(min-width:761px){
  #subcatGrid.gridCat{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #prodGrid.gridProd,#shopSavedGrid.gridProd{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
  .shopProductTitle{font-size:13px!important;min-height:34px!important}.shopProductBottom strong{font-size:12px!important}
  .shopProductCard{padding:8px!important;border-radius:18px!important}.shopCartBtn{width:36px!important;height:36px!important}
}
@media(min-width:1040px){
  #prodGrid.gridProd,#shopSavedGrid.gridProd{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  #bottomBar.bottombar{left:calc(82px + 22px)!important;right:22px!important;max-width:930px!important;margin:0 auto!important}
}

/* Final Shop flow refinements after browser QA. */
.shopPrimaryBtn,.shopSellSubmit{
  width:100%!important;
  min-height:50px!important;
  border:1px solid rgba(255,229,148,.42)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,var(--n1-gold-hi),var(--n1-gold) 58%,var(--n1-gold-deep))!important;
  color:#181207!important;
  font-weight:900!important;
  box-shadow:inset 0 1px 0 rgba(255,252,226,.68),0 9px 20px rgba(0,0,0,.25)!important;
}
.shopPrimaryBtn svg,.shopSellSubmit svg{color:#181207!important}
.shopPrimaryBtn:hover,.shopSellSubmit:hover{filter:brightness(1.04)!important}

@media(max-width:760px){
  /* Avoid a second sticky bar covering item details above the module dock. */
  .shopDetailActions{
    position:static!important;
    bottom:auto!important;
    margin:18px 0 0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
  }
}

/* Beat the legacy generic "List > button" rule on the Shop publish action. */
#viewShopSell .shopListProductCard > .shopSellSubmit{
  background:linear-gradient(180deg,var(--n1-gold-hi),var(--n1-gold) 58%,var(--n1-gold-deep))!important;
  color:#181207!important;
  border-color:rgba(255,229,148,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,252,226,.68),0 9px 20px rgba(0,0,0,.25)!important;
}