@charset "UTF-8";
/*
* Converted static/content page styles.
*
* This file is the single Sass entry point for the migrated pages. Each
* imported file is a partial named with the `_filename.scss` convention, and
* the Sass build compiles everything into `css/converted-pages.css`.
*
* Keep this order stable unless the visual regression suite is re-run.
*/
/* Returns must stay before shared modules to preserve its migrated cascade. */
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 988-1176 */
/* ==========================================================================
   /returns-exchanges/ - pixel parity with the live page. Geometry targets
   captured at 1920 viewport from chiyono-anne.com/returns-exchanges/ :
     - page-header (title + subtitle) centered narrow column (~1152px wide)
     - body sections full-bleed with 10px L/R inset
     - section heading H4 .paragraph-title at x=10, full width
     - body <p> at x=20 (10px additional inset from heading)
     - bullet UL at x=10, LI text 16px / lh 24 / color #54595f
     - divider line at x=10, full width, padding 15px 0 (no extra margin)
   Targeted via parent-returns-exchanges body class so page IDs differing
   across environments don't matter.
   ========================================================================== */
/* Wrapper - 40px left padding for breathing room from the page edge.
   Live runs flush with 10px insets from inner sections, but staging adds
   a bit more left gutter on this template. */
body.parent-returns-exchanges .blog-components-wrapper {
  padding: 0 0 0 40px;
}

/* Title (RETURNS / EXCHANGES) - sans-serif uppercase 34px to match live. */
body.parent-returns-exchanges .page-header #theme-page-title h1 {
  font-family: var(--fontPrimary);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.2;
  padding-block: 0;
  text-transform: uppercase;
}

body.parent-returns-exchanges #theme-page-title {
  border-bottom: 1px solid #e5e5e5;
}

body.parent-returns-exchanges #theme-bread {
  display: none;
}

/* Full-bleed sections - drop the inherited 1200px max-width on .ca-container
   (template rule fires after a divider). Specificity-boosted with the
   page-template class so it beats the template-wide rule. */
body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-section.ca-section--full + .ca-section .ca-container,
body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-section.ca-section--full + .ca-section > .ca-container,
body.parent-returns-exchanges .blog-components-wrapper .ca-container,
body.parent-returns-exchanges .blog-components-wrapper .ca-section {
  max-width: none !important;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Zero the vertical rhythm contributors (96px between top sections, 60px
   below .para__center, 20px below the paragraph wrapper) so sections stack
   tight - live uses dividers as section breaks, not margins. */
body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-section.ca-section--top + .ca-section.ca-section--top,
body.parent-returns-exchanges .blog-components-wrapper .ca-section,
body.parent-returns-exchanges .blog-components-wrapper .para__center,
body.parent-returns-exchanges .blog-components-wrapper .main-text-component.paragraph {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Section heading (.paragraph-title) - Eina03 16px fw 400 left-aligned,
   color #0a0a0a, full width with 10px L padding (live x=10). */
body.parent-returns-exchanges .blog-components-wrapper .paragraph-title {
  max-width: none;
  text-align: left;
  font-family: Eina03, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #0a0a0a;
  margin: 0;
  padding: 0 0 0 10px;
}

/* Body paragraphs - full-bleed, left-aligned. Specificity boosted with
   .page-template-page-blog-components AND the .ca-paragraph ancestor to beat
   `body.page-template-page-blog-components .blog-components-wrapper
   .ca-paragraph .main-text-component { max-width: 820px  }`. */
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .para_container,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component.paragraph,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component.paragraph p,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph p,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph-title,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .para__center,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .para_container,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .main-text-component,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .paragraph,
html body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .paragraph-title {
  width: 100%;
  max-width: 100% !important;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: #222;
}

body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .main-text-component p,
body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .main-text-component p:last-child,
body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .paragraph p,
body.parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .paragraph p:last-child {
  margin: 0 0 10px !important;
  padding-left: 20px;
  padding-right: 0;
  font-size: 13.6px;
  line-height: 24.48px;
}

/* Single-line bridge text "???????????????????-" sits in
   a div, not a <p>. Match its left padding to the body paragraph indent. */
body.parent-returns-exchanges .blog-components-wrapper .main-text-component.paragraph > .para_container > .static_column_text > div > div > div > div > div > div,
body.parent-returns-exchanges .blog-components-wrapper .static_column_text > div {
  padding-left: 0;
}

/* Breathing room between the inner content blocks of the ??????
   section. The .main-text-component.paragraph wraps 3-4 sibling sections
   (each holding one paragraph group / bridge-line / bullet list) - without
   spacing they butt together. 20px margin-bottom on each gives the gap
   below "??????????-", "? ?????-" and "???????-". */
body.parent-returns-exchanges .blog-components-wrapper .main-text-component.paragraph > section,
body.parent-returns-exchanges .blog-components-wrapper .para_container > section,
body.parent-returns-exchanges .blog-components-wrapper .static_column_text {
  margin-bottom: 20px;
}

/* Bullet UL - full bleed at 10px L padding (live x=10). Drop default
   list-style. */
body.parent-returns-exchanges .blog-components-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
}

/* LI item - 16px Noto fw 400 lh 24, color #0a0a0a, no padding. */
body.parent-returns-exchanges .blog-components-wrapper ul li {
  font-size: 16px;
  line-height: 24px;
  color: #0a0a0a;
  margin: 0;
  padding: 0;
}

/* Bullet text span - 5px L padding so the icon and text gap matches live. */
body.parent-returns-exchanges .blog-components-wrapper ul li > span {
  color: #54595f;
  padding: 0 0 0 5px;
  font-size: 16px;
  line-height: 24px;
}

/* Bullet icon (FontAwesome fa-exclamation-circle) - 14px / color #222
   to match live's icon size. Width is forced to ~17.5px (live's icon
   wrapper width) so the gap to text matches. */
body.parent-returns-exchanges .blog-components-wrapper ul li > i {
  font-size: 14px;
  color: #222;
  display: inline-block;
  width: 17.5px;
  text-align: center;
}

/* Divider line - full width hairline, 10px L inset (live x=10), with 15px
   breathing room above and below (live padding 15px 0 around a 1px line).
   The .full-width-line div ships as a 30px tall gray block (bg #ddd,
   height:30px) - collapse it to a 1px line and use top/bottom margins
   for the breathing room. */
body.parent-returns-exchanges .blog-components-wrapper .full-width-line {
  max-width: none;
  width: auto;
  height: 1px;
  margin: 15px 0;
  padding: 0 0 0 10px;
}

@media (max-width: 576px) {
  body.parent-returns-exchanges .page-header #theme-page-title h1 {
    font-size: 24px;
  }
  body.parent-returns-exchanges .page-header {
    margin-top: 0;
    padding-top: 0;
  }
  body.parent-returns-exchanges .blog-components-wrapper {
    padding: 0 0 20px;
  }
}
/* update.css lines 1579-1580 */
/* /returns-exchanges/ - see the dedicated block earlier in the file
   (keyed off body.parent-returns-exchanges). No duplicate rules needed. */
/* update.css lines 4401-4409 */
body.parent-returns-exchanges .blog-components-wrapper .full-width-line {
  max-width: none;
  padding: 0 0 0 10px;
}

@media (max-width: 576px) {
  body.parent-returns-exchanges .page-header #theme-page-title h1 {
    font-size: 24px;
  }
}
/* update.css lines 4525-4535 */
body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-section.ca-section--top + .ca-section.ca-section--top, body:not(#ca-update-css-priority).parent-returns-exchanges .blog-components-wrapper .ca-section, body:not(#ca-update-css-priority).parent-returns-exchanges .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).parent-returns-exchanges .blog-components-wrapper .main-text-component.paragraph {
  margin-bottom: 0;
}

html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .para_container, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component.paragraph, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component.paragraph p, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph p, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph-title, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .para__center, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .para_container, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .main-text-component, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .paragraph, html body:not(#ca-update-css-priority).parent-returns-exchanges.page-template-page-blog-components .blog-components-wrapper .paragraph-title {
  text-align: left;
}

@media (max-width: 576px) {
  body:not(#ca-update-css-priority).parent-returns-exchanges .page-header {
    padding-top: 0;
  }
}
/* Shared base modules. */
/* Template base styles and shared gallery setup. */
/* Shared converted-page styles extracted from update.css. */
/* Template-wide typography, component, gallery, tab, form, and utility rules used across converted pages. */
/* update.css lines 79-98 */
/* ==========================================================================
   Page-blog-components template: match Elementor/production typography on
   /guide-tbyb/ and other converted pages. Scoped to the page template class
   so Elementor pages and rest of the site are untouched.
   ========================================================================== */
body.page-template-page-blog-components h1.page-title,
body.page-template-page-blog-components #theme-page-title h1 {
  font-family: "Cormorant Garamond", "ChaparralRegular", "Courier New", Courier, monospace;
  font-size: 44px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

