/* CMG 2026 - responsive / translation layout fixes from the mobile QA pass (2026-10-12).
   Additive overrides only, loaded after the design stylesheets (inc/ext-fixes.php).
   Korean pages render identically to the static design; these rules target the
   logged-in admin bar and the longer English / Chinese strings. */

/* 1. Logged-in only: the home header is position:absolute at top:0, so the WP admin bar
   (32px; 46px at <=782px) covers the logo, language select and menu toggle. */
body.admin-bar.cmg26-type-home .new-header{top:32px}
@media screen and (max-width:782px){
 body.admin-bar.cmg26-type-home .new-header{top:46px}
}
/* Logged-in only: the sticky subpage tab bar (top:0) slides under the fixed admin bar above 600px
   (below that the admin bar is position:absolute and scrolls away). */
body.admin-bar.subpage-renewal main>.subpage-local-tabs{top:32px}
@media screen and (max-width:782px){
 body.admin-bar.subpage-renewal main>.subpage-local-tabs{top:46px}
}
@media screen and (max-width:600px){
 body.admin-bar.subpage-renewal main>.subpage-local-tabs{top:0}
}

/* 2. Header language select is fixed at 60px with 3px side padding on phones (header-social.css),
   which clips "English" and "简体中文". Trimming the padding fits "English" in the same 60px;
   Chinese needs 68px (64px at 10px below 340px so the header still fits a 320px screen). */
@media(max-width:600px){
 html[lang="en"] body[class*="cmg26-type-"] .new-header .language-select{padding-left:2px;padding-right:0}
 html[lang^="zh"] body[class*="cmg26-type-"] .new-header .language-select{width:68px;padding-left:2px;padding-right:0}
}
@media(max-width:339px){
 html[lang^="zh"] body[class*="cmg26-type-"] .new-header .language-select{width:64px;font-size:10px}
}

/* 3. BRITEON F flex spec table: catalog.css sets th,td{white-space:nowrap} while this table is
   table-layout:fixed with min-width:0, so long English labels overlap the next cell.
   Korean labels fit on one line, so allowing wraps changes nothing there. */
body.cmg26-type-product_series .product-spec-page .flex-spec-table :is(th,td){white-space:normal}
html[lang="en"] body.cmg26-type-product_series .product-spec-page .flex-spec-table :is(th,td){overflow-wrap:break-word}
@media(max-width:700px){
 html[lang="en"] body.cmg26-type-product_series .product-spec-page .flex-spec-table thead th:first-child,
 html[lang="en"] body.cmg26-type-product_series .product-spec-page .flex-spec-table tbody th{width:96px}
}

/* 4. News place illustration: English city names (GWANGJU, SHENZHEN) are wider than the circles
   (editorial-care.css: 72px, 60px at 701-1050px, 70px at <=700px). */
html[lang="en"] body:is(.cmg26-type-news,.cmg26-type-news_single) .news-place-art span{font-size:13px;letter-spacing:0}
@media(min-width:701px) and (max-width:1050px){
 html[lang="en"] body:is(.cmg26-type-news,.cmg26-type-news_single) .news-place-art span{font-size:11px}
}

/* 5. About > company overview, first fact: on /en/ the Korean name is already rendered in English
   ("CMG Co., Ltd."), so the English sub-name is hidden. i18n.css hides .company-name-en on EN, but
   company-overview.css (.subpage-renewal .company-profile-info .company-name-en{display:inline-block})
   is more specific, so the name showed twice. Korean and Chinese pages are unchanged. */
html[lang="en"] .subpage-renewal .company-profile-info .company-name-en{display:none}

/* 6. Owner decision (2026-10-12): hide the header SNS icons on responsive layouts — at the same
   breakpoint where the desktop nav collapses into the all-menu toggle (navigation.js uses 1101px). */
@media(max-width:1100px){
 .new-header .header-actions .header-social{display:none}
}

/* 7. Owner decision (2026-10-12): no hamburger (all-menu toggle) on the PC layout — it stays only
   where the desktop nav collapses (same 1100/1101px breakpoint as above). */
@media(min-width:1101px){
 .new-header .header-actions .all-menu-toggle{display:none}
}

/* 8. Owner decision (2026-10-12): with the hamburger gone on PC, the header shows the design's own
   "프로젝트 문의" link (.contact-link — styled in redesign.css, then hidden by later design sheets)
   from the same 1101px up. Below that it stays hidden; the all-menu dialog carries the link there. */
@media(min-width:1101px){
 .new-header .header-actions .contact-link{display:flex}
}

/* 9. Owner decision (2026-10-12): the products grid/list switch shows icons instead of words
   (templates/products.php keeps the words as visually hidden text + title). Square buttons; the
   pressed colours and min-height stay the design's (catalog.css / redesign.css / accessibility.css). */
.catalog-view-controls button{display:inline-flex;align-items:center;justify-content:center;width:44px;padding:0}
.catalog-view-controls button svg{display:block;width:18px;height:18px}

/* 10. Owner decision (2026-10-12): the support request form (and its review step) use the full
   content width like the section heading above them (editorial-care.css caps both at 1040px while
   .page-wrap is 1320px, so the form ended 280px short of the heading rule on wide screens). */
.care-page .care-form,.care-page .care-review{max-width:none}

/* 11. Products list view: cards with the HOT badge keep their thumbnail. product-spacing.css pads the
   visual of HOT cards (54px / 43px top and bottom) so the badge clears the picture in the grid; in the
   small list-view cell that padding used up the whole height (image 0px high on phones, about 35px on
   PC). In list view HOT cards use the same box as the other cards (catalog.css: img padding 8px) and
   the badge is drawn smaller in the corner. The grid view is untouched. */
.catalog-page.subpage-renewal .product-collection[data-view="list"] .catalog-card-visual:has(.product-hot-badge){padding:0}
.catalog-page.subpage-renewal .product-collection[data-view="list"] .catalog-card-visual:has(.product-hot-badge)>img{padding:8px;transform:none!important}
.catalog-page.subpage-renewal .product-collection[data-view="list"] .product-hot-badge{top:6px;left:6px;height:20px;padding:0 8px;font-size:10px}

/* === news body (review R2, 2026-10-12) ===
   The news body keeps wpautop (templates/news_single.php) so paragraphs and line breaks typed in
   the Visual editor render. wpautop puts the design's closing button - a bare inline
   <a class="care-outline"> in the static design - inside a paragraph; the importer marks it
   <p class="news-detail-action"> (cmg26_news_body in inc/importer.php). That paragraph is laid out
   like the anonymous line box the bare link has in the design: none of the body-paragraph type
   size, line height and margin (editorial-care.css .news-detail-content>p{margin:0 0 24px};
   content-typography.css ":is(.inner-page,.catalog-page) main :is(p,...,#project-specs dd)"
   {line-height:1.85} - that selector list holds an id, hence #main here to outrank it). */
#main .news-detail-content>p.news-detail-action{font-size:inherit;line-height:inherit;margin:0}
/* === end news body === */