/* Product and collection details share the quiet YOSE controls and spacing. */
.cat-product-layout{gap:clamp(28px,5vw,64px)}
.cat-detail h1{margin:0 0 14px;line-height:1.3}
.cat-detail h1 .cat-title-width{margin-top:3px;font-size:16px;font-weight:400;line-height:1.5;color:#75756e}
.cat-intro{margin:0 0 22px;font-size:14px;line-height:1.6;color:#333}
.cat-model-story{margin:0 0 22px}
.cat-model-facts{display:block;list-style:none;padding:0;margin:0;font:inherit;color:inherit;line-height:1.6}
.cat-model-facts li{margin:0;padding:0}

/* Each ring has one compact column, so the pair is easy to compare. */
#cat-config.cat-config-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:start}
#cat-config>.cat-price,#cat-config>.cat-price-note,#cat-config>.cat-primary,#cat-config>.cat-share{grid-column:1/-1}
#cat-config .cat-ring{min-width:0;margin:0;padding:10px 0 0;border:0;border-top:1px solid var(--yose-line,#e5e5df)}
#cat-config .cat-ring legend{max-width:100%;padding:0 9px 0 0;font-size:14px;font-weight:600;line-height:1.45}
#cat-config .cat-ring legend small{display:block;font-size:11px;font-weight:400;line-height:1.45;color:#777;margin:2px 0 0}
#cat-config .cat-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#cat-config.cat-config-pair .cat-fields{grid-template-columns:minmax(0,1fr)}
#cat-config .cat-fields label,#cat-config .cat-fixed-field{min-width:0;font-size:11px;font-weight:400;line-height:1.5;color:#72756d}
#cat-config .cat-fields select{width:100%;min-width:0;min-height:44px;margin-top:5px;padding:7px 27px 7px 10px;border:1px solid var(--yose-line,#e5e5df);border-radius:var(--yose-radius-control,8px);font-size:13px;font-weight:400;line-height:1.4;color:#62685f;background-color:#fdfefd;transition:border-color var(--yose-duration,180ms) var(--yose-ease,ease),box-shadow var(--yose-duration,180ms) var(--yose-ease,ease)}
#cat-config .cat-fields select:hover{border-color:#b7c3bb}
#cat-config .cat-fields select:focus-visible{outline:2px solid #1a6456;outline-offset:2px}
#cat-config .cat-fixed-value{display:flex;align-items:center;min-height:44px;margin-top:5px;padding:9px 2px;border-bottom:1px solid var(--yose-line,#e5e5df);font-size:13px;line-height:1.4;color:#62685f;font-weight:400}
#cat-config input[type=hidden]{display:none}
#cat-config .cat-price{margin:18px 0 10px;font-size:18px;line-height:1.5;color:var(--yose-muted,#70746f)}
#cat-config .cat-price-note{margin:0 0 10px;font-size:11px}
#cat-config .cat-price-note:empty{display:none}
#cat-config .cat-primary{min-height:46px;padding:12px 18px;border-radius:var(--yose-radius-control,8px)}
#cat-config .cat-share{justify-self:center;min-height:44px;padding:10px 4px;margin-top:3px;font-size:12px;line-height:1.5;color:#4c6358}
.cat-copy:empty{display:none}
.cat-description{margin-top:40px;padding-top:24px;border-top:1px solid var(--yose-line,#e5e5df)}
.cat-product .cat-description-body>div:first-child{margin-top:0}
.cat-thumb{border-radius:var(--yose-radius-media,8px);overflow:hidden;transition:border-color var(--yose-duration,180ms) var(--yose-ease,ease)}
.cat-thumb.is-active{border-color:#2a6252}
.cat-hero,.cat-hero-button,.cat-mobile-photo,.cat-mobile-video{border-radius:var(--yose-radius-media,8px);overflow:hidden}
.cat-hero-button:focus-visible,.cat-mobile-photo:focus-visible,.cat-thumb:focus-visible{outline:2px solid #1a6456;outline-offset:3px}

/* Native pinch and pan remain available. Only explicit controls change media. */
.cat-lightbox-media,.cat-lightbox-media img,.cat-lightbox-media video{touch-action:auto}
.cat-lightbox .cat-lightbox-prev,.cat-lightbox .cat-lightbox-next{display:grid;place-items:center;width:44px;height:44px;min-width:44px;flex-basis:44px;padding:0;line-height:1;border-radius:50%;background:#171e1abb;border:1px solid #ffffff45;box-sizing:border-box;transition:background-color var(--yose-duration,180ms) var(--yose-ease,ease),border-color var(--yose-duration,180ms) var(--yose-ease,ease)}
.cat-lightbox-prev img,.cat-lightbox-next img{display:block;flex:none;width:18px;height:18px;margin:0;filter:brightness(0) invert(1);pointer-events:none}
.cat-lightbox .cat-lightbox-prev:hover,.cat-lightbox .cat-lightbox-next:hover{background:#29382ed9;border-color:#ffffff80}
.cat-lightbox-close{display:grid;place-items:center;min-width:44px;width:44px;height:44px;flex-basis:44px;padding:0;line-height:1}
.cat-lightbox button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cat-lightbox[open]{animation:cat-lightbox-enter 160ms ease-out}
.cat-lightbox-media>img{animation:cat-photo-enter 180ms ease-out}
@keyframes cat-lightbox-enter{from{opacity:0}to{opacity:1}}
@keyframes cat-photo-enter{from{opacity:.5}to{opacity:1}}

/* Four generous examples are visible without swiping or a carousel. */
.cat-product{padding-bottom:36px}
.cat-related{padding-top:32px;margin-top:24px;border-top:1px solid var(--yose-line,#e5e5df)}
.cat-related-head{margin:0 0 20px}
.cat-related-head h2{margin:0;font-size:22px;font-weight:400;line-height:1.35}
.cat-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px;list-style:none;padding:0;margin:0}
.cat-related-item{min-width:0;list-style:none;margin:0;padding:0}
.cat-related-item .cat-card{display:block;height:100%}
.cat-related .cat-card h3{font-weight:500;font-size:15px;line-height:1.45;margin:8px 0 0}
.cat-related .cat-card-image img{transition:none}
.cat-related .cat-card:hover img{transform:none}
.cat-related-action{text-align:center;margin-top:24px}
.cat-related-all{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 24px;border:1px solid var(--green,#003e36);border-radius:var(--yose-radius-control,8px);background:var(--green,#003e36);color:#fff;font-size:14px;line-height:1.5;text-decoration:none}
.cat-related-all:hover{background:#0b6055;border-color:#0b6055}
.cat-related-all:focus-visible{outline:2px solid #1a6456;outline-offset:3px}
.cat-card-meta{padding-top:10px}
.cat-card h3{overflow-wrap:normal;word-break:normal}

@media(max-width:800px){
  .cat-product-layout{gap:18px}

}
@media(max-width:600px){
  .cat-detail h1{font-size:23px;line-height:1.3;margin-bottom:12px}
  .cat-detail h1 .cat-title-width{font-size:15px;line-height:1.5}
  .cat-intro{font-size:14px;line-height:1.6;margin-bottom:22px}
  .cat-model-story{margin-bottom:22px}

  #cat-config.cat-config-pair{column-gap:12px}
  #cat-config .cat-ring{padding-top:9px}
  #cat-config .cat-ring legend{font-size:14px}
  #cat-config .cat-fields select{font-size:14px;padding:7px 25px 7px 10px}
  #cat-config .cat-fixed-value{font-size:14px}
  #cat-config .cat-price{margin-top:16px;font-size:17px}
  .cat-description{margin-top:28px;padding-top:20px}
  .cat-related{padding-top:26px;margin-top:24px}
  .cat-related-head{gap:10px;margin-bottom:14px}
  .cat-related-head h2{font-size:20px}
  .cat-related-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .cat-related .cat-card h3{font-size:16px}
  .cat-related-action{margin-top:22px}
  .cat-product{padding-bottom:28px}
  .cat-lightbox-stage{padding:64px 0 24px}
  .cat-lightbox-prev{left:8px}
  .cat-lightbox-next{right:8px}
  .cat-lightbox-thumbs button{border-radius:6px}
}
@media(prefers-reduced-motion:reduce){
  .cat-lightbox[open],.cat-lightbox-media>img{animation:none}
  .cat-card-image img,.cat-thumb,.cat-lightbox-prev,.cat-lightbox-next,#cat-config .cat-fields select{transition:none}
  .cat-card:hover img{transform:none}
}

.cat-card-image{border-radius:var(--yose-radius-media,8px)}

@media(min-width:601px) and (max-width:900px){.cat-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Safari avoids automatically zooming focused controls at this font size. */
@supports(-webkit-touch-callout:none){@media(max-width:600px){#cat-config .cat-fields select{font-size:16px}}}

@media(min-width:601px){.cat-lightbox-stage{padding-bottom:24px}}