@media (max-width: 576px) {
  body.page-template-page-blog-components h1.page-title,
  body.page-template-page-blog-components #theme-page-title h1 {
    font-size: 34px;
  }
}
/* update.css lines 182-289 */
body.page-template-page-blog-components .tbyb-heading h2 {
  font-family: "Cormorant Garamond", "ChaparralRegular", "Courier New", Courier, monospace;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

body.page-template-page-blog-components .tbyb-heading-subtitle {
  font-family: "proxima-nova", "Helvetica Neue", sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #666;
  margin-bottom: 0.75rem;
}

/* Give converted pages a wider stage to match production's Elementor layout
   (production has no 1200px constraint). Wider max-width + smaller side
   padding so content fills more of the viewport on desktop. */
body.page-template-page-blog-components .max-width--large,
body.page-template-page-blog-components .max-width--large.gutter-padding--full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Hero: full-width edge-to-edge layout. Text column on the left, image
   flush against the right edge. Both top-aligned with empty space
   between them. Matches the screenshot the client provided. */
body.page-template-page-blog-components .tbyb-hero,
body.page-template-page-blog-components .tbyb-hero-container {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

body.page-template-page-blog-components .tbyb-hero-content {
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
}

body.page-template-page-blog-components .tbyb-hero-left {
  flex: 0 1 auto;
  max-width: 60%;
  padding-left: 60px;
}

body.page-template-page-blog-components .tbyb-hero-right {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 767px) {
  body.page-template-page-blog-components .tbyb-hero-content {
    flex-direction: column;
  }
  body.page-template-page-blog-components .tbyb-hero-left,
  body.page-template-page-blog-components .tbyb-hero-right {
    max-width: 100%;
    width: 100%;
  }
  body.page-template-page-blog-components .tbyb-hero-left {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* Gallery carousels span the viewport. The track holds all slides side
   by side at 25% each (so 4 slides = full width visible at once). The
   per-slide JS stepping still works because each click moves the track
   by 1/N of its width. */
body.page-template-page-blog-components .gallery-carousel,
body.page-template-page-blog-components .gallery-carousel-wrapper {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100% !important;
  overflow: hidden;
}

body.page-template-page-blog-components .gallery-carousel-track {
  display: flex;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  gap: 0;
}

body.page-template-page-blog-components .gallery-carousel-slide {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  width: 33.3333%;
  padding: 0 8px;
  margin: 0;
  box-sizing: border-box;
}

body.page-template-page-blog-components .gallery-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  body.page-template-page-blog-components .gallery-carousel-slide {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }
}
/* Portfolio, paragraph, tab, and image component fixes. */
/* update.css lines 702-842 */
/* ==========================================================================
   Portfolio grid hover overlay: clamp the overlay to the actual image height,
   not the row's tallest cell. Isotope sets each .grid-item to the row height
   (the tallest image), so .pf_caption (position: absolute; inset: 0) was
   covering the white space below shorter images.

   Root cause: .pf_caption is `position: absolute`. Its containing block is
   the nearest positioned ancestor — which was the Isotope-positioned
   .grid-item (row height). We need a positioned ancestor between .pf_caption
   and .grid-item that is exactly the image's height. We make .grid-inner
   that ancestor: position: relative, height: auto (shrink-wraps to its
   in-flow children → just .pf_item → just the image).

   We must also keep .grid-content / .pf_link / .grid-outer position: static
   OR also height: auto, otherwise an intermediate positioned ancestor would
   become the containing block. Safest: make the entire chain `position:
   relative ; height: auto ` so each is a candidate
   containing block AND each is image-tall.

   We DO NOT touch overflow / opacity / display / typography on .pf_caption —
   the theme controls the hover show/hide transition with those.
   ========================================================================== */
.portfolio-grids .grid-item .grid-outer,
.portfolio-grids .grid-item .pf_link,
.portfolio-grids .grid-item .grid-content,
.portfolio-grids .grid-item .grid-inner,
.portfolio-grids .grid-item .pf_item {
  position: relative;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* Image defines the height of the inner chain. Block + vertical-align:top
   removes the inline whitespace below the image so the chain hugs the image
   to the pixel. */
.portfolio-grids .grid-item .pf_item img,
.portfolio-grids .grid-item img.portfolio_img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: top;
}

/* .pf_caption is `position: absolute` in the theme — re-anchor it explicitly
   to its (now image-tall) containing block. Use inset: 0 / height: 100% so
   regardless of which parent in the chain becomes the containing block, the
   overlay never exceeds the image bounds. We only override sizing — not
   opacity / transform / transition — so the theme's hover animation still
   plays normally. */
.portfolio-grids .grid-item .pf_caption {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

/* Overlay text in yellow */
.portfolio-grids .grid-item .pf_caption,
.portfolio-grids .grid-item .pf_caption .pf_title,
.portfolio-grids .grid-item .pf_caption .see_more,
.portfolio-grids .grid-item .pf_caption .see_more span,
.portfolio-grids .grid-item .pf_caption a {
  color: #ffd700;
}

/* Paragraph text blocks span full width; only the nested `.inner` boxes
   (the T.B.Y.B notice lists) get constrained and centered. Bra Fitting's
   ★ intro heading is a direct <p> inside the paragraph — it keeps the
   full width of the stage and reads left-aligned.
   The `width: 90%` comes from an inline style in page-blog-components.php
   (on .paragraph) — we override it here. */
body.page-template-page-blog-components .para__center.fx,
body.page-template-page-blog-components .para__center,
body.page-template-page-blog-components .para_container {
  max-width: none !important;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Notice boxes (T.B.Y.Bサービスに関するご注意点 etc., which wrap a ul_notion)
   — centered on page with a comfortable reading width matching production. */
body.page-template-page-blog-components .main-text-component.paragraph .inner {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Bra Fitting intro heading (★サイズフィッティングのチェックポイント) — make
   sure it's left-aligned. Per client reference screenshot, the bullet
   sits at a small left inset (~26px) so the ★ lines up with the active
   tab text above (10px wrapper margin + 16px tab padding-left = 26px). */
body.page-template-page-blog-components .ca-tabs__panel .main-text-component.paragraph > p,
body.page-template-page-blog-components .ca-tabs__panel .main-text-component.paragraph > h3,
body.page-template-page-blog-components .ca-tabs__panel .main-text-component.paragraph > h4 {
  text-align: left;
  padding-left: 26px;
  padding-right: 26px;
}

/* Bra Fitting tab navigation: left-flush row of tab labels with a single
   horizontal underline beneath spanning the full viewport, matching the
   production reference screenshot. */
body.page-template-page-blog-components .ca-tabs__strip {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #e5e5e5;
}

body.page-template-page-blog-components .ca-tabs__title.ca-tabs__title--desktop {
  padding: 12px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

body.page-template-page-blog-components .ca-tabs__title.ca-tabs__title--desktop.is-active {
  border-bottom-color: #000;
}

/* "Try Before You Buy Now" CTA product image — shrink to match production's
   ~420x561 instead of 627x838. */
body.page-template-page-blog-components .tbyb-heading + section img,
body.page-template-page-blog-components .blog-components-wrapper img[src*=SVC-01],
body.page-template-page-blog-components .blog-components-wrapper img[src*=SVC_01] {
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Shared thank-you page and zoom/gallery adjustments. */
/* update.css lines 1231-1278 */
/* /thank-you-for-feedback/ (page-id 2052793), /thank-you-for-review/
   (page-id 2052795), and /thank-you-for-subscribing/ (page-id 2052796) —
   uppercase the page title (rendered as h2 via func-theme-display.php), and
   place the body copy in a centered narrow column with text-align: left
   inside (margin: auto). */
body.page-id-2052793 h2.page-title,
body.page-id-2052793 #theme-page-title h2,
body.page-id-2052795 h2.page-title,
body.page-id-2052795 #theme-page-title h2,
body.page-id-2052796 h2.page-title,
body.page-id-2052796 #theme-page-title h2 {
  text-transform: uppercase;
}

body.page-id-2052793 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052793 .blog-components-wrapper .para__center,
body.page-id-2052793 .blog-components-wrapper .para_container,
body.page-id-2052795 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052795 .blog-components-wrapper .para__center,
body.page-id-2052795 .blog-components-wrapper .para_container,
body.page-id-2052796 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052796 .blog-components-wrapper .para__center,
body.page-id-2052796 .blog-components-wrapper .para_container {
  max-width: 620px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.page-id-2052793 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052793 .blog-components-wrapper .main-text-component.paragraph p,
body.page-id-2052793 .blog-components-wrapper .para__center,
body.page-id-2052793 .blog-components-wrapper .para_container,
body.page-id-2052795 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052795 .blog-components-wrapper .main-text-component.paragraph p,
body.page-id-2052795 .blog-components-wrapper .para__center,
body.page-id-2052795 .blog-components-wrapper .para_container,
body.page-id-2052796 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052796 .blog-components-wrapper .main-text-component.paragraph p,
body.page-id-2052796 .blog-components-wrapper .para__center,
body.page-id-2052796 .blog-components-wrapper .para_container {
  text-align: left;
}

/* /thank-you-for-subscribing/ — center the GO BACK HOME button (overrides
   the inline .blog-redirect-button-wrapper{text-align:left} on this page). */
body.page-id-2052796 .blog-components-wrapper .blog-redirect-button-wrapper {
  text-align: center;
}

/* update.css lines 1632-1674 */
/* /thank-you-for-feedback/, /thank-you-for-review/, /thank-you-for-subscribing/
   Note: /thank-you-for-feedback/ has its own dedicated block at the bottom
   of this file (live page renders mixed-case Eina03 30px in a narrow
   centered column, NOT uppercase) — keep this uppercase rule scoped to
   review and subscribing only. */
body.parent-thank-you-for-review h2.page-title,
body.parent-thank-you-for-review #theme-page-title h2,
body.parent-thank-you-for-subscribing h2.page-title,
body.parent-thank-you-for-subscribing #theme-page-title h2 {
  text-transform: uppercase;
}

body.parent-thank-you-for-feedback .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-feedback .blog-components-wrapper .para__center,
body.parent-thank-you-for-feedback .blog-components-wrapper .para_container,
body.parent-thank-you-for-review .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-review .blog-components-wrapper .para__center,
body.parent-thank-you-for-review .blog-components-wrapper .para_container,
body.parent-thank-you-for-subscribing .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-subscribing .blog-components-wrapper .para__center,
body.parent-thank-you-for-subscribing .blog-components-wrapper .para_container {
  max-width: 620px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.parent-thank-you-for-feedback .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-feedback .blog-components-wrapper .main-text-component.paragraph p,
body.parent-thank-you-for-feedback .blog-components-wrapper .para__center,
body.parent-thank-you-for-feedback .blog-components-wrapper .para_container,
body.parent-thank-you-for-review .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-review .blog-components-wrapper .main-text-component.paragraph p,
body.parent-thank-you-for-review .blog-components-wrapper .para__center,
body.parent-thank-you-for-review .blog-components-wrapper .para_container,
body.parent-thank-you-for-subscribing .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-subscribing .blog-components-wrapper .main-text-component.paragraph p,
body.parent-thank-you-for-subscribing .blog-components-wrapper .para__center,
body.parent-thank-you-for-subscribing .blog-components-wrapper .para_container {
  text-align: left;
}

body.parent-thank-you-for-subscribing .blog-components-wrapper .blog-redirect-button-wrapper {
  text-align: center;
}

/* update.css lines 1895-1908 */
.gallery-carousel .gallery-carousel-wrapper .gallery-carousel-track .gallery-carousel-slide .col_desc p {
  padding: 0;
}

@media only screen and (min-width: 640px) {
  .parent-zoom-instruction .ca-tabs-section .ca-tabs {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
  }
}
.gallery-carousel .gallery-carousel-wrapper .gallery-carousel-track .gallery-carousel-slide .col_desc p {
  padding: 0;
}

/* Converted-page design tokens and utility classes. */
/* Keep these as a thin compatibility layer over the theme tokens in update.css. */
:root {
  --fs-xs: var(--pSmall, 13.6px);
  --fs-sm: 14.4px;
  --fs-md: 16px;
  --fs-lg: 26.4px;
  --fs-xl: 44px;
  --lh-tight: 1;
  --lh-snug: 1.15;
  --lh-body: 1.8;
  --lh-tab-content: 1.65;
  --ls-tight: -0.015em;
  --ls-tab: 0.05em;
  --ls-2: 2px;
  --container-narrow: 820px;
  --ff-chaparral: var(--fontSecondary, "ChaparralRegular", "Courier New", Courier, monospace);
  --ff-cormorant: "Cormorant Garamond", var(--fontSecondary, "ChaparralRegular", Georgia, serif);
  --ff-eina03: var(--fontThird, Eina03), "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-courier: var(--fontLocal, Courier, "Courier New", monospace);
  --ff-noto: var(--fontBody, "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif);
}

/* Type sizes */
.t-xs {
  font-size: var(--fs-xs);
}

.t-sm {
  font-size: var(--fs-sm);
}

.t-md {
  font-size: var(--fs-md);
}

.t-lg {
  font-size: var(--fs-lg);
}

.t-xl {
  font-size: var(--fs-xl);
}

/* Text alignment */
.t-center {
  text-align: center;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

/* Line-heights */
.lh-tight {
  line-height: var(--lh-tight);
}

.lh-snug {
  line-height: var(--lh-snug);
}

.lh-body {
  line-height: var(--lh-body);
}

/* Letter-spacing */
.ls-tight {
  letter-spacing: var(--ls-tight);
}

.ls-tab {
  letter-spacing: var(--ls-tab);
}

/* Font families */
.ff-chaparral {
  font-family: var(--ff-chaparral);
}

.ff-cormorant {
  font-family: var(--ff-cormorant);
}

.ff-eina03 {
  font-family: var(--ff-eina03);
}

.ff-courier {
  font-family: var(--ff-courier);
}

.ff-noto {
  font-family: var(--ff-noto);
}

/* Font weights */
.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.box-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* Guide TBYB shared layout and desktop parity rules. */
/* ==========================================================================
   /guide-tbyb/ (and other Blog Template pages) — pixel parity vs live.
   Scoped to the Blog Template body class so other pages are untouched.
   ========================================================================== */
/* Page title: live uses ChaparralRegular at 44px / -0.66px tracking, NOT
   Cormorant. Override the earlier rule (~line 84) that forced Cormorant. */
body.page-template-page-blog-components h1.page-title,
body.page-template-page-blog-components #theme-page-title h1 {
  font-family: var(--ff-chaparral);
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  text-transform: none;
}

@media (max-width: 576px) {
  body.page-template-page-blog-components h1.page-title,
  body.page-template-page-blog-components #theme-page-title h1 {
    font-size: 34px;
  }
}
/* Paragraph body text: live = 13.6px / 1.8 LH / no extra tracking.
   Staging was inheriting 16px / 2px tracking from the legacy zoa widget CSS. */
body.page-template-page-blog-components .blog-components-wrapper .paragraph,
body.page-template-page-blog-components .blog-components-wrapper .paragraph p,
body.page-template-page-blog-components .ca-widget--paragraph .paragraph,
body.page-template-page-blog-components .ca-widget--paragraph .paragraph p {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  letter-spacing: normal;
  font-family: var(--ff-noto);
}

/* Constrain the paragraph block to live's 820px content rail. */
body.page-template-page-blog-components .blog-components-wrapper .paragraph,
body.page-template-page-blog-components .ca-widget--paragraph .paragraph {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* Tabs: live tab titles are 14.4px Courier / 0.72px tracking / 0 16px 16px
   padding (no top padding) / weight 400 (no extra bold on active).
   Staging had 14px Noto / 15px 30px padding / weight 600 on active. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title--mobile {
  font-size: var(--fs-sm);
  font-family: var(--ff-courier);
  font-weight: 400;
  letter-spacing: var(--ls-tab);
  line-height: 1;
  padding: 0 16px 16px;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title.is-active {
  font-weight: 400; /* live keeps weight 400; underline indicates active */
}

/* Tab content: live = 14.4px / 23.76 LH (≈1.65), 32px top+bottom padding. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel p {
  font-size: var(--fs-sm);
  line-height: var(--lh-tab-content);
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel {
  padding: 32px 0;
}

/* Tabs wrapper: live has no margin-bottom (the gap comes from .ca-tabs__panel
   padding). Staging set 2rem which double-spaced the divider. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__strip {
  margin-bottom: 0;
  position: relative;
}

/* Tab underline pseudo-elements — two-line treatment. The wrapper draws a
   1px light-grey line across the strip; the active tab title overlays a
   darker 1px line in just its segment. Both lines share the same 16px
   L/R inset so they appear continuous (per client request). */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__strip::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: rgb(239, 239, 239);
  z-index: 1;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title {
  position: relative;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* Vertical rhythm between top sections: live spaces consecutive top sections by
   96px (margin-top on the second). Staging used 60px margin-bottom on every
   section, which under-spaces and double-counts when sections stack. */
body.page-template-page-blog-components .blog-components-wrapper .ca-section--top,
body.page-template-page-blog-components .blog-components-wrapper .ca-section--top {
  margin-bottom: 0;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-section--top + .ca-section--top,
body.page-template-page-blog-components .blog-components-wrapper .ca-section--top + .ca-section--top {
  margin-top: 96px;
}

/* Paragraph block rhythm: live uses 20px on the wrapper and 10px between
   sibling <p> tags. Staging had 0 on the wrapper and 26px on each <p>. */
body.page-template-page-blog-components .blog-components-wrapper .paragraph {
  margin-bottom: 20px;
}

body.page-template-page-blog-components .blog-components-wrapper .paragraph p {
  margin-bottom: 10px;
}

body.page-template-page-blog-components .blog-components-wrapper .paragraph p:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   /guide-tbyb/ — round-2 visual fixes from client review.
   ========================================================================== */
/* (1) Page title — 10px top + bottom padding so it breathes inside the header. */
body.page-template-page-blog-components h1.page-title,
body.page-template-page-blog-components #theme-page-title h1 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* (2) Remove the 1px hairline under the subtitle (it lives on .page-header). */
body.page-template-page-blog-components .page-header,
body.page-template-page-blog-components .page-header.phd-layout-1 {
  border-bottom: 0;
  border-top: 0;
  box-shadow: none;
}

body.page-template-page-blog-components .page-header::after,
body.page-template-page-blog-components .page-header::before {
  display: none;
  content: none;
}

/*
 * These guide modules still contain legacy blog-component cascade shared by
 * multiple converted pages, so they remain part of the global bundle.
 */
/* (3) "What is" hero subtitle — uppercase + black (was the default #666 grey)
   to match live's WHAT IS treatment. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-subtitle {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000;
}

/* (4) Hero section — reduce left padding on the text column and add top margin
       so it sits lower under the page header (matches live's spacing). */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero {
  margin-top: 40px;
}

body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-left {
  padding-left: 15px;
}

/* (5) Hero description paragraph — slightly smaller to match live perception. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-description p {
  font-size: 0.85rem;
  line-height: 2;
}

/* (6) CTA "TRY IT NOW" right arrow — enlarge from 14px to 22px (and reset the
       inline width/height attrs on the SVG so CSS wins). */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-button .arrow-icon,
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-button .arrow-icon svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   /guide-tbyb/ — round-3 visual fixes (client follow-up review).
   ========================================================================== */
/* (R3-1) Push the title block down — add breathing room above "Try Before You
   Buy" Service so the page header sits lower under the global nav. */
@media (min-width: 768px) {
  body.page-template-page-blog-components .page-header,
  body.page-template-page-blog-components .page-header.phd-layout-1 {
    margin-top: 40px;
  }
}
/* (R3-2) Hero description — open up the vertical rhythm so each chunk reads
   as its own block (matches the client's reference screenshot):
   - bump paragraph-to-paragraph gap from 16px to 28px,
   - turn the inline `<br>` tags into block-level spacers so the line-breaks
     inside a single <p> also get visible breathing room. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-description p {
  margin-bottom: 28px;
}

body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-description p:last-child {
  margin-bottom: 0;
}

body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-description br {
  content: "";
  display: block;
  margin-top: 8px;
}

/* (R3-3) CTA arrow — slimmer stroke to match the reference (a fine single
   line + slim arrowhead, not the chunky 2px stroke). */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-button .arrow-icon svg {
  stroke-width: 1;
}

/* (R3-4) "このような方にお勧め" list heading — more breathing room before
   the checkbox list begins. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-list-title,
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-list-title h4,
body.page-template-page-blog-components .blog-components-wrapper h4.tbyb-hero-list-title {
  margin-bottom: 24px;
  font-family: "Noto Sans JP", 游ゴシック, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-weight: 400;
}

/* ==========================================================================
   /guide-tbyb/ — round-5: Service Guide subtitle line-height, gallery card
   typography, and the "ご注意点" notes block (font sizes + container width).
   Production reference (1440px desktop):
     - tbyb-heading-subtitle "Quick" line-height: 1 (was 1.6)
     - .tbyb-gallery-title:    Courier, weight 400 (was Eina03 600)
     - .p_ttl:                 12px / 600 / 0.6px tracking
     - .ul_notion li .txt:     12px / 1.45 line-height
     - notes container:        820px max-width centered (was full 1200px)
   ========================================================================== */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-heading-subtitle {
  line-height: 1;
}

body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-title {
  font-family: Courier, "Courier New", monospace;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
}

/* Constrain Service Guide gallery to live's 820px content rail (prod uses
   slick slider at ~822px; local was rendering 1200px wide). */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-container {
  max-width: 820px;
}

body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-items {
  gap: 40px;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .p_ttl,
body.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .p_ttl strong {
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.6px !important;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .ul_notion li,
body.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .ul_notion li .txt {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
}

/* Constrain the notes/instructions block to live's 820px content rail. */
body.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component,
body.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .para_container {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto;
}

/* (R3-6) "ご注意点" notes section — only add gap *between* the section
   blocks (T.B.Y.B注意点 / サンプル保証 / T.B.Y.B kit損害 / 商品取り扱い).
   Leave the bullet list rhythm itself at the original tight values so the
   paragraphs read the same as before. */
body.page-template-page-blog-components .blog-components-wrapper .bsec .main-text-component .inner {
  margin-bottom: 32px;
}

body.page-template-page-blog-components .blog-components-wrapper .bsec .main-text-component .inner:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   /guide-tbyb/ — "Bra Fitting" tabs section, match live pixel for pixel.
   Live structure:
     <em>Tips for</em>      (14.4px ProximaNova-300 uppercase 0.15em centered, near-black)
     <span>Bra Fitting</span> (26.4px ChaparralRegular-400 centered)
     [tabs row, 1405px wide; underline = ::after at 1px rgba(0,0,0,.5)]
     [active tab = black; inactive = #868786]
     [tab content first <p> = 13.6px Noto-300 with 32px L/R padding]
   ========================================================================== */
/* (R4-1) Section heading "Bra Fitting" — drop the Cormorant 32px override
   and use the same ChaparralRegular 26.4px the live h2 uses. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-heading h2 {
  font-family: var(--ff-chaparral);
  font-size: 26.4px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.15;
  color: #222;
}

/* (R4-1b) "Try Before You Buy Now" CTA hero — live uses Cormorant Garamond
   at 44px / weight 500 / -0.66px tracking, with the caption "What is your
   best fitting bra?" above it as Eina03 16px sentence-case (NOT the small
   uppercase ProximaNova that the Bra Fitting subtitle uses). The renderer
   now stamps a `tbyb-heading--try-before-you-buy-now` modifier class so
   we can target this specific instance without affecting the other
   tbyb-heading sections (Service Guide, Bra Fitting). */
body.page-template-page-blog-components .blog-components-wrapper section.tbyb-heading--try-before-you-buy-now h2 {
  font-family: var(--ff-cormorant);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.66px;
  line-height: 1;
  color: #222;
}

body.page-template-page-blog-components .blog-components-wrapper section.tbyb-heading--try-before-you-buy-now .tbyb-heading-subtitle {
  font-family: var(--ff-eina03);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #0a0a0a;
  margin-bottom: 16px;
}

/* (R4-2) "Tips for" subtitle above the heading — bump from 13.6px grey to
   14.4px near-black with the self-hosted ProximaNovaRegular family that
   live uses (staging was pulling the Typekit "proxima-nova" web font). */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-heading .tbyb-heading-subtitle {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14.4px;
  letter-spacing: 0.15em;
  color: #222;
  margin-bottom: 4px;
}

/* (R4-3) Inactive tab text — grey on live (#868786) so the active black tab
   visually pops. Staging was rendering everything at body-text near-black. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title:not(.is-active) {
  color: #868786;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title.is-active {
  color: #000;
}

/* (R4-4) Tab content first paragraph "★サイズフィッティング…" — live uses
   13.6px Noto-light (weight 300) with 32px L/R padding so the body content
   sits indented from the tab titles above. Staging was rendering it at
   14.4px weight 400 with only 10px left padding. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel p,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .p_ttl {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.65;
  padding-left: 32px;
  padding-right: 32px;
}

/* (R4-5) Active tab underline — inset by the tab's 16px L/R padding so it
   tracks the text width, AND push it down 1px so it sits exactly on the
   wrapper's full-width grey line (the active tab has margin-bottom: -1px
   to overlap the wrapper, which would otherwise leave the underline 1px
   above the long line). The two now read as a single continuous line, with
   the active section drawn in darker rgba(0,0,0,0.5). */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title.is-active::after {
  left: 16px;
  right: 16px;
  width: auto;
  bottom: -1px;
}

/* (R4-7) Tabs wrapper full-width line — match the same 16px L/R inset that
   the active tab underline uses so the two share identical left/right
   padding (per client request). */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__strip::after {
  margin-left: 16px;
  margin-right: 16px;
  width: auto;
}

/* (R4-7b) Tabs wrapper — 10px L/R margin, 99% width, border-box (per
   client request to nudge the wrapper inwards by a hair). */
/* (R4-7c) Active tab underline must visually overlap the wrapper's long
   line so the active section reads as a darker overlay on top of the same
   line, not as a separate row. Lift the tab's pseudo to z-index:2 and
   pin its bottom edge exactly on the wrapper's bottom (where the wrapper's
   ::after also sits). */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title.is-active::after {
  bottom: 0;
  z-index: 2;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__strip::after {
  z-index: 1;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title.is-active {
  margin-bottom: 0;
}

/* (R4-7d) Strip out the heavy 2px black border-bottom on active tab and
   the 1px gray border-bottom on the strip wrap. Production uses ONLY the
   1px ::after pseudo-elements (already in place above) — the parent CSS
   was double-painting borders, making the underline read as a chunky 3px
   line instead of a single 1px overlap. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__title.is-active {
  border-bottom: 0;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__strip {
  border-bottom: 0;
}

/* (R4-7e) Bra Fitting tab panel — the body paragraphs ("★サイズフィッティング..."
   and the multi-line "ご予約いただいた..." block on the second tab). Production
   renders them as left-aligned 13.6px Noto-300 at 1.65 line-height, with NO
   max-width — the text spans the full tab content rail. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .main-text-component,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .para_container,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .main-text-component p {
  font-size: 13.6px;
  font-weight: 300;
  line-height: 1.65 !important;
  text-align: left;
  max-width: none !important;
}

/* Notes block (.ca-paragraph that holds .p_ttl + .ul_notion) — keep the
   wrapper full-width like the tab body, just indent the inner content from
   the left page edge so the bullets and title align with the rest of the
   tab content rather than sitting flush against x=0. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .main-text-component:has(.p_ttl) > .p_ttl,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .main-text-component:has(.p_ttl) > .ul_notion {
  padding-left: 60px;
  padding-right: 60px;
  box-sizing: border-box;
}

/* (R4-7i) Tighten the full-width divider line — was 60px top/bottom which
   left a big empty band between sections. Match production's tighter
   rhythm with 24px top/bottom. */
body.page-template-page-blog-components .blog-components-wrapper .full-width-line {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Keep the two Bra Fitting mobile tabs in their own halves so the long
   online-consultation label wraps inside its tab instead of overlapping the
   neighbouring label. */
@media (max-width: 767px) {
  body.parent-guide-tbyb .blog-components-wrapper .ca-tabs__strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    width: 100%;
  }
  body.parent-guide-tbyb .blog-components-wrapper .ca-tabs__title--mobile {
    flex: 1 1 50%;
    min-width: 0;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.45;
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* Guide TBYB mobile carousel and note layout rules. */
/* update.css lines 4058-4349 */
/* (R4-7k) Service Guide gallery on mobile — production renders a horizontal
   swipeable slider (two slides visible) instead of a single stacked column.
   Use CSS scroll-snap so the three .tbyb-gallery-item cards become a
   touch-swipeable strip. ~50% width per item shows two-at-a-time. */
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-container {
    max-width: 100%;
    padding: 0;
  }
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-items {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-left: 16px;
    padding: 0 16px;
    scrollbar-width: none;
  }
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-items::-webkit-scrollbar {
    display: none;
  }
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-item {
    flex: 0 0 50%;
    max-width: 50%;
    scroll-snap-align: start;
    padding: 0 8px;
    box-sizing: border-box;
  }
  /* Bra Fitting tip carousel — production shows 2 slides per page on
     mobile (and renders 2 pagination dots for 4 slides). The carousel
     JS now uses slidesPerView=2 below 992px, so size each slide to 50%. */
  body.page-template-page-blog-components .blog-components-wrapper .gallery-carousel-slide {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 0.25rem;
  }
  /* Service Guide gallery — pagination dots that mirror the scroll-snap
     position. JS adds the dots; here we style them to match the carousel
     bullets used by Bra Fitting. */
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-dot {
    width: 12px;
    height: 12px;
    background: #000;
    opacity: 0.3;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-dot.is-active {
    opacity: 1;
  }
}
/* Hide the gallery dots on tablet/desktop (only used in mobile slider). */
@media (min-width: 768px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-dots {
    display: none;
  }
}
/* (R4-7j) The lone ★サイズフィッティング caption section in tab 1 had a
   60px bottom margin on its .para__center wrapper plus a 20px bottom
   margin on the inner .main-text-component. That stacked up to ~80px of
   empty space before the carousel. Drop both so the caption sits tight
   above the illustration row. Scoped via :has() so only this caption
   section is affected (not the other paragraph blocks in the tab). */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel[data-tab="1"] .ca-paragraph:first-of-type .para__center,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel[data-tab="1"] .ca-paragraph:first-of-type .main-text-component {
  margin-bottom: 0;
  padding-bottom: 0;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel a.underline {
  text-decoration: underline;
  color: inherit;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel a.underline.fw_500 {
  font-weight: 500;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .main-text-component p small,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel small {
  font-size: 11.2px;
  line-height: 1.6;
}

/* (R4-7f) Notes block inside the second Bra Fitting tab panel
   ("オンラインコンサルテーションに関するご注意点"). Production wraps this
   inside an .inst_foot div with border-top: 1px solid #eee and 32px top
   padding so it visually separates from the preceding "※ニップレス…" line.
   Local merges both into one component, so we recreate the divider via
   ::before on the .p_ttl. The 12px / 600 typography for .p_ttl and 12px /
   400 / lh 1.45 for the .ul_notion li still wins from the earlier
   .ca-paragraph rules (R4-5). */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .main-text-component .p_ttl {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #eee;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .main-text-component p.p_ttl,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .main-text-component p.p_ttl strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.8 !important;
  letter-spacing: 0.6px;
  text-align: left;
}

body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .main-text-component .ul_notion li,
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .ca-paragraph .main-text-component .ul_notion li .txt {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

/* (R4-7g) "※ニップレス…" footnote — appears as the first <p> in the same
   .main-text-component that holds the .p_ttl notes block. Production
   renders it small + right-aligned (9.6px / fw 300). We use :has() to
   target only the main-text-component that contains a .p_ttl, so the
   first-of-type p inside that wrapper (which is the ※ニップレス line)
   gets the footnote treatment, while the lone ★サイズフィッティング
   caption in tab 1 (no .p_ttl follows it) keeps its body styling. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .main-text-component:has(.p_ttl) > p:first-of-type {
  font-size: 9.6px !important;
  font-weight: 300;
  line-height: 1.6 !important;
  text-align: right;
  margin: 0 0 16px !important;
}

/* (R4-7h) "※より詳しいフィッティング方法…" footnote in tab 1 — sits in the
   LAST .ca-paragraph section of the first tab panel (after the carousel).
   Same 9.6px right-aligned treatment as ※ニップレス, but here we scope
   by tab index so the ★サイズフィッティング caption (which is in the
   FIRST .ca-paragraph of the same panel) is untouched. */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel[data-tab="1"] .ca-paragraph:last-of-type .main-text-component p {
  font-size: 9.6px !important;
  font-weight: 300;
  line-height: 1.6 !important;
  text-align: right;
}

/* (R4-8) Bra Fitting tip carousel — three short caption strings under the
   illustration carousel ("バージスライン..." / "カップ上辺..." / "カップ
   の下からバスト..."). Live uses 12.8px Noto-300 #222 left-aligned with
   0.05em tracking; staging was rendering at 13.6px #0a0a0a. */
body.page-template-page-blog-components .blog-components-wrapper .col_desc p,
body.page-template-page-blog-components .blog-components-wrapper .col_desc {
  font-size: 12.8px;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: #222;
  text-align: left;
}

/* (R4-9) Removed: the previous "footnote" rule was too broad (used
   :only-child:last-child) and ended up shrinking the lead ★ caption in
   the Bra Fitting tab to 9.6px right-aligned. Production keeps tab body
   text at 13.6px / fw 300 / left-aligned across the full content rail —
   the only actually-small element on live is the ※ footnote, which is
   wrapped in <small> there but is a plain <p> here, so we let it ride at
   the body size for now. */
/* (R4-6) Tab content — no extra padding on the tab-content box itself.
   The ★ checkpoint indent comes from the .main-text-component.paragraph > p
   rule (32px), which matches the reference screenshot's small left inset
   (the bullet sits just slightly right of the tab text, not deeply nested). */
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel {
  padding-left: 0;
  padding-right: 0;
}

/* (R3-5) Content rail width — the Service Guide cards (.tbyb-gallery) are
   centered inside a 1200px container. The full-width-line divider below
   them, and the section that follows the divider, were rendering at the
   full viewport width (1425px), so they overshot the cards. Constrain
   both to the same 1200px rail with 20px gutter. */
body.page-template-page-blog-components .blog-components-wrapper .full-width-line {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* The divider sits inside its own .ca-section.ca-section--full.
   Constrain the *next* sibling section (the bulleted-notes block) to the same
   1200px rail by targeting ca-section--boxed siblings of that wrapper. */
body.page-template-page-blog-components .blog-components-wrapper .ca-section.ca-section--full + .ca-section .ca-container,
body.page-template-page-blog-components .blog-components-wrapper .ca-section.ca-section--full + .ca-section > .ca-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Guide TBYB hero detail fixes. */
/* ==========================================================================
   /guide-tbyb/ — round-4 hero detail fixes (client review).
   Six issues called out: subtitle tracking, hero-p weight, image scale,
   button proportion, list weight + icon size, and hero-left padding.
   ========================================================================== */
/* (R4-A) Page subtitle "フィットサンプルブラレンタルサービス" — live uses
   2.4px letter-spacing under the Chaparral title. */
body.page-template-page-blog-components .page-subtitle {
  letter-spacing: 2.4px;
}

/* (R4-B) Hero description body — live renders this paragraph at weight 300
   (Noto Sans JP Light) and tighter 1.8 line-height. <strong> emphases use
   weight 500 (medium), not the default 700. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-description p {
  font-weight: 300;
  line-height: 1.8;
}

body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-description strong,
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-description b {
  font-weight: 500;
}

/* (R4-C) Hero illustration — live renders ~548×688. Local was capping at
   504×632. Allow it to grow ~9% wider. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-img,
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-right img {
  max-width: 100%;
  width: auto;
  height: auto;
}

body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-right {
  width: 50%;
  max-width: 720px;
  flex-shrink: 0;
}

body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Mobile: hero illustration spans full content width (matches production
   where the image stacks under the text and goes nearly edge-to-edge). */
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-right {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
/* (R4-D) "TRY IT NOW" button — live = 56px tall, 3.4px tracking. Local was
   48px / 1.36px. Match the prod proportions. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-button a {
  letter-spacing: 3.4px;
  line-height: 32px;
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 56px;
  box-sizing: border-box;
}

/* (R4-E) Hero list checkbox icons — live = 13.6px (matches text size).
   Local was rendering Font Awesome at 19.2px (1.2em of body 16px). */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-list-icon i,
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-list-icon {
  font-size: 13.6px;
  line-height: 1;
}

/* List text matches paragraph weight (regular). The icon-to-text gap on live
   is ~5px, vs Font Awesome's default which can drift wider. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-list-text {
  font-weight: 400;
}

/* (R4-F) Hero left column — live indents the text deeper from the page edge.
   Bump from 15px to 60px so the WHAT IS / Try Before You Buy block sits in
   from the viewport like the production layout. */
body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-left {
  padding-left: 60px;
}

@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-left {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* Late shared modules. */
/* Shared footer alignment for converted pages. */
/* Hide the global "Membership & Mail Magazine / SIGN UP" newsletter banner
   that footer.php injects above the footer on every page. */
.footer_mailmagazine {
  display: none;
}

/* Match the live footer rail and compact line-height. */
footer > .footer-top > .container,
footer > .footer-bot > .container {
  max-width: 1140px !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box;
}

footer ul.menu {
  margin-top: 16px;
  margin-bottom: 16px;
}

footer {
  line-height: 1.15;
}

footer .footer-copyright {
  line-height: 1.15;
}

/* Form cleanup and scoped cascade replacements. */
/* update.css lines 4350-4356 */
.mw_wp_form .form-row .field-wrapper label + br {
  display: none;
}

.mw_wp_form .form-row .field-wrapper .justwrap {
  float: none;
  height: 50px;
}

/* update.css lines 4388-4390 */
body.page-template-page-blog-components .ca-tabs__title.ca-tabs__title--desktop {
  border-bottom: 2px solid transparent;
}

/* update.css lines 4415-4417 */
body.page-template-page-blog-components:not(.parent-zoom-instruction) .blog-components-wrapper .ca-paragraph .main-text-component, body.page-template-page-blog-components:not(.parent-zoom-instruction) .blog-components-wrapper .ca-paragraph .para_container {
  margin-right: auto;
}

/* update.css lines 4448-4497 */
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-container {
    padding: 0;
  }
}
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-items {
    gap: 0;
    padding: 0 16px;
  }
}
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-item {
    flex: 0 0 50%;
    padding: 0 8px;
  }
}
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .gallery-carousel-slide {
    flex: 0 0 50%;
    padding: 0 0.25rem;
  }
}
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-dots {
    gap: 8px;
  }
}
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-gallery-dot {
    background: #000;
    border-radius: 50%;
    transition: opacity 0.3s;
  }
}
body.page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel .main-text-component .p_ttl {
  border-top: 1px solid #eee;
}

@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-right {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  body.page-template-page-blog-components .blog-components-wrapper .tbyb-hero-left {
    padding-left: 24px;
  }
}
/* update.css lines 4536-4538 */
body:not(#ca-update-css-priority).page-id-2052793 .blog-components-wrapper .main-text-component.paragraph, body:not(#ca-update-css-priority).page-id-2052793 .blog-components-wrapper .main-text-component.paragraph p, body:not(#ca-update-css-priority).page-id-2052793 .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).page-id-2052793 .blog-components-wrapper .para_container, body:not(#ca-update-css-priority).page-id-2052795 .blog-components-wrapper .main-text-component.paragraph, body:not(#ca-update-css-priority).page-id-2052795 .blog-components-wrapper .main-text-component.paragraph p, body:not(#ca-update-css-priority).page-id-2052795 .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).page-id-2052795 .blog-components-wrapper .para_container, body:not(#ca-update-css-priority).page-id-2052796 .blog-components-wrapper .main-text-component.paragraph, body:not(#ca-update-css-priority).page-id-2052796 .blog-components-wrapper .main-text-component.paragraph p, body:not(#ca-update-css-priority).page-id-2052796 .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).page-id-2052796 .blog-components-wrapper .para_container {
  text-align: left;
}

/* update.css lines 4558-4568 */
body:not(#ca-update-css-priority).page-template-page-blog-components .blog-components-wrapper .paragraph, body:not(#ca-update-css-priority).page-template-page-blog-components .blog-components-wrapper .paragraph p, body:not(#ca-update-css-priority).page-template-page-blog-components .ca-widget--paragraph .paragraph, body:not(#ca-update-css-priority).page-template-page-blog-components .ca-widget--paragraph .paragraph p {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  letter-spacing: normal;
}

body:not(#ca-update-css-priority).page-template-page-blog-components .blog-components-wrapper .paragraph p {
  margin-bottom: 10px;
}

body:not(#ca-update-css-priority).page-template-page-blog-components .blog-components-wrapper .ca-tabs__title, body:not(#ca-update-css-priority).page-template-page-blog-components .blog-components-wrapper .ca-tabs__title.is-active {
  border-bottom: 0;
}

/* update.css lines 4609-4611 */
body:not(#ca-update-css-priority).page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel[data-tab="1"] .ca-paragraph:first-of-type .para__center, body:not(#ca-update-css-priority).page-template-page-blog-components .blog-components-wrapper .ca-tabs__panel[data-tab="1"] .ca-paragraph:first-of-type .main-text-component {
  margin-bottom: 0;
}

/* Page-specific overrides. */
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 99-142 */
/* /about/ page-title - match production: SVG "About" sits flush-left in
   the page-header's max-width container (144px gutter on a 1440px viewport),
   not centered. Production uses .max-width--large.gutter-padding--full as
   the inner wrapper; local renders without that wrapper, so we replicate
   the same centered 1152px content rail with auto margins, and force the
   h1's children to align left so the SVG sits at the rail's left edge. */
body.page-id-12 .page-header,
body.page-id-12 .page-header.phd-layout-1 {
  padding: 0;
}

body.page-id-12 #theme-page-title {
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px 0;
  text-align: left;
}

body.page-id-12 h1.page-title.page-title__svg,
body.page-id-12 h1.page-title__svg {
  text-align: left;
  padding: 0;
}

@media (max-width: 767px) {
  body.page-id-12 #theme-page-title,
  body.page-id-12 h1.page-title.page-title__svg,
  body.page-id-12 h1.page-title__svg {
    padding-left: 20px;
  }
}
/* /about/ remove the divider line below the page-header (the script "About" SVG) */
body.page-id-12 .page-header,
body.page-id-12 .page-header.phd-layout-1,
body.page-id-12 #theme-page-title {
  border-bottom: 0;
  border-top: 0;
  box-shadow: none;
}

body.page-id-12 .page-header::after,
body.page-id-12 .page-header::before,
body.page-id-12 #theme-page-title::after,
body.page-id-12 #theme-page-title::before {
  display: none;
  content: none;
}

/* update.css lines 156-181 */
/* /about/ script "About" SVG title - sized to match main site */
body.page-id-12 h1.page-title.page-title__svg,
body.page-id-12 h1.page-title__svg {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: none !important;
  width: auto !important;
  padding-left: 0;
}

body.page-id-12 h1.page-title.page-title__svg .svg-wrapper,
body.page-id-12 h1.page-title__svg .svg-wrapper {
  display: inline-block;
  width: 220px;
  height: 100px;
  padding-top: 0;
  overflow: visible;
}

body.page-id-12 h1.page-title.page-title__svg .svg-wrapper svg,
body.page-id-12 h1.page-title__svg .svg-wrapper svg {
  width: 100%;
  height: 100%;
  position: static;
  display: block;
}

/* update.css lines 290-701 */
/* ==========================================================================
   /about/ page (page id 12) - CSS-only 2-column layout matching production
   without rebuilding the page on the ACF component template.
   The post_content has Brand Concept text + Designer text in flow, and a
   single <p> wrapping the SVG logo + two images. We float that p to the
   right so the two images sit beside the text, and the portfolio grid
   below clears the float.
   ========================================================================== */
/* Outer container: full-bleed for /about/ */
body.page-id-12 .max-width--large,
body.page-id-12 .max-width--large.gutter-padding--full,
body.page-id-12 main.page-content > .container,
body.page-id-12 .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

body.page-id-12 .post-12.page {
  max-width: none;
  margin: 40px 0 80px;
  padding: 0;
}

body.page-id-12 .post-12.page .entry-header {
  display: none;
}

/* ---- Section base styles (each section is its own .about-section div) ---- */
body.page-id-12 .about-section {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 6rem;
  width: 100%;
}

body.page-id-12 .about-section .about-text {
  flex: 1 1 auto;
  min-width: 0;
}

body.page-id-12 .about-section .about-image {
  flex: 0 0 auto;
  margin: 0;
}

body.page-id-12 .about-section .about-image img {
  margin: 0;
}

body.page-id-12 .about-section .about-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Typography to match live site (chaparral-pro headings, body font for paragraphs) ---- */
body.page-id-12 .about-section h2:not(.pf_title) {
  font-family: "chaparral-pro", "ChaparralRegular", "Courier New", Courier, monospace;
  font-weight: normal;
  font-size: 72px;
  letter-spacing: -1px;
  line-height: 1;
  margin: 0 0 2rem;
  color: #222;
  text-transform: none;
}

body.page-id-12 .about-section.about-designer h2:not(.pf_title) {
  font-size: 64px;
  letter-spacing: normal;
  line-height: 1;
}

body.page-id-12 .about-section .pf_title {
  font-size: 18px;
  font-family: Courier, "Courier New", monospace;
  font-weight: normal;
  line-height: 1.2;
}

/* (R5) /about/ - body typography matches live: 13.6px Noto Sans JP at 1.8
   line-height (was 16/24), and the Japanese subtitle under "Designer"
   ("???????-??") uses Eina03 at 16px / weight 700 with no extra
   tracking (was proxima-nova 13.6 with 3px tracking). */
body.page-id-12 .about-section p,
body.page-id-12 .about-text p {
  font-size: 13.6px;
  line-height: 1.8;
}

/* Restore <br> line breaks inside the About text - some upstream rule
   was setting display:none on <br>, collapsing all the manual breaks
   into one continuous paragraph. */
body.page-id-12 .about-text br,
body.page-id-12 .about-section br {
  display: inline;
  content: normal;
}

body.page-id-12 .about-designer .designer-subtitle,
body.page-id-12 .about-designer h4,
body.page-id-12 .about-designer h5 {
  font-family: "Eina03", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: #222;
  margin-top: -8px;
  margin-bottom: 1.5rem;
  margin-left: 117px;
}

body.page-id-12 .about-section h4 {
  font-family: "proxima-nova", "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.2;
  color: #444;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 2rem;
}

body.page-id-12 .about-section p {
  font-family: "Noto Sans JP", "proxima-nova", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #222;
  margin: 0 0 1.5em;
  letter-spacing: 0;
}

/* ---- Brand Concept: text left + about-side image right ---- */
body.page-id-12 .about-brand-concept {
  padding: 40px 0 0 110px;
  margin-bottom: 0;
}

body.page-id-12 .about-brand-concept .about-text {
  max-width: 1015px;
}

/* Collapse the hard <br> line breaks in the brand-concept copy so the text
   wraps naturally and fills the column, matching the Designer paragraph rhythm. */
body.page-id-12 .about-brand-concept .about-text p br {
  display: none;
}

body.page-id-12 .about-brand-concept .about-image {
  width: 470px;
  margin: 0 53px 0 auto;
  flex-shrink: 0;
}

body.page-id-12 .about-brand-concept .about-image img {
  width: 100%;
  height: auto;
}

body.page-id-12 .about-brand-concept .about-signature {
  margin-top: 8.5rem;
}

body.page-id-12 .about-brand-concept .about-signature svg,
body.page-id-12 .about-brand-concept .about-signature img {
  width: 150px;
  height: auto;
  max-width: 150px;
  display: block;
}

body.page-id-12 .about-brand-concept .about-signature::after {
  display: none;
  content: none;
}

/* Section divider - placed at the *section* bottom (below whichever column
   is taller, so the line never cuts through the image). Prod renders this
   as a 1420px-wide centered rule between Brand Concept and Designer. */
body.page-id-12 .about-section.about-brand-concept {
  padding-bottom: 60px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 60px;
}

/* Series collection grid - let each item size to its image's natural
   aspect ratio instead of being clamped to a fixed row height. This
   gives the masonry-style varied heights the production grid shows
   (square placeholders next to taller portrait shots). */
body.page-id-12 .about-series-collection .portfolio-grids .grid-item {
  height: auto;
  min-height: 0;
}

body.page-id-12 .about-series-collection .portfolio-grids .grid-item .grid-outer,
body.page-id-12 .about-series-collection .portfolio-grids .grid-item .pf_link,
body.page-id-12 .about-series-collection .portfolio-grids .grid-item .grid-content,
body.page-id-12 .about-series-collection .portfolio-grids .grid-item .grid-inner,
body.page-id-12 .about-series-collection .portfolio-grids .grid-item .pf_item {
  height: auto;
}

body.page-id-12 .about-series-collection .portfolio-grids .grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile: stack the series collection as a single flex column instead of
   the JS-positioned grid. Override the absolute positioning + transforms
   the masonry library applies and let items flow naturally one per row. */
@media (max-width: 767px) {
  body.page-id-12 .about-series-collection .portfolio-grids {
    display: flex;
    flex-direction: column;
    height: auto !important;
    position: static !important;
  }
  body.page-id-12 .about-series-collection .portfolio-grids .grid-item {
    position: static !important;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    margin-bottom: 16px;
  }
}
/* ---- Designer: chiyono image left + text right ---- */
body.page-id-12 .about-designer {
  padding: 0 10px;
}

body.page-id-12 .about-designer .about-image {
  order: 0;
  width: 540px;
  flex: 0 0 540px;
}

body.page-id-12 .about-designer .about-text {
  order: 1;
  flex: 1 1 auto;
  max-width: none;
  padding-top: 0;
}

/* ---- Series Collection grid: 4-column with strict heights per row ----
   Row 1 (items 1-4): square 1:1 product shots
   Row 2 (items 5-8): portrait 2:3 model/lifestyle shots
   Override the theme's Isotope/masonry positioning so items sit in a
   clean grid like production. */
body.page-id-12 .about-series-collection {
  display: block;
  margin-top: 4rem;
  margin-bottom: 0;
  padding: 0;
}

@media (min-width: 768px) {
  /* Use CSS multi-column layout so each cell sizes to its image's natural
     aspect ratio (true masonry - no empty space below short images). */
  body.page-id-12 .about-series-collection .portfolio-grids {
    display: block;
    column-count: 4;
    column-gap: 0;
    width: 100%;
    margin: 0;
    height: auto !important;
    position: static !important;
  }
  body.page-id-12 .about-series-collection .portfolio-grids .grid-item,
  body.page-id-12 .about-series-collection .portfolio-grids .grid-item.col-lg-3,
  body.page-id-12 .about-series-collection .portfolio-grids .grid-item.col-md-4,
  body.page-id-12 .about-series-collection .portfolio-grids .grid-item.col-xs-6 {
    position: static !important;
    transform: none;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    height: auto;
    float: none;
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
}
/* Removed: hard-coded aspect-ratios per row (was forcing all row-1 items
   to 1:1 squares regardless of source image). Items now flow at the
   image's natural aspect ratio for masonry-style varied heights. */
body.page-id-12 .about-series-collection .portfolio-grids .grid-outer,
body.page-id-12 .about-series-collection .portfolio-grids .pf_link {
  width: 100%;
  /* height: 100%; */
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
}

body.page-id-12 .about-series-collection .portfolio-grids .pf_link--disabled {
  height: 100%;
  overflow: hidden;
  cursor: default;
}

body.page-id-12 .about-series-collection .portfolio-grids .pf_link--disabled:hover .pf_caption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

body.page-id-12 .about-series-collection .portfolio-grids .pf_link--disabled:hover .pf_title {
  top: 0;
}

body.page-id-12 .about-series-collection .portfolio-grids .pf_link--disabled:hover .pf_caption::before {
  content: "";
  display: block;
  position: absolute;
  border: 1px solid #c59b5f;
  width: 80%;
  height: 80%;
  margin: 0 auto;
  color: #fff;
  top: 10%;
  left: 10%;
  z-index: 6;
}

body.page-id-12 .about-series-collection .portfolio-grids .pf_link--disabled:hover .pf_caption::after {
  content: "";
  display: block;
  position: absolute;
  border-top: 1px solid #c59b5f;
  border-bottom: 1px solid #c59b5f;
  width: 90%;
  height: 70%;
  margin: 0 auto;
  color: #fff;
  top: 15%;
  left: 5%;
  z-index: 6;
}

body.page-id-12 .about-series-collection .portfolio-grids .grid-content {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
}

body.page-id-12 .about-series-collection .portfolio-grids img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  body.page-id-12 .about-series-collection .portfolio-grids {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ---- Same 4-col grid behaviour when the gallery is wrapped in a generic
   ca-widget-wrap (no .about-series-collection / .portfolio-grids).
   Targets the populated widget wrap on /about/ and forces a flush 4-up grid
   with the same row crops as the series collection. ---- */
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated:has(> .ca-widget--image),
body.page-id-12 .about-section .ca-widget-wrap.ca-widget-wrap--populated {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated > .ca-element,
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated > .ca-widget {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  float: none;
  position: static;
}

/* Row 1 (items 1-4): square crops; Row 2 (5-8): portrait 2:3 - same as the
   series collection above. */
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated > .ca-element:nth-child(-n+4),
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated > .ca-widget:nth-child(-n+4) {
  aspect-ratio: 1/1;
  overflow: hidden;
}

body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated > .ca-element:nth-child(n+5),
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated > .ca-widget:nth-child(n+5) {
  aspect-ratio: 2/3;
  overflow: hidden;
}

body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Strip every inner Elementor wrapper of padding/margin/background so the
   image fills the grid cell with no white gutter or surrounding plate. */
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated > .ca-element,
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated > .ca-widget,
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated .ca-widget-body,
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated .ca-image,
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated .ca-image a,
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated figure,
body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated picture {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
  line-height: 0;
}

body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated figcaption {
  display: none;
}

@media (max-width: 768px) {
  body.page-id-12 .ca-widget-wrap.ca-widget-wrap--populated:has(> .ca-widget--image),
  body.page-id-12 .about-section .ca-widget-wrap.ca-widget-wrap--populated {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ---- Mobile: stack everything ---- */
@media (max-width: 768px) {
  body.page-id-12 .about-section {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 20px;
  }
  body.page-id-12 .about-brand-concept,
  body.page-id-12 .about-designer {
    padding: 0 20px;
  }
  body.page-id-12 .about-section .about-image,
  body.page-id-12 .about-brand-concept .about-text,
  body.page-id-12 .about-designer .about-text {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  body.page-id-12 .about-brand-concept h2 {
    font-size: 48px;
  }
  body.page-id-12 .about-designer h2 {
    font-size: 42px;
  }
}
/* update.css lines 4360-4387 */
body.page-id-12 .about-section p, body.page-id-12 .about-text p {
  font-size: 13.6px;
  line-height: 1.8;
}

body.page-id-12 .about-designer .designer-subtitle, body.page-id-12 .about-designer h4, body.page-id-12 .about-designer h5 {
  font-family: "Eina03", "Helvetica Neue", sans-serif;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: #222;
  margin-top: -8px;
  margin-bottom: 1.5rem;
  margin-left: 117px;
}

body.page-id-12 .about-brand-concept .about-image {
  margin: 0 53px 0 auto;
}

@media (max-width: 767px) {
  body.page-id-12 .about-series-collection .portfolio-grids .grid-item {
    transform: none;
  }
}
@media (min-width: 768px) {
  body.page-id-12 .about-series-collection .portfolio-grids .grid-item, body.page-id-12 .about-series-collection .portfolio-grids .grid-item.col-lg-3, body.page-id-12 .about-series-collection .portfolio-grids .grid-item.col-md-4, body.page-id-12 .about-series-collection .portfolio-grids .grid-item.col-xs-6 {
    transform: none;
    page-break-inside: avoid;
  }
}
/* update.css lines 4501-4511 */
body:not(#ca-update-css-priority).page-id-12 .page-header, body:not(#ca-update-css-priority).page-id-12 .page-header.phd-layout-1 {
  padding: 0;
}

body:not(#ca-update-css-priority).page-id-12 .max-width--large, body:not(#ca-update-css-priority).page-id-12 .max-width--large.gutter-padding--full, body:not(#ca-update-css-priority).page-id-12 main.page-content > .container, body:not(#ca-update-css-priority).page-id-12 .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body:not(#ca-update-css-priority).page-id-12 .about-text br, body:not(#ca-update-css-priority).page-id-12 .about-section br {
  display: inline;
}

/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 143-147 */
/* /access/ remove the empty <br> between ?? and ?156-0042 inside the
   Japanese caption widget so the postal code sits directly under the heading */
body.page-id-2053003 .caption__ja > .ca-widget-body > br {
  display: none;
}

/* update.css lines 2517-2541 */
/* ==========================================================================
   /access/ - block-by-block typography fixes vs production.
   Production uses different page-title styling than the rest of the
   blog-components pages (uppercase ProximaNova 34px instead of Chaparral
   44px), and the section H4s + OPEN DAYS/HOURS H5s have specific
   typography that differs from the defaults. Scope all overrides to
   `body.parent-access` so we don't bleed into other pages.
   ========================================================================== */
body.parent-access h1.page-title,
body.parent-access #theme-page-title h1 {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Page header divider: production renders a 1px gray border across the
   bottom of the page-header band, separating the "ACCESS" title from
   the Our Atelier section. Local was missing this divider. */
body.parent-access .page-header,
body.parent-access .page-header.phd-layout-1 {
  border-bottom: 1px solid #e5e5e5;
}

/* update.css lines 3768-4057 */
body.parent-access .blog-components-wrapper h4,
body.parent-access .blog-components-wrapper section h4 {
  line-height: 1;
  letter-spacing: -1px;
}

body.parent-access .blog-components-wrapper h5 {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: none;
}

/* OPEN DAYS / OPEN HOURS body text - production renders these in #222
   (same as the headings) and adds a small bottom gap below the H5 so
   the date list doesn't crowd the title. The .atelier-right-col body
   override painted them at #4b4b4b, which read too light vs the H5. */
body.parent-access .blog-components-wrapper .info_title {
  margin-bottom: 8px;
}

body.parent-access .blog-components-wrapper .info_title + .ja_desc,
body.parent-access .blog-components-wrapper .info_title ~ .ja_desc {
  color: #222;
}

body.parent-access .blog-components-wrapper .info_title + .ja_desc p,
body.parent-access .blog-components-wrapper .info_title ~ .ja_desc p,
body.parent-access .atelier-right-col .info_title ~ .ja_desc p,
body.parent-access .atelier-right-col .blog-two-column-content .info_title ~ .ja_desc p {
  color: #222;
  margin: 0 0 4px !important;
}

/* /access/ - Our Atelier address block: live uses 14px Noto regular at
   1.8 line-height with a slight 0.4px tracking and a soft #4b4b4b color
   for the postal/street lines, with the ?? / ??? labels pulled up
   to 16px (still Noto regular). Local was inheriting 16px body text
   on the values and 13.6px on the labels - opposite of what live wants. */
body.parent-access .blog-components-wrapper .atelier-right-col strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

body.parent-access .blog-components-wrapper .atelier-right-col p,
body.parent-access .blog-components-wrapper .atelier-right-col .blog-two-column-section p {
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.4px !important;
  color: #4b4b4b;
}

/* GOOGLE MAP / Google Map button: live keeps it sentence-case, no extra
   tracking, uses a sans body font at 15px / 1.0 line-height with 12px 24px
   padding. Local was rendering uppercase Eina03 at 12px with 1px tracking
   and a wider 12 34 padding. */
body.parent-access .blog-components-wrapper a.google-map-button,
body.parent-access .blog-components-wrapper .atelier-right-col a[href*=maps],
body.parent-access .blog-components-wrapper .atelier-right-col .map-link {
  font-family: "Work Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

/* Address-like body paragraphs in the Member's Boutique notes / How to
   Access columns - bring them to live's 13.6px / 1.8 lh / #4b4b4b. */
body.parent-access .blog-components-wrapper .ca-paragraph p,
body.parent-access .blog-components-wrapper .blog-accordion-content p,
body.parent-access .blog-components-wrapper .ca-section p {
  font-size: 13.6px !important;
  line-height: 1.8;
}

/* ?????????????? subtitle (H3) - live uses Noto 16px / fw
   500 / no extra tracking, sitting tight under the Member's Boutique
   title. Local was rendering as Eina03 16/600 (matching guide-tbyb's
   subtitle style which is wrong for /access/). */
body.parent-access .blog-components-wrapper h3,
body.parent-access .blog-components-wrapper section h3 {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
}

/* ???????? / ?????? accordion header rows on /access/ -
   keep them on the body type rail (Noto 13.6 / 1.6) to match live. */
body.parent-access .blog-components-wrapper .blog-accordion-header,
body.parent-access .blog-components-wrapper .blog-accordion-title {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 13.6px;
  font-weight: 400;
  line-height: 1.6;
}

/* /access/ - Our Atelier right column: production left-aligns the
   heading, address rows, Google Map button, and accordion (instead of
   the templates' default centering). Scope to .atelier-right-col so
   only the right-hand info column is affected, not the centered Floor
   Guide / How to Access blocks below. */
body.parent-access .atelier-right-col .atelier-heading-title,
body.parent-access .atelier-right-col .atelier-heading-container,
body.parent-access .atelier-right-col .blog-two-column-container,
body.parent-access .atelier-right-col .blog-redirect-button-wrapper,
body.parent-access .atelier-right-col .blog-accordion {
  text-align: left;
  margin-left: 0;
}

body.parent-access .atelier-right-col .blog-two-column-container,
body.parent-access .atelier-right-col .blog-accordion {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
}

body.parent-access .atelier-right-col .blog-redirect-button-wrapper {
  text-align: left;
}

/* Standalone .atelier-heading-section blocks (Floor Guide, How to
   Access etc) - production centers the heading and the subtitle
   paragraph that immediately follows. Only the heading inside
   .atelier-right-col (Our Atelier) is left-aligned, and that's
   already scoped above. */
body:not(.parent-access) .atelier-heading-title,
body.parent-access .blog-components-wrapper .atelier-heading-section .atelier-heading-title,
body.parent-access .blog-components-wrapper .atelier-heading-section + section.ca-paragraph .main-text-component,
body.parent-access .blog-components-wrapper .atelier-heading-section + section.ca-paragraph .main-text-component p {
  text-align: center !important;
}

/* But override back to left-aligned when the heading is inside the
   atelier-right-col (Our Atelier subtitle), since that one stays left. */
body.parent-access .atelier-right-col .atelier-heading-title,
body.parent-access .atelier-right-col .atelier-heading-section .atelier-heading-title {
  text-align: left !important;
}

/* Members Boutique paragraph block - keep its body copy left-aligned
   (the section has a .paragraph-title H3 followed by body p / small).
   The default-center rule above (which targets atelier-heading-section
   + ca-paragraph) was bleeding into this section because it sits in
   the same sibling chain. Override via :has() so only ca-paragraph
   blocks containing a .paragraph-title get the left treatment. */
body.parent-access .blog-components-wrapper section.ca-paragraph:has(.paragraph-title) .main-text-component,
body.parent-access .blog-components-wrapper section.ca-paragraph:has(.paragraph-title) .main-text-component p,
body.parent-access .blog-components-wrapper section.ca-paragraph:has(.paragraph-title) .main-text-component small,
body.parent-access .blog-components-wrapper section.ca-paragraph:has(.paragraph-title) .paragraph-title {
  text-align: left !important;
}

/* Member's Boutique paragraph block - left-align everything: the H3
   subtitle (??????????????), the body copy, and the
   <small> disclaimer underneath. Production left-aligns this column. */
body.parent-access .blog-components-wrapper .paragraph-title,
body.parent-access .blog-components-wrapper .paragraph-title.t-center,
body.parent-access .blog-components-wrapper .ca-widget--paragraph .para_container,
body.parent-access .blog-components-wrapper .ca-widget--paragraph .para__center,
body.parent-access .blog-components-wrapper .ca-widget--paragraph .main-text-component,
body.parent-access .blog-components-wrapper .ca-widget--paragraph .main-text-component p,
body.parent-access .blog-components-wrapper .ca-widget--paragraph .main-text-component small {
  text-align: left;
}

/* Members Boutique paragraph wrapper - kill the auto-centered indent
   on .para_container and its inner .main-text-component so the
   subtitle (h3) and body sit flush against the column's left edge. */
body.parent-access .blog-components-wrapper .ca-widget--paragraph .para_container,
body.parent-access .blog-components-wrapper .ca-widget--paragraph .para_container .main-text-component,
body.parent-access .blog-components-wrapper .ca-widget--paragraph .paragraph-title {
  margin-left: 0 !important;
  padding-left: 0;
  max-width: none !important;
}

/* Right-column polish: zero out the heading's left padding (was 40px),
   left-align and de-underline the address link, and tighten the gap
   between the address copy and the Google Map button. */
body.parent-access .atelier-right-col .atelier-heading-container {
  padding-left: 0;
  padding-right: 0;
}

body.parent-access .atelier-right-col .ja_desc,
body.parent-access .atelier-right-col .ja_desc p,
body.parent-access .atelier-right-col .ja_desc a {
  text-align: left;
}

body.parent-access .atelier-right-col .ja_desc a,
body.parent-access .atelier-right-col .caption__ja a {
  text-decoration: none;
  color: #4b4b4b;
  padding: 0;
  margin: 0;
  display: inline;
}

body.parent-access .atelier-right-col .ja_desc p,
body.parent-access .atelier-right-col .caption__ja p {
  padding: 0;
  margin: 0 0 4px !important;
}

body.parent-access .atelier-right-col .blog-redirect-button-wrapper {
  margin-top: 0;
  margin-bottom: 24px;
}

body.parent-access .atelier-right-col .blog-two-column-section {
  margin: 12px 0;
  padding: 0;
}

/* Tighten the two-column ?? / ??? block - drop the vertical
   padding/margins on the inner section + paragraphs so the two columns
   sit close to the heading and button instead of opening up a tall
   empty band. */
body.parent-access .atelier-right-col .blog-two-column-wrapper,
body.parent-access .atelier-right-col .blog-two-column-content,
body.parent-access .atelier-right-col .blog-two-column-content > .ca-section,
body.parent-access .atelier-right-col .blog-two-column-content .ca-container,
body.parent-access .atelier-right-col .blog-two-column-content .para__center,
body.parent-access .atelier-right-col .blog-two-column-content .para_container,
body.parent-access .atelier-right-col .blog-two-column-content .main-text-component {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

body.parent-access .atelier-right-col .blog-two-column-content .caption__ja {
  margin: 0;
}

body.parent-access .atelier-right-col .blog-two-column-content .caption__ja > div + div {
  margin-top: 4px;
}

body.parent-access .atelier-right-col .blog-two-column-content p {
  margin-top: 0;
  margin-bottom: 4px;
}

body.parent-access .atelier-right-col .blog-two-column-content br {
  display: inline;
  line-height: 0;
}

/* Atelier section - narrower left column with a taller portrait image
   (production uses ~40/60 split with the photo at a 3:4 portrait crop,
   so it reads tall instead of the wide landscape that local was showing). */
@media (min-width: 768px) {
  body.parent-access .atelier-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    align-items: flex-start;
  }
  body.parent-access .atelier-left-col {
    flex: 0 0 calc(50% - 30px);
    max-width: calc(50% - 30px);
    min-width: 0;
  }
  body.parent-access .atelier-right-col {
    flex: 0 0 calc(50% - 30px);
    max-width: calc(50% - 30px);
    min-width: 0;
  }
}
body.parent-access .atelier-carousel,
body.parent-access .atelier-carousel-wrapper,
body.parent-access .atelier-carousel-track,
body.parent-access .atelier-carousel-slide,
body.parent-access .atelier-slide-inner {
  height: auto;
}

body.parent-access .atelier-slide-image {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}

/* Floor Guide gallery row - production uses a tight ~40px L/R inset and
   a small top spacing above the section. Local was rendering with
   144px L/R margins and 96px top, leaving the gallery cramped in the
   centre. */
body.parent-access .layout__02.bsec.bsec__wrap {
  margin-left: 40px;
  margin-right: 40px;
  max-width: none;
  width: auto;
}

body.parent-access section.ca-section:has(> .ca-container .layout__02.bsec.bsec__wrap),
body.parent-access section.ca-section:has(.layout__02.bsec.bsec__wrap) {
  margin-top: 24px;
  padding-top: 0;
}

/* update.css lines 4418-4447 */
body.parent-access .atelier-right-col .ja_desc a, body.parent-access .atelier-right-col .caption__ja a {
  text-decoration: none;
  padding: 0;
  margin: 0;
}

body.parent-access .atelier-right-col .ja_desc p, body.parent-access .atelier-right-col .caption__ja p {
  padding: 0;
}

body.parent-access .atelier-right-col .blog-two-column-section {
  margin: 12px 0;
  padding: 0;
}

body.parent-access .atelier-right-col .blog-two-column-content .caption__ja {
  margin: 0;
}

@media (min-width: 768px) {
  body.parent-access .atelier-row {
    gap: 60px;
  }
}
@media (min-width: 768px) {
  body.parent-access .atelier-left-col {
    flex: 0 0 calc(50% - 30px);
  }
}
@media (min-width: 768px) {
  body.parent-access .atelier-right-col {
    flex: 0 0 calc(50% - 30px);
  }
}
/* update.css lines 4601-4608 */
body:not(#ca-update-css-priority).parent-access .blog-components-wrapper .paragraph-title, body:not(#ca-update-css-priority).parent-access .blog-components-wrapper .paragraph-title.t-center, body:not(#ca-update-css-priority).parent-access .blog-components-wrapper .ca-widget--paragraph .para_container, body:not(#ca-update-css-priority).parent-access .blog-components-wrapper .ca-widget--paragraph .para__center, body:not(#ca-update-css-priority).parent-access .blog-components-wrapper .ca-widget--paragraph .main-text-component, body:not(#ca-update-css-priority).parent-access .blog-components-wrapper .ca-widget--paragraph .main-text-component p, body:not(#ca-update-css-priority).parent-access .blog-components-wrapper .ca-widget--paragraph .main-text-component small {
  text-align: left;
}

body:not(#ca-update-css-priority).parent-access .layout__02.bsec.bsec__wrap {
  margin-left: 40px;
  margin-right: 40px;
  width: auto;
}

/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 843-881 */
/* ==========================================================================
   /contactus-thanks/ - match the production layout: narrow centered column,
   sans-serif uppercase title, hairline under the subtitle, no breadcrumb,
   trailing space after the body. Targeted via the stable parent body class
   so page IDs differing across environments are not a concern.
   ========================================================================== */
body.parent-contactus-thanks .blog-components-wrapper {
  max-width: 1242px;
  margin-inline: auto;
  padding: 0 20px 60px;
}

body.parent-contactus-thanks .page-header #theme-page-title h1 {
  font-family: var(--fontPrimary);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.2;
  padding-block: 0 10px;
  text-transform: uppercase;
}

@media (max-width: 576px) {
  body.parent-contactus-thanks .page-header #theme-page-title h1 {
    font-size: 24px;
  }
  body.parent-contactus-thanks .page-header {
    margin-top: 0;
    padding-top: 0;
  }
  body.parent-contactus-thanks .blog-components-wrapper {
    padding-bottom: 20px;
  }
}
body.parent-contactus-thanks #theme-page-title {
  border-bottom: 1px solid #e5e5e5;
}

body.parent-contactus-thanks #theme-bread {
  display: none;
}

/* update.css lines 4391-4395 */
@media (max-width: 576px) {
  body.parent-contactus-thanks .page-header #theme-page-title h1 {
    font-size: 24px;
  }
}
/* update.css lines 4512-4516 */
@media (max-width: 576px) {
  body:not(#ca-update-css-priority).parent-contactus-thanks .page-header {
    padding-top: 0;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 882-987 */
/* ==========================================================================
   /howtocare/ - match the live design: narrow centered column, sans-serif
   uppercase title, accordion at full column width (overrides the inline
   800px cap from inc/blog-components.php). Targeted via parent-howtocare
   body class so page-IDs differing across environments don't matter.
   ========================================================================== */
body.parent-howtocare .blog-components-wrapper {
  max-width: 1600px;
  margin-inline: auto;
  padding: 0 40px 60px;
}

body.parent-howtocare .blog-components-wrapper .para_container {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

body.parent-howtocare .page-header #theme-page-title h1 {
  font-family: var(--fontPrimary);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.2;
  padding-block: 0;
  text-transform: uppercase;
}

body.parent-howtocare #theme-page-title {
  border-bottom: 1px solid #e5e5e5;
}

body.parent-howtocare #theme-bread {
  display: none;
}

/* Intro paragraph + ALL para containers - full-bleed, left-aligned, no margin.
   Specificity boosted with .page-template-page-blog-components AND .ca-paragraph
   to outweigh `body.page-template-page-blog-components .blog-components-wrapper
   .ca-paragraph .main-text-component { max-width: 820px  }` further
   down in update.css. */
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .para_container,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component.paragraph,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .main-text-component.paragraph p,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph p,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .ca-paragraph .paragraph-title,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .para_container,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .main-text-component,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .paragraph,
html body.parent-howtocare.page-template-page-blog-components .blog-components-wrapper .paragraph-title {
  width: 100%;
  max-width: 100% !important;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

body.parent-howtocare .blog-components-wrapper .main-text-component.paragraph,
body.parent-howtocare .blog-components-wrapper .paragraph,
body.parent-howtocare .blog-components-wrapper .main-text-component.paragraph p,
body.parent-howtocare .blog-components-wrapper .paragraph p,
body.parent-howtocare .blog-components-wrapper .para_container {
  margin-top: 0;
  margin-bottom: 0;
}

/* Zero ALL margin/padding above the accordion: the .bsec element + every
   wrapper layer that could be adding spacing between the intro paragraph
   and the accordion below. */
body.parent-howtocare .blog-components-wrapper .para__center,
body.parent-howtocare .blog-components-wrapper .para__center.fx.bsec,
body.parent-howtocare .blog-components-wrapper .bsec,
body.parent-howtocare .blog-components-wrapper .main-text-component.paragraph,
body.parent-howtocare .blog-components-wrapper .main-text-component.paragraph:last-child,
body.parent-howtocare .blog-components-wrapper .para_container {
  margin: 0;
  padding: 0;
}

body.parent-howtocare .blog-components-wrapper .ca-widget--paragraph,
body.parent-howtocare .blog-components-wrapper .ca-widget--paragraph .ca-widget-body {
  margin: 0;
  padding: 0;
}

/* Accordion - override the 800px cap inlined in inc/blog-components.php and
   bump the header / title to 16px to match live. */
body.parent-howtocare .blog-accordion {
  width: 100%;
  max-width: 100%;
}

body.parent-howtocare .blog-accordion-header,
body.parent-howtocare .blog-accordion-title {
  font-size: 16px;
}

body.parent-howtocare .blog-accordion-content {
  padding: 15px 20px;
}

@media (max-width: 576px) {
  body.parent-howtocare .page-header #theme-page-title h1 {
    font-size: 24px;
  }
  body.parent-howtocare .page-header {
    margin-top: 0;
    padding-top: 0;
  }
  body.parent-howtocare .blog-components-wrapper {
    padding-bottom: 20px;
  }
}
/* update.css lines 4396-4400 */
@media (max-width: 576px) {
  body.parent-howtocare .page-header #theme-page-title h1 {
    font-size: 24px;
  }
}
/* update.css lines 4517-4524 */
body:not(#ca-update-css-priority).parent-howtocare .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).parent-howtocare .blog-components-wrapper .para__center.fx.bsec, body:not(#ca-update-css-priority).parent-howtocare .blog-components-wrapper .bsec, body:not(#ca-update-css-priority).parent-howtocare .blog-components-wrapper .main-text-component.paragraph, body:not(#ca-update-css-priority).parent-howtocare .blog-components-wrapper .main-text-component.paragraph:last-child, body:not(#ca-update-css-priority).parent-howtocare .blog-components-wrapper .para_container {
  margin: 0;
}

@media (max-width: 576px) {
  body:not(#ca-update-css-priority).parent-howtocare .page-header {
    padding-top: 0;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 3152-3718 */
/* ==========================================================================
   /member-rank-offers/ - block-by-block typography vs production.
   ========================================================================== */
body.parent-member-rank-offers h1.page-title,
body.parent-member-rank-offers #theme-page-title h1 {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: none;
}

@media (min-width: 768px) {
  body.parent-member-rank-offers h1.page-title,
  body.parent-member-rank-offers #theme-page-title h1 {
    font-size: 34px;
  }
}
body.parent-member-rank-offers .page-header,
body.parent-member-rank-offers .page-header.phd-layout-1 {
  border-bottom: 1px solid #e5e5e5;
}

body.parent-member-rank-offers #theme-bread {
  padding: 0;
  margin: 0;
  min-height: 0;
}

body.parent-member-rank-offers .blog-components-wrapper {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Big "About Member Status" display heading - Cormorant Garamond 78px
   / fw 400 / lh 1.2 (was Eina03 64/300). */
body.parent-member-rank-offers .blog-components-wrapper h1:not(.page-title),
body.parent-member-rank-offers .blog-components-wrapper .display-heading,
body.parent-member-rank-offers .member-status-hero h1,
body.parent-member-rank-offers .hero-widget-container h1 {
  font-family: "Cormorant Garamond", "ChaparralRegular", "Courier New", Courier, monospace;
  font-weight: 400;
  color: #000;
}

/* body.parent-member-rank-offers .blog-components-wrapper h1:not(.page-title) {
	font-size: 50px;
	line-height: 1.1em;
	letter-spacing: -1px;
} */
/* Pull the title out to the page's left edge so it sits OUTSIDE the
   hero image rectangle - production places it as a free-standing
   editorial title flush against the left gutter. */
@media (min-width: 768px) {
  body.parent-member-rank-offers .blog-components-wrapper h1:not(.page-title),
  body.parent-member-rank-offers .blog-components-wrapper .display-heading,
  body.parent-member-rank-offers .member-status-hero h1,
  body.parent-member-rank-offers .hero-widget-container h1 {
    font-size: 78px;
    line-height: 1.2;
    letter-spacing: normal;
  }
  body.parent-member-rank-offers .hero-row {
    align-items: center;
    justify-content: center;
  }
  body.parent-member-rank-offers .hero-col:has(.hero-widget-container > h1),
  body.parent-member-rank-offers .hero-col:first-of-type {
    flex: 0 0 auto;
    width: auto;
    padding-left: 0;
    margin-left: -40px;
    z-index: 2;
    position: relative;
  }
  body.parent-member-rank-offers .hero-widget-wrap {
    justify-content: flex-start;
    padding: 0;
  }
  body.parent-member-rank-offers .hero-widget-container,
  body.parent-member-rank-offers .hero-title {
    padding: 0;
    margin: 0;
    background: transparent;
  }
}
@media screen and (max-width: 991px) {
  body.parent-member-rank-offers #theme-page-header .page-header {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  body.parent-member-rank-offers .page-header,
  body.parent-member-rank-offers .page-header.phd-layout-1 {
    margin-top: 0;
    padding-top: 0;
  }
}
/* Mobile improvements for /member-rank-offers/. Stack the hero (title
   above, image below), shrink the display heading, and tighten the
   section padding so each block fits neatly on a small screen. */
/* @media (min-width: 768px) {
body.parent-member-rank-offers .status-table-image,
body.parent-member-rank-offers .status-table-image-container {
	width: 100% ;
	max-width: 100% ;
}
} */
body.parent-member-rank-offers #heroCenterImage {
  overflow: hidden;
}

@media (max-width: 767px) {
  /* Hide the background-image hero layer on mobile - it duplicates
     the same photo behind the title and bleeds through the layout. */
  body.parent-member-rank-offers .hero-bg-layer {
    display: none;
  }
  body.parent-member-rank-offers .hero-container,
  body.parent-member-rank-offers .hero-row {
    padding: 0;
    margin: 0;
  }
  body.parent-member-rank-offers .hero-row {
    gap: 2rem;
  }
  body.parent-member-rank-offers .hero-container {
    display: block;
  }
  .member-status-hero .hero-row {
    flex-direction: column;
    gap: 2rem;
  }
  body.parent-member-rank-offers .hero-col,
  body.parent-member-rank-offers .hero-widget-wrap,
  body.parent-member-rank-offers .hero-title,
  body.parent-member-rank-offers .hero-widget-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  body.parent-member-rank-offers .hero-widget-container h1 {
    font-size: 48px;
    line-height: 1.1;
    text-align: center;
    padding: 24px 20px;
    margin: 0;
  }
  body.parent-member-rank-offers .hero-image,
  body.parent-member-rank-offers .hero-image-container,
  body.parent-member-rank-offers #heroCenterImage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    transform: none;
    position: static;
    overflow: hidden;
    display: block;
    aspect-ratio: auto;
  }
  body.parent-member-rank-offers img[src*=ca-mr-center],
  body.parent-member-rank-offers .hero-image img,
  body.parent-member-rank-offers .hero-image-container img {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    position: static;
    margin: 0;
  }
  /* Tighten section padding on mobile */
  body.parent-member-rank-offers .member-status-details-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.parent-member-rank-offers .status-block {
    margin-bottom: 4rem;
  }
  body.parent-member-rank-offers .status-heading-en {
    font-size: 32px;
    margin-bottom: 4px;
  }
  body.parent-member-rank-offers .status-heading-ja {
    font-size: 14px;
    margin-bottom: 12px;
  }
  body.parent-member-rank-offers .status-text p,
  body.parent-member-rank-offers .status-note p {
    font-size: 13px;
    line-height: 1.7;
  }
  /* body.parent-member-rank-offers .status-table-image,
  body.parent-member-rank-offers .status-table-image-container {
  	width: 100% ;
  	max-width: 100% ;
  } */
  body.parent-member-rank-offers .example-image {
    max-width: 100%;
  }
  body.parent-member-rank-offers .notice-box {
    padding: 16px;
  }
  body.parent-member-rank-offers .notice-box ul {
    padding-left: 20px;
  }
  body.parent-member-rank-offers .notice-box li,
  body.parent-member-rank-offers .notice-box p {
    font-size: 12px;
    line-height: 1.7;
  }
  body.parent-member-rank-offers .status-table-image-container {
    margin-left: -1rem;
    margin-right: -1rem;
    max-width: none;
    width: calc(100% + 2rem);
  }
  body.parent-member-rank-offers .status-table-image img {
    max-width: none;
    width: 100% !important;
  }
}
/* Hero image container - kill the auto top/bottom padding/margin so the
   square photo sits flush against the column without extra whitespace. */
body.parent-member-rank-offers .hero-image,
body.parent-member-rank-offers .hero-image-container,
body.parent-member-rank-offers #heroCenterImage {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Status details block - production left-aligns the heading + body
   text AND removes the narrow 800px centering so the column reads
   flush against the page rail (with a generous left inset) instead
   of looking centered. */
body.parent-member-rank-offers .member-status-details,
body.parent-member-rank-offers .member-status-details-inner,
body.parent-member-rank-offers .status-block,
body.parent-member-rank-offers .status-text,
body.parent-member-rank-offers .status-text p,
body.parent-member-rank-offers .status-note,
body.parent-member-rank-offers .status-note p,
body.parent-member-rank-offers .notice-box,
body.parent-member-rank-offers .notice-box * {
  text-align: left;
}

@media (min-width: 768px) {
  body.parent-member-rank-offers .status-heading-en,
  body.parent-member-rank-offers .status-heading-ja {
    text-align: left;
  }
}
@media (max-width: 767px) {
  body.parent-member-rank-offers .status-heading-en,
  body.parent-member-rank-offers .status-heading-ja {
    text-align: center;
  }
}
body.parent-member-rank-offers .member-status-details-inner,
body.parent-member-rank-offers .status-block {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

@media (min-width: 768px) {
  body.parent-member-rank-offers .member-status-details-inner {
    padding-left: 60px;
    padding-right: 60px;
  }
}
body.parent-member-rank-offers .member-status-details-inner .status-block .status-note p {
  text-align: inherit;
}

@media (max-width: 767px) {
  body.parent-member-rank-offers .member-status-details-inner .status-block .status-note {
    text-align: center;
  }
}
/* Status table image (membership_rule.svg) and rank-change example
   image - left-align to the column edge. The example image also gets
   a max-width so it doesn't blow out wide. */
body.parent-member-rank-offers .status-table-image,
body.parent-member-rank-offers .status-table-image picture,
body.parent-member-rank-offers .status-table-image img,
body.parent-member-rank-offers .example-image {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

body.parent-member-rank-offers .status-table-image img {
  display: block;
  max-width: 100% !important;
  height: auto;
}

body.parent-member-rank-offers .example-image {
  max-width: 720px;
  width: 100%;
}

body.parent-member-rank-offers .example-image img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Status section EN headings ("Summary", "Reward & Conditions",
   "Term", "How can I check my Status?") - Cormorant Infant 400 to
   match production's editorial display style. Cormorant Garamond is
   the available fallback if Cormorant Infant isn't loaded. */
body.parent-member-rank-offers .status-heading-en {
  font-family: "Cormorant Infant", "Cormorant Garamond", "ChaparralRegular", serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: #000;
  margin-bottom: 8px;
}

/* JA subhead under each EN heading - Noto 16px / fw 500. */
body.parent-member-rank-offers .status-heading-ja {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4;
  color: #312a26;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  body.parent-member-rank-offers .status-heading-ja {
    font-size: 1.175rem;
    margin-bottom: 2rem;
  }
}
/* Subtitle "???????????" - Noto 16.8 / fw 500 (was Eina03 24/700). */
body.parent-member-rank-offers .blog-components-wrapper h2,
body.parent-member-rank-offers .blog-components-wrapper h3,
body.parent-member-rank-offers .blog-components-wrapper h4 {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 16.8px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  color: #222;
}

/* "How can I check my Status?" subhead - Cormorant Infant ~44px display.
   Match using Cormorant Garamond as fallback. */
body.parent-member-rank-offers .blog-components-wrapper .status-subhead,
body.parent-member-rank-offers .blog-components-wrapper h2.display-sub,
body.parent-member-rank-offers .blog-components-wrapper .member-status-details h2:first-of-type,
body.parent-member-rank-offers .blog-components-wrapper .member-status-section h2:first-of-type {
  font-family: "Cormorant Garamond", "ChaparralRegular", serif;
  font-size: 44.8px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  color: #000;
}

/* Body paragraphs - Noto 13.6 / 24.48 / color #312a26 (slight warm
   gray) like production. Local was rendering at 15px / #0a0a0a. */
body.parent-member-rank-offers .blog-components-wrapper p,
body.parent-member-rank-offers .member-status-hero p,
body.parent-member-rank-offers .member-status-details p {
  font-size: 13.6px;
  font-weight: 400;
  line-height: 1.8;
  color: #312a26;
}

/* Hero image (ca-mr-center) - square + larger + zoomed in (object-fit
   cover). Bump container widths so the image renders at ~389-460px. */
body.parent-member-rank-offers .hero-image,
body.parent-member-rank-offers .hero-image-container,
body.parent-member-rank-offers .hero-widget-wrap,
body.parent-member-rank-offers .hero-col {
  width: 100%;
  max-width: 460px;
}

body.parent-member-rank-offers img[src*=ca-mr-center],
body.parent-member-rank-offers .member-status-hero img,
body.parent-member-rank-offers .member-hero-img,
body.parent-member-rank-offers .hero-image img,
body.parent-member-rank-offers .hero-image-container img {
  width: 100%;
  height: auto;
  max-width: 460px;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Mobile production parity for the first /member-rank-offers/ hero only. */
@media (max-width: 767px) {
  body.parent-member-rank-offers #memberStatusHero.member-status-hero {
    min-height: 619px;
    padding: 8% 8% 4%;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-bg-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-bg-layer {
    display: block;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 160vw auto;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-container {
    display: flex;
    height: auto;
    min-height: 619px;
    align-items: stretch;
    padding: 0;
    margin: 0;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 619px;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 0;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-col,
  body.parent-member-rank-offers #memberStatusHero .hero-widget-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-title {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 17px 0 12px;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-widget-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-subtitle {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 1.5rem 0 2rem;
    text-align: center;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-subtitle.hidden-desktop,
  body.parent-member-rank-offers #memberStatusHero .hero-subtitle.hidden-tablet {
    display: block;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-content.hidden-phone {
    display: none;
  }
  body.parent-member-rank-offers .blog-components-wrapper #memberStatusHero h1:not(.page-title),
  body.parent-member-rank-offers .blog-components-wrapper #memberStatusHero .hero-widget-container h1 {
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-subtitle h3 {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: center;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-col:nth-child(2) {
    margin-top: 28px;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-col:last-child {
    margin-top: 27px;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-col:last-child .hero-content:not(.hidden-phone) .hero-widget-container {
    margin-top: 2rem;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-image,
  body.parent-member-rank-offers #memberStatusHero .hero-image-container,
  body.parent-member-rank-offers #memberStatusHero #heroCenterImage {
    width: 60vw;
    max-width: 60vw;
    height: 171px;
    max-height: 171px;
    margin: 0 auto;
    aspect-ratio: auto;
    display: block;
    overflow: hidden;
    position: static;
    transform: none !important;
  }
  body.parent-member-rank-offers #memberStatusHero img[src*=ca-mr-center],
  body.parent-member-rank-offers #memberStatusHero.member-status-hero img,
  body.parent-member-rank-offers #memberStatusHero .member-hero-img,
  body.parent-member-rank-offers #memberStatusHero .hero-image img,
  body.parent-member-rank-offers #memberStatusHero .hero-image-container img {
    width: 100%;
    height: 171px;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
  }
  body.parent-member-rank-offers #memberStatusHero .hero-content p {
    font-size: 14px;
    line-height: 1.75;
    text-align: center;
  }
}
/* Pink section ("???????????" or similar) - production gives
   it a wide pink/rose background with content left-aligned and a small
   left padding rather than centered narrow column. Use the page-id /
   parent class to scope. */
body.parent-member-rank-offers .member-status-pink,
body.parent-member-rank-offers section[class*=pink],
body.parent-member-rank-offers section[style*="background-color: #f"],
body.parent-member-rank-offers section[style*="background:#f"] {
  max-width: none;
  width: 100%;
  padding-left: 60px;
  padding-right: 60px;
  text-align: left;
}

body.parent-member-rank-offers .member-status-pink *,
body.parent-member-rank-offers section[class*=pink] *,
body.parent-member-rank-offers section[style*="background-color: #f"] *,
body.parent-member-rank-offers section[style*="background:#f"] * {
  text-align: left;
}

/* update.css lines 4584-4593 */
@media (min-width: 768px) {
  body:not(#ca-update-css-priority).parent-member-rank-offers .hero-widget-wrap {
    justify-content: flex-start;
  }
}
@media (max-width: 767px) {
  body:not(#ca-update-css-priority).parent-member-rank-offers .page-header, body:not(#ca-update-css-priority).parent-member-rank-offers .page-header.phd-layout-1 {
    padding-top: 0;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 1371-1568 */
/* /reservation-form/ (page-id 7995) - uppercase the page header title and
   the side-image overlay title so the layout matches production's
   "RESERVATIONS" headings. */
body.page-id-7995 h1.page-title,
body.page-id-7995 #theme-page-title h1,
body.page-id-7995 .form_sideimg .sideimg__content .page-title,
body.page-id-7995 .form_sideimg .sideimg__content .entry-title {
  text-transform: uppercase;
}

/* /reservation-form/ - content-booked.php emits a duplicate header
   `<h2 class="entry-title blog-title"><a>Reservations</a></h2>` above the
   two-column layout. Production hides it; do the same here. */
body.page-id-7995 #page-7995 > .entry-header {
  display: none;
}

/* /reservation-form/ - strip left padding from the page container and
   inner row so the side image is flush with the viewport edge, and make
   the container span the full viewport width so the image actually
   occupies the left half of the page. */
body.page-id-7995 main.page-content > .container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

body.page-id-7995 #bookedForm,
body.page-id-7995 #bookedForm .form_entry,
body.page-id-7995 #bookedForm .row.rv_form_row {
  padding-left: 0;
  margin-left: 0;
  width: 100%;
  max-width: 100%;
}

body.page-id-7995 .row.rv_form_row {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0;
}

body.page-id-7995 .row.rv_form_row > .form_sideimg {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 60px;
  min-height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.page-id-7995 .row.rv_form_row > .form_sidecon {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
}

@media (max-width: 991px) {
  body.page-id-7995 .row.rv_form_row > .form_sideimg,
  body.page-id-7995 .row.rv_form_row > .form_sidecon {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}
/* /reservation-form/ - full-bleed two-column layout: JUKI image flush
   against the left edge with overlaid script "Reservations" + Japanese
   description on its left side, the reservation calendar on the right.
   Mirrors the production look from the old content-booked.php template,
   which page.php no longer dispatches to. */
body.page-id-7995 .page-header,
body.page-id-7995 #theme-page-title,
body.page-id-7995 h1.page-title {
  display: none;
}

body.page-id-7995 .max-width--large,
body.page-id-7995 .max-width--large.gutter-padding--full,
body.page-id-7995 main.page-content > .container,
body.page-id-7995 .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

body.page-id-7995 .notify_gift {
  padding: 1.5rem 1rem 0.5rem;
}

body.page-id-7995 .reservation-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

body.page-id-7995 .reservation-left {
  flex: 0 0 55%;
  max-width: 55%;
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

body.page-id-7995 .reservation-left .reservation-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

body.page-id-7995 .reservation-overlay {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  color: #fff;
  width: 38%;
  max-width: 280px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

body.page-id-7995 .reservation-script-title {
  font-family: "beloved-script", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 1.25rem;
  color: #fff;
}

body.page-id-7995 .reservation-desc {
  font-size: 0.8rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  margin: 0;
  color: #fff;
}

body.page-id-7995 .reservation-right {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 1.5rem 4rem 0 3rem;
  box-sizing: border-box;
}

body.page-id-7995 .reservation-right .quickcal-calendar,
body.page-id-7995 .reservation-right .qc-calendar,
body.page-id-7995 .reservation-right > * {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* body.page-id-7995 #topickup {
	text-align: left;
	padding: 1rem 4rem 2.5rem 3rem;
	box-sizing: border-box;
	max-width: 45%;
	margin-left: auto;
} */
@media (max-width: 991px) {
  body.page-id-7995 .reservation-left,
  body.page-id-7995 .reservation-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
  body.page-id-7995 .reservation-left {
    min-height: 320px;
  }
  body.page-id-7995 .reservation-right {
    padding: 2rem 1.5rem;
  }
}
/* /reservation-form/ - the side-image overlay's "Reservations" heading
   should display in the production script font (beloved-script). The
   .sideimg__content .entry-title rule in form.css already handles this on
   production but the rule's specificity may lose to global page-title CSS,
   so reinforce it here. */
body.page-id-7995 .form_sideimg .sideimg__content .page-title.entry-title {
  font-family: "beloved-script", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-transform: none; /* override global uppercase from above */
  letter-spacing: 0;
  font-size: 3.5rem;
  line-height: 1.2;
  color: #fff;
}

@media (min-width: 992px) {
  body.page-id-7995 .form_sideimg .sideimg__content .page-title.entry-title {
    font-size: 4.5rem;
  }
}
/* update.css lines 2851-3076 */
/* ==========================================================================
   /reservation-form/ - block-by-block typography vs production.
   Issue 1: The page-header band ("RESERVATIONS" title) is hidden on
   local. Show it and style as ProximaNova 34px uppercase like the
   other utility pages.
   Issue 2: The "Reservations" cursive overlaid on the side image
   should render as beloved-script 56px white. Local was rendering it
   as Noto 16px regular (no script font applied).
   Issue 3: Body description under the cursive - Noto 14px white at
   1.6 line-height (was 12.8).
   ========================================================================== */
body.parent-reservation-form .page-header,
body.parent-reservation-form #theme-page-header,
body.parent-reservation-form #theme-page-title {
  display: block;
}

body.parent-reservation-form #theme-page-header .page-header,
body.parent-reservation-form #theme-page-header .page-header.phd-layout-1,
body.parent-reservation-form .page-header,
body.parent-reservation-form .page-header.phd-layout-1 {
  border-bottom: 1px solid #e5e5e5;
  padding: 40px 0 0;
}

body.parent-reservation-form #theme-page-title {
  padding-bottom: 0;
  margin-bottom: 0;
}

body.parent-reservation-form h1.page-title,
body.parent-reservation-form #theme-page-title h1 {
  margin-bottom: 24px;
}

body.parent-reservation-form .reservation-layout {
  margin-top: 0;
  padding-top: 0;
}

body.parent-reservation-form .reservation-left .reservation-hero-img {
  object-position: center;
}

body.parent-reservation-form .reservation-right .booked-calendar-shortcode-wrap,
body.parent-reservation-form .reservation-right .booked-calendar-wrap {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 432px;
}

/* Bottom link "?????????????" sits OUTSIDE .reservation-right
   in #topickup. Position it below the layout, aligned with the
   calendar's left edge (right column starts at 50%, calendar is
   inset 94px from there). */
/* body.parent-reservation-form #topickup {
	margin-top: 24px ;
	margin-bottom: 40px ;
	margin-left: calc(50% + 94px) ;
	padding: 0 ;
	text-align: left ;
} */
body.parent-reservation-form #topickup a {
  display: inline-block;
  text-align: left;
}

/* @media (max-width: 767px) {
	body.parent-reservation-form #topickup {
		margin-left: 20px ;
		margin-right: 20px ;
	}
} */
/* Notify gift block ("??????????????" + sub note) - center
   the text, trim the top padding (was eating the page-header gap) and
   give it some breathing room before the hero. */
body.parent-reservation-form .notify_gift {
  text-align: center;
  padding-top: 8px;
  padding-bottom: 32px;
}

body.parent-reservation-form .notify_gift a,
body.parent-reservation-form .notify_gift p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Mobile: stack the side-image hero (with overlay) above the calendar.
   Keep the image as a positioning context, overlay centered on top of
   the photo with a soft dark scrim. */
@media (max-width: 767px) {
  body.parent-reservation-form .reservation-layout {
    display: block;
  }
  body.parent-reservation-form .reservation-left,
  body.parent-reservation-form .reservation-right {
    max-width: 100%;
    flex: 1 1 100%;
    width: 100%;
    padding: 0;
  }
  body.parent-reservation-form .reservation-left {
    position: relative;
    min-height: 460px;
    display: block;
  }
  body.parent-reservation-form .reservation-hero-img {
    display: block;
    width: 100%;
    height: 460px;
    min-height: 460px;
    max-height: 460px;
    object-fit: cover;
    object-position: center;
  }
  body.parent-reservation-form .reservation-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.35);
    display: block;
    box-sizing: border-box;
  }
  body.parent-reservation-form h2.reservation-script-title {
    font-size: 44px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #fff;
  }
  body.parent-reservation-form .reservation-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #fff;
  }
  body.parent-reservation-form .reservation-right {
    padding: 24px 20px;
  }
}
/* The calendar plugin writes inline cell heights, so use min-height to keep the
   production rhythm without bringing back broad priority overrides. */
body.parent-reservation-form .reservation-right .booked-calendar .bc-row.week .bc-col {
  min-height: 63px;
}

body.parent-reservation-form .reservation-right div.booked-calendar-wrap div.booked-calendar .bc-body .bc-row.week .bc-col .date {
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.parent-reservation-form #theme-bread {
  padding: 0;
  margin: 0;
  min-height: 0;
}

body.parent-reservation-form h1.page-title,
body.parent-reservation-form #theme-page-title h1 {
  display: block;
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #222;
}

body.parent-reservation-form h2.reservation-script-title {
  font-family: "beloved-script", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: #fff;
  text-align: center;
  margin: 0 0 1rem;
  text-transform: none;
}

body.parent-reservation-form .reservations-title,
body.parent-reservation-confirm .reservations-title,
body.parent-reservation-form .form_sideimg .sideimg__content .page-title.entry-title,
body.parent-reservation-confirm .form_sideimg .sideimg__content .page-title.entry-title,
body.parent-reservation-form h2.reservation-script-title,
body.parent-reservation-confirm h2.reservation-script-title {
  color: #fff;
}

body.parent-reservation-form .reservation-desc,
body.parent-reservation-form .reservation-overlay p {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: #fff;
  text-align: center;
}

/* Make the side-image / hero-img column 50% wide on desktop, full
   height of the hero (so it matches prod's 720-587 panel). */
@media (min-width: 768px) {
  body.parent-reservation-form .reservation-layout {
    display: flex;
    align-items: stretch;
    gap: 0;
  }
  body.parent-reservation-form .reservation-left {
    flex: 0 0 50%;
    max-width: 50%;
  }
  body.parent-reservation-form .reservation-right {
    flex: 1 1 50%;
    max-width: 50%;
  }
  body.parent-reservation-form .reservation-hero-img {
    width: 100%;
    height: 587px;
    min-height: 587px;
    object-fit: cover;
    object-position: center;
    background-size: cover;
    background-position: center;
    display: block;
  }
  body.parent-reservation-form .reservation-left {
    min-height: 587px;
    position: relative;
  }
  body.parent-reservation-form .reservation-right {
    padding: 40px 40px 40px 94px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  body.parent-reservation-form .reservation-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 149-154 */
/* /shipping-info/ remove left margin from section titles so they line up
   with the body content beneath them */
body.page-id-2052873 .paragraph-title,
body.page-id-2052873 .data-table-title {
  margin-left: 0;
}

/* update.css lines 1177-1212 */
/* /shipping-info/ (page-id 2052873) - content lives in a centered ~1200px
   column on the page; text within is left-aligned (so headings, body copy,
   and table titles sit flush at the left edge of the column). */
body.page-id-2052873 .blog-components-wrapper {
  padding-left: 20px;
  padding-right: 20px;
}

body.page-id-2052873 .blog-components-wrapper .para__center,
body.page-id-2052873 .blog-components-wrapper .para_container,
body.page-id-2052873 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052873 .blog-components-wrapper .data-table-title-container,
body.page-id-2052873 .blog-components-wrapper .data-table,
body.page-id-2052873 .blog-components-wrapper #tokutable,
body.page-id-2052873 .blog-components-wrapper .tokutable-section {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.page-id-2052873 .blog-components-wrapper .paragraph-title,
body.page-id-2052873 .blog-components-wrapper .data-table-title,
body.page-id-2052873 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052873 .blog-components-wrapper .main-text-component.paragraph p,
body.page-id-2052873 .blog-components-wrapper .para__center,
body.page-id-2052873 .blog-components-wrapper .para_container {
  text-align: left;
}

/* /shipping-info/ - uppercase the page title to match production design.
   Title is rendered as h2 (see func-theme-display.php). Overrides the
   template-wide text-transform: none  on line 89. */
body.page-id-2052873 h2.page-title,
body.page-id-2052873 #theme-page-title h2 {
  text-transform: uppercase;
}

/* update.css lines 1582-1615 */
/* /shipping-info/ */
body.parent-shipping-info .paragraph-title,
body.parent-shipping-info .data-table-title {
  margin-left: 0;
}

body.parent-shipping-info .blog-components-wrapper {
  padding-left: 20px;
  padding-right: 20px;
}

body.parent-shipping-info .blog-components-wrapper .para__center,
body.parent-shipping-info .blog-components-wrapper .para_container,
body.parent-shipping-info .blog-components-wrapper .main-text-component.paragraph,
body.parent-shipping-info .blog-components-wrapper .data-table-title-container,
body.parent-shipping-info .blog-components-wrapper .data-table,
body.parent-shipping-info .blog-components-wrapper #tokutable,
body.parent-shipping-info .blog-components-wrapper .tokutable-section {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.parent-shipping-info .blog-components-wrapper .paragraph-title,
body.parent-shipping-info .blog-components-wrapper .data-table-title,
body.parent-shipping-info .blog-components-wrapper .main-text-component.paragraph,
body.parent-shipping-info .blog-components-wrapper .main-text-component.paragraph p,
body.parent-shipping-info .blog-components-wrapper .para__center,
body.parent-shipping-info .blog-components-wrapper .para_container {
  text-align: left;
}

body.parent-shipping-info h2.page-title,
body.parent-shipping-info #theme-page-title h2 {
  text-transform: uppercase;
}

/* update.css lines 2542-2653 */
/* ==========================================================================
   /shipping-info/ - block-by-block typography vs production. Production
   uses ProximaNova 34px UPPERCASE for the page title (like /access/),
   16px Eina03-Light section headers, smaller table type, and a 1px
   border under the page-header band.
   ========================================================================== */
body.parent-shipping-info h1.page-title,
body.parent-shipping-info #theme-page-title h1 {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

body.parent-shipping-info .page-header,
body.parent-shipping-info .page-header.phd-layout-1 {
  border-bottom: 1px solid #e5e5e5;
}

/* Section H3/H4 subtitles (??????? / ??????? / ?????) -
   production uses Eina03 16px regular (fw 400) at lh 1.0, NOT the
   semibold 600 that local was rendering. */
body.parent-shipping-info .blog-components-wrapper .paragraph-title,
body.parent-shipping-info .blog-components-wrapper h3.paragraph-title,
body.parent-shipping-info .blog-components-wrapper h4.paragraph-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  font-family: "Eina03", "Helvetica Neue", sans-serif;
}

/* Table title (????? / ?????) - Eina03 16.8px / fw 600 / lh 1.0
   on production (was 18px / 1.2 lh in local). */
body.parent-shipping-info .blog-components-wrapper .data-table-title,
body.parent-shipping-info .blog-components-wrapper h3.data-table-title {
  font-size: 16.8px;
  font-weight: 600;
  line-height: 1;
  font-family: "Eina03", "Helvetica Neue", sans-serif;
}

/* Tables - match production's body type rail (Noto 13.6px) and lighter
   header weight (fw 500 not 600). */
body.parent-shipping-info .blog-components-wrapper .data-table th {
  font-size: 13.6px;
  font-weight: 500;
  line-height: 1.6;
}

body.parent-shipping-info .blog-components-wrapper .data-table td {
  font-size: 13.6px;
  font-weight: 400;
  line-height: 1.6;
}

/* Body paragraphs - production uses #222 (slightly darker than the
   #0a0a0a default), and 13.6/24.48 line height matches our other pages. */
body.parent-shipping-info .blog-components-wrapper .ca-paragraph p,
body.parent-shipping-info .blog-components-wrapper .main-text-component p {
  color: #222;
  font-size: 13.6px;
  line-height: 1.8;
}

/* Production uses a ~932px content rail (1440 viewport with 254px L/R
   gutter) for the shipping section/table/text. Local was constrained
   to 800px which read narrower than prod. */
/* Single content rail for headings, body text, and tables. Wrap the
   blog-components-wrapper itself at 1342px max-width centered, then
   force every nested layout element to 100% width with no extra
   margin/padding so they all share the same left/right edges. */
body.parent-shipping-info .blog-components-wrapper {
  max-width: 1342px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 98px);
  padding-left: 0;
  padding-right: 0;
}

body.parent-shipping-info .blog-components-wrapper .ca-section,
body.parent-shipping-info .blog-components-wrapper .ca-section .ca-container,
body.parent-shipping-info .blog-components-wrapper .ca-section .ca-column,
body.parent-shipping-info .blog-components-wrapper .ca-section .ca-widget-wrap,
body.parent-shipping-info .blog-components-wrapper .ca-section .ca-widget,
body.parent-shipping-info .blog-components-wrapper .ca-section .ca-widget-body,
body.parent-shipping-info .blog-components-wrapper .ca-section .para__center,
body.parent-shipping-info .blog-components-wrapper .ca-section .data-table-title-container,
body.parent-shipping-info .blog-components-wrapper .ca-section .data-table,
body.parent-shipping-info .blog-components-wrapper .ca-section .data-table-title,
body.parent-shipping-info .blog-components-wrapper .data-table,
body.parent-shipping-info .blog-components-wrapper .data-table-title,
body.parent-shipping-info .blog-components-wrapper .data-table-title-container,
body.parent-shipping-info .blog-components-wrapper .paragraph-title {
  max-width: 100% !important;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Hyperlinks inside the body copy ("???????????????" etc) -
   add underline + inherit color so links stand out as actionable. */
body.parent-shipping-info .blog-components-wrapper .ca-paragraph a,
body.parent-shipping-info .blog-components-wrapper .main-text-component a,
body.parent-shipping-info .blog-components-wrapper a.underline {
  color: inherit;
  text-decoration: underline;
}

body.parent-shipping-info .blog-components-wrapper .ca-paragraph a:hover,
body.parent-shipping-info .blog-components-wrapper a.underline:hover {
  text-decoration: none;
}

/* update.css lines 3758-3767 */
body.parent-shipping-info .blog-components-wrapper .para__center,
body.parent-shipping-info .blog-components-wrapper .para__center.fx.bsec {
  margin-bottom: 0;
  padding-bottom: 0;
  justify-content: flex-start;
  display: block;
}

body.parent-shipping-info .blog-components-wrapper .para_container .main-text-component {
  margin-bottom: 0;
}

/* update.css lines 4539-4541 */
body:not(#ca-update-css-priority).parent-shipping-info .blog-components-wrapper .paragraph-title, body:not(#ca-update-css-priority).parent-shipping-info .blog-components-wrapper .data-table-title, body:not(#ca-update-css-priority).parent-shipping-info .blog-components-wrapper .main-text-component.paragraph, body:not(#ca-update-css-priority).parent-shipping-info .blog-components-wrapper .main-text-component.paragraph p, body:not(#ca-update-css-priority).parent-shipping-info .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).parent-shipping-info .blog-components-wrapper .para_container {
  text-align: left;
}

/* update.css lines 4597-4600 */
body:not(#ca-update-css-priority).parent-shipping-info .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).parent-shipping-info .blog-components-wrapper .para__center.fx.bsec {
  margin-bottom: 0;
  justify-content: flex-start;
}

/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 1213-1230 */
/* /survey/ (page-id 2052886) - intro paragraph sits in a centered narrow
   reading column with text left-aligned inside (matching ???????
   layout in production). */
body.page-id-2052886 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052886 .blog-components-wrapper .para__center,
body.page-id-2052886 .blog-components-wrapper .para_container {
  max-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.page-id-2052886 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052886 .blog-components-wrapper .main-text-component.paragraph p,
body.page-id-2052886 .blog-components-wrapper .para__center,
body.page-id-2052886 .blog-components-wrapper .para_container {
  text-align: left;
}

/* update.css lines 1616-1631 */
/* /survey/ */
body.parent-survey .blog-components-wrapper .main-text-component.paragraph,
body.parent-survey .blog-components-wrapper .para__center,
body.parent-survey .blog-components-wrapper .para_container {
  max-width: 720px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.parent-survey .blog-components-wrapper .main-text-component.paragraph,
body.parent-survey .blog-components-wrapper .main-text-component.paragraph p,
body.parent-survey .blog-components-wrapper .para__center,
body.parent-survey .blog-components-wrapper .para_container {
  text-align: left;
}

/* update.css lines 4542-4544 */
body:not(#ca-update-css-priority).parent-survey .blog-components-wrapper .main-text-component.paragraph, body:not(#ca-update-css-priority).parent-survey .blog-components-wrapper .main-text-component.paragraph p, body:not(#ca-update-css-priority).parent-survey .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).parent-survey .blog-components-wrapper .para_container {
  text-align: left;
}

@media (max-width: 767px) {
  body.parent-survey #theme-page-title,
  body.parent-survey .blog-components-wrapper {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  body.parent-survey .blog-components-wrapper .main-text-component.paragraph,
  body.parent-survey .blog-components-wrapper .para__center,
  body.parent-survey .blog-components-wrapper .para_container {
    max-width: 100%;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 1352-1370 */
/* /terms/ (page-id 2052800) - body content sits in a centered narrow
   reading column with text-align: left inside, matching production's
   utility-page layout. */
body.page-id-2052800 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052800 .blog-components-wrapper .para__center,
body.page-id-2052800 .blog-components-wrapper .para_container {
  max-width: 760px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.page-id-2052800 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052800 .blog-components-wrapper .main-text-component.paragraph p,
body.page-id-2052800 .blog-components-wrapper .main-text-component.paragraph li,
body.page-id-2052800 .blog-components-wrapper .para__center,
body.page-id-2052800 .blog-components-wrapper .para_container {
  text-align: left;
}

/* update.css lines 1943-1959 */
/* /terms/ */
body.parent-terms .blog-components-wrapper .main-text-component.paragraph,
body.parent-terms .blog-components-wrapper .para__center,
body.parent-terms .blog-components-wrapper .para_container {
  max-width: 760px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.parent-terms .blog-components-wrapper .main-text-component.paragraph,
body.parent-terms .blog-components-wrapper .main-text-component.paragraph p,
body.parent-terms .blog-components-wrapper .main-text-component.paragraph li,
body.parent-terms .blog-components-wrapper .para__center,
body.parent-terms .blog-components-wrapper .para_container {
  text-align: left;
}

/* update.css lines 4555-4557 */
body:not(#ca-update-css-priority).parent-terms .blog-components-wrapper .main-text-component.paragraph, body:not(#ca-update-css-priority).parent-terms .blog-components-wrapper .main-text-component.paragraph p, body:not(#ca-update-css-priority).parent-terms .blog-components-wrapper .main-text-component.paragraph li, body:not(#ca-update-css-priority).parent-terms .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).parent-terms .blog-components-wrapper .para_container {
  text-align: left;
}

@media (max-width: 767px) {
  body.parent-terms #theme-page-title,
  body.parent-terms .blog-components-wrapper {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  body.page-id-2052800 .blog-components-wrapper .main-text-component.paragraph,
  body.page-id-2052800 .blog-components-wrapper .para__center,
  body.page-id-2052800 .blog-components-wrapper .para_container {
    max-width: 100%;
    padding-left: 0;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 1675-1778 */
/* ==========================================================================
   /thank-you-for-feedback/ - pixel parity with the live page. Live renders:
     - Title (h1.entry-title) Eina03 30px / fw 400 / lh 36 / mixed-case /
       centered in a narrow column (~291px wide)
     - Body <p> 15.2px Noto / fw 400 / lh 22.8 / color #222 / center-aligned,
       margin 0 0 12px, narrow centered column (~271px wide)
     - No hairline divider below the title; no breadcrumb
   Specificity-boosted with the page-template class so the title rule beats
   the template-wide Chaparral 44px rule defined at line ~1284.
   ========================================================================== */
body.parent-thank-you-for-feedback.page-template-page-blog-components h1.page-title,
body.parent-thank-you-for-feedback.page-template-page-blog-components #theme-page-title h1 {
  font-family: Eina03, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  color: #222;
  text-transform: none;
  text-align: center;
  max-width: 291px;
  margin: 0 auto;
  padding: 0;
}

body.parent-thank-you-for-feedback #theme-page-title {
  border-bottom: 0;
  padding-bottom: 16px;
}

body.parent-thank-you-for-feedback #theme-bread {
  display: none;
}

/* Body block - narrow centered column, center-aligned text. */
body.parent-thank-you-for-feedback .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-feedback .blog-components-wrapper .para__center,
body.parent-thank-you-for-feedback .blog-components-wrapper .para_container {
  max-width: 291px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Body paragraphs - 15.2px Noto, lh 22.8, color #222, center-aligned,
   12px between paragraphs. */
body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph p,
body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .paragraph p,
body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .paragraph p:last-child {
  font-size: 15.2px !important;
  line-height: 22.8px !important;
  color: #222;
  text-align: center !important;
  margin: 0 0 12px !important;
}

/* Zero the trailing space after the last paragraph: the .para__center
   wrapper has a 60px bottom margin and the .main-text-component has 12px,
   plus the last <p> adds another 12px - collapse them so the body block
   ends flush below the last paragraph. */
body.parent-thank-you-for-feedback .blog-components-wrapper .para__center,
body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph p:last-child,
body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .paragraph p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 576px) {
  /* Mobile (live at 390px): title runs full-width, LEFT-aligned, 30px,
     no narrow-column cap. Body paragraphs stay centered but at 13.6px
     with 34px L / 24px R padding to match live's edge insets. */
  body.parent-thank-you-for-feedback.page-template-page-blog-components h1.page-title,
  body.parent-thank-you-for-feedback.page-template-page-blog-components #theme-page-title h1 {
    font-size: 30px;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  body.parent-thank-you-for-feedback #theme-page-title {
    padding: 0 24px;
    text-align: center;
  }
  body.parent-thank-you-for-feedback .page-header {
    margin-top: 0;
    padding-top: 0;
  }
  /* Body wrapper / column reset for mobile - drop the narrow 291px cap. */
  body.parent-thank-you-for-feedback .blog-components-wrapper .main-text-component.paragraph,
  body.parent-thank-you-for-feedback .blog-components-wrapper .para__center,
  body.parent-thank-you-for-feedback .blog-components-wrapper .para_container {
    max-width: none !important;
  }
  /* Edge insets for the body block (live: P at x=34 w=307 in a 390 viewport,
     so ~24px L/R wrapper padding + ~10px on .main-text-component). */
  body.parent-thank-you-for-feedback .blog-components-wrapper {
    padding: 0 24px;
  }
  body.parent-thank-you-for-feedback .blog-components-wrapper .main-text-component.paragraph {
    padding: 0 10px;
  }
  body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph,
  body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph p,
  body.parent-thank-you-for-feedback.page-template-page-blog-components .blog-components-wrapper .paragraph p {
    font-size: 13.6px !important;
    line-height: 20.4px !important;
  }
}
/* update.css lines 4545-4549 */
@media (max-width: 576px) {
  body:not(#ca-update-css-priority).parent-thank-you-for-feedback .page-header {
    padding-top: 0;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 2654-2736 */
/* ==========================================================================
   /thank-you-for-review/ - block-by-block typography vs production.
   ========================================================================== */
body.parent-thank-you-for-review h1.page-title,
body.parent-thank-you-for-review #theme-page-title h1 {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  body.parent-thank-you-for-review h1.page-title,
  body.parent-thank-you-for-review #theme-page-title h1 {
    font-size: 22px;
    letter-spacing: 0.5px;
  }
}
body.parent-thank-you-for-review .page-header,
body.parent-thank-you-for-review .page-header.phd-layout-1 {
  border-bottom: 1px solid #e5e5e5;
}

/* Strip the breadcrumb's vertical padding so the page-header band sits
   tight against the title (was leaving an empty bar above the title). */
body.parent-thank-you-for-review #theme-bread {
  padding: 0;
  margin: 0;
  min-height: 0;
}

/* Push the body content down a little from the header divider so the
   "??????????..." subtitle has breathing room above it. */
body.parent-thank-you-for-review .blog-components-wrapper .para_container {
  padding-top: 40px;
}

/* Subtitle headings ("??????????..." / "???????") - Eina03
   16px / fw 600 / lh 1.0 / left-aligned, full content rail. Local
   was rendering centered with a 800px max-width + auto margins. */
body.parent-thank-you-for-review .blog-components-wrapper .paragraph-title,
body.parent-thank-you-for-review .blog-components-wrapper h2,
body.parent-thank-you-for-review .blog-components-wrapper h3,
body.parent-thank-you-for-review .blog-components-wrapper h4 {
  font-family: "Eina03", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* 1px gray divider below each paragraph-title (matches production's
   horizontal rule under "??????????..."). */
body.parent-thank-you-for-review .blog-components-wrapper .paragraph-title {
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 24px;
}

/* Body paragraphs - production uses Noto 16px / lh 28 (1.75) for
   readable thank-you copy, not the smaller 13.6 used by the rest of
   the blog-components pages. */
body.parent-thank-you-for-review .blog-components-wrapper .ca-paragraph p,
body.parent-thank-you-for-review .blog-components-wrapper .main-text-component p {
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.75 !important;
  color: #0a0a0a;
  text-align: left;
}

/* Hyperlink "???" ? underlined + matching size. */
body.parent-thank-you-for-review .blog-components-wrapper .ca-paragraph a,
body.parent-thank-you-for-review .blog-components-wrapper .main-text-component a {
  font-size: 16px;
  color: inherit;
  text-decoration: underline;
}

body.parent-thank-you-for-review .blog-components-wrapper .ca-paragraph a:hover,
body.parent-thank-you-for-review .blog-components-wrapper .main-text-component a:hover {
  text-decoration: none;
}

/* update.css lines 3719-3757 */
/* Pull the content all the way to the left with just a small 20px
   inset, instead of the 49px gutter we use elsewhere. */
body.parent-thank-you-for-review .blog-components-wrapper {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

html body.parent-thank-you-for-review .blog-components-wrapper .ca-section,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-container,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-column,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-widget-wrap,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-widget,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-widget-body,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .para__center,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .para_container,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .main-text-component,
html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .paragraph {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* The .para__center wrapper uses display:flex; justify-content:center to
   pull its inner .para_container into the middle of the row. Switch it
   to a plain block so the container fills the rail and content sits
   flush-left. */
body.parent-thank-you-for-review .blog-components-wrapper .para__center,
body.parent-thank-you-for-review .blog-components-wrapper .para__center.fx.bsec {
  display: block;
  justify-content: flex-start;
}

/* Kill the big bottom margin on .para__center so consecutive sections
   sit close together. */
/* update.css lines 4594-4596 */
body:not(#ca-update-css-priority).parent-thank-you-for-review .blog-components-wrapper .para__center, body:not(#ca-update-css-priority).parent-thank-you-for-review .blog-components-wrapper .para__center.fx.bsec {
  justify-content: flex-start;
}

/* Desktop content rail should sit centered on the page; keep the copy
   left-aligned inside that centered rail for readability. */
@media (min-width: 768px) {
  body.parent-thank-you-for-review .blog-components-wrapper {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-container,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-column,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-widget-wrap,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-widget,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .ca-widget-body,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .para__center,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .para_container,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .main-text-component,
  html body.parent-thank-you-for-review .blog-components-wrapper .ca-section .paragraph {
    max-width: 100%;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 1779-1865 */
/* ==========================================================================
   /thank-you-for-subscribing/ - pixel parity with the live page. Live renders:
     - Title (h1.page-title) ProximaNovaRegular 34px uppercase ls 1px center
     - Subtitle (???????????) 16px Noto center
     - Hairline under the subtitle
     - Body <p> 16px Noto / lh 26 / ls 2px / color #0a0a0a / left-aligned,
       margin 0 0 26px, in a centered 576px column
     - "GO BACK TO HOME" button centered with 40px top/bottom margin
   ========================================================================== */
body.parent-thank-you-for-subscribing.page-template-page-blog-components h1.page-title,
body.parent-thank-you-for-subscribing.page-template-page-blog-components #theme-page-title h1 {
  font-family: var(--fontPrimary);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.2;
  padding-block: 0;
  text-transform: uppercase;
}

body.parent-thank-you-for-subscribing #theme-page-title {
  border-bottom: 1px solid #e5e5e5;
}

body.parent-thank-you-for-subscribing #theme-bread {
  display: none;
}

/* Hide the broken "Shop the Look" gallery widget - it ships with the
   blog-components template but the page has no actual look configured,
   so it renders as a "Gallery Image" alt-text placeholder on staging. */
body.parent-thank-you-for-subscribing .blog-components-wrapper .ca-section:has(.ca-widget--shoplook-23),
body.parent-thank-you-for-subscribing .blog-components-wrapper .ca-widget--shoplook-23 {
  display: none;
}

/* Body block - 576px centered column to match live. */
body.parent-thank-you-for-subscribing .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-subscribing .blog-components-wrapper .para__center,
body.parent-thank-you-for-subscribing .blog-components-wrapper .para_container {
  max-width: 576px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Drop the 96px top margin on the first body section so the first
   paragraph sits closer to the title - the title already has 40px
   bottom padding from #theme-page-title which is enough breathing room. */
body.parent-thank-you-for-subscribing.page-template-page-blog-components .blog-components-wrapper .ca-section--top + .ca-section--top,
body.parent-thank-you-for-subscribing .blog-components-wrapper .ca-section--top {
  margin-top: 0;
}

/* Body paragraphs - 16px Noto, lh 26, ls 2px, color #0a0a0a, left-aligned,
   26px between paragraphs (live spec). */
body.parent-thank-you-for-subscribing.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph,
body.parent-thank-you-for-subscribing.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph p,
body.parent-thank-you-for-subscribing.page-template-page-blog-components .blog-components-wrapper .paragraph p,
body.parent-thank-you-for-subscribing.page-template-page-blog-components .blog-components-wrapper .paragraph p:last-child {
  font-size: 16px !important;
  line-height: 26px !important;
  letter-spacing: 2px !important;
  color: #0a0a0a;
  text-align: left;
  margin: 0 0 26px !important;
}

/* Last paragraph: drop the 26px so the trailing space is just from the
   button wrapper's 40px top margin. */
body.parent-thank-you-for-subscribing.page-template-page-blog-components .blog-components-wrapper .main-text-component.paragraph p:last-child,
body.parent-thank-you-for-subscribing.page-template-page-blog-components .blog-components-wrapper .paragraph p:last-child {
  margin-bottom: 0 !important;
}

/* GO BACK TO HOME button - centered (already overridden in earlier rules,
   reinforce here). */
body.parent-thank-you-for-subscribing .blog-components-wrapper .blog-redirect-button-wrapper {
  text-align: center;
  margin: 40px 0;
}

@media (max-width: 576px) {
  body.parent-thank-you-for-subscribing.page-template-page-blog-components h1.page-title,
  body.parent-thank-you-for-subscribing.page-template-page-blog-components #theme-page-title h1 {
    font-size: 24px;
  }
  body.parent-thank-you-for-subscribing .page-header {
    margin-top: 0;
    padding-top: 0;
  }
  body.parent-thank-you-for-subscribing .blog-components-wrapper {
    padding: 0 24px 20px;
  }
}
/* update.css lines 4410-4414 */
@media (max-width: 576px) {
  body.parent-thank-you-for-subscribing.page-template-page-blog-components h1.page-title, body.parent-thank-you-for-subscribing.page-template-page-blog-components #theme-page-title h1 {
    font-size: 24px;
  }
}
/* update.css lines 4550-4554 */
@media (max-width: 576px) {
  body:not(#ca-update-css-priority).parent-thank-you-for-subscribing .page-header {
    padding-top: 0;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 3077-3151 */
/* ==========================================================================
   /tokusho/ - page-id 2052863. Production uses ProximaNova 34px for the
   page title, a near-full-width content rail with the label/value rows
   left-aligned, and underlined hyperlinks for "???????" and
   "??-??????" pointing to /shipping-info/ and /returns-exchanges/.
   ========================================================================== */
body.parent-tokusho h1.page-title,
body.parent-tokusho #theme-page-title h1,
body.page-id-2052863 h1.page-title {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: none;
}

body.parent-tokusho .page-header,
body.page-id-2052863 .page-header,
body.parent-tokusho .page-header.phd-layout-1 {
  border-bottom: 1px solid #e5e5e5;
}

body.parent-tokusho #theme-bread,
body.page-id-2052863 #theme-bread {
  padding: 0;
  margin: 0;
  min-height: 0;
}

/* Content rail: nearly full width with a small left/right gutter and
   left-aligned label/value rows. */
body.parent-tokusho .blog-components-wrapper,
body.page-id-2052863 .blog-components-wrapper,
body.parent-tokusho .tokutable,
body.parent-tokusho .tokutable-section,
body.page-id-2052863 .tokutable,
body.page-id-2052863 .tokutable-section {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  body.parent-tokusho .blog-components-wrapper,
  body.page-id-2052863 .blog-components-wrapper,
  body.parent-tokusho .tokutable,
  body.parent-tokusho .tokutable-section,
  body.page-id-2052863 .tokutable,
  body.page-id-2052863 .tokutable-section {
    max-width: 1342px;
    width: calc(100% - 98px);
  }
}
body.parent-tokusho .tokutable-row,
body.page-id-2052863 .tokutable-row {
  text-align: left;
}

body.parent-tokusho .tokutable-label,
body.parent-tokusho .tokutable-value,
body.page-id-2052863 .tokutable-label,
body.page-id-2052863 .tokutable-value {
  text-align: left;
}

/* Hyperlinks inside the tokutable rows - underlined like production. */
body.parent-tokusho .tokutable-value a,
body.parent-tokusho .tokutable-value a.underline,
body.page-id-2052863 .tokutable-value a {
  color: inherit;
  text-decoration: underline;
}

body.parent-tokusho .tokutable-value a:hover,
body.page-id-2052863 .tokutable-value a:hover {
  text-decoration: none;
}

/* update.css lines 4575-4583 */
body:not(#ca-update-css-priority).parent-tokusho .blog-components-wrapper, body:not(#ca-update-css-priority).page-id-2052863 .blog-components-wrapper, body:not(#ca-update-css-priority).parent-tokusho .tokutable, body:not(#ca-update-css-priority).parent-tokusho .tokutable-section, body:not(#ca-update-css-priority).page-id-2052863 .tokutable, body:not(#ca-update-css-priority).page-id-2052863 .tokutable-section {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  body:not(#ca-update-css-priority).parent-tokusho .blog-components-wrapper, body:not(#ca-update-css-priority).page-id-2052863 .blog-components-wrapper, body:not(#ca-update-css-priority).parent-tokusho .tokutable, body:not(#ca-update-css-priority).parent-tokusho .tokutable-section, body:not(#ca-update-css-priority).page-id-2052863 .tokutable, body:not(#ca-update-css-priority).page-id-2052863 .tokutable-section {
    max-width: 1342px;
  }
}
@media (max-width: 767px) {
  body.parent-tokusho #theme-page-title,
  body.parent-tokusho .blog-components-wrapper,
  body.page-id-2052863 #theme-page-title,
  body.page-id-2052863 .blog-components-wrapper {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  body:not(#ca-update-css-priority).parent-tokusho .blog-components-wrapper,
  body:not(#ca-update-css-priority).page-id-2052863 .blog-components-wrapper,
  body:not(#ca-update-css-priority).parent-tokusho .tokutable,
  body:not(#ca-update-css-priority).parent-tokusho .tokutable-section,
  body:not(#ca-update-css-priority).page-id-2052863 .tokutable,
  body:not(#ca-update-css-priority).page-id-2052863 .tokutable-section {
    padding-left: 0;
    padding-right: 0;
  }
  body:not(#ca-update-css-priority).parent-tokusho .blog-components-wrapper,
  body:not(#ca-update-css-priority).page-id-2052863 .blog-components-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* Page-specific converted-page styles. */
/* Only page-specific layout/override rules live here; shared modules are loaded separately. */
/* update.css lines 1279-1351 */
/* /zoom-instruction/ (page-id 2052938) - uppercase the page title (rendered
   as h2 via func-theme-display.php), 50px L/R page padding, and place the
   intro paragraph in a centered narrow column with text-align: left inside
   (margin: auto). */
body.page-id-2052938 h2.page-title,
body.page-id-2052938 #theme-page-title h2 {
  text-transform: uppercase;
}

body.page-id-2052938 .blog-components-wrapper {
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

/* /zoom-instruction/ - shrink the carousel rail so each of the 3 images
   takes ~20% of the viewport (instead of ~33%), giving the layout the
   narrower phone-screenshots feel from the production reference. */
/* body.page-id-2052938 .blog-components-wrapper .gallery-carousel {
	width: 80% ;
	max-width: 80% ;
	margin-left: auto ;
	margin-right: auto ;
}
@media (max-width: 991px) {
	body.page-id-2052938 .blog-components-wrapper .gallery-carousel {
		width: 80% ;
		max-width: 80% ;
	}
}
@media (max-width: 639px) {
	body.page-id-2052938 .blog-components-wrapper .gallery-carousel {
		width: 90% ;
		max-width: 90% ;
	}
} */
/* /zoom-instruction/ - center each image within its carousel slide so the
   row of phone-screenshots reads as horizontally centered. */
body.page-id-2052938 .blog-components-wrapper .gallery-carousel-slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

body.page-id-2052938 .blog-components-wrapper .gallery-carousel-slide .grid {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

body.page-id-2052938 .blog-components-wrapper .gallery-carousel-slide .col_thum {
  display: flex;
  justify-content: center;
}

body.page-id-2052938 .blog-components-wrapper .gallery-carousel-slide .col_thum img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* body.page-id-2052938 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052938 .blog-components-wrapper .para__center,
body.page-id-2052938 .blog-components-wrapper .para_container {
	max-width: 620px ;
	width: 100% ;
	margin-left: auto ;
	margin-right: auto ;
} */
/* body.page-id-2052938 .blog-components-wrapper .main-text-component.paragraph,
body.page-id-2052938 .blog-components-wrapper .main-text-component.paragraph p,
body.page-id-2052938 .blog-components-wrapper .para__center,
body.page-id-2052938 .blog-components-wrapper .para_container {
	text-align: left ;
} */
/* update.css lines 1866-1942 */
/* /zoom-instruction/ */
body.parent-zoom-instruction h2.page-title,
body.parent-zoom-instruction #theme-page-title h2 {
  text-transform: uppercase;
}

body.parent-zoom-instruction .blog-components-wrapper {
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

/* body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel {
	width: 80% ;
	max-width: 80% ;
	margin-left: auto ;
	margin-right: auto ;
}
@media (max-width: 991px) {
	body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel {
		width: 80% ;
		max-width: 80% ;
	}
}
@media (max-width: 639px) {
	body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel {
		width: 90% ;
		max-width: 90% ;
	}
} */
.gallery-carousel .gallery-carousel-wrapper .gallery-carousel-track .gallery-carousel-slide .col_desc p {
  padding: 0;
}

@media only screen and (min-width: 640px) {
  .parent-zoom-instruction .ca-tabs-section .ca-tabs {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
  }
}
.gallery-carousel .gallery-carousel-wrapper .gallery-carousel-track .gallery-carousel-slide .col_desc p {
  padding: 0;
}

body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel-slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel-slide .grid {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel-slide .col_thum {
  display: flex;
  justify-content: center;
}

body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel-slide .col_thum img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* body.parent-zoom-instruction .blog-components-wrapper .main-text-component.paragraph,
body.parent-zoom-instruction .blog-components-wrapper .para__center,
body.parent-zoom-instruction .blog-components-wrapper .para_container {
	max-width: 620px ;
	width: 100% ;
	margin-left: auto ;
	margin-right: auto ;
}
body.parent-zoom-instruction .blog-components-wrapper .main-text-component.paragraph,
body.parent-zoom-instruction .blog-components-wrapper .main-text-component.paragraph p,
body.parent-zoom-instruction .blog-components-wrapper .para__center,
body.parent-zoom-instruction .blog-components-wrapper .para_container {
	text-align: left ;
} */
/* update.css lines 2737-2850 */
/* ==========================================================================
   /zoom-instruction/ - block-by-block typography vs production.
   ========================================================================== */
body.parent-zoom-instruction h1.page-title,
body.parent-zoom-instruction #theme-page-title h1 {
  font-family: "ProximaNovaRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

body.parent-zoom-instruction .page-header,
body.parent-zoom-instruction .page-header.phd-layout-1 {
  border-bottom: 1px solid #e5e5e5;
}

body.parent-zoom-instruction #theme-bread {
  padding: 0;
  margin: 0;
  min-height: 0;
}

/* Mobile carousel - show one slide at a time edge-to-edge with no
   L/R gutter. Use both .parent-zoom-instruction AND .page-id-2052938
   selectors so we beat the older page-id rule that constrained the
   wrapper to 290px / 80% carousel width. */
@media (max-width: 767px) {
  html body.parent-zoom-instruction .blog-components-wrapper,
  html body.page-id-2052938 .blog-components-wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  html body.parent-zoom-instruction .blog-components-wrapper .blog-carousel-section,
  html body.page-id-2052938 .blog-components-wrapper .blog-carousel-section,
  html body.parent-zoom-instruction .blog-components-wrapper .blog-carousel-container,
  html body.page-id-2052938 .blog-components-wrapper .blog-carousel-container,
  html body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel,
  html body.page-id-2052938 .blog-components-wrapper .gallery-carousel,
  html body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel-wrapper,
  html body.page-id-2052938 .blog-components-wrapper .gallery-carousel-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
  }
  html body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel-slide,
  html body.page-id-2052938 .blog-components-wrapper .gallery-carousel-slide {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    display: block;
  }
  html body.parent-zoom-instruction .blog-components-wrapper .gallery-carousel-slide .grid,
  html body.page-id-2052938 .blog-components-wrapper .gallery-carousel-slide .grid {
    padding: 0 16px;
    box-sizing: border-box;
  }
}
/* Page subtitle ("ZOOM?????????") - production uses Noto regular
   at 16px with no extra tracking. Local was inheriting the 2.4px ls
   from /guide-tbyb/'s subtitle override. Use a higher-specificity
   chained body selector so we beat the page-template-page-blog-components
   rule that also targets .page-subtitle. */
html body.parent-zoom-instruction p.page-subtitle,
html body.parent-zoom-instruction .page-subtitle {
  letter-spacing: normal;
}

/* Lead paragraph ("?ZOOM?????...") - direct child of the wrapper,
   above the tabs. Production renders this larger (16px / 2px tracking)
   left-aligned. */
html body.parent-zoom-instruction .blog-components-wrapper > .ca-paragraph .main-text-component.paragraph {
  line-height: 1.625;
  letter-spacing: 2px;
  text-align: left;
}

html body.parent-zoom-instruction .blog-components-wrapper > .ca-paragraph .main-text-component.paragraph p {
  text-align: left;
}

@media (min-width: 1024px) {
  html body.parent-zoom-instruction .blog-components-wrapper > .ca-paragraph .main-text-component.paragraph {
    font-size: 16px;
  }
}
/* Bra-Fitting-style tabs are reused here. Production's ZOOM tabs use
   Noto Sans JP at 14px (active = fw 600, inactive = fw 400 in gray),
   not the Courier 14.4 / fw 400 the global tabs CSS applies. */
body.parent-zoom-instruction .blog-components-wrapper .ca-tabs__title,
body.parent-zoom-instruction .blog-components-wrapper .ca-tabs__title--desktop,
body.parent-zoom-instruction .blog-components-wrapper .ca-tabs__title--mobile {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
}

body.parent-zoom-instruction .blog-components-wrapper .ca-tabs__title.is-active {
  font-weight: 600;
}

/* "*1 ???????????????????????" footer note -
   bump it from the 9.6px tab-footnote default to a readable 14px,
   right-aligned above the App Store / Google Play badges. Use the
   same .main-text-component.paragraph chain so we beat the page-id
   rule that pulled it left/tiny. */
/* html body.parent-zoom-instruction .blog-components-wrapper .main-text-component.paragraph p:only-child,
html body.parent-zoom-instruction .blog-components-wrapper .main-text-component.paragraph p:last-child {
	font-size: 14px ;
	font-weight: 400 ;
	line-height: 1.6 ;
	letter-spacing: normal ;
	text-align: right ;
} */
/* Carousel item captions stay at the body's 12.8px / fw 300 / 0.05em
   tracking - same as the Bra Fitting captions. (Already correct.) */
/* update.css lines 4569-4574 */
@media (max-width: 767px) {
  html body:not(#ca-update-css-priority).parent-zoom-instruction .blog-components-wrapper .gallery-carousel-slide, html body:not(#ca-update-css-priority).page-id-2052938 .blog-components-wrapper .gallery-carousel-slide {
    flex: 0 0 100%;
    padding: 0;
  }
}