.yoko-size-guide { --size-accent: var(--yoko-primary); color: var(--yoko-text); font-size: var(--yoko-copy-desktop); line-height: 1.65; }
.yoko-size-guide__shell { width: 100%; padding-inline: var(--yoko-page-gutter); margin-inline: auto; }
.yoko-size-hero { overflow: hidden; background: linear-gradient(90deg,#fff 0%,#fbf8ff 55%,#f4edfb 100%); border-bottom: 1px solid var(--yoko-border); }
.yoko-size-hero__inner { min-height: 420px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); align-items: center; gap: clamp(32px,5vw,88px); }
.yoko-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 46px; color: var(--yoko-muted); font-size: 14px; }
.yoko-breadcrumb a:hover { color: var(--yoko-primary); }
.yoko-size-hero h1 { margin: 0; font-size: clamp(46px,4.4vw,72px); line-height: 1.06; }
.yoko-size-hero__copy > p { max-width: 720px; margin: 22px 0 0; font-size: 18px; color: var(--yoko-muted); }
.yoko-size-hero__visual { position: relative; align-self: stretch; display: grid; place-items: end center; min-height: 420px; }
.yoko-size-hero__visual::before { content:""; position:absolute; width: 74%; aspect-ratio:1; border-radius:50%; bottom:-28%; left:15%; background: radial-gradient(circle at center,#e3d4f3 0 52%,#f1eafa 53% 68%,transparent 69%); }
.yoko-size-hero__visual img { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 420px; object-fit: contain; object-position: bottom center; }
.yoko-size-hero__mobile { display:none; }
.yoko-size-hero__fallback { position:relative; z-index:1; width:220px; height:220px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--yoko-primary); box-shadow:var(--yoko-shadow-md); }
.yoko-size-hero__fallback .yoko-icon { width:110px; height:110px; }

.yoko-size-main { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(320px,.72fr); gap: clamp(28px,4vw,64px); padding-top:64px; }
.yoko-size-subheading { display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; }
.yoko-size-subheading__icon { width:40px; height:40px; display:grid; place-items:center; color:var(--yoko-primary); }
.yoko-size-subheading__icon .yoko-icon { width:32px; height:32px; }
.yoko-size-subheading h2 { margin:0; font-size:24px; text-transform:uppercase; letter-spacing:.01em; }
.yoko-size-subheading p { margin:4px 0 0; color:var(--yoko-muted); font-size:15px; }
.yoko-size-table-wrap { overflow:auto; border:1px solid var(--yoko-border); border-radius:var(--yoko-radius-md); background:#fff; box-shadow:var(--yoko-shadow-sm); }
.yoko-size-table { width:100%; min-width:760px; border-collapse:separate; border-spacing:0; }
.yoko-size-table th,.yoko-size-table td { padding:19px 16px; border-right:1px solid var(--yoko-border); border-bottom:1px solid var(--yoko-border); text-align:center; vertical-align:middle; font-size:15px; }
.yoko-size-table tr:last-child > * { border-bottom:0; }
.yoko-size-table tr > *:last-child { border-right:0; }
.yoko-size-table thead th { background:linear-gradient(180deg,#f7f1fb,#f2e9f8); color:var(--yoko-heading); font-weight:700; text-transform:uppercase; font-size:13px; }
.yoko-size-table tbody th { color:var(--yoko-primary); font-size:24px; font-weight:600; white-space:nowrap; }
.yoko-size-table__suggestion { display:flex; align-items:center; justify-content:center; gap:10px; text-align:left; }
.yoko-size-table__suggestion .yoko-icon { width:34px; height:34px; flex:0 0 auto; color:var(--yoko-muted); }
.yoko-size-table__suggestion span { max-width:190px; font-size:13px; line-height:1.45; }
.yoko-size-table-note { margin:14px 0 0; color:var(--yoko-muted); font-size:13px; }
.yoko-size-measurements__list { display:grid; gap:18px; }
.yoko-size-measure-card { display:grid; grid-template-columns:112px 1fr; align-items:center; gap:20px; min-height:138px; padding:16px; border:1px solid var(--yoko-border); border-radius:var(--yoko-radius-md); background:#fff; box-shadow:var(--yoko-shadow-sm); }
.yoko-size-measure-card__image { height:104px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:var(--yoko-surface); }
.yoko-size-measure-card__image img { width:100%; height:100%; object-fit:contain; }
.yoko-size-measure-card__image .yoko-icon { width:58px; height:58px; color:var(--yoko-primary); }
.yoko-size-measure-card h3 { margin:0 0 8px; font-size:20px; }
.yoko-size-measure-card p { margin:0; color:var(--yoko-muted); font-size:15px; line-height:1.55; }

.yoko-size-guide-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding-top:64px; }
.yoko-size-guide-card { position:relative; min-height:350px; padding:28px 28px 130px; overflow:hidden; border:1px solid var(--yoko-border); border-radius:var(--yoko-radius-md); background:linear-gradient(145deg,#fff,#fbf7fd); box-shadow:var(--yoko-shadow-sm); }
.yoko-size-guide-card header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.yoko-size-guide-card header > span { width:38px; height:38px; color:var(--yoko-primary); }
.yoko-size-guide-card header .yoko-icon { width:36px; height:36px; }
.yoko-size-guide-card h2 { margin:0; font-size:21px; text-transform:uppercase; }
.yoko-size-guide-card ul { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.yoko-size-guide-card li { position:relative; padding-left:24px; font-size:15px; }
.yoko-size-guide-card li::before { content:"✓"; position:absolute; left:0; color:var(--yoko-primary); font-weight:700; }
.yoko-size-guide-card__image { position:absolute; right:24px; bottom:12px; width:145px; height:112px; opacity:.82; }
.yoko-size-guide-card__image img { width:100%; height:100%; object-fit:contain; }

.yoko-size-faq { padding-top:58px; }
.yoko-size-faq > header h2 { margin:0 0 22px; font-size:24px; text-transform:uppercase; }
.yoko-size-faq__grid { columns:2; column-gap:24px; }
.yoko-size-faq details { break-inside:avoid; margin:0 0 12px; border:1px solid var(--yoko-border); border-radius:12px; background:#fff; overflow:hidden; }
.yoko-size-faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; cursor:pointer; font-weight:600; list-style:none; }
.yoko-size-faq summary::-webkit-details-marker { display:none; }
.yoko-size-faq summary b { color:var(--yoko-primary); font-size:22px; transition:transform var(--yoko-transition); }
.yoko-size-faq details[open] summary b { transform:rotate(45deg); }
.yoko-size-faq details > div { padding:0 20px 18px; color:var(--yoko-muted); font-size:15px; }
.yoko-size-faq details > div p { margin:0; }

.yoko-size-support { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,2.2fr); gap:24px; align-items:center; margin-top:58px; padding-top:22px!important; padding-bottom:22px!important; border:1px solid #e0d0ec; border-radius:var(--yoko-radius-md); background:linear-gradient(100deg,#f1e5fa,#faf7fd); }
.yoko-size-support__copy h2 { margin:0 0 8px; color:var(--yoko-primary); font-size:24px; text-transform:uppercase; }
.yoko-size-support__copy p { margin:0; color:var(--yoko-muted); font-size:15px; }
.yoko-size-support__actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.yoko-size-support__actions .yoko-button { width:100%; min-height:86px; justify-content:flex-start; text-align:left; padding:18px 22px; background:#fff; }
.yoko-size-support__actions .yoko-button--primary { background:linear-gradient(135deg,var(--yoko-primary),var(--yoko-primary-hover)); color:#fff!important; }
.yoko-size-service { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:18px; margin-bottom:54px; padding-top:18px!important; padding-bottom:18px!important; border:1px solid var(--yoko-border); border-radius:var(--yoko-radius-md); background:#fff; }
.yoko-size-service article { display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 18px; border-right:1px solid var(--yoko-border); }
.yoko-size-service article:last-child { border-right:0; }
.yoko-size-service .yoko-icon { width:34px; height:34px; color:var(--yoko-primary); }
.yoko-size-service strong,.yoko-size-service span { display:block; }
.yoko-size-service strong { font-size:15px; text-transform:uppercase; }
.yoko-size-service span { margin-top:3px; color:var(--yoko-muted); font-size:13px; }

@media (max-width: 1023px) {
	.yoko-size-hero__inner { grid-template-columns:1fr 420px; }
	.yoko-size-main { grid-template-columns:1fr; }
	.yoko-size-measurements__list { grid-template-columns:repeat(3,minmax(0,1fr)); }
	.yoko-size-measure-card { grid-template-columns:1fr; text-align:center; }
	.yoko-size-guide-cards { grid-template-columns:1fr; }
	.yoko-size-guide-card { min-height:260px; padding-bottom:28px; padding-right:180px; }
	.yoko-size-guide-card__image { width:150px; height:150px; top:50%; transform:translateY(-50%); bottom:auto; }
	.yoko-size-support { grid-template-columns:1fr; }
}

@media (max-width: 767px) {
	.yoko-size-guide { font-size:var(--yoko-copy-mobile); }
	.yoko-size-guide__shell { padding-inline:12px; }
	.yoko-size-hero__inner { min-height:0; grid-template-columns:1fr; gap:20px; padding-top:24px; }
	.yoko-breadcrumb { margin-bottom:26px; font-size:13px; }
	.yoko-size-hero h1 { font-size:clamp(36px,11vw,48px); }
	.yoko-size-hero__copy > p { margin-top:14px; font-size:16px; }
	.yoko-size-hero__visual { min-height:260px; }
	.yoko-size-hero__visual img { max-height:300px; }
	.yoko-size-hero__desktop { display:none; }
	.yoko-size-hero__mobile { display:block; }
	.yoko-size-main { padding-top:38px; gap:40px; }
	.yoko-size-subheading { margin-bottom:18px; }
	.yoko-size-subheading h2 { font-size:20px; }
	.yoko-size-table-wrap { margin-inline:-12px; border-radius:0; }
	.yoko-size-table th,.yoko-size-table td { padding:15px 12px; }
	.yoko-size-measurements__list { grid-template-columns:1fr; }
	.yoko-size-measure-card { grid-template-columns:96px 1fr; text-align:left; }
	.yoko-size-guide-cards { gap:14px; padding-top:38px; }
	.yoko-size-guide-card { min-height:0; padding:22px; }
	.yoko-size-guide-card__image { position:static; width:120px; height:90px; margin:18px 0 0 auto; transform:none; }
	.yoko-size-guide-card h2 { font-size:18px; }
	.yoko-size-guide-card li { font-size:16px; }
	.yoko-size-faq { padding-top:38px; }
	.yoko-size-faq > header h2 { font-size:20px; }
	.yoko-size-faq__grid { columns:1; }
	.yoko-size-faq summary { padding:16px; }
	.yoko-size-faq details > div { padding:0 16px 16px; font-size:16px; }
	.yoko-size-support { margin-top:38px; padding:20px 16px!important; }
	.yoko-size-support__copy h2 { font-size:21px; }
	.yoko-size-support__copy p { font-size:16px; }
	.yoko-size-support__actions { grid-template-columns:1fr; }
	.yoko-size-support__actions .yoko-button { min-height:58px; justify-content:center; text-align:center; }
	.yoko-size-service { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:34px; padding:0!important; }
	.yoko-size-service article { justify-content:flex-start; min-height:94px; padding:14px; border-right:1px solid var(--yoko-border); border-bottom:1px solid var(--yoko-border); }
	.yoko-size-service article:nth-child(2n) { border-right:0; }
	.yoko-size-service article:nth-last-child(-n+2) { border-bottom:0; }
}


/* v3.3 Frontend Cleanup */
.yoko-size-guide{color:var(--yoko-text);font-size:var(--yoko-copy-desktop)}
.yoko-size-guide__shell{width:min(calc(100% - (var(--yoko-page-gutter)*2)),var(--yoko-content-max));max-width:var(--yoko-content-max);padding-inline:0}
.yoko-size-hero{background:linear-gradient(135deg,#fbf8fd,#f1e8f8)}
.yoko-size-table-wrap{overflow-x:auto;border:1px solid var(--yoko-line);border-radius:var(--yoko-radius-md);box-shadow:var(--yoko-shadow-sm)}
.yoko-size-table thead{background:var(--yoko-primary-soft-2)}
.yoko-size-table th{color:var(--yoko-heading);font-weight:700}
.yoko-size-measure-card,.yoko-size-guide-card{border:1px solid var(--yoko-line);box-shadow:var(--yoko-shadow-sm)}
@media(max-width:767px){.yoko-size-guide{font-size:16px}.yoko-size-hero__grid{grid-template-columns:1fr}.yoko-size-hero__media{order:2}.yoko-size-layout,.yoko-size-guides{grid-template-columns:1fr}.yoko-size-table{min-width:720px}.yoko-size-table th,.yoko-size-table td{font-size:14px;padding:12px 10px}}