
/* ============================================================
   CANNI V8.2.38 — premium storefront simplification
   ============================================================ */

/* ---------- HOME ---------- */
.home-collections-removed-v8238,
.home-editorial-removed-v8238{
  display:none!important;
}

#homeView .v4-home{
  padding-top:54px!important;
}

#homeRecommendedSectionV8238{
  display:block!important;
}

/* Product-first storefront: square, editorial, no cardy rounded boxes. */
#homeView .home-products{
  gap:18px!important;
}
#homeView .home-product-v8238{
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#homeView .home-product-img-v8238{
  border-radius:0!important;
  background:#f5f3f0!important;
  overflow:hidden!important;
}
#homeView .home-product-img-v8238 img{
  border-radius:0!important;
}
#homeView .home-product-meta{
  padding:13px 1px 0!important;
}
#homeView .home-product-meta small{
  color:#91877e!important;
}
#homeView .home-product-meta b{
  font-size:15px!important;
  line-height:1.45!important;
}
#homeView .home-product-meta span{
  font-size:14px!important;
  font-weight:600!important;
}

/* ---------- SHOP STRUCTURE ---------- */
/* Old category-specific art is intentionally removed. */
#categoryHeroBanner{
  display:none!important;
}

/* Search belongs to global header now, not category page. */
#shopView .heading-row{
  display:none!important;
}
#shopView #search,
#shopView #sortMode{
  display:none!important;
}

/* Keep page top concise. */
#shopView.v4-shop{
  padding-top:0!important;
}
#shopView .shop-breadcrumb{
  margin:12px 0 18px!important;
  font-size:12px!important;
  color:#91877e!important;
}

/* ---------- SHARED BRAND BANNER ---------- */
.shop-brand-banner-v8238{
  position:relative!important;
  width:100%!important;
  aspect-ratio:3.2/1!important;
  min-height:180px!important;
  max-height:310px!important;
  margin:0 0 26px!important;
  overflow:hidden!important;
  background:#f2ede7!important;
  border:0!important;
  border-radius:0!important;
}
.shop-brand-media-v8238{
  position:absolute!important;
  inset:0!important;
  background-size:cover!important;
  background-position:center!important;
}
.shop-brand-banner-v8238:not(.has-brand-image-v8238) .shop-brand-media-v8238{
  background:
    radial-gradient(circle at 78% 24%,rgba(255,255,255,.82),transparent 23%),
    linear-gradient(135deg,#efe8df,#f8f4ef)!important;
}
.shop-brand-banner-v8238.has-brand-image-v8238 .shop-brand-media-v8238::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(247,243,238,.88) 0%,rgba(247,243,238,.50) 38%,rgba(247,243,238,.05) 72%)!important;
}
.shop-brand-copy-v8238{
  position:absolute!important;
  left:38px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:2!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  color:#2b2724!important;
}
.shop-brand-copy-v8238 small{
  font-size:11px!important;
  letter-spacing:.26em!important;
  color:#8c8075!important;
}
.shop-brand-copy-v8238 strong{
  font-family:"Times New Roman","Noto Serif TC",serif!important;
  font-weight:400!important;
  font-size:clamp(27px,4vw,48px)!important;
  letter-spacing:.04em!important;
}

/* ---------- COMPACT FILTER / SORT ---------- */
#shopView #filters{
  margin:0 0 28px!important;
  padding:0!important;
  border:0!important;
}

.compact-shop-toolbar-v8238{
  min-height:52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  border-top:1px solid #e1dbd4!important;
  border-bottom:1px solid #e1dbd4!important;
  padding:10px 0!important;
}

.compact-shop-context-v8238{
  min-width:0!important;
  font-size:13px!important;
  color:#756b63!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.compact-shop-actions-v8238 label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.compact-shop-actions-v8238 label>span{
  font-size:12px!important;
  color:#91877e!important;
}
.compact-shop-actions-v8238 select{
  min-width:132px!important;
  height:36px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#2b2724!important;
  font:500 13px/1.2 "Noto Sans TC","PingFang TC",sans-serif!important;
  padding:0 24px 0 4px!important;
  outline:none!important;
}

.compact-subcats-v8238{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
  border-bottom:1px solid #e1dbd4!important;
  padding:0!important;
}
.compact-subcats-v8238::-webkit-scrollbar{display:none!important}
.compact-subcats-v8238 button{
  flex:0 0 auto!important;
  min-height:44px!important;
  border:0!important;
  border-bottom:2px solid transparent!important;
  border-radius:0!important;
  background:transparent!important;
  color:#766c64!important;
  padding:0 18px!important;
  font:500 13px/1.2 "Noto Sans TC","PingFang TC",sans-serif!important;
}
.compact-subcats-v8238 button:first-child{
  padding-left:0!important;
}
.compact-subcats-v8238 button.active{
  color:#201d1a!important;
  border-bottom-color:#201d1a!important;
  font-weight:700!important;
}

/* Product listing should read like a real retail catalogue, not cards. */
#shopView #products{
  gap:34px 18px!important;
}
#shopView .card{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#shopView .product-img{
  border-radius:0!important;
  background:#f5f3f0!important;
  overflow:hidden!important;
}
#shopView .product-img img{
  border-radius:0!important;
}
#shopView .card-body{
  padding:13px 0 0!important;
}
#shopView .card-body .stock,
#shopView .card-body .btn.full{
  display:none!important;
}

/* ---------- MOBILE ---------- */
@media(max-width:700px){
  #homeView .v4-home{
    padding:36px 18px 60px!important;
  }
  #homeView .home-section{
    margin-bottom:68px!important;
  }
  #homeView .home-products{
    gap:28px 12px!important;
  }

  #shopView{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .shop-brand-banner-v8238{
    width:calc(100% + 36px)!important;
    margin-left:-18px!important;
    aspect-ratio:2.35/1!important;
    min-height:170px!important;
    margin-bottom:20px!important;
  }
  .shop-brand-copy-v8238{
    left:26px!important;
  }
  .shop-brand-copy-v8238 small{
    font-size:9px!important;
  }
  .shop-brand-copy-v8238 strong{
    font-size:30px!important;
  }

  #shopView #filters{
    margin-bottom:22px!important;
  }

  .compact-shop-toolbar-v8238{
    min-height:48px!important;
    padding:7px 0!important;
  }
  .compact-shop-context-v8238{
    font-size:12px!important;
  }
  .compact-shop-actions-v8238 label>span{
    display:none!important;
  }
  .compact-shop-actions-v8238 select{
    min-width:126px!important;
    height:34px!important;
    font-size:12px!important;
    text-align:right!important;
  }

  .compact-subcats-v8238 button{
    min-height:42px!important;
    padding:0 14px!important;
    font-size:12px!important;
  }

  #shopView #products{
    gap:30px 12px!important;
  }
}

/* extra-small */
@media(max-width:420px){
  .shop-brand-banner-v8238{
    min-height:154px!important;
  }
  .shop-brand-copy-v8238 strong{
    font-size:27px!important;
  }
}
