/* Webon YoungCart shell — keeps native YoungCart forms and hooks intact. */ body { min-width:0; color:var(--webon-text); background:#fff; } #hd, #wrapper, #ft { min-width:0; width:100%; } #tnb .inner, #hd_wrapper, #hd_menu, #container, #ft_wr, #ft_copy { width:min(calc(100% - (var(--webon-gutter) * 2)), var(--webon-container)); max-width:var(--webon-container); margin-inline:auto; } #tnb { color:#d7e1ef; background:var(--webon-primary-dark); } #tnb .inner { height:auto; min-height:38px; } #tnb a { color:inherit; } #hd_wrapper { display:flex; height:auto; min-height:84px; align-items:center; justify-content:space-between; gap:30px; } #logo { float:none; position:static; padding:0; } .webon-shop-brand { display:inline-flex; align-items:center; gap:12px; color:var(--webon-primary-dark); font-size:var(--webon-type-card); font-weight:800; letter-spacing:-.03em; } .webon-shop-brand__mark { display:grid; width:40px; height:40px; place-items:center; color:#fff; background:var(--webon-primary); border-radius:12px 4px; font-size:16px; } .hd_sch_wr { float:none; width:min(100%, 420px); } #hd_sch { width:100%; border:1px solid var(--webon-line); background:var(--webon-bg); border-radius:999px; } #hd_sch form { display:flex; align-items:center; } #hd_sch #sch_str { float:none; min-width:0; width:calc(100% - 48px); height:44px; padding:0 8px 0 18px; border:0; color:var(--webon-text); background:transparent; font-size:var(--webon-type-control); line-height:1.4; } #hd_sch #sch_str::placeholder { color:#6f7f92; opacity:1; } #hd_sch #sch_submit { float:none; flex:0 0 44px; width:44px; height:44px; color:var(--webon-primary); background:transparent; font-size:15px; } .hd_login { float:none; position:static; white-space:nowrap; } .hd_login a { color:var(--webon-primary-dark); } #hd_menu { display:flex; height:auto; min-height:58px; align-items:stretch; padding:0; color:var(--webon-text); background:#fff; } #hd_menu #menu_open { position:relative; width:220px; min-height:58px; color:var(--webon-primary-dark); background:var(--webon-primary-soft); } #hd_menu .hd_menu { display:flex; height:auto; flex:1; align-items:center; justify-content:center; gap:clamp(18px,3vw,42px); } #hd_menu .hd_menu li { float:none; } #hd_menu .hd_menu a { padding:18px 0; color:var(--webon-text); font-size:var(--webon-type-body); font-weight:700; } .webon-shop-menu-hint { display:none; } /* Keep the shop shell on the same header contract as the public-site shell. */ #hd.webon-shop-header #tnb { margin:0; border-bottom:0; font-size:var(--webon-type-caption); } #hd.webon-shop-header #tnb .inner { display:flex; min-height:38px; align-items:center; justify-content:space-between; gap:24px; } #hd.webon-shop-header #tnb .webon-utility__actions { display:flex; min-width:0; align-items:center; justify-content:flex-end; gap:16px; margin-left:auto; } #hd.webon-shop-header #hd_define, #hd.webon-shop-header #hd_qnb { display:flex; float:none; align-items:center; gap:18px; margin:0; padding:0; text-align:initial; } #hd.webon-shop-header #hd_define li, #hd.webon-shop-header #hd_qnb li { float:none; margin:0; padding:0; border:0; font-size:var(--webon-type-caption); line-height:1.5; } #hd.webon-shop-header #hd_define li a, #hd.webon-shop-header #hd_qnb li a { display:flex; min-height:38px; align-items:center; padding:0; } #hd.webon-shop-header #tnb .webon-commerce-links { border:0; color:inherit; background:transparent; } #hd.webon-shop-header #tnb .webon-commerce-links ul { display:flex; width:auto; min-width:0; max-width:none; align-items:center; gap:18px; margin:0; padding:0; } #hd.webon-shop-header #tnb .webon-commerce-links a { min-height:38px; padding:0; color:inherit; background:transparent; border-radius:0; box-shadow:none; font-size:var(--webon-type-caption); font-weight:600; } #hd.webon-shop-header #tnb .webon-commerce-links a .fa { color:inherit; } #hd.webon-shop-header #tnb .webon-account--utility { flex:0 0 auto; min-height:38px; padding-left:16px; border-left:1px solid rgba(255,255,255,.2); color:inherit; } #hd.webon-shop-header #tnb .webon-account--utility .webon-shop-login-trigger { display:grid; width:38px; min-height:38px; place-items:center; padding:0; color:inherit; border:0; background:transparent; border-radius:0; font-size:16px; } #hd.webon-shop-header #tnb .webon-account--utility .webon-shop-login-trigger:hover, #hd.webon-shop-header #tnb .webon-account--utility .webon-shop-login-trigger:focus-visible { color:#fff; background:transparent; } #hd.webon-shop-header #hd_wrapper { display:grid; position:relative; min-height:84px; grid-template-columns:auto minmax(0,1fr) auto; gap:24px; margin-inline:auto; padding:0; } #hd.webon-shop-header #hd_wrapper::after { display:none; } #hd.webon-shop-header #logo { float:none; padding:0; } #hd.webon-shop-header .webon-shop-brand { font-size:var(--webon-type-card); } #hd.webon-shop-header .hd_sch_wr { float:none; width:360px; margin:0; padding:0; justify-self:end; } #hd.webon-shop-header .hd_login { display:flex; position:static; align-items:center; gap:6px; margin:0; padding:0; } #hd.webon-shop-header .hd_login > li { float:none; position:relative; margin:0; } #hd.webon-shop-header .hd_login > li.shop_login { margin-top:0; } #hd.webon-shop-header .shop_login .btn_member_mn { display:grid; min-width:0; min-height:38px; grid-template-columns:24px minmax(0,auto) 12px; align-items:center; gap:7px; padding:0; border:0; color:inherit; background:transparent; border-radius:0; font-size:var(--webon-type-caption); font-weight:700; line-height:1.3; text-align:left; } #hd.webon-shop-header .shop_login .btn_member_mn:hover, #hd.webon-shop-header .shop_login .btn_member_mn:focus-visible, #hd.webon-shop-header .shop_login .btn_member_mn.btn_member_mn_on { color:#fff; background:transparent; } #hd.webon-shop-header .shop_login .btn_member_mn .profile_img { flex:0 0 24px; margin:0; } #hd.webon-shop-header .shop_login .btn_member_mn .profile_img img { display:block; width:24px; height:24px; object-fit:cover; } #hd.webon-shop-header .shop_login .webon-shop-account__text { display:grid; min-width:0; gap:1px; } #hd.webon-shop-header .shop_login .btn_member_mn .profile_name { display:block; max-width:92px; overflow:hidden; color:inherit; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; } #hd.webon-shop-header .shop_login .webon-shop-account__text small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } #hd.webon-shop-header .shop_login .btn_member_mn > i { margin-left:0; color:inherit; font-size:12px; transition:transform .18s ease; } #hd.webon-shop-header .shop_login .btn_member_mn[aria-expanded="true"] > i { transform:rotate(180deg); } #hd.webon-shop-header .shop_login .member_mn { z-index:120; top:100%; right:0; left:auto; width:220px; overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:0 0 10px 10px; box-shadow:0 18px 42px rgba(11,37,69,.16); } #hd.webon-shop-header .shop_login #ol_after_private { padding:7px; } #hd.webon-shop-header .shop_login #ol_after_private li { margin:0; } #hd.webon-shop-header .shop_login #ol_after_private li:hover a { background:var(--webon-primary-soft); } #hd.webon-shop-header .shop_login #ol_after_private a { display:flex; min-height:42px; align-items:center; gap:9px; padding:8px 10px; color:var(--webon-text); border-radius:8px; font-size:13px; font-weight:700; line-height:1.3; } #hd.webon-shop-header .shop_login #ol_after_private a > i { flex:0 0 18px; width:18px; color:var(--webon-primary); text-align:center; } #hd.webon-shop-header .shop_login #ol_after_private a > span { min-width:0; } #hd.webon-shop-header .shop_login #ol_after_private a > strong { float:none; min-width:24px; margin-left:auto; padding:2px 7px; color:var(--webon-primary); background:var(--webon-primary-soft); border-radius:999px; font-size:11px; font-weight:800; line-height:1.4; text-align:center; } #hd.webon-shop-header .shop_login #ol_after_logout { display:flex; min-height:42px; align-items:center; justify-content:center; gap:7px; color:var(--webon-muted); border-top:1px solid var(--webon-line); background:#f8fafc; font-size:13px; font-weight:700; line-height:1.3; } #hd.webon-shop-header .shop_login #ol_after_logout:hover, #hd.webon-shop-header .shop_login #ol_after_logout:focus-visible { color:var(--webon-primary); background:var(--webon-primary-soft); } #hd.webon-shop-header .shop_cart > a { display:inline-flex; min-height:44px; align-items:center; gap:7px; padding:6px 10px; color:var(--webon-primary-dark); border:1px solid transparent; border-radius:var(--webon-radius-sm); font-size:var(--webon-type-control); font-weight:700; line-height:1.3; } #hd.webon-shop-header .shop_cart > a:hover, #hd.webon-shop-header .shop_cart > a:focus-visible { border-color:var(--webon-line); color:var(--webon-primary); background:var(--webon-primary-soft); } #hd.webon-shop-header .shop_cart > a .fa-shopping-cart { color:currentColor; font-size:16px; } #hd.webon-shop-header .shop_cart > a .count { display:inline-flex; position:static; min-width:18px; height:18px; align-items:center; justify-content:center; padding:0 5px; color:#fff; background:#e5484d; border-radius:999px; font-size:11px; font-weight:800; line-height:18px; } #hd.webon-shop-header .webon-shop-menu-shell { border-top:1px solid var(--webon-line); background:#fff; } #hd.webon-shop-header #hd_menu { display:grid; position:relative; min-height:58px; grid-template-columns:220px minmax(0,1fr); margin-inline:auto; padding:0; background:#fff; } #hd.webon-shop-header #hd_menu::after { display:none; } #hd.webon-shop-header #hd_menu button#menu_open { float:none; width:220px; height:auto; min-height:58px; padding:0 20px; color:var(--webon-primary-dark); border:0; border-right:1px solid var(--webon-line); background:var(--webon-primary-soft); font-size:var(--webon-type-body); text-align:center; } #hd.webon-shop-header #hd_menu button#menu_open .fa { color:var(--webon-primary); } #hd.webon-shop-header #hd_menu .hd_menu { display:grid; float:none; width:auto; height:auto; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; gap:0; margin:0; padding:0; font-size:var(--webon-type-body); } #hd.webon-shop-header #hd_menu .hd_menu li { float:none; width:auto; margin:0; padding:0; line-height:1.4; } #hd.webon-shop-header #hd_menu .hd_menu a { display:flex; min-height:58px; align-items:center; justify-content:center; padding:0 14px; color:var(--webon-text); border-right:1px solid var(--webon-line); font-size:var(--webon-type-body); font-weight:700; } #hd.webon-shop-header #hd_menu .hd_menu li:last-child a { border-right:0; } #hd.webon-shop-header #hd_menu .hd_menu a:hover, #hd.webon-shop-header #hd_menu .hd_menu a:focus-visible { color:var(--webon-primary); background:var(--webon-primary-soft); } #hd.webon-shop-header #category { top:100%; left:0; width:100%; overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:0 0 12px 12px; box-shadow:0 18px 40px rgba(11,37,69,.16); } #hd.webon-shop-header #category h2 { min-height:56px; padding:15px 20px; color:var(--webon-primary-dark); border-bottom:1px solid var(--webon-line); font-size:var(--webon-type-card); line-height:1.4; } #hd.webon-shop-header #category .cate { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } #hd.webon-shop-header #category .cate_li_1 { float:none; box-sizing:border-box; width:auto; min-height:96px; padding:18px 20px 20px; border-left:1px solid var(--webon-line); } #hd.webon-shop-header #category .cate_li_1:first-child { border-left:0; } #hd.webon-shop-header #category .cate_li_1_a { margin:0 0 8px; color:var(--webon-primary); font-size:var(--webon-type-body); line-height:1.45; } #hd.webon-shop-header #category .cate_li_2 { line-height:1.7; } #hd.webon-shop-header #category .cate_li_2 a { color:var(--webon-muted); } #hd.webon-shop-header #category .close_btn { top:6px; right:6px; width:44px; height:44px; color:#7d8997; background:transparent; border-radius:8px; } #hd.webon-shop-header #category .close_btn:hover, #hd.webon-shop-header #category .close_btn:focus-visible { color:var(--webon-primary-dark); background:var(--webon-primary-soft); } #wrapper { padding:0; background:#fff; } #container { display:grid; min-height:560px; grid-template-columns:220px minmax(0,1fr); gap:40px; padding-block:clamp(24px,2vw,32px) clamp(48px,6vw,72px); } #wrapper.is_shop_index #container { padding-top:0; } #container #aside { float:none; position:static; width:auto; margin:0; } #container .shop-content { float:none; min-width:0; width:auto; margin:0; } #container .shop-content:not(.is_index) { grid-column:1 / -1; width:100%; } #container .shop-content.is_index { grid-column:1 / -1; width:100%; } #container .shop-content.is_item, #container .shop-content.is_search { width:100%; } #container .is_item #sct_location.view_location { display:flex; min-height:44px; align-items:center; padding:0 0 10px; } #container .is_item #sct_location.view_location .go_home, #container .is_item #sct_location.view_location i.dividing-line, #container .is_item #sct_location.view_location .shop_select_to_html { float:none; } #wrapper_title { margin:0 0 24px; padding:0 0 14px; border-bottom:1px solid var(--webon-line); color:var(--webon-primary-dark); font-size:var(--webon-type-page); font-weight:800; line-height:var(--webon-leading-heading); letter-spacing:-.035em; } .sct_wrap { margin-bottom:56px; } .sct_wrap header { padding:0; } .sct_wrap > header h2 { margin:0 0 24px; color:var(--webon-primary-dark); font-size:var(--webon-type-section); line-height:var(--webon-leading-heading); letter-spacing:-.035em; } .sct_wrap h2 { float:none; line-height:1.25; } .sct_wrap .sct { width:100%; } .sct_wrap .sct li { min-width:0; } .sct_wrap .sct_noitem { min-height:140px; padding:54px 24px; border:1px dashed var(--webon-line); color:var(--webon-muted); background:var(--webon-bg); border-radius:16px; } #side_menu { --webon-quick-rail:54px; --webon-quick-panel:288px; box-sizing:border-box; right:0; top:0; z-index:1300; isolation:isolate; width:var(--webon-quick-rail); height:100dvh; padding-left:var(--webon-quick-rail); overflow:hidden; border:0; background:#f7f9fc; border-radius:14px 0 0 14px; box-shadow:none; transform:none; transition:width .2s ease, box-shadow .2s ease; } #side_menu.is-open { width:calc(var(--webon-quick-rail) + var(--webon-quick-panel)); box-shadow:-16px 0 38px rgba(11,37,69,.12); } #side_menu #quick { top:50%; left:0; width:var(--webon-quick-rail); margin-top:-108px; } #side_menu #quick li { margin:0; } #side_menu #quick li button, #side_menu #top_btn { display:grid; width:var(--webon-quick-rail); min-width:var(--webon-quick-rail); height:54px; min-height:54px; place-items:center; padding:0; color:#52657a; border:0; border-bottom:1px solid var(--webon-line); background:#fff; font-size:18px; } #side_menu #quick li button:hover, #side_menu #quick li button:focus-visible, #side_menu #quick li button.btn_sm_on, #side_menu #top_btn:hover, #side_menu #top_btn:focus-visible { color:#fff; background:var(--webon-primary-dark); } #side_menu #quick .btn_sm_on i { color:inherit; } #side_menu #quick .qk_tit { top:12px; right:64px; padding:0 12px; color:#fff; background:var(--webon-primary-dark); border-radius:6px; box-shadow:0 8px 18px rgba(11,37,69,.16); } #side_menu #quick .qk_tit::after { border-left-color:var(--webon-primary-dark); } #side_menu #top_btn { bottom:0; left:0; margin:0; border-top:1px solid var(--webon-line); border-bottom:0; } #side_menu #tabs_con { display:none; position:relative; z-index:1; width:var(--webon-quick-panel); height:100%; background:#fff; text-align:left; } #side_menu.is-open #tabs_con { display:block; } #side_menu .side_mn_wr1, #side_menu .side_mn_wr2, #side_menu .side_mn_wr3, #side_menu .side_mn_wr4, #side_menu .qk_con { box-sizing:border-box; width:var(--webon-quick-panel); height:100%; border-left:1px solid var(--webon-line); background:#fff; } #side_menu .qk_con_wr { box-sizing:border-box; width:100%; height:100%; padding:0 0 24px; overflow-y:auto; scrollbar-color:#91a0b1 transparent; scrollbar-width:thin; } #side_menu .qk_con_wr::-webkit-scrollbar { width:7px; } #side_menu .qk_con_wr::-webkit-scrollbar-track { background:transparent; } #side_menu .qk_con_wr::-webkit-scrollbar-thumb { background:#91a0b1; border:2px solid #fff; border-radius:999px; } #side_menu .qk_con_wr .con_close { position:fixed; top:0; right:var(--webon-quick-panel); display:grid; width:var(--webon-quick-rail); min-width:var(--webon-quick-rail); height:54px; min-height:54px; place-items:center; padding:0; color:var(--webon-primary-dark); border:0; border-bottom:1px solid var(--webon-line); background:#fff; font-size:20px; } #side_menu .qk_con_wr .con_close:hover, #side_menu .qk_con_wr .con_close:focus-visible { color:#fff; background:var(--webon-primary-dark); } #side_menu .qk_con h2.s_h2 { min-height:58px; margin:0; padding:17px 18px; color:var(--webon-primary-dark); border-bottom:1px solid var(--webon-line); font-size:16px; line-height:1.4; } #side_menu .qk_con h2.s_h2 span { min-width:22px; margin-left:5px; padding:2px 7px; color:var(--webon-primary); background:var(--webon-primary-soft); border-radius:999px; font-size:11px; font-weight:800; } #side_menu #s_ol_after { border:0; background:#fff; } #side_menu #s_ol_after_hd { display:grid; position:relative; box-sizing:border-box; min-height:70px; height:auto; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:9px; padding:12px; border-bottom:1px solid var(--webon-line); } #side_menu #s_ol_after_hd .profile_img { position:relative; top:auto; left:auto; display:block; width:42px; height:42px; } #side_menu #s_ol_after_hd .profile_img img { display:block; width:42px; height:42px; object-fit:cover; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px var(--webon-line); } #side_menu #s_ol_after_hd .btn_admin { position:absolute; right:-2px; bottom:-2px; display:grid; width:20px; min-width:20px; height:20px; min-height:20px; place-items:center; padding:0; color:#fff; border:2px solid #fff; background:var(--webon-primary-dark); border-radius:50%; font-size:9px; line-height:1; } #side_menu .webon-side-account__identity { display:flex; min-width:0; align-items:center; } #side_menu .webon-side-account__identity > strong { display:block; min-width:0; margin:0; overflow:hidden; color:var(--webon-primary-dark); font-size:14px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } #side_menu .webon-side-account__actions { display:flex; min-width:0; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:4px; } #side_menu #s_ol_after_info, #side_menu #s_ol_after_logout { position:static; inset:auto; float:none; box-sizing:border-box; display:inline-flex; width:auto; min-width:0; max-width:none; height:auto; min-height:28px; flex:0 0 auto; align-items:center; justify-content:center; margin:0; padding:4px 6px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:6px; font-size:10.5px; font-weight:700; line-height:1.2; white-space:nowrap; } #side_menu #s_ol_after_info:hover, #side_menu #s_ol_after_info:focus-visible, #side_menu #s_ol_after_logout:hover, #side_menu #s_ol_after_logout:focus-visible { color:var(--webon-primary); border-color:#afc9e8; background:var(--webon-primary-soft); } #side_menu #s_ol_after_private { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--webon-line); } #side_menu #s_ol_after_private li { min-width:0; margin:0; border-right:1px solid var(--webon-line); border-bottom:1px solid var(--webon-line); } #side_menu #s_ol_after_private li:nth-child(2n) { border-right:0; } #side_menu #s_ol_after_private li:nth-last-child(-n+2) { border-bottom:0; } #side_menu #s_ol_after_private a { display:grid; min-width:0; min-height:82px; grid-template-rows:18px auto auto; place-items:center; gap:2px; padding:10px 8px; color:var(--webon-text); background:#fff; font-size:12px; font-weight:700; line-height:1.25; text-align:center; } #side_menu #s_ol_after_private a:hover, #side_menu #s_ol_after_private a:focus-visible { color:var(--webon-primary); background:var(--webon-primary-soft); } #side_menu #s_ol_after_private a::after { display:none; } #side_menu #s_ol_after_private a i { width:auto; margin:0; color:#7890aa; font-size:15px; } #side_menu #s_ol_after_private a:hover i, #side_menu #s_ol_after_private a:focus-visible i { color:var(--webon-primary); } #side_menu #s_ol_after_private a strong { float:none; display:block; max-width:100%; margin:0; padding:0; color:var(--webon-primary); background:transparent; border-radius:0; font-size:12px; font-weight:800; line-height:1.2; } #side_menu #s_ol_after_private a:hover strong, #side_menu #s_ol_after_private a:focus-visible strong { color:var(--webon-primary); background:transparent; } #side_menu .side_tnb { display:grid; gap:0; margin:0; padding:10px 16px 22px; } #side_menu .side_tnb li { margin:0; } #side_menu .side_tnb li a { display:grid; min-width:0; min-height:44px; grid-template-columns:20px minmax(0,1fr) 12px; align-items:center; gap:9px; padding:0 2px; color:var(--webon-text); border-bottom:1px solid var(--webon-line); background:#fff; font-size:13px; font-weight:700; line-height:1.3; text-align:left; } #side_menu .side_tnb li a::after { content:"\203A"; color:#9aa8b7; font-size:18px; line-height:1; text-align:right; } #side_menu .side_tnb li a i { width:20px; color:#7890aa; text-align:center; } #side_menu .side_tnb li a:hover, #side_menu .side_tnb li a:focus-visible { color:var(--webon-primary); background:#fff; } #side_menu .side_tnb li a:hover i, #side_menu .side_tnb li a:focus-visible i, #side_menu .side_tnb li a:hover::after, #side_menu .side_tnb li a:focus-visible::after { color:var(--webon-primary); } #side_menu #s_ol_before { border:0; background:#fff; } #side_menu #s_ol_be_cate { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--webon-line); } #side_menu #s_ol_be_cate h2, #side_menu #s_ol_be_cate .join { float:none; width:auto; min-height:54px; padding:17px 10px; color:var(--webon-primary-dark); background:#fff; font-size:14px; font-weight:800; text-align:center; } #side_menu #s_ol_be_cate .join { color:var(--webon-muted); border-left:1px solid var(--webon-line); } #side_menu #s_ol_before form { padding:18px; } #side_menu #s_ol_before #ol_id, #side_menu #s_ol_before #ol_pw { height:44px; margin:0 0 8px; border:1px solid var(--webon-line); border-radius:8px; } #side_menu #s_ol_before #ol_submit { height:44px; color:#fff; border:0; background:var(--webon-primary-dark); border-radius:8px; } #side_menu #s_ol_before #ol_auto, #side_menu #s_ol_before #ol_svc { float:none; margin-top:10px; } #side_menu #s_ol_before .ol_auto_wr { display:flex; align-items:center; justify-content:space-between; gap:8px; } #side_menu #s_ol_before #ol_svc a { display:inline-flex; min-height:34px; align-items:center; padding:5px 8px; color:var(--webon-primary); border:1px solid var(--webon-line); background:#fff; border-radius:6px; } #side_menu #stv .li_empty, #side_menu #sbsk .li_empty, #side_menu #wish .li_empty { min-height:120px; padding:48px 16px; color:var(--webon-muted); background:#fff; line-height:1.45; text-align:center; } #side_menu #stv, #side_menu #sbsk, #side_menu #wish { position:relative; min-height:100%; color:var(--webon-text); background:#fff; } #side_menu #stv ul, #side_menu #sbsk ul, #side_menu #wish ul { margin:0; padding:0; } #side_menu #stv .stv_item, #side_menu #sbsk li, #side_menu #wish li { box-sizing:border-box; min-width:0; margin:0; padding:14px 12px; border-bottom:1px solid var(--webon-line); background:#fff; } #side_menu #stv .stv_item, #side_menu #wish li { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:12px; } #side_menu #sbsk li:not(.li_empty) { display:grid; grid-template-columns:64px minmax(0,1fr) 30px; align-items:center; gap:10px; } #side_menu #stv .prd_img, #side_menu #sbsk .prd_img, #side_menu #wish .prd_img, #side_menu #stv .prd_cnt, #side_menu #sbsk .prd_cnt, #side_menu #wish .prd_cnt { float:none; display:block; min-width:0; margin:0; } #side_menu #stv .prd_img, #side_menu #sbsk .prd_img, #side_menu #wish .prd_img { width:64px; height:64px; overflow:hidden; background:var(--webon-bg); border-radius:8px; } #side_menu #stv .prd_img img, #side_menu #sbsk .prd_img img, #side_menu #wish .prd_img img { display:block; width:64px; height:64px; object-fit:cover; } #side_menu #stv .prd_name, #side_menu #sbsk .prd_name, #side_menu #wish .prd_name { display:-webkit-box; width:100%; max-width:none; min-width:0; margin:0; overflow:hidden; color:var(--webon-primary-dark); font-size:14px; font-weight:800; line-height:1.4; text-overflow:ellipsis; word-break:keep-all; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #side_menu #stv .prd_cost, #side_menu #sbsk .prd_cost, #side_menu #wish .prd_price { display:block; width:100%; max-width:none; margin:5px 0 0; color:var(--webon-text); font-size:13px; font-weight:700; line-height:1.35; font-variant-numeric:tabular-nums; } #side_menu #sbsk .cart_del { position:static; display:grid; width:30px; height:30px; place-items:center; padding:0; color:#8d9baa; border:0; background:transparent; border-radius:6px; font-size:15px; } #side_menu #sbsk .cart_del:hover, #side_menu #sbsk .cart_del:focus-visible { color:#b42318; background:#fff1f0; } #side_menu #sbsk .btn_buy { padding:14px 12px 4px; } #side_menu #sbsk .btn_buy .btn_submit { width:100%; height:44px; color:#fff; border:0; background:var(--webon-primary); border-radius:8px; font-size:14px; font-weight:800; } #side_menu #sbsk .btn_buy .btn_submit:hover, #side_menu #sbsk .btn_buy .btn_submit:focus-visible { background:var(--webon-primary-dark); } #side_menu #sbsk .go_cart, #side_menu #wish .go_wish { position:absolute; top:14px; right:12px; display:inline-flex; min-height:30px; align-items:center; padding:4px 8px; color:var(--webon-primary); border:1px solid var(--webon-line); background:#fff; border-radius:6px; font-size:11px; font-weight:800; line-height:1.2; white-space:nowrap; } #side_menu #sbsk .go_cart:hover, #side_menu #sbsk .go_cart:focus-visible, #side_menu #wish .go_wish:hover, #side_menu #wish .go_wish:focus-visible { border-color:#afc9e8; background:var(--webon-primary-soft); } #side_menu #stv_pg { position:static; box-sizing:border-box; width:100%; margin:0; padding:12px; color:var(--webon-muted); border-top:1px solid var(--webon-line); background:#fff; font-size:12px; line-height:1.4; text-align:center; } #side_menu #stv_btn { position:absolute; top:14px; right:12px; width:auto; height:auto; } #side_menu #stv_btn button { position:static; display:inline-flex; width:auto; min-width:30px; height:30px; align-items:center; justify-content:center; padding:0 8px; color:var(--webon-primary); border:1px solid var(--webon-line); background:#fff; border-radius:6px; text-indent:0; overflow:visible; font-size:11px; font-weight:800; } #ft { padding:50px 0 24px; color:#c7d3e2; background:#0a1e38; } #ft_wr { display:grid; grid-template-columns:minmax(150px,.55fr) minmax(360px,1.75fr) minmax(180px,.75fr) minmax(140px,.55fr); gap:36px; padding:0; } #ft_wr.is-footer-notice-empty { grid-template-columns:minmax(150px,.55fr) minmax(420px,2.2fr) minmax(160px,.65fr); } #ft_wr > * { min-width:0; } #ft_wr .ft_cnt { float:none; width:auto; padding:0; } #ft_wr #sidx_lat { width:auto; margin:0; } #ft_wr #visit { width:auto; } #ft a { color:#fff; } #ft_company { color:#aab9cb; } #ft_company .webon-footer-company { margin-top:12px; } #ft_company .webon-footer-company__facts { gap:6px 18px; } #ft_copy { padding:22px 0 0; border-top:1px solid rgba(255,255,255,.14); color:#8294aa; text-align:left; } #container #sit_ov_wrap { display:grid; box-sizing:border-box; width:100%; max-width:1280px; grid-template-columns:minmax(340px,1fr) minmax(380px,1fr); gap:clamp(32px,4vw,56px); margin-inline:auto; padding:32px 0 40px; } #sit_pvi, #container #sit_ov { float:none; width:auto; min-width:0; } #container #sit_pvi_big { float:none; width:100%; } #sit_pvi_big img { width:100%; max-width:100%; height:auto; } .webon-item-placeholder { overflow:hidden; width:100%; aspect-ratio:1/1; background:var(--webon-bg); border-radius:18px; } .webon-item-placeholder .webon-product-visual { min-height:100%; } #sit_ov_btn button, #sit_ov_btn a { min-height:48px; border-radius:10px; } /* Commerce navigation */ .webon-commerce-links { border-bottom:1px solid var(--webon-line); background:#f7f9fc; } .webon-commerce-links ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-block:8px; } .webon-commerce-links a { display:flex; min-height:44px; align-items:center; justify-content:center; gap:8px; padding:8px 12px; color:var(--webon-muted); border-radius:10px; font-size:14px; font-weight:700; } .webon-commerce-links a:hover, .webon-commerce-links a:focus-visible, .webon-commerce-links a[aria-current="page"] { color:var(--webon-primary-dark); background:#fff; box-shadow:0 1px 4px rgba(13,39,72,.1); } .webon-commerce-links a .fa { color:var(--webon-primary); } /* Product discovery */ .webon-shop-home__banner { overflow:hidden; width:100%; margin:0 0 clamp(24px,4vw,40px); border-radius:0 0 18px 18px; } .webon-shop-home__banner #main_bn { width:100%; margin:0; border:0; } .webon-shop-home__banner .main_banner_owl .item, .webon-shop-home__banner .main_banner_owl .item a { display:block; width:100%; } .webon-shop-home__banner img { display:block; width:100%; max-width:none; height:clamp(300px,33vw,470px); object-fit:cover; } .webon-shop-home__banner .main_owl_pager { border-inline:1px solid var(--webon-line); } .webon-shop-home { margin-bottom:clamp(46px,7vw,78px); } .webon-shop-home__hero { overflow:hidden; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr); gap:clamp(24px,4vw,54px); align-items:center; padding:clamp(30px,5vw,64px); color:#fff; background:linear-gradient(135deg,#0c294b 0%,#174c85 62%,#246db2 100%); border-radius:24px; box-shadow:0 18px 48px rgba(13,39,72,.18); } .webon-shop-home__copy { max-width:640px; } .webon-shop-home__eyebrow, .webon-shop-home__section-heading span, .webon-shop-home__empty > div > span { display:block; margin-bottom:10px; color:#7fb9ef; font-size:12px; font-weight:900; letter-spacing:.16em; } .webon-shop-home__copy h1 { margin:0; color:#fff; font-size:var(--webon-type-feature); font-weight:900; line-height:1.14; letter-spacing:-.045em; word-break:keep-all; } .webon-shop-home__copy p { max-width:560px; margin:20px 0 0; color:#d8e7f7; font-size:16px; line-height:1.7; word-break:keep-all; } .webon-shop-home__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .webon-shop-home__actions a { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:10px 18px; border:1px solid rgba(255,255,255,.28); color:#fff; border-radius:12px; font-weight:800; } .webon-shop-home__actions a:hover, .webon-shop-home__actions a:focus-visible { color:#0d2748; background:#fff; } .webon-shop-home__actions .webon-shop-home__primary { border-color:#fff; color:#0d2748; background:#fff; } .webon-shop-home__guide { padding:clamp(20px,3vw,30px); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); border-radius:18px; backdrop-filter:blur(8px); } .webon-shop-home__guide strong { display:block; margin-bottom:14px; color:#fff; font-size:17px; } .webon-shop-home__guide ul { display:grid; gap:8px; } .webon-shop-home__guide li { display:flex; min-height:48px; align-items:center; gap:12px; padding:10px 13px; color:#eaf4ff; background:rgba(5,28,52,.25); border-radius:12px; font-weight:700; } .webon-shop-home__guide .fa { display:grid; width:30px; height:30px; flex:0 0 30px; place-items:center; color:#fff; background:rgba(255,255,255,.15); border-radius:9px; } .webon-shop-home__discovery { padding-top:clamp(28px,5vw,48px); } .webon-shop-home__section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; } .webon-shop-home__section-heading span { margin-bottom:5px; color:var(--webon-primary); } .webon-shop-home__section-heading h2 { margin:0; color:var(--webon-primary-dark); font-size:var(--webon-type-section); line-height:var(--webon-leading-heading); letter-spacing:-.035em; } .webon-shop-home__section-heading small { color:var(--webon-muted); font-weight:700; } .webon-shop-home__categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .webon-shop-home__categories a { display:grid; min-height:74px; grid-template-columns:36px minmax(0,1fr) 16px; gap:10px; align-items:center; padding:14px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:15px; box-shadow:0 6px 20px rgba(13,39,72,.05); font-weight:800; } .webon-shop-home__categories a:hover, .webon-shop-home__categories a:focus-visible { border-color:#9bbcdf; background:#f5f9fd; transform:translateY(-2px); } .webon-shop-home__categories a .fa:first-child { display:grid; width:36px; height:36px; place-items:center; color:var(--webon-primary); background:#edf5fc; border-radius:10px; } .webon-shop-home__categories a .fa:last-child { color:#8aa0b8; text-align:right; } .webon-shop-home__empty { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:20px; align-items:center; margin-bottom:56px; padding:clamp(24px,4vw,38px); border:1px solid var(--webon-line); background:#f6f9fc; border-radius:20px; } .webon-shop-home__empty > .fa { display:grid; width:56px; height:56px; place-items:center; color:var(--webon-primary); background:#fff; border-radius:16px; box-shadow:0 8px 20px rgba(13,39,72,.08); font-size:22px; } .webon-shop-home__empty > div > span { margin-bottom:5px; color:var(--webon-primary); } .webon-shop-home__empty h2 { margin:0; color:var(--webon-primary-dark); font-size:clamp(20px,2.5vw,27px); letter-spacing:-.03em; word-break:keep-all; } .webon-shop-home__empty p { margin:8px 0 0; color:var(--webon-muted); line-height:1.6; word-break:keep-all; } .webon-shop-home__empty > a { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:10px 18px; color:#fff; background:var(--webon-primary); border-radius:11px; font-weight:800; white-space:nowrap; } /* Webon Select storefront */ .webon-shop-home { --webon-shop-ink:var(--webon-primary-dark); --webon-shop-blue:var(--webon-primary); --webon-shop-cloud:var(--webon-bg); } .webon-shop-home__hero { position:relative; grid-template-columns:minmax(0,1.1fr) minmax(310px,.72fr); background:var(--webon-shop-ink); box-shadow:0 22px 60px rgba(11,37,69,.2); } .webon-shop-home__hero::before { position:absolute; top:-110px; left:42%; width:330px; height:330px; border:76px solid rgba(255,255,255,.04); border-radius:50%; content:""; pointer-events:none; } .webon-shop-home__copy, .webon-shop-ticket { position:relative; z-index:1; } .webon-shop-home__actions .webon-shop-home__primary { border-color:var(--webon-shop-blue); color:#fff; background:var(--webon-shop-blue); } .webon-shop-home__actions .webon-shop-home__primary:hover, .webon-shop-home__actions .webon-shop-home__primary:focus-visible { color:var(--webon-shop-ink); background:#fff; } .webon-shop-ticket { display:block; overflow:hidden; padding:12px; color:var(--webon-shop-ink); background:#fff; border-radius:6px 22px 6px 22px; box-shadow:0 20px 50px rgba(3,18,35,.28); transform:rotate(1.2deg); } .webon-shop-ticket:hover, .webon-shop-ticket:focus-visible { color:var(--webon-shop-ink); transform:rotate(0) translateY(-4px); } .webon-shop-ticket__top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 4px 12px; color:#50647c; font-size:10px; letter-spacing:.14em; } .webon-shop-ticket__top b { color:var(--webon-shop-blue); } .webon-shop-ticket__visual { display:block; overflow:hidden; aspect-ratio:1/1; background:var(--webon-shop-cloud); border-radius:2px 14px 2px 14px; } .webon-shop-ticket__body { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:16px 6px 7px; } .webon-shop-ticket__body > span { display:grid; gap:3px; min-width:0; } .webon-shop-ticket__body small { color:#6c7c90; font-size:11px; } .webon-shop-ticket__body strong { overflow:hidden; font-size:17px; text-overflow:ellipsis; white-space:nowrap; } .webon-shop-ticket__body > b { flex:0 0 auto; color:var(--webon-shop-blue); font-size:16px; font-variant-numeric:tabular-nums; } .webon-shop-home__services { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:18px; border:1px solid var(--webon-line); background:#fff; border-radius:16px; box-shadow:0 8px 28px rgba(11,37,69,.07); } .webon-shop-home__services a { display:flex; min-height:78px; align-items:center; justify-content:center; gap:12px; padding:14px; color:var(--webon-shop-ink); border-right:1px solid var(--webon-line); } .webon-shop-home__services a:last-child { border-right:0; } .webon-shop-home__services a:hover, .webon-shop-home__services a:focus-visible { color:var(--webon-shop-blue); background:var(--webon-shop-cloud); } .webon-shop-home__services .fa { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; color:var(--webon-shop-blue); background:var(--webon-primary-soft); border-radius:12px; font-size:16px; } .webon-shop-home__services span { display:grid; gap:2px; } .webon-shop-home__services b { font-size:14px; } .webon-shop-home__services small { color:#718097; font-size:11px; } .webon-shop-home__categories a > span { display:grid; gap:2px; min-width:0; } .webon-shop-home__categories a > span b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .webon-shop-home__categories a > span small { color:var(--webon-muted); font-size:11px; font-weight:600; } .webon-shop-home__catalog { padding-top:clamp(50px,7vw,86px); scroll-margin-top:24px; } .webon-shop-home__more { display:inline-flex; min-height:44px; align-items:center; gap:9px; padding:8px 14px; color:var(--webon-shop-ink); border:1px solid var(--webon-line); background:#fff; border-radius:10px; font-size:13px; font-weight:800; } .webon-shop-home__more:hover, .webon-shop-home__more:focus-visible { color:#fff; border-color:var(--webon-shop-blue); background:var(--webon-shop-blue); } .webon-shop-home__catalog .webon-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; width:100%; margin:0; } .webon-shop-home__catalog .webon-product-card { float:none; width:auto !important; min-width:0; margin:0; padding:0; } .webon-product-card { position:relative; } .webon-product-card > .li_wr, .webon-shop-home__catalog .webon-product-card { overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:18px; box-shadow:0 8px 28px rgba(11,37,69,.07); } .webon-product-card:hover { border-color:#b8c8dd; box-shadow:0 12px 30px rgba(11,37,69,.11); transform:none; } .webon-product-card__visual { overflow:hidden; aspect-ratio:1/1; background:var(--webon-shop-cloud); } .webon-product-card__visual > a { display:block; width:100%; height:100%; } .webon-product-card__visual img { display:block; width:100%; height:100%; object-fit:cover; } .webon-product-card__content { padding:17px; } .webon-product-card__name a { display:-webkit-box; overflow:hidden; min-height:44px; color:var(--webon-shop-ink); font-size:var(--webon-type-body); font-weight:800; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .webon-product-card__price { color:var(--webon-shop-ink); font-size:18px; font-weight:900; } .webon-product-visual { display:flex; box-sizing:border-box; width:100%; height:100%; min-height:100%; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:18px; color:var(--webon-shop-ink); background:#e7eef6; } .webon-product-visual__mark { display:grid; width:72px; height:72px; place-items:center; border:1px solid rgba(11,37,69,.14); background:rgba(255,255,255,.78); border-radius:24px 8px; box-shadow:0 10px 26px rgba(11,37,69,.1); font-size:28px; font-weight:900; } .webon-product-visual__label { font-size:10px; font-weight:900; letter-spacing:.18em; } .webon-product-visual--2 { background:#edf2f7; } .webon-product-visual--3 { background:#e3ebf4; } .webon-product-visual--4 { background:#eef3f7; } .webon-product-visual--5 { background:#e8eef5; } .webon-product-visual--6 { background:#e4edf4; } .webon-shop-home__support { display:grid; grid-template-columns:minmax(280px,1fr) minmax(240px,.8fr) auto; gap:clamp(22px,4vw,54px); align-items:center; margin-top:clamp(60px,8vw,96px); padding:clamp(30px,5vw,54px); color:#fff; background:var(--webon-shop-ink); border-radius:22px; } .webon-shop-home__support span { color:#8fb5ff; font-size:11px; font-weight:900; letter-spacing:.16em; } .webon-shop-home__support h2 { margin:8px 0 0; color:#fff; font-size:var(--webon-type-section); line-height:var(--webon-leading-heading); letter-spacing:-.035em; } .webon-shop-home__support p { margin:0; color:#c3d1e1; line-height:1.7; } .webon-shop-home__support > div:last-child { display:flex; gap:8px; } .webon-shop-home__support a { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:9px 15px; color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:10px; font-weight:800; white-space:nowrap; } .webon-shop-home__support a.is-primary { border-color:var(--webon-shop-blue); background:var(--webon-shop-blue); } #sct_sortlst { display:grid; box-sizing:border-box; min-height:64px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; margin:0 0 20px; padding:8px 10px 8px 14px; border:1px solid var(--webon-line); background:#fff; border-radius:12px; } #sct_sortlst::after, #sct_sort::after, #sct_sort ul::after, #sct_lst::after { display:none; } #sct_sort { display:flex; float:none; min-width:0; width:100%; align-items:center; gap:12px; } #sct_sort h2 { position:static; width:auto; height:auto; flex:0 0 auto; margin:0; overflow:visible; color:var(--webon-primary-dark); font-size:12px; font-weight:800; line-height:1.3; white-space:nowrap; } #sct_sort .btn_sort { display:none; } #sct_sort ul { display:flex; min-width:0; flex:1 1 auto; flex-wrap:nowrap; align-items:center; gap:2px; margin:0; padding:0; overflow-x:auto; list-style:none; scrollbar-width:thin; } #sct_sort li { float:none; height:auto; min-height:44px; flex:0 0 auto; margin:0; padding:0; } #sct_sort li a { display:flex; box-sizing:border-box; min-height:44px; align-items:center; padding:9px 12px; border:0; color:var(--webon-muted); font-size:13px; font-weight:700; line-height:1.3; white-space:nowrap; } #sct_sort li a:hover, #sct_sort li a:focus-visible, #sct_sort li a.is-current { color:var(--webon-primary); background:#eef4fb; border-radius:8px; } .webon-catalog-view { display:flex; min-height:44px; align-items:center; gap:8px; padding-left:16px; border-left:1px solid var(--webon-line); } .webon-catalog-view__label { color:var(--webon-muted); font-size:12px; font-weight:800; line-height:1.3; white-space:nowrap; } #sct_lst { display:flex; float:none; align-items:center; gap:4px; margin:0; padding:0; list-style:none; } #sct_lst li { float:none; } #sct_lst button { display:grid; width:40px; height:40px; min-height:40px; place-items:center; color:#7d8997; border:1px solid transparent; background:transparent; border-radius:8px; line-height:1; } #sct_lst button:hover, #sct_lst button:focus-visible { color:var(--webon-primary); border-color:#c8d8e9; background:var(--webon-primary-soft); } #sct_lst button.sct_lst_on { color:#fff; border-color:var(--webon-primary); background:var(--webon-primary); } #container #sct_location { display:flex; min-height:44px; align-items:center; justify-content:flex-end; gap:8px; padding:0; } #container #sct_location .go_home { display:grid; box-sizing:border-box; width:40px; height:40px; place-items:center; padding:0; color:#8794a3; background:transparent; border-radius:8px; font-size:16px; line-height:1; vertical-align:middle; transition:color .16s ease, background-color .16s ease; } #container #sct_location .go_home i { display:block; margin:0; line-height:1; } #container #sct_location .go_home:hover, #container #sct_location .go_home:focus-visible { color:var(--webon-primary); background:var(--webon-primary-soft); } #container #sct_location i.dividing-line { display:grid; width:16px; height:40px; flex:0 0 16px; place-items:center; margin:0; color:#a7b1bd; font-size:13px; line-height:1; vertical-align:middle; } #container #sct_location .shop_select_to_html { display:inline-flex; position:relative; min-height:40px; align-items:center; margin:0; line-height:1.4; vertical-align:middle; } #container #sct_location .category_title { display:inline-flex; box-sizing:border-box; min-height:40px; align-items:center; gap:6px; padding:0 8px; color:var(--webon-primary-dark); background:transparent; border-radius:8px; font-size:15px; font-weight:700; line-height:1.2; cursor:pointer; transition:color .16s ease, background-color .16s ease; } #container #sct_location .category_title i { display:grid; width:16px; height:16px; place-items:center; margin:0; color:#8b98a7; font-size:12px; line-height:1; transition:color .16s ease, transform .16s ease; } #container #sct_location .shop_select_to_html:not(.is-dismissed):hover .category_title, #container #sct_location .shop_select_to_html:focus-within .category_title, #container #sct_location .shop_select_to_html.is-open .category_title { color:var(--webon-primary); background:var(--webon-primary-soft); } #container #sct_location .shop_select_to_html:not(.is-dismissed):hover .category_title i, #container #sct_location .shop_select_to_html:focus-within .category_title i, #container #sct_location .shop_select_to_html.is-open .category_title i { color:var(--webon-primary); } #container #sct_location .shop_select_to_html.is-open .category_title i { transform:rotate(180deg); } #container #sct_location .menulist { display:none; position:absolute; z-index:40; top:calc(100% + 4px); width:max-content; min-width:100%; max-width:min(440px, calc(100vw - 32px)); max-height:min(420px, calc(100vh - 120px)); margin-top:0; padding:6px; overflow:auto; overscroll-behavior:contain; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:10px; box-shadow:0 12px 28px rgba(13,39,72,.14); opacity:1; white-space:nowrap; scrollbar-gutter:stable; } #container #sct_location.is_right .menulist { right:0; left:auto; } #container #sct_location.view_location .menulist { right:auto; left:0; } #container #sct_location .shop_select_to_html:not(.is-dismissed):hover .menulist, #container #sct_location .shop_select_to_html.is-open .menulist { display:block; opacity:1; } #container #sct_location .menulist ul { margin:0; padding:0; } #container #sct_location .option { min-height:44px; line-height:1.4; border-radius:7px; } #container #sct_location .option a { display:flex; box-sizing:border-box; min-height:44px; align-items:center; padding:8px 12px; color:var(--webon-primary-dark); border-radius:7px; font-size:14px; line-height:1.35; text-decoration:none; } #container #sct_location .option:hover, #container #sct_location .option.focus, #container #sct_location .option.selected.focus { background:var(--webon-primary-soft); } #container #sct_location .option:hover a, #container #sct_location .option a:focus-visible { color:var(--webon-primary); } #container #sct_location .option.selected, #container #sct_location .option.selected a { color:var(--webon-primary); font-weight:800; } #container #sct_location .webon-shop-breadcrumb__current { display:inline-flex; min-height:40px; align-items:center; padding:0 8px; color:var(--webon-primary-dark); font-size:15px; font-weight:700; line-height:1.35; } @media (min-width:1025px) { #container .shop-content:not(.is_item):not(.is_search):not(.is_index):not(.is-account) { position:relative; } #container .shop-content:not(.is_item):not(.is_search):not(.is_index):not(.is-account) #wrapper_title { display:flex; min-height:44px; align-items:center; padding-right:clamp(300px,34vw,470px); } #container .shop-content:not(.is_item):not(.is_search):not(.is_index):not(.is-account) #sct_location.is_list { position:absolute; top:0; right:0; margin:0; } #container .shop-content > .sct_admin { display:flex; height:32px; align-items:center; justify-content:flex-end; margin:-16px 0 6px; } #container .shop-content > .sct_admin .btn_admin { width:32px; min-width:32px; height:32px; min-height:32px; padding:0; color:var(--webon-primary); border:1px solid #c8d8e9; background:var(--webon-primary-soft); border-radius:8px; font-size:13px; } #container .shop-content > .sct_admin .btn_admin:hover, #container .shop-content > .sct_admin .btn_admin:focus-visible { color:#fff; border-color:var(--webon-primary); background:var(--webon-primary); } } .shop-content .sct_li { box-sizing:border-box; min-width:0; } .shop-content .sct_10.lists-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; width:100%; margin:0; } .shop-content .sct_10 .sct_li, .shop-content .sct_10_list .sct_li { padding:8px; } .shop-content .sct_10 .sct_li > .li_wr, .shop-content .sct_10_list .sct_li > .li_wr, .shop-content .sct_10.lists-row > .sct_li { overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:16px; box-shadow:0 7px 24px rgba(13,39,72,.07); } .shop-content .sct_10.lists-row > .sct_li { padding:0; } .shop-content .sct_10.lists-row > .sct_li { overflow:visible; position:relative; float:none; width:auto !important; margin:0; clear:none; } .shop-content .sct_10 .sct_img, .shop-content .sct_10_list .sct_img { overflow:hidden; position:relative; background:#f5f7fa; } .shop-content .sct_10 .sct_img img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; } .shop-content .sct_10 .sct_ct_wrap, .shop-content .sct_10 .li_wr, .shop-content .sct_10_list .li_wr { min-width:0; } .shop-content .sct_10 .sct_ct_wrap { padding:17px; } .shop-content .sct_txt a { color:var(--webon-primary-dark); font-size:var(--webon-type-body); font-weight:800; line-height:1.45; } .shop-content .sct_basic { min-height:40px; color:var(--webon-muted); line-height:1.45; } .shop-content .sct_cost { color:var(--webon-primary-dark); font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; } .shop-content .sct_dict { display:block; margin-bottom:3px; color:var(--webon-muted); font-size:12px; font-weight:500; text-decoration:line-through; } .webon-shop-meta { display:flex; min-height:25px; gap:6px; flex-wrap:wrap; align-items:center; margin:9px 0; } .webon-shop-meta > span { display:inline-flex; min-height:24px; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:800; line-height:1.2; } .webon-shop-discount { color:#b42318; background:#fff0ed; } .webon-shop-delivery { color:#14532d; background:#eaf8ef; } .webon-shop-review { color:#3c526b; background:#edf2f7; } .shop-content .sit_icon_li .shop_icon { margin:1px; padding:2px 7px; color:var(--webon-primary-dark); border:1px solid #cfdaea; background:var(--webon-primary-soft); border-radius:6px; font-size:11px; font-weight:800; line-height:18px; } .sct_op_btn { display:flex; gap:6px; } .shop-content .sct_10 .sct_op_btn, .shop-content .sct_10_list .sct_op_btn { position:relative; justify-content:flex-end; margin-top:12px; } .sct_op_btn > button, .sct_btn .btn_cart, .sct_sns_cls { display:inline-flex; box-sizing:border-box; min-width:44px; min-height:44px; align-items:center; justify-content:center; } .btn_sns_share, .sit_btn_wish, #sit_btn_wish { display:inline-flex; box-sizing:border-box; min-width:44px; min-height:44px; align-items:center; justify-content:center; } .shop-content .sct_10 .sct_btn { position:absolute; z-index:4; right:12px; bottom:12px; left:12px; margin:0; } .sct_btn .btn_cart { gap:7px; padding:8px 13px; border:1px solid var(--webon-primary); color:#fff; background:var(--webon-primary); border-radius:10px; font-weight:800; white-space:nowrap; } .shop-content .sct_10 .sct_btn .btn_cart { position:static; display:inline-flex; width:100%; min-height:44px; align-items:center; justify-content:center; gap:8px; margin:0; padding:0 14px; line-height:1; box-shadow:0 8px 20px rgba(13,39,72,.18); transform:none; } .shop-content .sct_10 .sct_btn .btn_cart .fa { flex:0 0 18px; width:18px; margin:0; font-size:15px; line-height:1; text-align:center; } .shop-content .sct_10 .sct_btn .btn_cart:hover, .shop-content .sct_10 .sct_btn .btn_cart:focus-visible { color:#fff; border-color:var(--webon-primary-dark); background:var(--webon-primary-dark); transform:none; } .sct_op_btn > button { border:1px solid var(--webon-line); color:var(--webon-primary-dark); background:#fff; border-radius:10px; } .sct_op_btn > button:hover, .sct_op_btn > button:focus-visible, .sct_op_btn > button.is-added { border-color:var(--webon-primary); color:var(--webon-primary); background:#eef4fb; } .sct_btn .btn_cart[aria-busy="true"] { cursor:wait; opacity:.62; } /* Product list view: compact information rows with stable purchase controls. */ .shop-content .sct_40 { display:grid; width:100%; gap:14px; margin:0; } .shop-content .sct_40 > .sct_li.webon-product-card { display:grid; box-sizing:border-box; width:100% !important; min-height:188px; grid-template-columns:minmax(150px,176px) minmax(0,1fr); gap:24px; align-items:stretch; margin:0; padding:16px; overflow:visible; border:1px solid var(--webon-line); background:#fff; border-radius:14px; box-shadow:0 7px 24px rgba(13,39,72,.06); } .shop-content .sct_40 > .sct_li.webon-product-card::after { display:none; } .shop-content .sct_40 .sct_img { float:none; position:relative; width:100%; min-width:0; min-height:156px; margin:0; overflow:hidden; border-radius:10px; } .shop-content .sct_40 .sct_img > a { display:block; position:relative; z-index:1; width:100%; height:100%; } .shop-content .sct_40 .sct_img img, .shop-content .sct_40 .sct_img .webon-product-visual { display:block; width:100%; height:100%; min-height:156px; aspect-ratio:1/1; object-fit:cover; } .shop-content .sct_40 .sct_img .webon-product-visual { display:flex; } .shop-content .sct_40 .sct_btn { position:absolute; z-index:4; right:10px; bottom:10px; left:10px; margin:0; } .shop-content .sct_40 .list-10-btn .sct_cart { position:static; display:inline-flex; width:100%; min-height:42px; align-items:center; justify-content:center; gap:7px; margin:0; padding:0 12px; color:#fff; border:1px solid var(--webon-primary); background:var(--webon-primary); border-radius:9px; font-size:14px; font-weight:800; line-height:1; box-shadow:0 7px 18px rgba(13,39,72,.17); transform:none; } .shop-content .sct_40 .list-10-btn .sct_cart .fa { display:inline-block; width:17px; margin:0; font-size:14px; line-height:1; } .shop-content .sct_40 .list-10-btn .sct_cart:hover, .shop-content .sct_40 .list-10-btn .sct_cart:focus-visible { color:#fff; border-color:var(--webon-primary-dark); background:var(--webon-primary-dark); transform:none; } .shop-content .sct_40 .sct_ct_wrap { display:grid; min-width:0; grid-template-columns:minmax(0,1fr) minmax(150px,190px); grid-template-rows:auto auto auto 1fr auto; gap:7px 28px; align-items:start; padding:6px 0; } .shop-content .sct_40 .sct_star, .shop-content .sct_40 .sct_id { grid-column:1; margin:0; } .shop-content .sct_40 .sct_txt { grid-column:1; margin:0; padding:0; border:0; } .shop-content .sct_40 .sct_txt a { display:block; min-height:0; font-size:16px; font-weight:800; line-height:1.45; } .shop-content .sct_40 .sct_basic { grid-column:1; min-height:0; margin:0; color:var(--webon-muted); font-size:14px; line-height:1.55; } .shop-content .sct_40 .webon-shop-meta { grid-column:1; align-self:end; margin:8px 0 0; } .shop-content .sct_40 .sct_bottom { display:flex; min-width:0; min-height:100%; grid-column:2; grid-row:1 / 6; flex-direction:column; align-items:flex-end; justify-content:center; gap:16px; padding-left:24px; border-left:1px solid #e7edf4; } .shop-content .sct_40 .sct_cost { position:static; margin:0; color:var(--webon-primary-dark); font-size:19px; line-height:1.35; text-align:right; } .shop-content .sct_40 .sct_dict { margin:3px 0 0; font-size:12px; } .shop-content .sct_40 .sct_op_btn { position:relative; right:auto; bottom:auto; justify-content:flex-end; margin:0; } .shop-content .sct_40 .sit_icon_li { grid-column:1; margin:2px 0 0; } /* Product list share menu reuses the named detail-share component. */ .shop-content .webon-list-share-menu { display:none; position:absolute; z-index:60; top:calc(100% + 9px); right:0; left:auto; box-sizing:border-box; width:196px; height:auto; padding:8px; overflow:visible; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:10px; box-shadow:0 14px 34px rgba(7,31,58,.16); text-align:left; } .shop-content .webon-list-share-menu[hidden] { display:none !important; } .shop-content .webon-list-share-menu::before, .shop-content .webon-list-share-menu::after { position:absolute; right:15px; width:0; height:0; border-style:solid; content:""; } .shop-content .webon-list-share-menu::before { top:-8px; border-width:0 7px 8px; border-color:transparent transparent var(--webon-line); } .shop-content .webon-list-share-menu::after { top:-7px; border-width:0 7px 8px; border-color:transparent transparent #fff; } .shop-content .webon-list-share-menu .webon-share-menu__item { display:grid; box-sizing:border-box; width:100%; min-height:44px; height:auto; grid-template-columns:30px minmax(0,1fr); gap:8px; align-items:center; margin:0; padding:7px 9px; color:var(--webon-primary-dark); border:0; background:transparent; border-radius:8px; font:inherit; line-height:1.35; text-align:left; cursor:pointer; } .shop-content .webon-list-share-menu .webon-share-menu__item:hover, .shop-content .webon-list-share-menu .webon-share-menu__item:focus-visible { outline:0; color:var(--webon-primary); background:var(--webon-primary-soft); } .shop-content .webon-list-share-menu .webon-share-menu__icon { display:grid; width:30px; height:30px; place-items:center; color:var(--webon-primary); background:#edf4fc; border-radius:8px; font-size:15px; line-height:1; } .shop-content .webon-list-share-menu .webon-share-menu__icon--x { font-family:Arial, sans-serif; font-size:14px; font-weight:800; } .shop-content .webon-list-share-menu .webon-share-menu__label { min-width:0; color:inherit; font-size:14px; font-weight:800; line-height:1.35; white-space:nowrap; } /* Detail, cart and checkout */ #sit_ov { position:sticky; top:24px; align-self:start; min-height:0; padding:clamp(22px,2.5vw,30px); border:1px solid var(--webon-line); background:#fff; border-radius:16px; box-shadow:0 10px 28px rgba(13,39,72,.07); } #sit_title { margin:0 0 10px; color:var(--webon-primary-dark); font-size:var(--webon-type-page); font-weight:800; line-height:var(--webon-leading-heading); letter-spacing:-.035em; word-break:keep-all; } #sit_desc { margin:0 0 14px; color:var(--webon-muted); font-size:var(--webon-type-body); line-height:1.6; } .sit_ov_tbl { color:var(--webon-muted); font-size:var(--webon-type-control); line-height:1.5; } .sit_ov_tbl th { color:var(--webon-muted); font-size:var(--webon-type-control); font-weight:700; } .sit_ov_tbl td strong { color:var(--webon-primary-dark); font-size:18px; line-height:1.4; } #sit_star_sns.webon-shop-detail-tools { display:flex; min-height:44px; align-items:center; padding-right:100px; } .webon-review-summary-link { display:inline-flex; min-height:32px; align-items:center; margin-left:8px; color:var(--webon-muted); font-size:13px; font-weight:700; line-height:1.35; text-decoration:none; white-space:nowrap; } .webon-review-summary-link:hover, .webon-review-summary-link:focus-visible { color:var(--webon-primary); text-decoration:underline; text-underline-offset:3px; } #sit_btn_opt.webon-shop-control-group, .sit_btn_opt.webon-shop-control-group { display:flex; top:0; right:0; bottom:auto; align-items:center; gap:4px; } #sit_btn_opt .webon-shop-control, .sit_btn_opt .webon-shop-control { float:none; position:relative; display:inline-flex; box-sizing:border-box; width:44px; min-width:44px; height:44px; min-height:44px; align-items:center; justify-content:center; padding:0; color:#526071; border:1px solid var(--webon-line); background:#fff; border-radius:10px; font-size:18px; line-height:1; } #sit_btn_opt button.webon-shop-control, .sit_btn_opt button.webon-shop-control { appearance:none; font:inherit; cursor:pointer; } #sit_btn_opt #btn_wish .btn_wish_num, .sit_btn_opt #btn_wish .btn_wish_num { right:2px; bottom:1px; display:grid; min-width:17px; height:17px; place-items:center; margin:0; padding:0 3px; color:#fff; background:var(--webon-primary); border-radius:999px; font-size:10px; line-height:1; } #sit_btn_opt .webon-shop-control:hover, #sit_btn_opt .webon-shop-control:focus-visible, .sit_btn_opt .webon-shop-control:hover, .sit_btn_opt .webon-shop-control:focus-visible { color:var(--webon-primary); border-color:#9bbcdf; background:var(--webon-primary-soft); } .webon-detail-wish.is-added { color:#fff !important; border-color:var(--webon-primary) !important; background:var(--webon-primary) !important; } .webon-detail-wish[aria-busy="true"] { cursor:wait; opacity:.65; } #sit_star_sns .webon-share-menu { display:none; position:absolute; z-index:100; top:calc(100% + 10px); right:0; box-sizing:border-box; width:196px; max-width:none; padding:8px; border:1px solid var(--webon-line); background:#fff; border-radius:10px; box-shadow:0 14px 34px rgba(7,31,58,.16); text-align:left; } #sit_star_sns .webon-share-menu::before { top:-8px; right:15px; border-width:0 7px 8px; border-color:transparent transparent var(--webon-line); } #sit_star_sns .webon-share-menu::after { top:-7px; right:15px; border-width:0 7px 8px; border-color:transparent transparent #fff; } #sit_star_sns .webon-share-menu .webon-share-menu__item { display:grid; box-sizing:border-box; width:100%; min-height:44px; height:auto; grid-template-columns:30px minmax(0,1fr); gap:8px; align-items:center; margin:0; padding:7px 9px; border:0; color:var(--webon-primary-dark); background:transparent; border-radius:8px; font:inherit; line-height:1.35; text-align:left; cursor:pointer; } #sit_star_sns .webon-share-menu .webon-share-menu__item:hover, #sit_star_sns .webon-share-menu .webon-share-menu__item:focus-visible { outline:0; color:var(--webon-primary); background:var(--webon-primary-soft); } #sit_star_sns .webon-share-menu__icon { display:grid; width:30px; height:30px; place-items:center; color:var(--webon-primary); background:#edf4fc; border-radius:8px; font-size:15px; line-height:1; } #sit_star_sns .webon-share-menu__icon--x { font-family:Arial, sans-serif; font-size:14px; font-weight:800; } #sit_star_sns .webon-share-menu__label { min-width:0; color:inherit; font-size:14px; font-weight:800; line-height:1.35; white-space:nowrap; } #sit_opt_added .sit_opt_list, .sit_sel_option .sit_opt_added > li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; align-items:center; padding:14px; border:1px solid var(--webon-line); background:#f8fafc; border-radius:10px; } #sit_opt_added .opt_name, .sit_sel_option .opt_name { min-width:0; color:var(--webon-primary-dark); font-weight:800; line-height:1.45; } .webon-quantity-stepper { display:grid; height:auto; grid-template-columns:44px 58px 44px minmax(64px,auto); align-items:center; justify-content:end; } .webon-quantity-stepper button, .webon-quantity-stepper .num_input { float:none; box-sizing:border-box; width:44px; height:44px; min-height:44px; margin:0; border:1px solid #bdcbe0; background:#fff; border-radius:0; text-align:center; } .webon-quantity-stepper button:first-of-type { border-radius:9px 0 0 9px; } .webon-quantity-stepper button:last-of-type { border-radius:0 9px 9px 0; } .webon-quantity-stepper .num_input { width:58px; border-inline:0; color:var(--webon-primary-dark); font-weight:800; } .webon-quantity-stepper .sit_opt_prc { float:none; width:auto; min-width:64px; margin-left:12px; padding:0; color:var(--webon-primary-dark); line-height:44px; text-align:right; font-weight:800; } #sit_ov_btn { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 54px; gap:8px; } #sit_ov_btn > * { display:flex; align-items:center; justify-content:center; } #container #sit_ov_btn > button, #container #sit_ov_btn > a { float:none; width:100%; min-width:0; margin:0; } #container .sit_btn_buy { color:#fff; border:1px solid var(--webon-primary); background:var(--webon-primary); border-radius:10px; } #container .sit_btn_buy:hover, #container .sit_btn_buy:focus-visible { color:#fff; border-color:var(--webon-primary-dark); background:var(--webon-primary-dark); } #container .sit_btn_cart { color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:10px; } #container .sit_btn_cart:hover, #container .sit_btn_cart:focus-visible { color:var(--webon-primary); border-color:var(--webon-primary); background:var(--webon-primary-soft); } #sit_ov_btn .itemform-naverpay, #sit_ov_btn .naverpay-item { grid-column:1 / -1; } #sit_tot_price { margin-top:18px; padding-top:16px; border-top:1px solid var(--webon-line); font-variant-numeric:tabular-nums; } #container #sit_info { display:grid; min-height:0; grid-template-columns:minmax(0,1fr) minmax(320px,340px); align-items:start; margin-top:28px; overflow:visible; border:1px solid var(--webon-line); background:#fff; border-radius:12px; } #container #sit_tab { min-height:0; overflow:hidden; border-radius:12px 0 0 12px; } #container #sit_tab .tab_con { padding:clamp(18px,3vw,34px); } #container #sit_buy { position:sticky; top:24px; width:auto; min-width:0; overflow:hidden; border-left:1px solid var(--webon-line); background:#fff; border-radius:0 12px 12px 0; } #container #sit_buy .sit_sel_option { height:auto; max-height:280px; overflow-y:auto; } #container #sit_buy .sit_sel_option li { grid-template-columns:minmax(0,1fr); gap:10px; align-items:start; padding:16px; border:0; border-bottom:1px solid var(--webon-line); background:#f7f9fc; border-radius:0; } #container #sit_buy .sit_sel_option .opt_name { display:block; width:100%; min-width:0; color:var(--webon-primary-dark); font-size:14px; font-weight:800; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; } #container #sit_buy .webon-quantity-stepper { width:100%; grid-template-columns:44px 58px 44px minmax(58px,1fr); justify-content:stretch; } #container #sit_buy .webon-quantity-stepper .sit_opt_prc { min-width:0; margin-left:10px; } #container #sit_buy .sum_section { padding:16px; border-top:1px solid var(--webon-line); background:#fff; } #container #sit_buy .sit_order_btn { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; } #container #sit_buy .sit_order_btn button { min-height:48px; margin:0; padding:10px 12px; border-radius:9px; } #container #sit_buy .sit_order_btn .sit_btn_buy { border-color:var(--webon-primary-dark); background:var(--webon-primary-dark); } #container #sit_buy .sit_order_btn .sit_btn_buy:hover, #container #sit_buy .sit_order_btn .sit_btn_buy:focus-visible { border-color:var(--webon-primary); background:var(--webon-primary); } #container #sit_tab { display:block; width:100%; min-width:0; } #container #sit_tab .tab_tit { display:flex; width:100%; margin:0; padding:0; overflow-x:auto; border-bottom:1px solid var(--webon-line); background:#fff; } #container #sit_tab .tab_tit li { float:none; width:auto; flex:0 0 auto; border:0; } #container #sit_tab .tab_tit li .webon-detail-tab { display:inline-flex; position:relative; box-sizing:border-box; width:auto; min-height:44px; align-items:center; justify-content:center; padding:0 16px; border:0; color:var(--webon-muted); background:#fff; font-size:14px; font-weight:700; line-height:1.2; text-decoration:none; white-space:nowrap; } #container #sit_tab .tab_tit li .webon-detail-tab.selected { color:var(--webon-primary-dark); background:var(--webon-primary-soft); } #container #sit_tab .tab_tit li .webon-detail-tab.selected::after { position:absolute; right:0; bottom:0; left:0; height:3px; background:var(--webon-primary); content:""; } #container #sit_tab .tab_tit li .webon-detail-tab:focus-visible { outline:2px solid var(--webon-primary); outline-offset:-3px; } #container #sit_tab .tab_con > li[hidden] { display:none !important; } .shop-content #sit_use_list .sit_use_top { min-height:86px; margin:0 0 18px; padding:18px 220px 18px 18px; border:1px solid var(--webon-line); background:#f7f9fc; border-radius:10px; } .shop-content #sit_use_wbtn { top:18px; right:18px; display:flex; gap:7px; } .shop-content #sit_use_wbtn a { display:inline-flex; box-sizing:border-box; min-height:44px; align-items:center; justify-content:center; margin:0; padding:8px 14px; border-radius:8px; font-size:13px; font-weight:800; line-height:1.35; } .shop-content #sit_use_wbtn .itemuse_form { color:#fff; border:1px solid var(--webon-primary-dark); background:var(--webon-primary-dark); } .shop-content #sit_use_wbtn .itemuse_form:hover, .shop-content #sit_use_wbtn .itemuse_form:focus-visible { border-color:var(--webon-primary); background:var(--webon-primary); } .shop-content #sit_use_wbtn .itemuse_list { color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; } .shop-content #sit_use_wbtn .itemuse_list:hover, .shop-content #sit_use_wbtn .itemuse_list:focus-visible { color:var(--webon-primary); border-color:var(--webon-primary); background:var(--webon-primary-soft); } .shop-content #sit_use_list .sit_empty { min-height:96px; display:flex; align-items:center; justify-content:center; margin:0; color:var(--webon-muted); background:#fff; border:1px dashed #ccd7e4; border-radius:10px; } .shop-content .sqa_section { float:none; width:100%; } #sit_opt_added button, #sit_spl_added button, #sit_ov .sit_qty_plus, #sit_ov .sit_qty_minus { min-width:44px; min-height:44px; } #sod_bsk, #sod_frm, #sod_fin { min-width:0; } #sod_bsk .tbl_head03, #sod_frm .tbl_head01 { overflow-x:auto; border:1px solid var(--webon-line); border-radius:14px; } #sod_bsk button, #sod_bsk a[class*="btn"], #sod_frm button, #sod_frm a[class*="btn"] { min-height:44px; } #sod_bsk .btn01, #sod_frm .btn01, .go_shopping .btn01 { display:inline-flex; box-sizing:border-box; min-height:44px; align-items:center; justify-content:center; padding:9px 16px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:10px; font-weight:800; } #sod_bsk .btn01:hover, #sod_bsk .btn01:focus-visible, #sod_frm .btn01:hover, #sod_frm .btn01:focus-visible, .go_shopping .btn01:hover, .go_shopping .btn01:focus-visible { color:var(--webon-primary); border-color:var(--webon-primary); background:var(--webon-primary-soft); } #sod_bsk .btn_submit, #sod_frm .btn_submit { min-height:44px; padding:9px 18px; border:0; color:#fff; background:var(--webon-primary); border-radius:10px; font-weight:800; } /* Cart: replace YoungCart's fixed legacy columns with a stable Webon purchase table. */ #sod_bsk .tbl_head03 { overflow:hidden; border-color:var(--webon-line); border-radius:14px; } #sod_bsk table { width:100%; min-width:920px; table-layout:fixed; border-collapse:separate; border-spacing:0; } #sod_bsk thead th { box-sizing:border-box; height:68px; padding:14px 10px; color:var(--webon-primary-dark); border-top:0; border-bottom:1px solid var(--webon-line); border-left:1px solid var(--webon-line); background:#f7f9fc; font-size:14px; line-height:1.35; word-break:keep-all; white-space:nowrap; } #sod_bsk thead th:first-child { width:56px; border-left:0; } #sod_bsk thead th:nth-child(3) { width:78px; } #sod_bsk thead th:nth-child(4) { width:108px; } #sod_bsk thead th:nth-child(5) { width:88px; } #sod_bsk thead th:nth-child(6) { width:92px; } #sod_bsk thead th:nth-child(7) { width:124px; } #sod_bsk tbody td { box-sizing:border-box; padding:22px 10px; border-top:0; border-bottom:1px solid var(--webon-line); border-left:1px solid var(--webon-line); color:var(--webon-text); line-height:1.5; vertical-align:middle; } #sod_bsk tbody tr:last-child td { border-bottom:0; } #sod_bsk tbody td:first-child { border-left:0; } #sod_bsk .td_prd { min-height:0; padding:24px 20px 24px 124px; white-space:normal; } #sod_bsk .td_prd .sod_img { top:24px; left:24px; display:block; width:80px; height:80px; margin:0; overflow:hidden; background:#f2f5f8; border-radius:10px; } #sod_bsk .td_prd .sod_img img { display:block; width:80px; height:80px; object-fit:cover; } #sod_bsk .td_prd .sod_name { display:flex; min-height:80px; flex-direction:column; align-items:flex-start; justify-content:center; } #sod_bsk .td_prd .prd_name { color:var(--webon-primary-dark); font-size:16px; font-weight:800; line-height:1.4; word-break:keep-all; } #sod_bsk .sod_opt { margin:8px 0 0; line-height:1.5; word-break:keep-all; } #sod_bsk .sod_opt::before, #sod_bsk .sod_opt li::before { display:inline-flex; min-height:22px; align-items:center; margin:0 6px 2px 0; padding:2px 6px; color:var(--webon-primary); background:var(--webon-primary-soft); border-radius:5px; font-size:12px; font-weight:800; line-height:1; } #sod_bsk .sod_option_btn { margin-top:11px; } #sod_bsk .sod_option_btn .mod_options { display:inline-flex; min-height:40px; align-items:center; justify-content:center; margin:0; padding:7px 12px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:8px; font-weight:700; } #sod_bsk .sod_option_btn .mod_options:hover, #sod_bsk .sod_option_btn .mod_options:focus-visible { color:var(--webon-primary); border-color:var(--webon-primary); background:var(--webon-primary-soft); } #sod_bsk .td_num, #sod_bsk .td_numbig, #sod_bsk .td_dvr { width:auto; padding-inline:10px; font-variant-numeric:tabular-nums; word-break:normal; overflow-wrap:normal; white-space:nowrap; } #sod_bsk .total_prc { display:inline-block; color:var(--webon-primary-dark); font-size:17px; line-height:1.35; font-variant-numeric:tabular-nums; word-break:normal; white-space:nowrap; } #sod_bsk .btn_cart_del { display:flex; align-items:center; gap:8px; margin:0; padding:16px; border:0; border-top:1px solid var(--webon-line); background:#f7f9fc; } #sod_bsk .btn_cart_del button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; margin:0; padding:7px 12px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:8px; font-weight:700; } #sod_bsk #sod_bsk_tot { overflow:hidden; margin:20px 0; border:1px solid var(--webon-line); background:#fff; border-radius:14px; } #sod_bsk #sod_bsk_tot ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } #sod_bsk #sod_bsk_tot li, #sod_bsk #sod_bsk_tot .sod_bsk_cnt { display:flex; float:none; width:auto; min-height:72px; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; color:var(--webon-text); border:0; border-left:1px solid var(--webon-line); background:#fff; font-size:14px; font-variant-numeric:tabular-nums; } #sod_bsk #sod_bsk_tot li:first-child { border-left:0; } #sod_bsk #sod_bsk_tot li span { float:none; color:var(--webon-muted); font-weight:700; } #sod_bsk #sod_bsk_tot li strong { color:var(--webon-primary-dark); font-size:18px; white-space:nowrap; } #sod_bsk #sod_bsk_tot .sod_bsk_cnt { color:#fff; background:var(--webon-primary-dark); } #sod_bsk #sod_bsk_tot .sod_bsk_cnt span, #sod_bsk #sod_bsk_tot .sod_bsk_cnt strong { color:#fff; } #sod_bsk #sod_bsk_tot .sod_bsk_cnt { justify-content:flex-start; gap:6px; } #sod_bsk #sod_bsk_tot .sod_bsk_cnt span { flex:0 0 116px; margin-right:2px; } #sod_bsk #sod_bsk_tot .sod_bsk_cnt strong { margin:0; } #sod_bsk_act { display:flex; align-items:center; justify-content:center; gap:10px; margin:24px 0 36px; } #sod_bsk_act p { display:contents; } #sod_bsk_act .btn01, #sod_bsk_act .btn_submit { width:auto; min-width:160px; height:auto; min-height:50px; margin:0; line-height:1.35; } /* Checkout: replace YoungCart's fixed float layout with one Webon purchase flow. */ #sod_frm.sod_frm_pc { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,360px); gap:24px; align-items:start; } #sod_frm.sod_frm_pc::after { display:none; } #sod_frm.sod_frm_pc > .od_prd_list { grid-column:1 / -1; } #forderform .sod_left, #forderform .sod_right { display:block; float:none; width:auto; min-width:0; height:auto; margin:0; } #forderform .sod_left { display:grid; gap:20px; } #forderform #sod_frm_orderer, #forderform #sod_frm_taker { overflow:hidden; margin:0; border:1px solid var(--webon-line); background:#fff; border-radius:14px; } #forderform #sod_frm_orderer > h2, #forderform #sod_frm_taker > h2 { margin:0; padding:18px 20px; color:var(--webon-primary-dark); border:0; border-bottom:1px solid var(--webon-line); background:#f7f9fc; font-size:18px; line-height:1.4; } #forderform #sod_frm_orderer > h2::before, #forderform #sod_frm_taker > h2::before { display:inline-block; width:7px; height:7px; margin:0 9px 2px 0; background:var(--webon-primary); border-radius:50%; content:""; } #forderform #sod_frm_orderer .tbl_frm01, #forderform #sod_frm_taker .tbl_frm01 { margin:0; padding:8px 18px 14px !important; overflow:visible; } #forderform #sod_frm_orderer table, #forderform #sod_frm_taker table { width:100%; border-collapse:collapse; table-layout:fixed; } #forderform #sod_frm_orderer tr, #forderform #sod_frm_taker tr { border-top:1px solid #edf1f5; } #forderform #sod_frm_orderer tr:first-child, #forderform #sod_frm_taker tr:first-child { border-top:0; } #forderform #sod_frm_orderer th, #forderform #sod_frm_taker th { width:126px; padding:15px 12px; color:var(--webon-primary-dark); border:0; background:transparent; font-size:14px; font-weight:800; line-height:1.45; vertical-align:top; } #forderform #sod_frm_orderer td, #forderform #sod_frm_taker td { padding:10px 12px; border:0; background:transparent; line-height:1.45; vertical-align:middle; } #forderform #sod_frm_orderer .frm_input, #forderform #sod_frm_taker .frm_input, #forderform #sod_frm_taker textarea, #forderform #settle_bank input, #forderform #settle_bank select { box-sizing:border-box; min-height:44px; padding:9px 12px; color:var(--webon-text); border:1px solid #cbd7e5; background:#fff; border-radius:8px; font-size:14px; line-height:1.4; } #forderform #sod_frm_orderer .frm_input:focus, #forderform #sod_frm_taker .frm_input:focus, #forderform #sod_frm_taker textarea:focus, #forderform #settle_bank input:focus, #forderform #settle_bank select:focus { border-color:var(--webon-primary); box-shadow:0 0 0 3px rgba(34,105,190,.12); outline:0; } #forderform #od_name, #forderform #od_pwd, #forderform #od_tel, #forderform #od_hp, #forderform #od_email, #forderform #od_b_name, #forderform #od_b_tel, #forderform #od_b_hp, #forderform #ad_subject, #forderform #od_hope_date { width:min(100%,520px) !important; } #forderform #od_zip, #forderform #od_b_zip { width:116px !important; vertical-align:top; } #forderform .frm_address { display:inline-block; width:100% !important; margin-top:7px; } #forderform .btn_address { display:inline-flex; width:auto !important; min-width:112px; height:44px !important; min-height:44px; align-items:center; justify-content:center; margin:0 0 0 6px; padding:8px 14px !important; color:var(--webon-primary-dark) !important; border:1px solid var(--webon-line) !important; background:#fff !important; border-radius:8px !important; font-weight:800; line-height:1.2; vertical-align:top; } #forderform .btn_address:hover, #forderform .btn_address:focus-visible { color:var(--webon-primary) !important; border-color:var(--webon-primary) !important; background:var(--webon-primary-soft) !important; } #forderform .frm_info { display:block; width:min(100%,520px); margin:0 0 7px; color:var(--webon-muted); font-size:12px; line-height:1.45; } #forderform #od_memo { width:100%; min-height:116px; resize:vertical; } #forderform .order_choice_place { display:flex; position:static; min-height:48px; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0; padding:10px 12px; border:1px solid #cbdbea; background:var(--webon-primary-soft); border-radius:9px; } #forderform .order_choice_place input[type="checkbox"], #forderform .order_choice_place input[type="radio"], #forderform #ad_default { position:static; width:18px !important; height:18px; flex:0 0 18px; margin:0; opacity:1; accent-color:var(--webon-primary); } #forderform .order_choice_place label, #forderform label[for="ad_default"] { display:inline-flex; min-height:24px; align-items:center; margin:0; color:var(--webon-primary-dark); line-height:1.4; cursor:pointer; } #forderform #order_address { position:static; float:none; width:auto; min-height:36px; margin:0 0 0 auto; padding:7px 10px; color:var(--webon-primary-dark); border:1px solid #bfd0e3; background:#fff; border-radius:7px; line-height:1.35; } #sod_frm .od_prd_list { overflow-x:auto; overflow-y:hidden; margin:0; border:1px solid var(--webon-line); background:#fff; border-radius:14px; } #sod_frm .od_prd_list table { width:100%; min-width:860px; table-layout:fixed; border-collapse:separate; border-spacing:0; } #sod_frm .od_prd_list thead th { height:60px; padding:13px 10px; color:var(--webon-primary-dark); border:0; border-bottom:1px solid var(--webon-line); border-left:1px solid var(--webon-line); background:#f7f9fc; font-size:13px; line-height:1.35; word-break:keep-all; white-space:nowrap; } #sod_frm .od_prd_list thead th:first-child { border-left:0; } #sod_frm .od_prd_list thead th:nth-child(2) { width:78px; } #sod_frm .od_prd_list thead th:nth-child(3), #sod_frm .od_prd_list thead th:nth-child(4), #sod_frm .od_prd_list thead th:nth-child(5) { width:100px; } #sod_frm .od_prd_list thead th:nth-child(6) { width:92px; } #sod_frm .od_prd_list tbody td { box-sizing:border-box; padding:20px 10px; color:var(--webon-text); border:0; border-bottom:1px solid var(--webon-line); border-left:1px solid var(--webon-line); font-variant-numeric:tabular-nums; line-height:1.45; vertical-align:middle; white-space:nowrap; } #sod_frm .od_prd_list tbody tr:last-child td { border-bottom:0; } #sod_frm .od_prd_list tbody td:first-child { border-left:0; } #sod_frm .od_prd_list .td_prd { position:relative; min-height:112px; padding:20px 18px 20px 118px; white-space:normal; } #sod_frm .od_prd_list .sod_img { position:absolute; top:16px; left:18px; display:block; width:80px; height:80px; overflow:hidden; background:#f2f5f8; border-radius:10px; } #sod_frm .od_prd_list .sod_img img { display:block; width:80px; height:80px; object-fit:cover; } #sod_frm .od_prd_list .sod_name { display:flex; min-height:72px; flex-direction:column; align-items:flex-start; justify-content:center; color:var(--webon-primary-dark); font-size:15px; line-height:1.45; } #sod_frm .od_prd_list .sod_name > b { font-size:16px; } #sod_frm .od_prd_list .sod_opt { margin:6px 0 0; color:var(--webon-text); font-size:13px; word-break:keep-all; } #sod_frm .od_prd_list .sod_opt li::before { display:inline-flex; min-height:21px; align-items:center; margin:0 6px 2px 0; padding:2px 6px; color:var(--webon-primary); background:var(--webon-primary-soft); border-radius:5px; font-size:11px; font-weight:800; line-height:1; } #sod_frm .od_prd_list .total_price { color:var(--webon-primary-dark); font-weight:900; } #forderform .sod_right { overflow:hidden; position:sticky; top:24px; align-self:start; border:1px solid var(--webon-line); background:#fff; border-radius:14px; box-shadow:0 12px 32px rgba(13,39,72,.09); } #forderform .sod_right #sod_bsk_tot { margin:0; border:0; } #forderform .sod_right #sod_bsk_tot ul { display:block; } #forderform .sod_right #sod_bsk_tot li { display:flex; float:none; width:auto; min-height:48px; height:auto; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; color:var(--webon-text); border:0; border-bottom:1px solid var(--webon-line); background:#fff; font-size:13px; font-variant-numeric:tabular-nums; line-height:1.4; text-align:right; } #forderform .sod_right #sod_bsk_tot li::before { display:none; } #forderform .sod_right #sod_bsk_tot li span { float:none; width:auto; margin:0; color:var(--webon-muted); font-weight:700; text-align:left; } #forderform .sod_right #sod_bsk_tot li strong { margin-left:auto; color:var(--webon-primary-dark); font-size:15px; white-space:nowrap; } #forderform .sod_right #sod_bsk_tot .sod_bsk_cnt { min-height:64px; color:#fff; background:var(--webon-primary-dark); } #forderform .sod_right #sod_bsk_tot .sod_bsk_cnt span, #forderform .sod_right #sod_bsk_tot .sod_bsk_cnt strong { color:#fff; } #forderform .sod_right #sod_bsk_tot .sod_bsk_cnt strong { font-size:22px; } #forderform #sod_frm_pay { margin:0; border:0; } #forderform #sod_frm_pay > h2 { position:static; width:auto; height:auto; margin:0; padding:18px 18px 12px; overflow:visible; color:var(--webon-primary-dark); border:0; font-size:18px; line-height:1.4; } #forderform #sod_frm_pay .pay_tbl { margin:0 18px; border:1px solid var(--webon-line); border-radius:9px; overflow:hidden; } #forderform #sod_frm_pay .pay_tbl table { width:100%; border-collapse:collapse; } #forderform #sod_frm_pay .pay_tbl th, #forderform #sod_frm_pay .pay_tbl td { padding:11px 12px; border:0; border-top:1px solid var(--webon-line); background:#fff; font-size:12px; line-height:1.55; } #forderform #sod_frm_pay .pay_tbl tr:first-child th, #forderform #sod_frm_pay .pay_tbl tr:first-child td { border-top:0; } #forderform #sod_frm_pay .pay_tbl th { width:86px; color:var(--webon-muted); text-align:left; } #forderform #sod_frm_pay .pay_tbl td { color:var(--webon-text); text-align:right; } #forderform #od_tot_price { display:flex; min-height:62px; align-items:center; justify-content:space-between; gap:12px; margin:14px 18px 0; padding:13px 14px; color:var(--webon-primary-dark); background:var(--webon-primary-soft); border:1px solid #c4d8ee; border-radius:9px; line-height:1.4; } #forderform #od_tot_price span { float:none; font-weight:800; } #forderform #od_tot_price strong { margin-left:auto; color:var(--webon-primary); font-size:22px; white-space:nowrap; } #forderform .od_pay_buttons_el { margin:18px 0 0; padding:18px; border:0; border-top:1px solid var(--webon-line); background:#fff; } #forderform #od_pay_sl h3 { margin:0 0 8px; color:var(--webon-primary-dark); font-size:17px; } #forderform #sod_frm_pt_alert { margin:0 0 14px; padding:10px 12px; color:var(--webon-muted); background:#f7f9fc; border-radius:8px; font-size:12px; line-height:1.55; } #forderform #sod_frm_pt_alert strong { color:var(--webon-primary-dark); } #forderform #sod_frm_paysel { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; min-width:0; } #forderform #od_pay_sl .lb_icon { display:flex; float:none; box-sizing:border-box; width:auto; min-width:0; height:54px; align-items:center; margin:0; padding:10px 10px 10px 52px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background-color:#fff; border-radius:8px; font-size:12px; font-weight:800; line-height:1.3; } #forderform #od_pay_sl input[type="radio"]:checked + .lb_icon { border-color:var(--webon-primary); background-color:var(--webon-primary-soft); box-shadow:0 0 0 2px rgba(34,105,190,.1); } #forderform #od_pay_sl input[type="radio"]:focus-visible + .lb_icon { outline:3px solid rgba(34,105,190,.28); outline-offset:2px; } #forderform #settle_bank { box-sizing:border-box; width:100%; min-width:0; margin-top:2px; padding:12px; color:var(--webon-text); background:#f7f9fc; border:1px solid var(--webon-line); border-radius:8px; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; } #forderform #settle_bank:not([style*="display:none"]):not([style*="display: none"]) { display:grid !important; grid-template-columns:minmax(0,1fr); gap:8px; } #forderform #settle_bank br { display:none; } #forderform #settle_bank label:not(.sound_only) { display:block; margin:0; color:var(--webon-primary-dark); font-weight:800; line-height:1.4; } #forderform #settle_bank input, #forderform #settle_bank select { box-sizing:border-box; width:100%; min-width:0; margin:0; } #forderform #display_pay_button { display:grid; gap:8px; margin:0; padding:16px 18px 18px; border-top:1px solid var(--webon-line); background:#fff; } #forderform #display_pay_button .btn_submit, #forderform #display_pay_button .btn01 { display:flex; width:100%; min-width:0; min-height:48px; align-items:center; justify-content:center; margin:0; border-radius:9px; font-size:15px; line-height:1.3; } #forderform #display_pay_button .btn01 { color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; } #forderform #display_pay_process { padding:18px; text-align:center; } /* Cart option editor: centered, responsive and visually connected to the cart. */ #sod_bsk_list #mod_option_frm { z-index:1201; position:fixed; top:50%; left:50%; width:min(560px,calc(100vw - 32px)); height:auto !important; max-height:min(720px,calc(100dvh - 32px)); margin:0; overflow-x:hidden; overflow-y:auto; border:0; background:#fff; border-radius:16px; box-shadow:0 24px 70px rgba(4,20,40,.28); transform:translate(-50%,-50%); } #sod_bsk_list .mod_option_bg { z-index:1200; background:rgba(7,24,45,.58); } #mod_option_frm h2 { min-height:62px; margin:0; padding:17px 64px 17px 20px; color:var(--webon-primary-dark); border-bottom:1px solid var(--webon-line); font-size:20px; line-height:1.4; } #mod_option_frm .option_wr { padding:20px 20px 0; } #mod_option_frm .option_wr h3, #mod_option_frm #sit_sel_option > h3 { margin:0 0 10px; color:var(--webon-primary-dark); font-size:15px; } #mod_option_frm .option_wr select { height:44px; padding-inline:12px; border-color:var(--webon-line); background:#fff; border-radius:8px; } #mod_option_frm #sit_sel_option { margin:18px 20px 0; } #mod_option_frm #sit_opt_added li { display:grid; min-height:0; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin:0 0 10px; padding:14px; border:1px solid var(--webon-line); background:#f7f9fc; border-radius:10px; } #mod_option_frm #sit_opt_added li .opt_name { min-width:0; color:var(--webon-primary-dark); line-height:1.4; word-break:keep-all; } #mod_option_frm #sit_opt_added li .opt_count { display:grid; grid-template-columns:44px 58px 44px minmax(68px,auto) 36px; align-items:center; } #mod_option_frm #sit_opt_added button { float:none; width:44px; min-width:44px; height:44px; min-height:44px; color:var(--webon-primary-dark); border-color:var(--webon-line); background:#fff; } #mod_option_frm #sit_opt_added .num_input { float:none; width:58px; height:44px; border:1px solid var(--webon-line); border-inline:0; background:#fff; text-align:center; } #mod_option_frm #sit_opt_added .sit_opt_prc { float:none; width:auto; min-width:68px; padding:0 8px; color:var(--webon-primary-dark); line-height:44px; font-size:14px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } #mod_option_frm #sit_opt_added .sit_opt_del { position:static; width:36px; min-width:36px; height:36px; min-height:36px; margin-left:4px; color:#8f271e; border:0; background:transparent; border-radius:8px; } #mod_option_frm #sit_tot_price { display:flex; float:none; min-height:66px; align-items:center; justify-content:space-between; margin:8px 20px 16px; padding:16px 0 0; color:var(--webon-primary-dark); border-top:1px solid var(--webon-line); font-size:15px; font-variant-numeric:tabular-nums; } #mod_option_frm #sit_tot_price strong { font-size:26px; white-space:nowrap; } #mod_option_frm .btn_confirm { display:flex; float:none; justify-content:flex-end; margin:0; padding:0 20px 20px; background:transparent; } #mod_option_frm .btn_confirm .btn_submit { width:auto; min-width:120px; height:auto; min-height:46px; padding:9px 20px; color:#fff; border:0; background:var(--webon-primary); border-radius:9px; font-size:15px; font-weight:800; } #mod_option_frm .btn_confirm .btn_close { top:9px; right:9px; display:grid; width:44px; height:44px; min-height:44px; place-items:center; color:var(--webon-primary-dark); border:0; background:#eef3f8; border-radius:50%; } #mod_option_frm .btn_confirm .btn_close:hover, #mod_option_frm .btn_confirm .btn_close:focus-visible { color:var(--webon-primary); background:var(--webon-primary-soft); } /* My Page family: one shared account, order and saved-product visual system. */ #smb_my { display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; margin-bottom:40px; } #smb_my::after { display:none; } #smb_my_list { float:none; width:auto; min-width:0; } #smb_my_ov { float:none; width:auto; margin:0; grid-row:1 / span 2; overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(13,39,72,.06); } #smb_my_ov .my_ov_name { display:flex; min-height:96px; align-items:center; justify-content:center; gap:10px; padding:18px; color:var(--webon-primary-dark); border-bottom:1px solid var(--webon-line); font-size:17px; } #smb_my_ov .my_ov_name img { width:46px; height:46px; border-radius:50%; } #smb_my_ov .smb_me { padding:20px 16px; border-bottom:1px solid var(--webon-line); background:#fff; } #smb_my_ov .smb_me .my_ov_name { margin:0 0 10px; line-height:1.45; } #smb_my_ov .smb_me a { display:inline-flex; height:auto; min-height:36px; align-items:center; justify-content:center; margin:0 2px; padding:6px 10px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:7px; font-size:12px; font-weight:700; line-height:1.2; } #smb_my_ov .smb_me a.smb_info { color:var(--webon-primary); border-color:#b8d3f3; background:var(--webon-primary-soft); } #smb_my_ov .cou_pt { display:grid; grid-template-columns:1fr 1fr; margin:0; padding:0; } #smb_my_ov .cou_pt dt, #smb_my_ov .cou_pt dd { float:none; width:auto; margin:0; padding:10px 14px; border-bottom:1px solid var(--webon-line); } #smb_my_ov .cou_pt dt { color:var(--webon-muted); background:#f7f9fc; font-size:13px; font-weight:700; } #smb_my_ov .cou_pt dd { color:var(--webon-primary-dark); text-align:right; font-variant-numeric:tabular-nums; } #smb_my_act { padding:14px; } #smb_my_act ul { display:grid; grid-template-columns:1fr; gap:7px; } #smb_my_act li { float:none; width:auto; } #smb_my_act a { display:flex; min-height:42px; align-items:center; justify-content:center; padding:8px 10px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:8px; font-weight:700; } #smb_private { padding:10px 0; } #smb_private li { margin:0; } #smb_private li a { display:flex; min-height:42px; align-items:center; gap:10px; padding:8px 16px; color:var(--webon-text); } #smb_private li a:hover, #smb_private li a:focus-visible { color:var(--webon-primary); background:var(--webon-primary-soft); } #smb_private li .fa { width:18px; color:#6f8196; text-align:center; } #smb_private li strong, #smb_private .win_point strong, #smb_private .win_memo strong, #smb_private .win_scrap strong, #smb_private .win_coupon strong { display:inline-flex; position:static; width:auto; min-width:22px; height:22px; align-items:center; justify-content:center; margin-left:auto; padding:0 6px; color:var(--webon-primary); background:var(--webon-primary-soft); border-radius:999px; font-size:11px; line-height:1; } #smb_my_ov h3 { padding:16px 18px 8px; color:var(--webon-primary-dark); border-top:1px solid var(--webon-line); font-size:15px; } #smb_my_ov .op_area { padding:0 18px 12px; color:var(--webon-text); } #smb_my_ov .op_area dt { color:var(--webon-muted); } #smb_my_ov .op_area dd { overflow-wrap:anywhere; } #smb_my_ov .my_ov_btn { border-top:1px solid var(--webon-line); } #smb_my_ov .btn_op_area { width:100%; min-height:44px; border:0; color:var(--webon-primary-dark); background:#f7f9fc; } #smb_my_od, #smb_my_wish { position:relative; min-width:0; margin:0; } #smb_my_od h2, #smb_my_wish h2 { margin:0 0 14px; padding:0 90px 12px 0; color:var(--webon-primary-dark); border-bottom:1px solid var(--webon-line); font-size:20px; } .smb_my_more { top:0; right:0; } .smb_my_more a { display:inline-flex; min-height:36px; align-items:center; padding:6px 10px; color:var(--webon-primary); background:none; border-radius:8px; font-weight:800; } #smb_my_od .tbl_wrap, #sod_v .tbl_wrap, #sod_fin .tbl_wrap { overflow-x:auto; border:1px solid var(--webon-line); background:#fff; border-radius:12px; } #smb_my_od table, #sod_v table { width:100%; min-width:820px; border-collapse:separate; border-spacing:0; } #smb_my_od th, #sod_v th, #sod_fin_list th { padding:14px 10px; color:var(--webon-primary-dark); border-color:var(--webon-line); background:#f7f9fc; font-size:13px; word-break:keep-all; white-space:nowrap; } #smb_my_od td, #sod_v td, #sod_fin_list td { padding:14px 10px; border-color:var(--webon-line); font-variant-numeric:tabular-nums; word-break:normal; white-space:nowrap; } #smb_my_od td a, #sod_v td a { color:var(--webon-primary); } #smb_my_wish .list_02 ul, #smb_my_wish form > ul, #sod_ws .list_02 ul { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } #smb_my_wish .list_02 li, #smb_my_wish form > ul > li, #sod_ws .list_02 li { float:none; min-width:0; margin:0; padding:14px; border:1px solid var(--webon-line); background:#fff; border-radius:12px; } #smb_my_wish .smb_my_img, #sod_ws .sod_ws_img { float:none; width:100%; margin:0 0 12px; overflow:hidden; background:#f2f5f8; border-radius:9px; text-align:center; } #smb_my_wish .smb_my_img img, #sod_ws .sod_ws_img img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; } #smb_my_wish .smb_my_tit { margin:0 0 8px; color:var(--webon-primary-dark); font-size:15px; line-height:1.45; word-break:keep-all; } #smb_my_wish .smb_my_date { color:var(--webon-muted); font-size:12px; font-variant-numeric:tabular-nums; } #smb_my_wish .empty_li { grid-column:1 / -1; min-height:120px; display:flex; align-items:center; justify-content:center; border-style:dashed; background:#f7f9fc; } #smb_ws_act { display:flex; justify-content:center; gap:8px; margin:18px 0 0; } #smb_ws_act .btn01, #smb_ws_act .btn02 { display:inline-flex; width:auto; min-width:150px; min-height:46px; align-items:center; justify-content:center; margin:0; border-radius:9px; font-weight:800; } #smb_ws_act .btn01 { color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; } #smb_ws_act .btn02 { color:#fff; border:1px solid var(--webon-primary); background:var(--webon-primary); } #sod_ws .wish_info { min-height:70px; margin:0; padding:4px 34px 4px 30px; border:0; } #sod_ws li .info_link { margin:0 0 6px; color:var(--webon-primary-dark); line-height:1.4; white-space:normal; word-break:keep-all; } #sod_ws li .info_date { color:var(--webon-muted); font-size:12px; } #sod_ws li .wish_chk { top:2px; } #sod_ws li .wish_del { top:0; width:34px; height:34px; line-height:34px; color:#8f271e; background:#f8eceb; border-radius:8px; } #sod_ws_act { display:flex; justify-content:center; gap:10px; margin:24px 0 36px; } #sod_ws_act button { width:auto; min-width:170px; min-height:50px; height:auto; margin:0; border-radius:9px; } #sod_fin_no { margin-bottom:18px; padding:16px 18px; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:var(--webon-primary-soft); border-radius:12px; } #sod_fin_list .tbl_wrap { margin-bottom:14px; } #sod_fin_list table { min-width:880px; border-collapse:separate; border-spacing:0; } #sod_fin .sod_left { width:calc(100% - 360px); margin-right:20px; } #sod_fin .sod_right { width:340px; } #sod_fin_pay, #sod_fin .sod_left .tbl_head01, #sod_bsk_tot2 { overflow:hidden; border-color:var(--webon-line); border-radius:12px; } #sod_fin_pay h3, #sod_fin .sod_left h3 { color:var(--webon-primary-dark); border-color:var(--webon-line); background:#f7f9fc; } #sod_fin .sod_left th { color:var(--webon-muted); background:#f7f9fc; } #sod_fin_tot li { color:var(--webon-text); border-color:var(--webon-line); background:#fff; } #sod_fin_tot li strong { color:var(--webon-primary-dark); font-variant-numeric:tabular-nums; } .sod_right { position:sticky; top:24px; align-self:start; border:1px solid var(--webon-line); background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(13,39,72,.08); } .sod_empty, .sct_noitem { min-height:150px; padding:54px 22px; border:1px dashed var(--webon-line); color:var(--webon-muted); background:#f7f9fc; border-radius:16px; text-align:center; } .webon-dialog-open { overflow:hidden; } .review_detail_cnt { position:fixed !important; z-index:1100 !important; inset:0 !important; display:none; box-sizing:border-box; width:100% !important; height:100% !important; padding:clamp(14px,4vw,36px); overflow-y:auto; background:rgba(7,24,45,.58); } .review_detail_in { position:relative !important; top:auto !important; left:auto !important; width:min(100%,680px) !important; max-height:none !important; margin:clamp(24px,8vh,80px) auto !important; overflow:visible !important; border:0 !important; background:#fff; border-radius:16px !important; box-shadow:0 24px 70px rgba(4,20,40,.28); } .review_detail_in .rd_cls { position:absolute; top:10px; right:10px; display:grid; width:44px; height:44px; place-items:center; border:0; color:var(--webon-primary-dark); background:#eef3f8; border-radius:50%; } .review_detail_in h3 { padding-right:54px; } /* Shop support lists: share the same search, card and empty-state language. */ #container #sqa_sch, #container #sps_sch { display:flex; align-items:center; gap:8px; margin:0 0 22px; padding:16px; border:1px solid var(--webon-line); background:#f7f9fc; border-radius:14px; } #container #sqa_sch select, #container #sps_sch select { float:none; width:180px; height:44px; margin:0; padding-inline:12px; border:1px solid var(--webon-line); background:#fff; border-radius:9px; } #container #sqa_sch .sch_wr, #container #sps_sch .sch_wr { display:flex; width:min(100%,420px); height:44px; margin:0; overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:9px; } #container #sqa_sch .sch_input, #container #sps_sch .sch_input { float:none; width:100%; min-width:0; height:42px; padding:0 13px; } #container #sqa_sch .sch_btn, #container #sps_sch .sch_btn { display:grid; float:none; width:44px; min-width:44px; height:42px; place-items:center; border:0; color:#fff; background:var(--webon-primary); } #container #sqa_sch > a, #container #sps_sch > a { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 15px; border:1px solid var(--webon-line); color:var(--webon-primary-dark); background:#fff; border-radius:9px; font-weight:800; line-height:1; } #container #sqa ol, #container #sps ol { display:grid; gap:12px; } #container #sqa li, #container #sps li { overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:14px; box-shadow:0 6px 20px rgba(13,39,72,.05); } #container #sqa_empty, #container #sps_empty { min-height:150px; margin:0; padding:58px 20px; border:1px dashed var(--webon-line); color:var(--webon-muted); background:#f7f9fc; border-radius:14px; text-align:center; } #container .sqa_con_btn button, #container .sps_con_btn button.review_detail { display:inline-flex; min-height:40px; align-items:center; justify-content:center; padding:8px 13px; border:1px solid var(--webon-line); color:var(--webon-primary-dark); background:#fff; border-radius:999px; font-weight:700; } .shop-content :where(a,button,input,select,textarea):focus-visible, .webon-commerce-links a:focus-visible { outline:3px solid rgba(34,105,190,.34); outline-offset:2px; } .webon-shop-toast { position:fixed; z-index:1400; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); display:grid; width:min(430px, calc(100vw - 40px)); grid-template-columns:36px minmax(0,1fr) auto 36px; gap:10px; align-items:center; padding:12px; visibility:hidden; color:#fff; background:var(--webon-primary-dark); border:1px solid rgba(255,255,255,.2); border-radius:12px; box-shadow:0 18px 44px rgba(5,22,42,.28); opacity:0; transform:translateY(14px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; } .webon-shop-toast.is-visible { visibility:visible; opacity:1; transform:translateY(0); } .webon-shop-toast[data-tone="error"] { background:#8f271e; } .webon-shop-toast[data-tone="error"] .webon-shop-toast__icon .fa::before { content:"\f12a"; } .webon-shop-toast[data-tone="progress"] .webon-shop-toast__icon .fa::before { content:"\f110"; } .webon-shop-toast[data-tone="progress"] .webon-shop-toast__icon .fa { animation:webon-shop-spin .9s linear infinite; } .webon-shop-toast__icon { display:grid; width:36px; height:36px; place-items:center; color:#fff; background:rgba(255,255,255,.13); border-radius:9px; } .webon-shop-toast__message { min-width:0; font-weight:800; line-height:1.45; word-break:keep-all; } .webon-shop-toast__action { display:inline-flex; min-height:36px; align-items:center; padding:7px 10px; color:var(--webon-primary-dark); background:#fff; border-radius:8px; font-size:13px; font-weight:900; white-space:nowrap; } .webon-shop-toast__close { display:grid; width:36px; height:36px; place-items:center; color:#fff; border:0; background:transparent; border-radius:8px; } .webon-shop-toast__close:hover, .webon-shop-toast__close:focus-visible { background:rgba(255,255,255,.14); } @keyframes webon-shop-spin { to { transform:rotate(360deg); } } /* The quick rail needs dedicated outer space; hide it before that space exists. */ @media (max-width:1500px) { #side_menu { display:none; } } @media (max-width:1024px) { #container { grid-template-columns:1fr; } #container #aside { display:none; } #side_menu { display:none; } #hd.webon-shop-header #hd_wrapper { display:flex; } #hd.webon-shop-header .hd_sch_wr { display:none; } #hd_menu #menu_open { width:180px; } #ft_wr { grid-template-columns:repeat(2,minmax(0,1fr)); } #ft_wr.is-footer-notice-empty { grid-template-columns:repeat(2,minmax(0,1fr)); } #ft_wr.is-footer-notice-empty #visit { grid-column:1 / -1; } .webon-shop-home__categories { grid-template-columns:repeat(2,minmax(0,1fr)); } .shop-content .sct_10.lists-row, .webon-shop-home__catalog .webon-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .webon-shop-home__support { grid-template-columns:1fr 1fr; } .webon-shop-home__support > div:last-child { grid-column:1/-1; } #smb_my { grid-template-columns:minmax(0,1fr); } #smb_my_ov { grid-row:auto; } #smb_my_wish .list_02 ul, #smb_my_wish form > ul, #sod_ws .list_02 ul { grid-template-columns:repeat(3,minmax(0,1fr)); } #sod_frm.sod_frm_pc { grid-template-columns:minmax(0,1fr); } #sod_frm.sod_frm_pc > .od_prd_list { grid-column:1; } #forderform .sod_right { position:static; } #sod_fin .sod_left, #sod_fin .sod_right { float:none; width:100%; margin:0 0 20px; } } @media (max-width:768px) { #hd.webon-shop-header #tnb { display:block; } #hd.webon-shop-header #tnb .inner { min-height:38px; justify-content:flex-end; } #hd.webon-shop-header #tnb #hd_define, #hd.webon-shop-header #tnb .webon-commerce-links { display:none; } #hd.webon-shop-header #tnb .webon-utility__actions { width:100%; justify-content:flex-end; } #hd.webon-shop-header #tnb .webon-account--utility { padding-left:0; border-left:0; } #hd.webon-shop-header #hd_wrapper { display:flex; min-height:70px; gap:14px; } #hd_wrapper #logo { min-width:0; flex:1 1 auto; } .webon-shop-brand { width:100%; max-width:100%; min-width:0; font-size:16px; } .webon-shop-brand__mark { flex:0 0 38px; width:38px; height:38px; } .webon-shop-brand > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hd_sch_wr { display:none; } #hd_wrapper .hd_login { flex:0 0 auto; margin-left:auto; white-space:nowrap; } #hd_wrapper .hd_login > li.login a { display:flex;min-height:40px;align-items:center;padding:8px 10px;white-space:nowrap; } .webon-shop-menu-shell { position:relative; width:100%; } #hd_menu { box-sizing:border-box;overflow-x:auto;width:100%;min-height:52px;padding-inline:var(--webon-gutter);overscroll-behavior-x:contain;-ms-overflow-style:none;scrollbar-width:none;touch-action:pan-x pan-y; } #hd_menu::-webkit-scrollbar { display:none; } #hd.webon-shop-header #hd_menu { display:flex; min-height:52px; grid-template-columns:none; } #hd.webon-shop-header #hd_menu button#menu_open { flex:0 0 auto;width:auto;height:auto;min-height:52px;padding-inline:18px;white-space:nowrap; } #hd.webon-shop-header #hd_menu .hd_menu { display:flex; width:max-content; flex:none; justify-content:flex-start; gap:22px; padding-block:0; padding-inline:18px 92px; } #hd.webon-shop-header #hd_menu .hd_menu a { min-height:52px; padding:0; border-right:0; white-space:nowrap; } .webon-shop-menu-shell.is-scrollable .webon-shop-menu-hint { position:absolute;z-index:2;inset-inline-end:0;top:1px;bottom:1px;display:flex;width:88px;align-items:center;justify-content:flex-end;padding-inline-end:12px;color:var(--webon-primary-dark);background:linear-gradient(90deg,rgba(255,255,255,0),#fff 34%);font-size:12px;font-weight:800;line-height:1;pointer-events:none;transition:opacity .2s ease,visibility .2s ease; } .webon-shop-menu-shell.is-scrollable .webon-shop-menu-hint::after { margin-left:5px;content:"\203A";font-size:20px;line-height:1; } .webon-shop-menu-shell.is-scroll-end .webon-shop-menu-hint { visibility:hidden;opacity:0; } #hd_menu.is-scrollable:not(.is-scroll-end) { box-shadow:inset -24px 0 18px -22px rgba(13,39,72,.46); } #hd_menu.is-scrollable:not(.is-scroll-start) { box-shadow:inset 24px 0 18px -22px rgba(13,39,72,.35); } #hd_menu.is-scrollable:not(.is-scroll-start):not(.is-scroll-end) { box-shadow:inset 24px 0 18px -22px rgba(13,39,72,.35),inset -24px 0 18px -22px rgba(13,39,72,.46); } .webon-shop-menu-shell:dir(rtl) .webon-shop-menu-hint { background:linear-gradient(270deg,rgba(255,255,255,0),#fff 34%); } .webon-shop-menu-shell:dir(rtl) .webon-shop-menu-hint::after { margin-right:5px;margin-left:0;content:"\2039"; } #hd_menu:dir(rtl).is-scrollable:not(.is-scroll-end) { box-shadow:inset 24px 0 18px -22px rgba(13,39,72,.46); } #hd_menu:dir(rtl).is-scrollable:not(.is-scroll-start) { box-shadow:inset -24px 0 18px -22px rgba(13,39,72,.35); } #hd_menu:dir(rtl).is-scrollable:not(.is-scroll-start):not(.is-scroll-end) { box-shadow:inset -24px 0 18px -22px rgba(13,39,72,.35),inset 24px 0 18px -22px rgba(13,39,72,.46); } #container { padding-block:20px 52px; } #wrapper.is_shop_index #container { padding-top:0; } #wrapper_title { margin-bottom:20px; } .webon-shop-home__hero { grid-template-columns:1fr; padding:28px 22px; border-radius:18px; } .webon-shop-home__copy h1 { font-size:36px; } .webon-shop-home__copy p { font-size:15px; } .webon-shop-ticket { width:min(100%,320px); margin-inline:auto; transform:none; } .webon-shop-home__services { grid-template-columns:repeat(2,minmax(0,1fr)); } .webon-shop-home__services a { min-height:70px; justify-content:flex-start; border-bottom:1px solid var(--webon-line); } .webon-shop-home__services a:nth-child(2) { border-right:0; } .webon-shop-home__services a:nth-last-child(-n+2) { border-bottom:0; } .webon-shop-home__categories { grid-template-columns:repeat(2,minmax(0,1fr)); } .webon-shop-home__categories a { min-height:64px; } .webon-shop-home__empty { grid-template-columns:48px minmax(0,1fr); gap:15px; } .webon-shop-home__empty > .fa { width:48px; height:48px; } .webon-shop-home__empty > a { grid-column:1/-1; } .sct_wrap .sctrl { display:none; } #ft { padding:28px 0 18px; } #ft_wr { grid-template-columns:1fr; gap:22px; } #ft_wr.is-footer-notice-empty { grid-template-columns:minmax(0,1fr); } #ft_wr.is-footer-notice-empty #visit { grid-column:auto; } #ft_link { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12); } #ft_link a { line-height:1.5; font-size:13px; } #ft_company h2, #visit h2 { margin:0 0 10px; font-size:18px; line-height:1.35; } #ft_company .webon-footer-company { gap:10px; margin-top:0; font-size:13px; line-height:1.55; } #ft_company .webon-footer-company__facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; } #ft_company .webon-footer-company__facts > div { gap:6px; } #ft_company .webon-footer-company__locations { gap:3px 8px; } #sidx_lat { margin-top:0; } #sidx_lat .notice { padding:0; } #sidx_lat .notice h2 { margin-bottom:8px; } #sidx_lat .notice li a { padding:7px 0; } #visit { padding-top:18px; border-top:1px solid rgba(255,255,255,.12); } #visit dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 8px; padding:0; } #visit dt, #visit dd { float:none; width:auto; height:auto; padding:0; line-height:22px; } #visit dt { white-space:nowrap; } #visit dt span { width:4px; height:4px; margin-right:6px; } #visit dd { text-align:right; } #ft_copy { padding:16px 0 0; font-size:12px; line-height:1.5; } #container #sit_ov_wrap { grid-template-columns:minmax(0,1fr); } #container #sit_ov_wrap { padding:18px 0 28px; } #container #sit_pvi, #container #sit_ov { float:none; width:100%; } #container #sit_info { display:grid; width:100%; grid-template-columns:minmax(0,1fr); } #container #sit_tab { display:block; width:100%; border-left:0; border-radius:12px; } #container #sit_buy { display:none; } #sit_tab .tab_tit { display:flex; width:100%; overflow-x:auto; border-bottom:1px solid var(--webon-line); background:#fff; } #sit_tab .tab_tit li { float:none; width:auto; flex:1 0 auto; border:0; } #sit_tab .tab_tit li .webon-detail-tab { display:flex; position:relative; box-sizing:border-box; width:100%; min-height:44px; align-items:center; justify-content:center; padding:0 14px; color:var(--webon-muted); background:#fff; font-size:13px; font-weight:700; line-height:1.2; text-decoration:none; white-space:nowrap; } #sit_tab .tab_tit li .webon-detail-tab.selected { color:var(--webon-primary-dark); background:var(--webon-primary-soft); } #sit_tab .tab_tit li .webon-detail-tab.selected::after { position:absolute; right:0; bottom:0; left:0; height:3px; background:var(--webon-primary); content:""; } #sit_tab .tab_con > li[hidden] { display:none !important; } .shop-content #sit_use_list .sit_use_top { min-height:0; padding:16px; } .shop-content #sit_use_wbtn { position:static; display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; } #container .review_detail_in { left:50%; width:min(590px, calc(100vw - 28px)); margin-left:0; transform:translateX(-50%); } .webon-commerce-links { overflow-x:auto; } .webon-commerce-links ul { display:flex; width:max-content; min-width:100%; padding-inline:var(--webon-gutter); } .webon-commerce-links li { flex:1 0 auto; } .webon-commerce-links a { padding-inline:16px; } #sct_sortlst { min-height:60px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 9px; } #sct_sort { position:relative; gap:0; } #sct_sort h2 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } #sct_sort .btn_sort { display:flex; min-height:44px; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--webon-line); background:#fff; border-radius:9px; font-weight:800; } #sct_sort #ssch_sort { display:none; overflow:hidden; position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:190px; padding:6px; border:1px solid var(--webon-line); background:#fff; border-radius:12px; box-shadow:0 12px 30px rgba(13,39,72,.16); } #sct_sort #ssch_sort li, #sct_sort #ssch_sort a { width:100%; } .webon-catalog-view { padding-left:10px; } #container #sct_location { position:relative; top:auto; right:auto; justify-content:flex-start; margin:-8px 0 16px; } #container #sct_location .menulist { right:auto; left:0; width:min(320px, calc(100vw - 32px)); min-width:0; max-height:min(360px, calc(100vh - 112px)); } #container #sct_location .menulist ul.wide { display:block !important; width:100%; min-height:0; } #container #sct_location .menulist ul.left-border { border-top:1px solid var(--webon-line); border-left:0; } .shop-content .sct_40 > .sct_li.webon-product-card { min-height:154px; grid-template-columns:128px minmax(0,1fr); gap:16px; padding:13px; } .shop-content .sct_40 .sct_img, .shop-content .sct_40 .sct_img img, .shop-content .sct_40 .sct_img .webon-product-visual { min-height:128px; } .shop-content .sct_40 .sct_ct_wrap { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:6px; padding:2px 0; } .shop-content .sct_40 .sct_star, .shop-content .sct_40 .sct_id, .shop-content .sct_40 .sct_txt, .shop-content .sct_40 .sct_basic, .shop-content .sct_40 .webon-shop-meta, .shop-content .sct_40 .sit_icon_li { grid-column:1; } .shop-content .sct_40 .sct_bottom { min-height:0; grid-column:1; grid-row:auto; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; padding:9px 0 0; border-top:1px solid #e7edf4; border-left:0; } .shop-content .sct_40 .sct_cost { font-size:17px; text-align:left; } .shop-content .sct_40 .webon-shop-meta { align-self:auto; margin:3px 0; } .shop-content .sct_10, .shop-content .sct_10.lists-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; } .shop-content .sct_10 .sct_li, .shop-content .sct_10.lists-row > .sct_li { float:none; width:auto !important; margin:0; padding:0; } .shop-content .sct_10 .sct_ct_wrap { padding:14px; } .shop-content .sct_10 .sct_basic { min-height:0; } .webon-shop-home__catalog .webon-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .webon-shop-home__catalog .webon-product-card__content { padding:13px; } .webon-shop-home__catalog .webon-product-card__name a { min-height:42px; font-size:14px; } .webon-shop-home__catalog .webon-product-card__price { font-size:16px; } .webon-shop-home__catalog .sct_basic { display:none; } .webon-shop-home__catalog .sct_btn .btn_cart { width:100%; } .webon-shop-home__support { grid-template-columns:1fr; } .webon-shop-home__support > div:last-child { grid-column:auto; } #ssch_frm .ssch_scharea { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; } #ssch_frm .ssch_scharea .ssch_input { width:100%; min-width:0; margin:0; } #ssch_frm .ssch_scharea .btn_submit { width:auto; min-width:88px; margin:0; } #sit_ov, .sod_right { position:static; } #sit_star_sns.webon-shop-detail-tools { padding-right:96px; } #sit_opt_added .sit_opt_list { grid-template-columns:minmax(0,1fr); } .webon-quantity-stepper { justify-content:start; } #sit_ov_btn { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 52px; } .webon-shop-home__banner img { height:clamp(220px,62vw,320px); } #container #sqa_sch, #container #sps_sch { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:14px; } #container #sqa_sch select, #container #sps_sch select, #container #sqa_sch .sch_wr, #container #sps_sch .sch_wr { width:100%; } #container #sqa_sch select, #container #sps_sch select { grid-column:1 / -1; } #container #sqa_sch > a, #container #sps_sch > a { min-width:88px; } /* Cart rows become labeled cards instead of forcing a compressed table. */ #sod_bsk .tbl_head03 { overflow:visible; border:0; border-radius:0; } #sod_bsk table, #sod_bsk thead, #sod_bsk tbody { display:block; width:100%; min-width:0; } #sod_bsk thead tr { display:block; margin:0 0 10px; border:1px solid var(--webon-line); background:#f7f9fc; border-radius:10px; } #sod_bsk thead th { display:none; } #sod_bsk thead th:first-child { display:flex; width:100%; min-height:46px; height:auto; align-items:center; justify-content:flex-start; padding:10px 14px; border:0; background:transparent; } #sod_bsk tbody { display:grid; gap:12px; } #sod_bsk tbody tr { display:grid; position:relative; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:12px; } #sod_bsk tbody td { display:flex; width:auto; min-height:44px; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border:0; border-top:1px solid var(--webon-line); border-left:1px solid var(--webon-line); text-align:right; white-space:nowrap; } #sod_bsk tbody td:nth-child(odd) { border-left:0; } #sod_bsk tbody .td_chk { position:absolute; z-index:2; top:21px; left:14px; display:block; width:30px; min-height:30px; padding:0; border:0; } #sod_bsk tbody .td_prd { display:block; grid-column:1 / -1; min-height:116px; padding:18px 14px 18px 126px; border-top:0; border-left:0; text-align:left; white-space:normal; } #sod_bsk .td_prd .sod_img { top:18px; left:48px; width:64px; height:64px; } #sod_bsk .td_prd .sod_img img { width:64px; height:64px; } #sod_bsk .td_prd .sod_name { min-height:80px; justify-content:flex-start; } #sod_bsk .td_prd .prd_name { font-size:16px; } #sod_bsk tbody td:nth-child(3)::before { content:"총수량"; } #sod_bsk tbody td:nth-child(4)::before { content:"판매가"; } #sod_bsk tbody td:nth-child(5)::before { content:"포인트"; } #sod_bsk tbody td:nth-child(6)::before { content:"배송비"; } #sod_bsk tbody td:nth-child(7)::before { content:"소계"; } #sod_bsk tbody td:nth-child(n+3)::before { color:var(--webon-muted); font-size:12px; font-weight:700; } #sod_bsk tbody td:nth-child(7) { color:var(--webon-primary-dark); font-weight:800; } #sod_bsk tbody .empty_table { display:flex; min-height:140px; grid-column:1 / -1; align-items:center; justify-content:center; border:0; text-align:center; } #sod_bsk tbody .empty_table::before { display:none; } #sod_bsk .btn_cart_del { margin-top:12px; padding:12px; border:1px solid var(--webon-line); background:#f7f9fc; border-radius:10px; } #sod_bsk #sod_bsk_tot ul { grid-template-columns:minmax(0,1fr); } #sod_bsk #sod_bsk_tot li, #sod_bsk #sod_bsk_tot .sod_bsk_cnt { min-height:56px; padding:14px 16px; border-left:0; border-top:1px solid var(--webon-line); } #sod_bsk #sod_bsk_tot li:first-child { border-top:0; } #sod_bsk_act { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } #sod_bsk_act .btn01, #sod_bsk_act .btn_submit { width:100%; min-width:0; } /* The order product list uses the same labeled-card pattern as the cart. */ #sod_frm.sod_frm_pc { gap:16px; } #sod_frm .od_prd_list { overflow:visible; border:0; border-radius:0; } #sod_frm .od_prd_list table, #sod_frm .od_prd_list thead, #sod_frm .od_prd_list tbody { display:block; width:100%; min-width:0; } #sod_frm .od_prd_list thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } #sod_frm .od_prd_list tbody { display:grid; gap:12px; } #sod_frm .od_prd_list tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:12px; } #sod_frm .od_prd_list tbody td { display:flex; width:auto; min-height:44px; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; border:0; border-top:1px solid var(--webon-line); border-left:1px solid var(--webon-line); text-align:right; white-space:nowrap; } #sod_frm .od_prd_list tbody td:nth-child(odd) { border-left:0; } #sod_frm .od_prd_list .td_prd { display:block; grid-column:1 / -1; min-height:106px; padding:16px 14px 16px 106px; border-top:0; border-left:0; text-align:left; white-space:normal; } #sod_frm .od_prd_list .sod_img { top:14px; left:14px; width:72px; height:72px; } #sod_frm .od_prd_list .sod_img img { width:72px; height:72px; } #sod_frm .od_prd_list .sod_name { min-height:72px; } #sod_frm .od_prd_list tbody td:nth-child(2)::before { content:"총수량"; } #sod_frm .od_prd_list tbody td:nth-child(3)::before { content:"판매가"; } #sod_frm .od_prd_list tbody td:nth-child(4)::before { content:"소계"; } #sod_frm .od_prd_list tbody td:nth-child(5)::before { content:"포인트"; } #sod_frm .od_prd_list tbody td:nth-child(6)::before { content:"배송비"; } #sod_frm .od_prd_list tbody td:nth-child(n+2)::before { color:var(--webon-muted); font-size:12px; font-weight:700; } #sod_frm .od_prd_list tbody td:nth-child(4) { color:var(--webon-primary-dark); font-weight:900; } #forderform .sod_left { gap:14px; } #forderform #sod_frm_orderer > h2, #forderform #sod_frm_taker > h2 { padding:16px; font-size:17px; } #forderform #sod_frm_orderer .tbl_frm01, #forderform #sod_frm_taker .tbl_frm01 { padding:5px 14px 12px !important; } #forderform #sod_frm_orderer tr, #forderform #sod_frm_taker tr { display:block; padding:12px 0; } #forderform #sod_frm_orderer th, #forderform #sod_frm_taker th, #forderform #sod_frm_orderer td, #forderform #sod_frm_taker td { display:block; width:100%; padding:0; } #forderform #sod_frm_orderer th, #forderform #sod_frm_taker th { margin-bottom:7px; } #forderform #od_name, #forderform #od_pwd, #forderform #od_tel, #forderform #od_hp, #forderform #od_email, #forderform #od_b_name, #forderform #od_b_tel, #forderform #od_b_hp, #forderform #ad_subject, #forderform #od_hope_date { width:100% !important; max-width:none; } #forderform #od_zip, #forderform #od_b_zip { width:calc(100% - 124px) !important; } #forderform .btn_address { min-width:112px; margin-left:6px; padding-inline:10px !important; } #forderform .order_choice_place { align-items:flex-start; } #forderform #order_address { width:100%; margin:4px 0 0; } #forderform #sod_frm_paysel { grid-template-columns:minmax(0,1fr); } #mod_option_frm #sit_opt_added li { grid-template-columns:minmax(0,1fr); } #mod_option_frm #sit_opt_added li .opt_count { justify-content:start; } #mod_option_frm #sit_tot_price { margin-inline:16px; } #mod_option_frm .btn_confirm { padding-inline:16px; } #smb_my { gap:24px; } #smb_my_wish .list_02 ul, #smb_my_wish form > ul, #sod_ws .list_02 ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #smb_my_od .tbl_wrap, #sod_v .tbl_wrap { overflow:visible; border:0; border-radius:0; } #smb_my_od table, #smb_my_od thead, #smb_my_od tbody, #sod_v table, #sod_v thead, #sod_v tbody { display:block; width:100%; min-width:0; } #smb_my_od thead, #sod_v thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } #smb_my_od tbody, #sod_v tbody { display:grid; gap:10px; } #smb_my_od tbody tr, #sod_v tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:11px; } #smb_my_od tbody td, #sod_v tbody td { display:flex; width:auto; min-height:44px; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:0; border-top:1px solid var(--webon-line); border-left:1px solid var(--webon-line); text-align:right; white-space:normal; } #smb_my_od tbody td:nth-child(odd), #sod_v tbody td:nth-child(odd) { border-left:0; } #smb_my_od tbody td:first-child, #sod_v tbody td:first-child { grid-column:1 / -1; border-top:0; color:var(--webon-primary-dark); font-weight:800; } #smb_my_od tbody td:nth-child(2)::before, #sod_v tbody td:nth-child(2)::before { content:"주문일시"; } #smb_my_od tbody td:nth-child(3)::before, #sod_v tbody td:nth-child(3)::before { content:"상품수"; } #smb_my_od tbody td:nth-child(4)::before, #sod_v tbody td:nth-child(4)::before { content:"주문금액"; } #smb_my_od tbody td:nth-child(5)::before, #sod_v tbody td:nth-child(5)::before { content:"입금액"; } #smb_my_od tbody td:nth-child(6)::before, #sod_v tbody td:nth-child(6)::before { content:"미입금액"; } #smb_my_od tbody td:nth-child(7)::before, #sod_v tbody td:nth-child(7)::before { content:"상태"; } #smb_my_od tbody td:nth-child(n+2)::before, #sod_v tbody td:nth-child(n+2)::before { color:var(--webon-muted); font-size:12px; font-weight:700; } #smb_my_od tbody .empty_table, #sod_v tbody .empty_table { display:flex; min-height:130px; grid-column:1 / -1; align-items:center; justify-content:center; border:1px dashed var(--webon-line); text-align:center; } #smb_my_od tbody .empty_table::before, #sod_v tbody .empty_table::before { display:none; } #sod_fin_list .tbl_wrap { max-width:100%; overflow-x:auto; } #sod_fin_list table { min-width:820px; } } @media (max-width:480px) { .shop-content .sct_10, .shop-content .sct_10.lists-row { grid-template-columns:minmax(0,1fr); } #sct_sortlst { min-height:58px; margin-bottom:14px; padding:6px; } .webon-catalog-view { gap:3px; padding-left:6px; } .webon-catalog-view__label { display:none; } #sct_lst button { width:40px; height:40px; } .shop-content .sct_40 { gap:10px; } .shop-content .sct_40 > .sct_li.webon-product-card { min-height:132px; grid-template-columns:104px minmax(0,1fr); gap:13px; padding:11px; } .shop-content .sct_40 .sct_img, .shop-content .sct_40 .sct_img img, .shop-content .sct_40 .sct_img .webon-product-visual { min-height:104px; } .shop-content .sct_40 .sct_basic { display:none; } .shop-content .sct_40 .sct_txt a { font-size:14px; } .shop-content .sct_40 .sct_bottom { align-items:flex-end; } .shop-content .sct_40 .sct_op_btn > button { min-width:40px; min-height:40px; } .shop-content .sct_40 .list-10-btn .sct_cart { min-height:40px; padding:0 7px; font-size:12px; } .shop-content .webon-list-share-menu { position:fixed; z-index:1400; top:auto; right:12px; bottom:12px; left:12px; width:auto; } .shop-content .webon-list-share-menu::before, .shop-content .webon-list-share-menu::after { display:none; } #container .webon-shop-home__catalog .webon-product-grid { grid-template-columns:minmax(0,1fr); } .webon-shop-home__categories a { grid-template-columns:32px minmax(0,1fr) 12px; padding:11px; } .webon-shop-home__categories a .fa:first-child { width:32px; height:32px; } #hd.webon-shop-header #category .cate { grid-template-columns:repeat(2,minmax(0,1fr)); } #hd.webon-shop-header #category .cate_li_1 { min-height:78px; padding:14px; } #sit_ov { padding:18px; border-radius:12px; } .webon-quantity-stepper { grid-template-columns:44px 54px 44px minmax(58px,auto); } .webon-quantity-stepper button { width:44px; height:44px; min-height:44px; } .webon-quantity-stepper .num_input { width:54px; height:44px; min-height:44px; } .webon-quantity-stepper .sit_opt_prc { margin-left:8px; line-height:44px; } .webon-shop-toast { right:12px; bottom:12px; width:calc(100vw - 24px); grid-template-columns:34px minmax(0,1fr) 34px; gap:8px; } .webon-shop-toast__action { grid-column:2; justify-self:start; } .webon-shop-toast__close { grid-column:3; grid-row:1; } #sod_bsk tbody td { grid-column:1 / -1; border-left:0; } #sod_bsk tbody .td_prd { padding-left:116px; } #sod_bsk .td_prd .sod_img { left:42px; } #sod_bsk_act { grid-template-columns:minmax(0,1fr); } #sod_bsk_list #mod_option_frm { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:13px; } #mod_option_frm h2 { min-height:58px; padding:16px 58px 16px 16px; font-size:18px; } #mod_option_frm .option_wr { padding:16px 16px 0; } #mod_option_frm #sit_sel_option { margin:16px 16px 0; } #mod_option_frm #sit_opt_added li { padding:12px; } #mod_option_frm #sit_opt_added li .opt_count { grid-template-columns:42px 52px 42px minmax(56px,1fr) 34px; width:100%; } #mod_option_frm #sit_opt_added button { width:42px; min-width:42px; height:42px; min-height:42px; } #mod_option_frm #sit_opt_added .num_input { width:52px; height:42px; } #mod_option_frm #sit_opt_added .sit_opt_prc { min-width:0; padding-inline:6px; line-height:42px; } #mod_option_frm #sit_opt_added .sit_opt_del { width:34px; min-width:34px; height:34px; min-height:34px; } #mod_option_frm #sit_tot_price { min-height:60px; margin-bottom:12px; } #mod_option_frm #sit_tot_price strong { font-size:23px; } #mod_option_frm .btn_confirm .btn_submit { width:100%; } #smb_my_wish .list_02 ul, #smb_my_wish form > ul, #sod_ws .list_02 ul { grid-template-columns:minmax(0,1fr); } #smb_ws_act { display:grid; grid-template-columns:minmax(0,1fr); } #smb_ws_act .btn01, #smb_ws_act .btn02 { width:100%; min-width:0; } #sod_ws_act { display:grid; grid-template-columns:minmax(0,1fr); } #sod_ws_act button { width:100%; min-width:0; } } @media (prefers-reduced-motion: reduce) { .webon-shop-menu-shell .webon-shop-menu-hint { transition:none; } .webon-shop-toast { transition:none; } .webon-shop-toast[data-tone="progress"] .webon-shop-toast__icon .fa { animation:none; } .webon-shop-ticket, .webon-product-card { transition:none; transform:none; } } /* Shop search: one shared, responsive filter and result surface. */ .webon-shop-search { margin:0; } .webon-shop-search__admin { top:18px; right:18px; } .webon-shop-search__admin .btn_admin { display:grid; width:44px; min-width:44px; height:44px; min-height:44px; place-items:center; padding:0; color:var(--webon-primary-dark); border:1px solid var(--webon-line); background:#fff; border-radius:10px; box-shadow:0 5px 16px rgba(13,39,72,.07); } .webon-shop-search__admin .btn_admin:hover, .webon-shop-search__admin .btn_admin:focus-visible { color:#fff; border-color:var(--webon-primary); background:var(--webon-primary); } .webon-shop-search__header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 22px; padding:0 0 20px; border-bottom:1px solid var(--webon-line); } .webon-shop-search__header > div { min-width:0; } .webon-shop-search__eyebrow { display:block; margin:0 0 7px; color:var(--webon-primary); font-size:11px; font-weight:900; line-height:1.3; letter-spacing:.14em; } #ssch.webon-shop-search .webon-shop-search__header h2 { margin:0; color:var(--webon-primary-dark); font-size:var(--webon-type-page); font-weight:900; line-height:var(--webon-leading-heading); letter-spacing:-.04em; word-break:keep-all; } #ssch.webon-shop-search .webon-shop-search__header h2 strong { color:var(--webon-primary); } .webon-shop-search__header p { margin:8px 0 0; color:var(--webon-muted); font-size:14px; line-height:1.55; word-break:keep-all; } #ssch.webon-shop-search .ssch_result_total { display:inline-flex; float:none; min-height:38px; flex:0 0 auto; align-items:center; gap:4px; margin:0; padding:7px 13px; color:var(--webon-muted); border:1px solid var(--webon-line); background:#f7f9fc; border-radius:999px; font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap; } #ssch.webon-shop-search .ssch_result_total b { color:var(--webon-primary-dark); font-size:15px; } #ssch_frm.webon-shop-search__panel { overflow:hidden; border:1px solid var(--webon-line); background:#fff; border-radius:18px; box-shadow:0 10px 32px rgba(13,39,72,.07); } #ssch_frm .webon-shop-search__primary { display:block; padding:22px 24px; border:0; } .webon-shop-search__label, .webon-shop-search__field legend { display:block; margin:0 0 10px; color:var(--webon-primary-dark); font-size:13px; font-weight:900; line-height:1.4; } .webon-shop-search__field legend { float:left; position:static; width:100%; max-width:none; height:auto; overflow:visible; text-indent:0; } .webon-shop-search__input-row { display:grid; width:min(100%,820px); grid-template-columns:minmax(240px,1fr) auto 44px; align-items:center; gap:8px; } #ssch_frm .webon-shop-search__input-row #ssch_q { box-sizing:border-box; width:100%; min-width:0; height:46px; margin:0; padding:0 14px; color:var(--webon-text); border:1px solid #cbd7e5; background:#fff; border-radius:9px; box-shadow:none; font-size:15px; } #ssch_frm .webon-shop-search__input-row #ssch_q::placeholder { color:#7b8795; opacity:1; } #ssch_frm .webon-shop-search__input-row #ssch_q:focus { border-color:var(--webon-primary); box-shadow:0 0 0 3px rgba(34,105,190,.12); outline:0; } #ssch_frm .webon-shop-search__input-row .btn_submit { display:inline-flex; width:auto; min-width:92px; height:46px; min-height:46px; align-items:center; justify-content:center; gap:7px; margin:0; padding:0 18px; color:#fff; border:1px solid var(--webon-primary-dark); background:var(--webon-primary-dark); border-radius:9px; font-weight:800; line-height:1.2; } #ssch_frm .webon-shop-search__input-row .btn_submit:hover, #ssch_frm .webon-shop-search__input-row .btn_submit:focus-visible { border-color:var(--webon-primary); background:var(--webon-primary); } #ssch_frm .webon-shop-search__help-button { display:grid; box-sizing:border-box; width:44px; min-width:44px; height:44px; min-height:44px; place-items:center; padding:0; color:var(--webon-muted); border:1px solid var(--webon-line); background:#fff; border-radius:9px; font-size:18px; line-height:1; } #ssch_frm .webon-shop-search__help-button:hover, #ssch_frm .webon-shop-search__help-button:focus-visible, #ssch_frm .webon-shop-search__help-button[aria-expanded="true"] { color:var(--webon-primary); border-color:#aac4e2; background:var(--webon-primary-soft); } #ssch_frm .webon-shop-search__help { display:block; width:min(100%,820px); margin:12px 0 0; padding:11px 13px; color:#53657a; border:1px solid #d8e4f0; background:#f4f8fc; border-radius:9px; font-size:13px; line-height:1.55; word-break:keep-all; } #ssch_frm .webon-shop-search__help[hidden] { display:none; } #ssch_frm .webon-shop-search__advanced { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.72fr); gap:24px; align-items:start; padding:20px 24px; border:0; border-top:1px solid var(--webon-line); background:#f8fafc; } .webon-shop-search__field { min-width:0; margin:0; padding:0; border:0; } .webon-shop-search__checks { display:flex; min-height:44px; clear:both; flex-wrap:wrap; align-items:center; gap:8px; } #ssch_frm .webon-shop-search__checks input[type="checkbox"] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } #ssch_frm .webon-shop-search__checks label { display:inline-flex; min-height:44px; align-items:center; margin:0; padding:7px 12px; color:#4f6074; border:1px solid #d5dfeb; background:#fff; border-radius:999px; font-size:13px; font-weight:700; line-height:1.25; cursor:pointer; } #ssch_frm .webon-shop-search__checks label > span { display:none; } #ssch_frm .webon-shop-search__checks input[type="checkbox"]:focus-visible + label { outline:2px solid var(--webon-primary); outline-offset:2px; } #ssch_frm .webon-shop-search__checks input[type="checkbox"]:checked + label { color:#fff; border-color:var(--webon-primary); background:var(--webon-primary); } .webon-shop-search__price-row { display:grid; clear:both; grid-template-columns:minmax(130px,1fr) 18px minmax(130px,1fr); align-items:center; gap:8px; } .webon-shop-search__price-input { display:grid; min-width:0; grid-template-columns:minmax(0,1fr) auto; align-items:center; overflow:hidden; border:1px solid #d1dce8; background:#fff; border-radius:9px; } #ssch_frm .webon-shop-search__price-input .ssch_input { box-sizing:border-box; width:100%; min-width:0; height:42px; margin:0; padding:0 4px 0 12px; border:0; background:transparent; border-radius:0; box-shadow:none; font-size:14px; text-align:right; } .webon-shop-search__price-input > span { padding:0 11px 0 6px; color:var(--webon-muted); font-size:12px; } .webon-shop-search__price-input:focus-within { border-color:var(--webon-primary); box-shadow:0 0 0 3px rgba(34,105,190,.12); } .webon-shop-search__price-separator { color:#8996a6; text-align:center; } #ssch_cate.webon-shop-search__categories, .webon-shop-search__sort { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:12px; padding:16px 24px; border:0; border-top:1px solid var(--webon-line); background:#fff; } #ssch_cate.webon-shop-search__categories .webon-shop-search__label, .webon-shop-search__sort .webon-shop-search__label { margin:0; } #ssch_cate.webon-shop-search__categories ul, .webon-shop-search__sort ul { display:flex; width:auto; min-width:0; flex-wrap:wrap; gap:7px; margin:0; padding:0; } #ssch_cate.webon-shop-search__categories li, .webon-shop-search__sort li { float:none; width:auto; height:auto; min-width:0; margin:0; padding:0; border:0; } #ssch_cate.webon-shop-search__categories a, .webon-shop-search__sort a { display:inline-flex; min-height:44px; align-items:center; gap:5px; padding:7px 11px; color:#52657a; border:1px solid transparent; background:transparent; border-radius:8px; font-size:13px; font-weight:700; line-height:1.25; white-space:nowrap; } #ssch_cate.webon-shop-search__categories a span { display:inline-flex; min-width:20px; align-items:center; justify-content:center; padding:1px 6px; color:inherit; background:#edf2f7; border-radius:999px; font-size:11px; } #ssch_cate.webon-shop-search__categories a:hover, #ssch_cate.webon-shop-search__categories a:focus-visible, #ssch_cate.webon-shop-search__categories a.is-current, .webon-shop-search__sort a:hover, .webon-shop-search__sort a:focus-visible, .webon-shop-search__sort a.is-current { color:var(--webon-primary); border-color:#bfd2e8; background:var(--webon-primary-soft); } #ssch_cate.webon-shop-search__categories a.is-current span { background:#fff; } .webon-shop-search__sort { background:#fbfcfe; } #ssch_sort_all { border:0; } .webon-shop-search__results { margin-top:26px; } .webon-shop-search__results .sct_10.lists-row { align-items:start; } .webon-shop-search__results .sct_10 .sct_li { align-self:start; } .webon-shop-search__empty .sct_nofile, .webon-shop-search__results > .sct_nofile, .webon-shop-search__empty { min-height:210px; } .webon-shop-search__empty .sct_nofile, .webon-shop-search__results > .sct_nofile { display:flex; align-items:center; justify-content:center; margin:0; padding:40px 20px; color:var(--webon-muted); border:1px dashed var(--webon-line); background:#f8fafc; border-radius:16px; line-height:1.6; text-align:center; } @media (max-width:768px) { .webon-shop-search__header { align-items:flex-start; margin-bottom:18px; padding-bottom:17px; } #ssch.webon-shop-search .webon-shop-search__header h2 { font-size:clamp(25px,7vw,32px); } .webon-shop-search__header p { font-size:13px; } #ssch_frm.webon-shop-search__panel { border-radius:14px; } #ssch_frm .webon-shop-search__primary { display:block; padding:16px; } .webon-shop-search__input-row { width:100%; grid-template-columns:minmax(0,1fr) auto 44px; } #ssch_frm .webon-shop-search__input-row .btn_submit { min-width:82px; padding-inline:13px; } #ssch_frm .webon-shop-search__advanced { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding:16px; } #ssch_cate.webon-shop-search__categories, .webon-shop-search__sort { display:block; padding:14px 16px; overflow:hidden; } #ssch_cate.webon-shop-search__categories .webon-shop-search__label, .webon-shop-search__sort .webon-shop-search__label { margin-bottom:9px; } #ssch_cate.webon-shop-search__categories ul, .webon-shop-search__sort ul { width:max-content; max-width:none; flex-wrap:nowrap; padding:0 2px 4px; overflow:visible; } #ssch_cate.webon-shop-search__categories, .webon-shop-search__sort { overflow-x:auto; scrollbar-width:thin; } .webon-shop-search__results { margin-top:18px; } } @media (max-width:480px) { .webon-shop-search__header { display:grid; gap:13px; } #ssch.webon-shop-search .ssch_result_total { justify-self:start; } .webon-shop-search__input-row { grid-template-columns:minmax(0,1fr) 46px; } #ssch_frm .webon-shop-search__input-row #ssch_q { grid-column:1 / -1; } #ssch_frm .webon-shop-search__input-row .btn_submit { width:100%; min-width:0; grid-column:1; } #ssch_frm .webon-shop-search__help-button { grid-column:2; } .webon-shop-search__checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } #ssch_frm .webon-shop-search__checks label { justify-content:center; padding-inline:8px; } .webon-shop-search__price-row { grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr); gap:5px; } #ssch_frm .webon-shop-search__price-input .ssch_input { padding-left:8px; } .webon-shop-search__price-input > span { padding-right:8px; } }