/* OK TUNG V10 — tighter hero + rebuilt flavor detail pages */
:root{--v10-max:1260px;--v10-border:#e5edf6;--v10-shadow:0 18px 50px rgba(6,42,104,.10)}

/* HOME HERO: close the dead space between copy and product slider */
.hero{
  grid-template-columns:minmax(0,560px) minmax(360px,490px)!important;
  justify-content:center!important;
  align-items:center!important;
  column-gap:46px!important;
  min-height:430px!important;
  padding:26px max(4vw,calc((100vw - 1260px)/2)) 30px!important;
}
.hero-copy{width:100%!important;max-width:560px!important;justify-self:end!important}
.hero-copy p{max-width:535px!important}
.hero-product-wrap{width:100%!important;max-width:490px!important;min-height:320px!important;justify-self:start!important}
.hero-product{width:min(410px,84%)!important}
.hero-badge{left:2%!important;bottom:8%!important}
.hero-dots{right:3%!important;bottom:7%!important}

/* Flavor directory page */
.page-hero{max-width:var(--v10-max);margin:0 auto;padding-left:0!important;padding-right:0!important}
#flavorCatalog.catalog{max-width:var(--v10-max)!important;margin:0 auto 58px!important;padding:0!important}
#flavorCatalog .catalog-img{height:155px!important}
#flavorCatalog .catalog-img img{max-height:134px!important}

/* FLAVOR DETAIL: rebuild the top section because older selectors no longer matched the HTML */
.flavor-detail.flavor-v5{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid!important;
  grid-template-columns:minmax(0,520px) minmax(330px,470px)!important;
  justify-content:center!important;
  align-items:center!important;
  gap:48px!important;
  min-height:420px!important;
  padding:42px max(4vw,calc((100vw - 1260px)/2))!important;
  background:linear-gradient(118deg,#fff 0%,var(--flavor-soft) 56%,#fff 100%)!important;
  border-bottom:1px solid var(--v10-border);
}
.flavor-detail.flavor-v5::before{
  content:"";position:absolute;z-index:-1;width:420px;height:420px;border-radius:50%;right:5%;top:50%;transform:translateY(-50%);
  background:var(--flavor);opacity:.08;filter:blur(6px)
}
.flavor-detail-copy{max-width:520px!important}
.flavor-detail-copy h1{
  margin:8px 0 14px!important;
  color:#082f68!important;
  font-size:clamp(38px,4vw,52px)!important;
  line-height:.98!important;
  letter-spacing:-.04em!important;
}
.flavor-detail-copy h1 span{
  display:block!important;
  margin:9px 0 0!important;
  color:var(--flavor)!important;
  font-family:"Cairo","Arial",sans-serif!important;
  font-size:.42em!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  font-weight:850!important;
}
.flavor-detail-copy>p{max-width:510px!important;margin:0 0 20px!important;color:#5b6e88!important;font-size:14px!important;line-height:1.68!important}
.pack-switcher{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0 0 16px!important}
.pack-btn{
  appearance:none;border:1px solid #d9e5f1;background:#fff;color:#254665;border-radius:999px;padding:9px 13px;
  font:800 11px/1 inherit;cursor:pointer;transition:.18s ease;box-shadow:0 4px 14px rgba(7,42,91,.04)
}
.pack-btn:hover,.pack-btn.active{border-color:var(--flavor)!important;background:var(--flavor)!important;color:#fff!important;box-shadow:0 8px 20px rgba(7,42,91,.10)}
.cta-row{display:flex!important;flex-wrap:wrap!important;gap:9px!important;align-items:center!important}
.flavor-detail .btn-primary{background:var(--flavor)!important;border-color:var(--flavor)!important}
.flavor-detail-image{
  width:100%!important;height:330px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:28px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:var(--v10-shadow)!important;backdrop-filter:blur(8px)!important
}
.flavor-detail-image img{display:block!important;max-width:84%!important;max-height:305px!important;width:auto!important;height:auto!important;object-fit:contain!important;filter:drop-shadow(0 18px 20px rgba(7,42,91,.16))!important}

/* compact flavor navigation under every detail hero */
.flavor-mini-nav{max-width:var(--v10-max);margin:16px auto 0;padding:0 0 4px;display:flex;gap:7px;align-items:center;overflow-x:auto;scrollbar-width:none}
.flavor-mini-nav::-webkit-scrollbar{display:none}
.flavor-mini-nav a{flex:0 0 auto;padding:8px 11px;border:1px solid #dfe8f2;border-radius:999px;background:#fff;color:#36516f;font-size:10px;font-weight:850;white-space:nowrap;transition:.18s ease}
.flavor-mini-nav a:hover{border-color:var(--mini-color,#0b61a8);transform:translateY(-1px)}
.flavor-mini-nav a.active{background:var(--mini-color,#0b61a8);border-color:var(--mini-color,#0b61a8);color:#fff;box-shadow:0 7px 18px rgba(7,42,91,.10)}

/* compact the rest of flavor page and align it with the new hero */
.product-data{max-width:var(--v10-max)!important;margin:0 auto!important;padding:34px 0 36px!important}
.product-data .section-heading{margin-left:auto!important;margin-right:auto!important}
.data-grid{grid-template-columns:repeat(4,1fr)!important}
.data-grid article{min-height:150px!important}
.spec-document{max-width:var(--v10-max)!important;margin:0 auto 32px!important;padding:30px 34px!important;gap:26px!important}
.spec-document h2{font-size:clamp(26px,3vw,36px)!important;margin:6px 0 10px!important}
.spec-document p{font-size:13px!important;line-height:1.65!important}
.document-stack div{padding:12px 14px!important;font-size:12px!important}
.export-cta{max-width:var(--v10-max)!important;margin:0 auto 48px!important;padding:27px 32px!important}
.export-cta h2{font-size:27px!important;margin:6px 0!important}.export-cta p{font-size:13px!important}

@media(max-width:1180px){
  .hero{grid-template-columns:minmax(0,500px) minmax(330px,430px)!important;column-gap:32px!important;padding-left:28px!important;padding-right:28px!important}
  .hero-product{width:min(380px,84%)!important}
  .flavor-detail.flavor-v5{grid-template-columns:minmax(0,470px) minmax(300px,410px)!important;gap:34px!important;padding-left:30px!important;padding-right:30px!important}
  .flavor-mini-nav,.product-data,.spec-document,.export-cta,#flavorCatalog.catalog,.page-hero{max-width:calc(100% - 60px)!important}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr 1fr!important;column-gap:22px!important;min-height:390px!important}
  .hero h1{font-size:38px!important}.hero-product-wrap{min-height:275px!important}.hero-product{width:min(330px,88%)!important}
  .flavor-detail.flavor-v5{grid-template-columns:1fr 1fr!important;gap:22px!important;min-height:360px!important;padding-top:30px!important;padding-bottom:30px!important}
  .flavor-detail-copy h1{font-size:38px!important}.flavor-detail-image{height:285px!important}.flavor-detail-image img{max-height:260px!important}
  .data-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:760px){
  .hero{grid-template-columns:1fr!important;row-gap:6px!important;padding:24px 18px 28px!important}.hero-copy{justify-self:center!important}.hero-product-wrap{justify-self:center!important;max-width:410px!important}.hero-product{width:min(285px,72%)!important}.hero-badge{left:5%!important}.hero-dots{right:50%!important;transform:translateX(50%)!important}
  .flavor-detail.flavor-v5{grid-template-columns:1fr!important;gap:18px!important;text-align:center!important;padding:28px 18px!important}.flavor-detail-copy{margin:auto!important}.flavor-detail-copy h1{font-size:36px!important}.flavor-detail-copy>p{margin-left:auto!important;margin-right:auto!important}.pack-switcher,.cta-row{justify-content:center!important}.flavor-detail-image{height:260px!important;max-width:440px!important;margin:auto!important}.flavor-detail-image img{max-height:235px!important;max-width:78%!important}
  .flavor-mini-nav,.product-data,.spec-document,.export-cta,#flavorCatalog.catalog,.page-hero{max-width:calc(100% - 36px)!important}
  .product-data{padding-top:28px!important}.spec-document{grid-template-columns:1fr!important;padding:24px!important}.export-cta{padding:24px!important}
}
@media(max-width:520px){
  .hero h1{font-size:31px!important}.hero-copy p{font-size:13px!important}.hero-product-wrap{min-height:215px!important}.hero-product{width:min(250px,70%)!important}
  .flavor-detail-copy h1{font-size:32px!important}.flavor-detail-copy>p{font-size:13px!important}.flavor-detail-image{height:230px!important}.flavor-detail-image img{max-height:205px!important}
  .data-grid{grid-template-columns:1fr!important}.data-grid article{min-height:auto!important}.pack-btn{padding:8px 10px;font-size:10px}
}