.page-catalog{background:#f5f8f8}
.page-catalog .site-header{position:relative}
.page-catalog .demo-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:25px 4.5vw 30px;color:#fff;background:linear-gradient(105deg,#071e28,#10464b 88%);position:relative;overflow:hidden}
.page-catalog .demo-heading:after{content:"";position:absolute;inset:0 0 0 auto;width:38%;opacity:.16;background:url('/assets/detail.webp') center/cover;mask-image:linear-gradient(90deg,transparent,#000)}
.demo-heading>div,.demo-heading>a{position:relative;z-index:1}
.demo-kicker,.demo-overline{font:800 11px/1.4 Arial,sans-serif;letter-spacing:.13em;color:#079c9a}
.demo-heading .demo-kicker{color:#69dad4}
.demo-heading h1{font:600 clamp(38px,4.1vw,62px)/1.03 Oswald,'Arial Narrow',Impact,sans-serif;letter-spacing:-.025em;margin:12px 0 9px}
.demo-heading h1 em{font-style:normal;color:#59d7d2}
.demo-heading p{font-size:15px;line-height:1.45;margin:0;color:#d5e7e8}
.demo-heading>a{display:inline-flex;align-items:center;gap:24px;border:1px solid #9dbebf8c;background:#0a2b34af;color:#fff;padding:15px 18px;font-size:12px;font-weight:800;white-space:nowrap;border-radius:8px}
.demo-heading>a span{color:#54d4ce}
.demo-disclaimer{display:flex;gap:15px;align-items:center;padding:12px 4.5vw;background:#e4f4f3;color:#24474b;border-bottom:1px solid #c9e8e7;font-size:13px;line-height:1.4}
.demo-disclaimer strong{color:#007f7d;white-space:nowrap;font-size:13px}
.demo-catalog{padding:20px 4.5vw 65px}
.demo-searchbar{display:flex;align-items:stretch;justify-content:space-between;min-height:72px;background:#fff;border:1px solid #d9e5e5;border-radius:14px;box-shadow:0 8px 28px #0827300b;overflow:hidden}
.demo-search-field{display:flex;align-items:center;gap:15px;flex:1;padding:0 20px}
.demo-search-field>span{font-size:34px;line-height:1;color:#078d8a;transform:rotate(-15deg)}
.demo-search-field input{width:100%;height:68px;border:0;outline:0;font-size:17px;color:#08242d;background:transparent}
.demo-search-field input::placeholder{color:#839497}
.demo-search-field:focus-within{box-shadow:inset 0 0 0 2px #008f8d}
.demo-spec-link{border-left:1px solid #dae7e7;padding:16px 24px;display:flex;flex-direction:column;justify-content:center;font-size:12px;color:#5b7177;min-width:200px}
.demo-spec-link b{color:#007f7d;margin-top:4px;font-size:13px}
.demo-layout{display:grid;grid-template-columns:234px minmax(0,1fr);gap:18px;margin-top:18px;align-items:start}
.demo-sidebar{background:#fff;border:1px solid #dbe5e5;border-radius:14px;padding:19px 17px;box-shadow:0 7px 25px #08273009}
.demo-sidebar-title{font:600 20px Oswald,'Arial Narrow',Impact,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:6px;padding-bottom:12px;border-bottom:1px solid #e5eded}
.demo-sidebar-title button{font:700 12px Arial,sans-serif;border:0;background:none;color:#008b89;cursor:pointer}
.demo-sidebar fieldset{border:0;margin:0;padding:20px 0 17px;border-bottom:1px solid #e5eded;display:grid;gap:13px}
.demo-sidebar legend{font-size:13px;font-weight:800;color:#122d35;float:left;width:100%;padding:0 0 14px}
.demo-sidebar label{display:flex;align-items:center;gap:9px;font-size:14px;color:#354e54;cursor:pointer}
.demo-sidebar input[type=radio],.demo-sidebar input[type=checkbox]{accent-color:#008f8d;width:16px;height:16px;flex:none;margin:0}
.demo-sidebar select{width:100%;height:40px;border:1px solid #cfdcdd;border-radius:7px;color:#213840;background:#f8fbfb;font-size:14px;padding:0 8px}
.demo-sidebar .demo-check{padding:19px 0}
.demo-help{border-radius:10px;background:#0b3038;color:#fff;padding:17px;margin-top:3px}
.demo-help span{font:800 10px Arial,sans-serif;letter-spacing:.1em;color:#70d9d4}
.demo-help p{font:600 20px/1.1 Oswald,'Arial Narrow',Impact,sans-serif;text-transform:uppercase;margin:12px 0}
.demo-help a{font-size:12px;color:#8be3dd;font-weight:700}
.demo-results{min-width:0;background:#fff;border:1px solid #dbe5e5;border-radius:14px;overflow:hidden;box-shadow:0 7px 25px #08273009}
.demo-results-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 19px 14px}
.demo-results-head h2{margin:2px 0 0;font:600 29px/1 Oswald,'Arial Narrow',Impact,sans-serif}
.demo-results-head h2 small{font:700 14px Arial,sans-serif;color:#008d8a;margin-left:6px;vertical-align:middle}
.demo-view{display:flex;border:1px solid #d6e3e3;border-radius:8px;padding:3px;gap:2px;background:#f5f9f9}
.demo-view button{border:0;padding:9px 11px;font-size:12px;font-weight:700;background:transparent;color:#51666b;cursor:pointer;border-radius:6px;white-space:nowrap}
.demo-view button[aria-pressed=true]{color:#fff;background:#0a2b34}
.demo-table-head,.demo-row{display:grid;grid-template-columns:minmax(245px,2.45fr) minmax(75px,.72fr) minmax(96px,.85fr) minmax(108px,.95fr) minmax(128px,1.14fr);align-items:center;gap:8px}
.demo-table-head{background:#eef5f5;padding:11px 17px;color:#72888b;font:800 10px Arial,sans-serif;letter-spacing:.06em}
.demo-row{padding:11px 17px;min-height:84px;border-top:1px solid #e7eeee;transition:background .15s}
.demo-row:hover{background:#f8fcfc}
.demo-row[hidden],.demo-empty[hidden],.demo-tray[hidden]{display:none}
.demo-item{display:flex;align-items:center;gap:11px;min-width:0}
.demo-item-photo{width:49px;height:49px;flex:none;border-radius:8px;background:#e7edef url('/assets/detail.webp') center/cover}
.demo-item-photo.photo-sip{background-image:url('/assets/sip.webp')}
.demo-item-photo.photo-vvg{background-image:url('/assets/vvg.webp')}
.demo-item>div{min-width:0}
.demo-item-title{font-size:15px;line-height:1.25;font-weight:800;color:#092731;display:block}
.demo-item-title:hover{color:#008b89;text-decoration:underline}
.demo-item small{font-size:11px;color:#74878a;display:block;margin-top:5px;line-height:1.3}
.demo-code{font-size:12px;color:#5d767a;font-weight:700}
.demo-stock,.demo-price{display:flex;flex-direction:column;gap:4px;font-size:13px}
.demo-stock strong,.demo-price strong{font-size:13px;color:#087b78;line-height:1.2}
.demo-price strong{color:#0c2931;font-size:16px;white-space:nowrap}
.demo-stock strong.muted,.demo-price strong.muted{color:#677d80}
.demo-stock small,.demo-price small{color:#86989b;font-size:11px}
.demo-buy{display:flex;align-items:center;min-width:0;gap:4px}
.demo-buy input{width:59px;height:37px;border:1px solid #d0dfdf;border-radius:7px;text-align:center;color:#123640;background:#fff;font-size:14px}
.demo-buy>span{font-size:12px;color:#5e797d}
.demo-add{border:0;background:#008e8a;color:#fff;font-size:24px;line-height:1;width:36px;height:37px;border-radius:7px;margin-left:auto;cursor:pointer}
.demo-add:hover{background:#026c69}
.demo-empty{padding:28px 18px;color:#52696e;font-size:15px}
.demo-empty button{border:0;background:transparent;color:#007f7c;text-decoration:underline;cursor:pointer;font:inherit}
.demo-footnote{font-size:12px;color:#7c8d90;padding:16px 19px 19px;margin:0;border-top:1px solid #e7eeee;line-height:1.45}
.demo-table.is-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px 16px}
.demo-table.is-grid .demo-table-head{display:none}
.demo-table.is-grid .demo-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;border:1px solid #dce8e8;border-radius:11px;padding:15px;min-height:205px}
.demo-table.is-grid .demo-row[hidden]{display:none}
.demo-table.is-grid .demo-item{grid-column:1/-1}
.demo-table.is-grid .demo-code{grid-column:1/-1}
.demo-table.is-grid .demo-buy{grid-column:1/-1;border-top:1px solid #e7eeee;padding-top:8px}
.demo-table.is-grid .demo-add{width:95px}
.demo-tray{position:fixed;z-index:60;bottom:18px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 28px));background:#0b2932;color:#fff;box-shadow:0 16px 50px #00171f65;border:1px solid #2a5d63;border-radius:13px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.demo-tray-summary,.demo-tray-actions{display:flex;align-items:center;gap:12px}
.demo-tray-icon{display:grid;place-items:center;width:39px;height:39px;background:#14505a;border-radius:8px;font-size:25px;color:#7de8e1}
.demo-tray-summary strong{display:block;font:600 18px Oswald,'Arial Narrow',Impact,sans-serif}
.demo-tray-summary small{display:block;font-size:12px;color:#a4c6ca}
.demo-tray button,.demo-dialog button{cursor:pointer}
.demo-tray-actions button{border:0;background:transparent;color:#dceced;font-size:12px;font-weight:700;padding:12px}
.demo-tray-actions button.demo-tray-primary,.demo-dialog .demo-tray-primary{background:#32c9c0;color:#06272c;border-radius:7px;padding:13px 17px;font-weight:800}
.demo-dialog{width:min(540px,calc(100% - 24px));border:0;border-radius:14px;padding:23px;box-shadow:0 25px 80px #0007;color:#0a2c34}
.demo-dialog::backdrop{background:#051921b8}
.demo-dialog-head{display:flex;justify-content:space-between;align-items:flex-start}
.demo-dialog-head span{font-size:11px;font-weight:800;letter-spacing:.08em;color:#008f8d}
.demo-dialog-head h2{font:600 31px Oswald,'Arial Narrow',Impact,sans-serif;margin:4px 0 16px}
.demo-dialog-head>button{font-size:29px;border:0;background:#eaf2f2;border-radius:6px;width:36px;height:36px;color:#123840}
.demo-selected-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e2ebeb;padding:12px 0;font-size:14px}
.demo-selected-row strong{display:block}
.demo-selected-row small{color:#667c80}
.demo-selected-row button{border:0;color:#ad4d4d;background:transparent;font-size:12px}
.demo-dialog p{font-size:12px;color:#647d81;line-height:1.5;margin:15px 0}
.demo-dialog>.demo-tray-primary{border:0}
.demo-breadcrumbs{padding:18px 5vw;font-size:12px;color:#708589;background:#f5f8f8}
.demo-breadcrumbs a{color:#087f7c}
.demo-detail{display:grid;grid-template-columns:42% 58%;background:#fff;min-height:520px}
.demo-detail-photo{background:#e4ebec center/cover;position:relative;min-height:430px}
.demo-detail-photo span{position:absolute;left:5vw;bottom:24px;color:#fff;background:#0a2730d9;padding:10px 14px;font-size:12px;font-weight:800;border-radius:7px}
.demo-detail-main{padding:45px 6vw 45px 5vw}
.demo-detail-main h1{font:600 clamp(38px,4.4vw,68px)/1.08 Oswald,'Arial Narrow',Impact,sans-serif;margin:12px 0 19px;color:#071e28}
.demo-detail-main>p{font-size:16px;line-height:1.6;color:#426067;max-width:600px}
.demo-detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid #dce8e8;border-bottom:1px solid #dce8e8;margin-top:28px;padding:21px 0}
.demo-detail-stats>div{display:flex;flex-direction:column;gap:9px}
.demo-detail-stats small{font-size:11px;font-weight:800;letter-spacing:.08em;color:#71888b}
.demo-detail-stats strong{font-size:20px;color:#087d7a}
.demo-detail-stats strong small{font-size:11px;font-weight:400;letter-spacing:0;color:#72898c}
.demo-detail-main .demo-detail-note{font-size:12px;line-height:1.5;color:#71898c;margin:16px 0}
.demo-detail-actions{display:flex;align-items:center;gap:22px;margin-top:20px}
.demo-detail-actions>a+ a{font-size:13px;color:#087d7a;font-weight:800}
.demo-characteristics{display:grid;grid-template-columns:45% 55%;padding:55px 5vw;gap:24px;background:#f2f7f7}
.demo-characteristics h2{font:600 42px Oswald,'Arial Narrow',Impact,sans-serif;margin:12px 0}
.demo-characteristics p{font-size:15px;line-height:1.6;max-width:340px;color:#527078}
.demo-characteristics dl{margin:0;max-width:560px}
.demo-characteristics dl>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #d3e1e1;padding:13px 0;font-size:14px}
.demo-characteristics dt{color:#698186}.demo-characteristics dd{font-weight:800;margin:0}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1100px){
  .demo-layout{grid-template-columns:205px minmax(0,1fr)}
  .demo-table-head,.demo-row{grid-template-columns:minmax(185px,2fr) 76px 91px 95px 112px;gap:4px}
  .demo-item-title{font-size:14px}.demo-item-photo{width:42px;height:42px}
  .demo-price strong{font-size:14px}.demo-buy input{width:50px}
}
@media(max-width:900px){
  .demo-layout{display:block}
  .demo-sidebar{display:flex;align-items:end;gap:14px;margin-bottom:15px;flex-wrap:wrap}
  .demo-sidebar-title{width:100%;padding-bottom:4px}
  .demo-sidebar fieldset{padding:5px 0;border:0}
  .demo-sidebar fieldset:first-of-type{display:flex;flex-wrap:wrap;column-gap:13px;max-width:100%}
  .demo-sidebar legend{padding:0 0 8px}
  .demo-sidebar .demo-check{padding:5px 0 10px}
  .demo-help{display:none}
}
@media(max-width:700px){
  .demo-heading{display:block}.demo-heading>a{margin-top:18px}
  .demo-disclaimer{display:block}.demo-disclaimer strong{display:block;margin-bottom:4px}
  .demo-searchbar{display:block}.demo-spec-link{border-left:0;border-top:1px solid #e3eeee;padding:11px 18px;display:block}
  .demo-spec-link b{margin-left:5px}.demo-search-field input{font-size:15px}
  .demo-table-head{display:none}
  .demo-row,.demo-table.is-grid .demo-row{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;padding:15px;border-top:1px solid #e6eeee;min-height:0}
  .demo-row .demo-item{grid-column:1/-1}
  .demo-row .demo-code{grid-column:1/-1;margin-left:60px}
  .demo-row .demo-buy{grid-column:1/-1;border-top:1px solid #e7eeee;padding-top:9px}
  .demo-row .demo-buy input{width:65px}.demo-row .demo-add{width:88px}
  .demo-table.is-grid{display:block;padding:0}
  .demo-table.is-grid .demo-row{border-left:0;border-right:0;border-radius:0}
  .demo-tray{bottom:8px}.demo-tray-summary strong{font-size:15px}
  .demo-tray-actions{gap:0}.demo-tray-actions button{padding:9px;font-size:11px}
  .demo-detail{display:block}.demo-detail-photo{min-height:290px}
  .demo-detail-main{padding:28px 5vw}.demo-characteristics{display:block}
}
@media(max-width:430px){
  .demo-results-head h2{font-size:24px}.demo-view button{font-size:11px;padding:8px 7px}
  .demo-tray-icon{display:none}.demo-tray-actions #demo-open-list{display:none}
  .demo-tray-actions button.demo-tray-primary{padding:10px}
  .demo-detail-stats{grid-template-columns:1fr}
}