/* Low-specificity defaults: imported article designs keep their own styling. */
:where(.ywjcpromos-desk-article){max-width:1120px;margin-inline:auto;line-height:1.75;overflow-wrap:anywhere}
:where(.ywjcpromos-desk-article) :where(img){max-width:100%;height:auto}
:where(.ywjcpromos-desk-article) :where(figure){margin:1.5em 0}
:where(.ywjcpromos-desk-article) :where(h2,h3){line-height:1.3;margin-top:1.7em}
:where(.ywjcpromos-desk-gallery){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
:where(.ywjcpromos-desk-gallery) > :where(figure){margin:0;min-width:0}
:where(.ywjcpromos-desk-gallery) > :where(figure:last-child:nth-child(odd)){grid-column:1/-1}

/* Only plugin-managed single posts receive these compatibility rules.
   Astra's featured image otherwise forces a 16:9 crop on a 4:3 product sheet.
   PHP separately suppresses that thumbnail when the body uses it already. */
body.ywjcpromos-desk-single .ast-article-single .entry-header:not(.related-entry-header) .post-thumb img,
body.ywjcpromos-desk-single .site-content .ast-single-post-featured-section img{
  height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;
}
body.ywjcpromos-desk-single .ywjcpromos-desk-article{
  min-width:0;container-type:inline-size;container-name:ywjc-product;
}

/* JC template: react to actual article width, including Astra's narrow desktop
   column, rather than relying only on browser width. */
body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-hero > div{min-width:0}
body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-main-title{word-break:normal;overflow-wrap:normal;hyphens:none}
body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-image-box{height:auto;max-height:none;aspect-ratio:auto}
body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-product-image{height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post :is(.jc-grid-4,.jc-grid-3,.jc-grid-2) > div{min-width:0}

@container ywjc-product (max-width:980px){
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-hero{grid-template-columns:minmax(0,1fr);gap:32px;padding:38px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-main-title{font-size:42px;line-height:1.12}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-image-box{max-width:620px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container ywjc-product (max-width:720px){
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-hero{padding:30px 26px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-main-title{font-size:36px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post :is(.jc-grid-4,.jc-grid-3,.jc-grid-2){grid-template-columns:minmax(0,1fr)}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-section{padding:54px 12px 0}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-section h2{font-size:30px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-quick{margin-inline:12px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-spec-row{grid-template-columns:minmax(0,1fr)}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-spec-label{padding-bottom:8px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-spec-value{padding-top:8px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-cta{margin-inline:12px;padding:38px 26px}
}
@container ywjc-product (max-width:500px){
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-hero{gap:24px;padding:24px 20px;border-radius:18px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-main-title{font-size:30px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post :is(.jc-lead,.jc-intro,.jc-quick p){font-size:15.5px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-tags span{font-size:12px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-section{padding-top:46px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-section h2{font-size:27px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post :is(.jc-card,.jc-note,.jc-factory){padding:20px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-cta{padding:32px 20px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-cta h2{font-size:28px}
}

/* Fallback for narrow viewports in browsers without container queries. */
@media(max-width:900px){
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-hero{grid-template-columns:minmax(0,1fr);padding:30px 26px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-main-title{font-size:36px}
}
@media(max-width:640px){
  :where(.ywjcpromos-desk-gallery){grid-template-columns:1fr;gap:16px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-hero{padding:24px 20px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post .jc-main-title{font-size:30px}
  body.ywjcpromos-desk-single .ywjcpromos-desk-article .jc-post :is(.jc-grid-4,.jc-grid-3,.jc-grid-2){grid-template-columns:minmax(0,1fr)}
}