/* AOM Traders V36 — Theme & Bilingual Production Refinement
   Presentation-only overrides on top of V35. */

/* ---------------------------------------------------------------
   1) Official brand lockup: center subline and protect white logo
   --------------------------------------------------------------- */
.brand.aom-brand-official .aom-brand-copy{
  align-items:center!important;
  text-align:center!important;
}
.brand.aom-brand-official .aom-brand-copy>span:not(.brand-subline){
  width:100%;
  justify-content:center;
  text-align:center;
}
.brand.aom-brand-official .brand-subline{
  width:100%;
  margin-top:3px!important;
  text-align:center!important;
  line-height:1.08!important;
}
html[data-theme="light"] .site-header .brand.aom-brand-official{
  filter:drop-shadow(0 4px 14px rgba(0,111,137,.08));
}
/* The approved full AOM Community art contains white lettering. In light mode
   it gets a deliberate dark brand plaque rather than an artificial outline. */
html[data-theme="light"] .footer .brand.aom-brand-footer{
  padding:14px 18px!important;
  border:1px solid #d0e0e7!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#071722,#0a2430)!important;
  box-shadow:0 16px 38px rgba(19,58,74,.15)!important;
}
html[data-theme="light"] .footer .brand.aom-brand-footer .aom-brand-full{
  filter:drop-shadow(0 5px 18px rgba(39,215,242,.14));
}

/* ---------------------------------------------------------------
   2) TradingView: widget itself must follow website theme
   --------------------------------------------------------------- */
.tv-market-strip{
  background:#06111a!important;
  border-color:rgba(39,215,242,.18)!important;
  min-height:68px!important;
}
.tv-market-strip [data-tv-ticker],
.tv-market-strip .tradingview-widget-container,
.tv-market-strip .tradingview-widget-container__widget{
  background:#06111a!important;
}
.tv-market-strip .tradingview-widget-copyright{
  background:#06111a!important;
  color:#738995!important;
  padding:2px 14px 4px!important;
}
html[data-theme="light"] .tv-market-strip,
html[data-theme="light"] .tv-market-strip [data-tv-ticker],
html[data-theme="light"] .tv-market-strip .tradingview-widget-container,
html[data-theme="light"] .tv-market-strip .tradingview-widget-container__widget,
html[data-theme="light"] .tv-market-strip .tradingview-widget-copyright{
  background:#f5fafb!important;
  border-color:#d5e5ea!important;
  color:#718691!important;
}

/* ---------------------------------------------------------------
   3) Product media: use a deliberate dark media stage in both themes.
      Portrait assets are zoomed more so they no longer look like thumbnails.
   --------------------------------------------------------------- */
.product-logo,
html[data-theme="light"] .product-logo{
  position:relative;
  overflow:hidden!important;
  padding:0!important;
  background:radial-gradient(circle at 50% 42%,rgba(73,214,108,.10),transparent 54%),#050c11!important;
  border-color:rgba(39,215,242,.16)!important;
}
.product-logo:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -30px 60px rgba(0,0,0,.16);
}
.product-logo img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  transition:transform .28s ease!important;
}
.product-logo img.aom-media-landscape{transform:scale(1.10)!important}
.product-logo img.aom-media-square{transform:scale(1.24)!important}
.product-logo img.aom-media-portrait{transform:scale(1.46)!important}
.product-card:hover .product-logo img.aom-media-landscape{transform:scale(1.14)!important}
.product-card:hover .product-logo img.aom-media-square{transform:scale(1.29)!important}
.product-card:hover .product-logo img.aom-media-portrait{transform:scale(1.52)!important}

.product-detail-visual,
html[data-theme="light"] .product-detail-visual{
  padding:clamp(20px,2.5vw,34px)!important;
}
.product-logo-wrap,
html[data-theme="light"] .product-logo-wrap{
  width:90%!important;
  height:min(340px,68%)!important;
  min-height:260px!important;
  overflow:hidden!important;
  border:1px solid rgba(39,215,242,.15)!important;
  border-radius:22px!important;
  background:radial-gradient(circle at 50% 42%,rgba(73,214,108,.11),transparent 52%),#050c11!important;
  box-shadow:0 22px 55px rgba(0,0,0,.18)!important;
}
.product-logo-wrap img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}
.product-logo-wrap img.aom-media-landscape{transform:scale(1.04)!important}
.product-logo-wrap img.aom-media-square{transform:scale(1.14)!important}
.product-logo-wrap img.aom-media-portrait{transform:scale(1.26)!important}

/* ---------------------------------------------------------------
   4) Light theme: real light surfaces, never dark panels with dark text
   --------------------------------------------------------------- */
html[data-theme="light"] .product-detail-copy{
  min-width:0!important;
  color:#10232d!important;
}
html[data-theme="light"] .detail-meta>div,
html[data-theme="light"] .price-zone,
html[data-theme="light"] .price-line,
html[data-theme="light"] .summary-price,
html[data-theme="light"] .plan-option span{
  background:#ffffff!important;
  border-color:#d4e3e9!important;
  color:#10232d!important;
}
html[data-theme="light"] .price-line{border-bottom-color:#e1ebef!important}
html[data-theme="light"] .detail-meta span,
html[data-theme="light"] .price-line span,
html[data-theme="light"] .plan-option small{
  color:#607783!important;
}
html[data-theme="light"] .detail-meta b,
html[data-theme="light"] .price-line b,
html[data-theme="light"] .plan-option b{
  color:#10232d!important;
}
html[data-theme="light"] .product-type-badge{
  background:#071722!important;
  border-color:rgba(39,215,242,.26)!important;
  color:#91e8f6!important;
}
html[data-theme="light"] .product-detail-visual{
  background:linear-gradient(145deg,#ffffff,#f5fafb)!important;
  border-color:#d3e2e8!important;
  box-shadow:0 20px 60px rgba(22,62,79,.08)!important;
}
html[data-theme="light"] .product-card{
  background:#fff!important;
  border-color:#d3e2e8!important;
}
html[data-theme="light"] .product-card .btn-primary{
  color:#fff!important;
}

/* Keep the product-detail layout stable at every desktop width. */
.product-detail-grid{
  grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr)!important;
  gap:clamp(30px,4vw,72px)!important;
  align-items:center!important;
}
.product-detail-copy,.price-zone,.detail-meta,.hero-actions{min-width:0!important;max-width:100%!important}
.product-detail-copy h1,.product-detail-copy .lead{overflow-wrap:anywhere}
html,body{max-width:100%;overflow-x:hidden}

/* Header controls should never squeeze the brand or navigation into clipping. */
.site-header{min-width:0}
.nav-left,.nav-right,.brand{min-width:0}

@media(max-width:1100px){
  .product-detail-grid{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr)!important;gap:28px!important}
  .product-detail-visual{height:470px!important}
}
@media(max-width:900px){
  .product-detail-grid{grid-template-columns:1fr!important;gap:22px!important}
  .product-detail-visual{height:420px!important}
  .product-logo-wrap{width:min(620px,92%)!important;height:300px!important}
}
@media(max-width:620px){
  .product-detail-visual{height:350px!important;padding:18px!important}
  .product-logo-wrap{width:94%!important;height:240px!important;min-height:0!important}
  .detail-meta{grid-template-columns:1fr!important}
  .detail-meta>div{height:auto!important;min-height:72px!important}
  .price-line{align-items:center!important}
}