/* Theme Name: 셀포지 데모샵
Version: 0.7.0
Text Domain: startrees
Requires at least: 7.1.2
Requires PHP: 8.3 */

/* ---------------------------------------------------------------------------
   Tokens
   Laid out after the officegood reference (a Cafe24 stationery mall): a 1050px
   page, a brand coloured menu bar, the category menu on the left, red prices.
   The brand colour is the shop's lime: leaf green bars, yellow lime accents.

   Every screen reads its colours, lines, corners and type from here, the cart,
   the order form, the receipt and 마이페이지 included, and WooCommerce's block
   cart and checkout read theirs through the bridge at the end. A variation of
   the theme is a new set of these values; no rule below needs to change.
--------------------------------------------------------------------------- */
:root{
  /* Text, darkest first. Every text colour reads at 4.5:1 or more on the paper (WCAG AA):
     --muted on white only; on grey bars and panels quiet text takes --label. */
  --name:#222;
  --ink:#333;
  --ink2:#444;
  --sub:#555;
  --soft:#666;
  --label:#666;
  --muted:#767676;
  --faint:#767676;
  /* Lines: the dark rule over tables and boards, then strong to light */
  --rule:#333;
  --line-dark:#bbb;
  --line-strong:#cfcfcf;
  --line-btn:#d5d5d5;
  --line:#e1e1e1;
  --line2:#eeeeee;
  /* Surfaces, and the text that sits on brand and dark fills */
  --paper:#fff;
  --bar:#f7f7f7;
  --panel:#f8f8f8;
  --dark:#333;
  --inverse:#fff;
  /* Brand */
  --brand:#47850f;
  --brand2:#3b7209;
  --brand3:#2f5c07;
  --brand-bg:#f2f5f0;
  --link:#3b7209;
  --lime:#c6d92b;
  /* --lime2 decorates (the logo's 라임); as text it is --lime-text, on the lime banner --lime-ink. */
  --lime2:#8bb51a;
  --lime-text:#5f7f12;
  --lime-ink:#5c6847;
  --lime-bg:#f4f7e1;
  /* Prices and states */
  --price:#e4291b;
  --danger:#b32d2e;
  --danger-bg:#fff5f3;
  --danger-line:#f1c1b8;
  --ok-bg:#f5fbef;
  --ok-line:#cfe3bf;
  --warn:#b26b00;
  --warn-bg:#fff8eb;
  /* Overlays: dialog backdrops and shadows, the veil over a sold out photo, dark labels on photos,
     the thin lines between white menu words */
  --scrim:rgba(0,0,0,.45);
  --shadow:rgba(0,0,0,.25);
  --veil:rgba(255,255,255,.5);
  --badge-dark:rgba(40,40,40,.86);
  --divider-inverse:rgba(255,255,255,.35);
  /* Sign-in buttons keep each provider's own colours (their brand rules), whatever the theme. */
  --kakao:#fee500;
  --kakao-ink:rgba(0,0,0,.85);
  --naver:#03c75a;
  --naver-ink:#fff;
  --google-ink:#1f1f1f;
  --google-line:#747775;
  /* Type, corners, controls */
  --font:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",Dotum,sans-serif;
  --radius:0;
  --radius-control:4px;
  --control:44px;
  /* Page */
  --shell:1050px;
  --sidebar:190px;
  --gutter:10px;
}
/* Bridge: the custom properties WooCommerce's block cart and checkout read. Set on the
   main column, so WordPress's own :root font sizes printed after this sheet do not win. */
.st-main{
  --wc-separator-color:var(--line);
  --wc-form-color-text:var(--ink);
  --wp--preset--font-size--x-small:12px;
  --wp--preset--font-size--small:13px;
  --wp--preset--font-size--medium:16px;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:12px/1.6 var(--font)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--link)}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button,a,input,select{touch-action:manipulation}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.5px;color:var(--name)}

.st-inner{width:min(var(--shell),calc(100% - 24px));margin:0 auto}
.st-skip{position:absolute;top:-100px;left:20px;background:var(--paper);padding:10px;z-index:999}
.st-skip:focus{top:10px}
.st-local{position:fixed;right:10px;bottom:10px;z-index:999;margin:0;padding:4px 9px;border-radius:3px;background:var(--badge-dark);color:var(--inverse);font-size:11px;pointer-events:none}
.st-link{display:inline-block;background:var(--brand);color:var(--inverse)!important;padding:9px 18px;font-weight:700}
.st-link:hover{background:var(--brand2)}
.st-empty{padding:40px;border:1px solid var(--line);text-align:center;color:var(--muted)}
.page-title{font-size:17px;line-height:1.4;letter-spacing:-.6px;padding:0 0 12px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.st-article{padding-bottom:40px}

/* ---------------------------------------------------------------------------
   Utility bar - pinned to the top of the viewport while scrolling
--------------------------------------------------------------------------- */
.st-topbar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line2);font-size:11px;color:var(--label)}
.st-topbar .st-inner{height:30px;display:flex;align-items:center;justify-content:flex-end}
.st-topbar-nav{display:flex;align-items:center}
.st-topbar-nav a{display:inline-flex;align-items:center;gap:4px;padding:0 10px;line-height:11px;border-left:1px solid var(--line-btn)}
.st-topbar-nav a:first-child{border-left:0}
.st-cart-count{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--price);color:var(--inverse);font-size:10px;font-weight:700;line-height:1}
body.admin-bar .st-topbar{top:32px}

/* ---------------------------------------------------------------------------
   Header: logo, search, one product
--------------------------------------------------------------------------- */
.st-head .st-inner{height:118px;display:grid;grid-template-columns:250px minmax(0,1fr) 230px;align-items:center;gap:24px}
.st-logo{display:block;line-height:1;color:var(--name)}
.st-logo:hover{color:var(--name)}
.st-logo img{display:block;max-height:64px;width:auto}
.st-logo small{display:block;margin:0 0 6px 2px;font-size:13px;font-weight:700;letter-spacing:-.5px;color:var(--ink2)}
.st-logo strong{display:block;font-size:36px;font-weight:800;letter-spacing:-2px;color:var(--brand2)}
.st-logo strong span{color:var(--lime2)}
.st-search{justify-self:center;width:100%;max-width:400px;height:40px;display:flex;border:2px solid var(--brand)}
.st-search input{flex:1;min-width:0;width:0;border:0;padding:0 12px;outline:0;background:var(--paper)}
.st-search button{flex:0 0 auto;width:62px;border:0;background:var(--brand);color:var(--inverse);font-size:13px;font-weight:700;cursor:pointer}
.st-search button:hover{background:var(--brand2)}
.st-head-pick{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:10px}
.st-head-pick img{width:70px;height:70px;object-fit:contain}
.st-head-pick strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;font-weight:700;line-height:1.45;color:var(--name)}
.st-head-pick em{display:block;margin-top:3px;font-style:normal;font-size:14px;font-weight:700;color:var(--price)}

/* ---------------------------------------------------------------------------
   Menu bar: merchandising views on the left, boards on the right
--------------------------------------------------------------------------- */
.st-gnb .st-inner{height:48px;display:flex;align-items:stretch;border-radius:8px 8px 0 0;background:var(--brand)}
.st-gnb-nav{flex:1;min-width:0;display:flex;align-items:stretch;padding:0 12px}
.st-gnb-nav a{position:relative;display:flex;align-items:center;padding:0 19px;font-size:14px;font-weight:700;color:var(--inverse);white-space:nowrap}
.st-gnb-nav a+a::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--divider-inverse)}
.st-gnb-nav a:hover{color:var(--inverse);text-decoration:underline;text-underline-offset:4px}
.st-gnb-nav a:not(.st-gnb-board)+.st-gnb-board{margin-left:auto}
.st-gnb-nav a:not(.st-gnb-board)+.st-gnb-board::before{display:none}

/* BEST SELLER ITEM: four products under the menu bar */
.st-picks .st-inner{height:96px;display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line)}
.st-picks-title{margin:0;font-size:16px;line-height:1.25;letter-spacing:-.5px;color:var(--ink2)}
.st-picks-title span{font-weight:800;color:var(--name)}
.st-picks-title b{display:block;font-size:14px;color:var(--price)}
.st-picks ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.st-picks li+li{border-left:1px solid var(--line2)}
.st-picks a{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:10px;padding:0 12px}
.st-picks img{width:74px;height:74px;object-fit:contain}
.st-picks small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-picks strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4;color:var(--name)}

/* ---------------------------------------------------------------------------
   Page shell and the floating quick panel
   .st-page is the 1280px reference shell: the 1050px content column sits in the
   middle track and the quick panel rides the right gutter as the page scrolls.
--------------------------------------------------------------------------- */
.st-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--shell)) minmax(0,1fr);max-width:1280px;margin:0 auto}
/* Both children share row 1; auto placement would otherwise push main below the
   quick panel because the panel comes first in source order. */
.st-page>main{grid-area:1/2}
.st-main{min-height:60vh;padding:14px 0 50px}

.st-quick{grid-area:1/3;align-self:start;position:sticky;top:120px;width:86px;margin:14px 0 0 12px;text-align:center}
.st-quick a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 4px 9px;border:1px solid var(--line);border-top:0;background:var(--paper);font-size:11px;color:var(--sub)}
.st-quick a:first-child{border-top:1px solid var(--line)}
.st-quick a:hover{color:var(--brand)}
.st-quick svg{display:block}
.st-quick .st-cart-count{position:absolute;top:7px;right:16px}
.st-quick .st-quick-top{width:56px;height:56px;margin:12px auto 0;padding:0;justify-content:center;border:0!important;border-radius:50%;background:var(--sub);color:var(--inverse);font-size:12px;font-weight:700}
.st-quick .st-quick-top:hover{background:var(--dark);color:var(--inverse)}
body.admin-bar .st-quick{top:152px}

/* ---------------------------------------------------------------------------
   Category menu: the left column of the home, listings and product pages
--------------------------------------------------------------------------- */
.st-home-top,.st-store-grid{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);gap:var(--gutter)}
.st-home-cats,.st-sidebar{align-self:start;min-width:0}
.st-catmenu{border:1px solid var(--line);border-top:0;background:var(--paper)}
.st-catmenu-title{display:flex;align-items:center;gap:8px;height:40px;margin:0 -1px;padding:0 13px;background:var(--brand);color:var(--inverse);font-size:13px;font-weight:700}
.st-catmenu-group{padding:9px 0 8px;margin:0 12px;border-top:1px solid var(--line)}
.st-catmenu-group:first-of-type{border-top:0}
.st-catmenu-head{display:block;padding:0 2px 4px;font-size:15px;font-weight:800;letter-spacing:.2px;color:var(--name)}
.st-catmenu ul{margin:0;padding:0 2px;list-style:none}
.st-catmenu li a{display:block;padding:1px 0;font-size:12px;color:var(--sub)}
.st-catmenu a[aria-current],.st-catmenu a.is-open{color:var(--brand);font-weight:700}
.st-side-note{display:grid;gap:4px;margin-top:10px;padding:11px 13px;border:1px solid var(--line);font-size:12px;color:var(--sub)}
.st-side-note strong{margin-bottom:3px;color:var(--name)}
.st-store-content{min-width:0}

/* ---------------------------------------------------------------------------
   Home: banner and category tiles beside the menu, then product rows
--------------------------------------------------------------------------- */
.st-home-stage{min-width:0}
.st-banner{border:1px solid var(--line)}
.st-banner-slides{position:relative;height:330px;background:var(--lime-bg)}
.st-banner-slide{position:absolute;inset:0;display:none;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:30px;padding:0 40px 0 44px;color:var(--name)}
.st-banner-slide.is-active{display:grid}
.st-banner-slide:hover{color:var(--name)}
.st-banner-slide img{width:300px;height:280px;object-fit:contain;background:var(--paper);border:1px solid var(--line2)}
.st-banner-text small{display:block;font-size:13px;color:var(--lime-ink)}
.st-banner-text strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0 12px;font-size:26px;line-height:1.35;letter-spacing:-1px}
.st-banner-text em{display:block;font-style:normal;font-size:24px;font-weight:800;color:var(--price)}
.st-banner-go{display:inline-block;margin-top:18px;padding:8px 20px;border:1px solid var(--sub);background:var(--paper);font-size:12px}
.st-banner-slide:hover .st-banner-go{border-color:var(--brand);color:var(--brand)}
.st-banner-tabs{display:flex;border-top:1px solid var(--line)}
.st-banner-tabs button{flex:1 1 0;min-width:0;height:38px;padding:0 10px;border:0;border-left:1px solid var(--line);background:var(--paper);color:var(--soft);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.st-banner-tabs button:first-child{border-left:0}
.st-banner-tabs button[aria-current=true]{box-shadow:inset 0 -2px 0 var(--brand);color:var(--name);font-weight:700}
.st-banner-tabs .st-banner-pause{flex:0 0 40px;padding:0;font-size:11px;color:var(--sub)}
.st-banner-tabs .st-banner-pause[aria-pressed=true]{color:var(--brand2)}

.st-cat-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin-top:var(--gutter)}
.st-cat-tiles a{height:112px;display:grid;grid-template-columns:minmax(0,1fr) 84px;align-items:center;gap:6px;padding:0 10px 0 16px;border:1px solid var(--line);background:var(--paper)}
.st-cat-tiles a:hover{border-color:var(--brand)}
.st-cat-tiles small{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--lime-text)}
.st-cat-tiles strong{display:block;margin:2px 0 4px;font-size:15px;line-height:1.3;word-break:keep-all;color:var(--name)}
.st-cat-tiles em{font-style:normal;font-size:11px;color:var(--muted)}
.st-cat-tiles img{width:84px;height:84px;object-fit:contain}

.st-section{padding:34px 0 0}
.st-section-top{display:flex;align-items:flex-end;gap:8px;margin-bottom:16px;border-bottom:1px solid var(--line-strong)}
.st-section-top h2{margin-bottom:-1px;padding:0 2px 9px;border-bottom:2px solid var(--brand);font-size:18px}
.st-section-top>span{margin-right:auto;padding-bottom:10px;font-size:12px;color:var(--muted)}
.st-section-top a{padding-bottom:9px;font-size:11px;color:var(--muted)}

/* ---------------------------------------------------------------------------
   Listings: breadcrumb, sub categories, count and sort links
--------------------------------------------------------------------------- */
.woocommerce-breadcrumb{margin:0 0 6px;font-size:11px;color:var(--muted);text-align:right}
.woocommerce .woocommerce-breadcrumb a{color:var(--muted)}
.st-crumb-sep{margin:0 6px;color:var(--line-dark)}
.woocommerce-products-header__title.page-title{margin:0 0 12px;padding:0 0 0 2px;border:0;font-size:22px;font-weight:400;color:var(--ink2)}
.st-subcats{margin:0 0 16px;padding:12px 18px;border:1px solid var(--line);background:var(--bar)}
.st-subcats ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 12px;margin:0;padding:0;list-style:none}
.st-subcats a{display:block;padding:5px 0;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-subcats a::after{content:" \203A";color:var(--label)}
.st-subcats span{font-size:11px;color:var(--label)}
.st-subcats a[aria-current]{color:var(--danger);font-weight:700}
.st-listbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;padding:9px 12px;border:1px solid var(--line);background:var(--bar)}
.st-listbar p{margin:0;font-size:12px;color:var(--sub)}
.st-listbar strong{color:var(--name)}
.st-listbar ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.st-listbar li+li{border-left:1px solid var(--line-btn)}
.st-listbar a{padding:0 10px;font-size:11px;color:var(--soft)}
.st-listbar a[aria-current]{color:var(--danger);font-weight:700}
.st-listbar-info{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px}
.st-soldout-filter{margin:0}
.st-soldout-filter label{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--sub);cursor:pointer}
.st-soldout-filter input{width:13px;height:13px;margin:0;accent-color:var(--brand)}

/* ---------------------------------------------------------------------------
   Product grid
   The float rules from woocommerce-layout.css need !important here; the
   small-screen sheet is dequeued in functions.php instead of being overridden.
--------------------------------------------------------------------------- */
.woocommerce ul.products,.woocommerce .products ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 14px;margin:0;padding:0;list-style:none}
.woocommerce.columns-5 ul.products{grid-template-columns:repeat(5,minmax(0,1fr))}
.woocommerce ul.products:before,.woocommerce ul.products:after{display:none}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{position:relative;float:none!important;width:auto!important;margin:0!important;text-align:center}
.woocommerce ul.products li.product a img{aspect-ratio:1;object-fit:contain;margin:0 0 10px;border:1px solid var(--line);background:var(--paper)}
.woocommerce ul.products li.product a:hover img{border-color:var(--brand)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;padding:0 2px;font-size:12px;font-weight:400;line-height:1.5;color:var(--name)}
.woocommerce ul.products li.product .price{display:block;margin-top:5px;font-size:13px;font-weight:700;color:var(--price)}
.woocommerce ul.products li.product .price del{display:block;font-size:11px;font-weight:400;color:var(--faint);opacity:1}
.woocommerce ul.products li.product .price ins{background:none;text-decoration:none;color:var(--price)}
.woocommerce ul.products li.product .button{margin-top:8px;min-height:auto;padding:4px 10px;border:1px solid var(--line-btn);border-radius:0;background:var(--paper);color:var(--sub);font-size:11px;font-weight:400}
.woocommerce ul.products li.product .button:hover{border-color:var(--line-dark);background:var(--paper);color:var(--name)}
.woocommerce span.onsale{top:8px;left:8px;right:auto;margin:0;min-height:auto;min-width:auto;padding:2px 7px;border-radius:0;background:var(--price);font-size:11px;font-weight:700;line-height:1.5}
/* Sold out in a listing: the photo dims under a dark band, the name and price turn grey, the button is a plain mark. */
.st-soldout{position:absolute;top:0;left:0;right:0;z-index:2;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--veil);pointer-events:none}
.st-soldout b{padding:6px 18px;background:var(--badge-dark);color:var(--inverse);font-size:13px;font-weight:700;letter-spacing:.12em}
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title{color:var(--muted)}
.woocommerce ul.products li.product.outofstock .price,.woocommerce ul.products li.product.outofstock .price ins{color:var(--faint)}
.woocommerce ul.products li.product .st-soldout-button{display:inline-block;border-color:var(--line-btn);background:var(--line2);color:var(--label);cursor:default}
.woocommerce ul.products li.product .st-soldout-button:hover{border-color:var(--line-btn);background:var(--line2);color:var(--label)}
.woocommerce nav.woocommerce-pagination{margin:30px 0 0}
.woocommerce nav.woocommerce-pagination ul,.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{min-width:30px;margin:0 2px;padding:7px 4px;border:1px solid var(--line)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--sub);color:var(--inverse);border-color:var(--sub)}

/* ---------------------------------------------------------------------------
   Post boards (공지사항, 이벤트소식)
--------------------------------------------------------------------------- */
.st-board{width:100%;border-collapse:collapse;border-top:2px solid var(--rule);font-size:12px}
.st-board th,.st-board td{padding:11px 8px;border-bottom:1px solid var(--line);text-align:center}
.st-board th{background:var(--panel);color:var(--label);font-weight:400}
.st-board td:first-child,.st-board th:first-child{width:64px}
.st-board td:last-child,.st-board th:last-child{width:96px}
.st-board td:first-child,.st-board td:last-child{color:var(--muted)}
.st-board th:nth-child(2),.st-board .st-board-title{text-align:left}
.st-board .st-board-title a{font-weight:700;color:var(--name)}
.st-board .st-board-title a:hover{color:var(--link)}
.st-board+.woocommerce-pagination ul{list-style:none;margin:20px 0 0;padding:0;text-align:center}
.st-board+.woocommerce-pagination li{display:inline-block}
.st-board+.woocommerce-pagination a,.st-board+.woocommerce-pagination span{display:inline-block;min-width:30px;margin:0 2px;padding:7px 4px;border:1px solid var(--line)}
.st-board+.woocommerce-pagination span.current{background:var(--brand);color:var(--inverse);border-color:var(--brand)}

/* A board post: back to its list, and to the older and newer posts. */
.st-post{border-top:2px solid var(--rule)}
.st-post-head{padding:13px 10px 11px;border-bottom:1px solid var(--line);background:var(--panel)}
.st-post-board{font-size:11px;font-weight:700;color:var(--brand2)}
.st-post-head h1{margin:4px 0 3px;font-size:17px;line-height:1.4;overflow-wrap:anywhere}
.st-post-head time{font-size:11px;color:var(--muted)}
.st-post-body{padding:22px 10px 30px;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
.st-post-nav{border-top:1px solid var(--line)}
.st-post-nav div{display:grid;grid-template-columns:76px minmax(0,1fr);border-bottom:1px solid var(--line)}
.st-post-nav span{padding:10px;background:var(--panel);color:var(--label)}
.st-post-nav a,.st-post-nav em{padding:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.st-post-nav em{font-style:normal;color:var(--muted)}
.st-post-list{margin:18px 0 0;text-align:center}

/* Sign-in: social buttons only, in each provider's colours. */
.st-login{max-width:420px;margin:10px auto 30px;padding:26px 24px;border:1px solid var(--line);background:var(--paper)}
.st-login h2{margin-bottom:14px;font-size:17px}
.st-social-list{display:grid;gap:8px}
.st-social{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:6px;font-size:14px;font-weight:700;line-height:1}
.st-social svg{width:20px;height:20px;flex:0 0 auto}
.st-social--kakao{background:var(--kakao);color:var(--kakao-ink)!important}
.st-social--naver{background:var(--naver);color:var(--naver-ink)!important}
.st-social--google{background:var(--paper);color:var(--google-ink)!important;border:1px solid var(--google-line)}
.st-social:hover{filter:brightness(.96)}
.st-login-note{margin:12px 0 0;font-size:12px;color:var(--muted)}
.st-login-error{margin:0 0 12px;padding:10px 12px;border:1px solid var(--danger-line);background:var(--danger-bg);color:var(--danger);font-size:12px}
.st-login-done{margin:0 0 12px;padding:10px 12px;border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--brand2);font-size:12px}
.st-login-done a{font-weight:700;color:var(--brand2)}
.st-login-guest{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12px}
.st-login-guest a,.st-login-note a{font-weight:700;color:var(--brand2)}
.st-login-staff{margin:10px 0 0;font-size:11px;text-align:right}
.st-login-staff a{color:var(--muted)}
.st-checkout-login{margin:0 0 18px;padding:16px;border:1px solid var(--line);background:var(--panel)}
.st-checkout-login p:first-child{margin:0 0 10px}
.st-checkout-login .st-social-list{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.st-checkout-login .st-login-note{color:var(--label)}
.st-lookup-box{max-width:420px;margin:10px auto 30px;padding:26px 24px;border:1px solid var(--line);background:var(--paper)}
/* A found order needs room for its table. */
.st-lookup-box:has(.woocommerce-order-details){max-width:760px}
.st-lookup-intro{margin:0 0 16px;font-size:12px;color:var(--muted)}
.st-lookup .track_order .form-row{margin:0 0 12px}
.st-lookup .track_order label{display:block;margin-bottom:6px;font-size:13px;font-weight:700}
/* 16px keeps iOS from zooming into the field. */
.st-lookup .track_order .input-text{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;font-size:16px}
.st-lookup .track_order .button{width:100%;min-height:46px;margin-top:4px}
/* 배송지 관리 */
.st-addresses-lead,.st-addresses-empty,.st-address-more{margin:0 0 14px;font-size:12px;color:var(--muted)}
.st-address-list{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.st-address{padding:14px 16px;border:1px solid var(--line);background:var(--paper)}
.st-address.is-default{border-color:var(--brand2);box-shadow:inset 0 0 0 1px var(--brand2)}
.st-address p{margin:0 0 4px;font-size:13px;word-break:keep-all;overflow-wrap:anywhere}
.st-address-name strong{font-size:14px}
.st-badge{display:inline-block;margin-right:6px;padding:2px 6px;border-radius:3px;background:var(--brand2);color:var(--inverse);font-size:11px;font-weight:700;line-height:1.4;vertical-align:1px}
.st-address-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.st-address-actions form{margin:0}
.st-address-actions a,.st-address-actions button{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font-size:12px;line-height:1;cursor:pointer}
.st-address-form{max-width:520px;margin-top:10px;padding:18px;border:1px solid var(--line);background:var(--panel)}
.st-address-form h3{margin:0 0 12px;font-size:15px}
.st-address-form .form-row{margin:0 0 12px;padding:0}
.st-address-form label{display:block;margin-bottom:6px;font-size:13px;font-weight:700}
.st-address-form .optional{font-weight:400;color:var(--label)}
/* 16px keeps iOS from zooming into the field. */
.st-address-form input[type=text],.st-address-form input[type=tel]{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--paper);font-size:16px}
.st-address-postcode span{display:flex;gap:6px}
.st-address-postcode input[type=text]{max-width:150px}
.st-postcode-search{flex:0 0 auto;min-height:44px;padding:0 14px;border:1px solid var(--brand2);border-radius:4px;background:var(--paper);color:var(--brand2);font-weight:700;cursor:pointer}
/* The classic checkout's 우편번호 row takes 주소 검색 under the field (the block checkout's is in its own section). */
.form-row.st-has-postcode-search .st-postcode-search--checkout{margin-top:6px}
/* Kakao's postcode service, embedded in a layer: full screen on phones. */
.st-postcode-layer{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--scrim)}
.st-postcode-box{display:flex;flex-direction:column;width:min(500px,100%);height:min(620px,100%);border-radius:6px;background:var(--paper);overflow:hidden;box-shadow:0 12px 32px var(--shadow)}
.st-postcode-head{display:flex;justify-content:space-between;align-items:center;margin:0;padding:8px 10px 8px 16px;border-bottom:1px solid var(--line);font-size:14px}
.st-postcode-close{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font-size:13px;cursor:pointer}
.st-postcode-frame{flex:1 1 auto;min-height:0}
@media (max-width:600px){.st-postcode-layer{padding:0}.st-postcode-box{width:100%;height:100%;border-radius:0}}
.st-check{display:flex!important;align-items:center;gap:8px;font-weight:400!important}
.st-address-submit{display:flex;align-items:center;gap:14px;margin:4px 0 0}
.st-address-submit .button{min-width:120px;min-height:46px}
.st-address-submit a{font-size:13px;color:var(--muted)}
/* 계정 정보 → 로그인 방법: the linked services, and buttons to connect another one. */
.st-account-methods{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.st-account-methods h3{margin:0 0 10px;font-size:15px}
.st-account-methods>p,.st-account-link{max-width:560px}
.st-account-services{margin:0 0 12px;font-size:13px;line-height:1.7;word-break:keep-all}
.st-account-link{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:0 0 8px}
.st-account-link .st-social{width:100%;border:0;cursor:pointer;font-family:inherit}
.st-account-link .st-social--google{border:1px solid var(--google-line)}
.st-account-methods-note{margin:0;font-size:12px;color:var(--muted);word-break:keep-all}
.st-withdraw-how.st-withdraw-hold{padding:12px 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:13px;line-height:1.7}
/* 회원 탈퇴: linked quietly under 계정 정보; the screen says what goes and what stays. */
.st-account-leave{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.st-account-leave a{color:var(--muted);text-decoration:underline}
.st-withdraw{max-width:560px}
.st-withdraw-lead{margin:0 0 10px;font-weight:700}
.st-withdraw-facts{margin:0 0 16px;padding:14px 16px 14px 32px;border:1px solid var(--line);background:var(--panel);font-size:13px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.st-withdraw-facts li{margin:0 0 4px}
.st-withdraw-facts a{font-weight:700;color:var(--brand2)}
.st-withdraw-form .form-row{margin:0 0 12px;padding:0}
.st-withdraw-form label[for]{display:block;margin-bottom:6px;font-size:13px;font-weight:700}
.st-withdraw-form input[type=password]{width:100%;max-width:320px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;font-size:16px}
.st-withdraw-how{margin:0 0 12px;font-size:12px;color:var(--muted);word-break:keep-all}
.woocommerce .st-withdraw-submit .button{min-width:200px;min-height:46px;border:1px solid var(--danger);background:var(--paper);color:var(--danger)}
.woocommerce .st-withdraw-submit .button:hover{background:var(--danger-bg);color:var(--danger)}
.st-withdraw-back{margin:16px 0 0;font-size:13px}
.st-withdraw-back a{color:var(--muted)}
/* Checkout: the saved addresses above the form. */
.st-checkout-addresses{margin:0 0 18px;padding:16px;border:1px solid var(--line);background:var(--panel)}
.st-pick-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}
.st-pick-head a{font-size:12px;font-weight:700;color:var(--brand2)}
.st-checkout-addresses ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.st-pick form{display:flex;justify-content:space-between;align-items:center;gap:10px;height:100%;margin:0;padding:12px;border:1px solid var(--line);background:var(--paper)}
.st-pick.is-current form{border-color:var(--brand2);box-shadow:inset 0 0 0 1px var(--brand2)}
.st-pick-text{min-width:0}
.st-pick p{margin:0 0 2px;font-size:12px;overflow-wrap:anywhere}
.st-pick button{flex:0 0 auto;min-height:40px;padding:0 12px;border:1px solid var(--brand2);border-radius:4px;background:var(--paper);color:var(--brand2);font-size:12px;font-weight:700;cursor:pointer}
.st-pick-current{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--brand2)}
/* WooCommerce marks the order number, date and status; bold reads better than a highlighter. */
mark.order-number,mark.order-date,mark.order-status{background:none;color:inherit;font-weight:700}

/* Shipping and returns guide. Anchors clear the pinned utility bar. */
.st-guide-intro{margin-bottom:16px}
.st-guide section{padding:0 0 18px;scroll-margin-top:48px}
.st-guide h2{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:14px}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--brand);color:var(--inverse);border:0;border-radius:0;min-height:40px;padding:11px 18px;font-size:13px;font-weight:700;line-height:1.4;text-shadow:none
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--brand2);color:var(--inverse)}
.woocommerce a.button.disabled,.woocommerce a.button:disabled,.woocommerce button.button.disabled,
.woocommerce button.button:disabled,.woocommerce button.button:disabled[disabled],
.woocommerce a.button.alt.disabled,.woocommerce button.button.alt.disabled{border:1px solid var(--line)!important;background:var(--bar)!important;color:var(--label)!important;opacity:1}

/* ---------------------------------------------------------------------------
   Product detail: photo on the left, the name, a table of facts, the options
   and the total on the right, as the reference lays it out.
   The native title, price and meta blocks are removed in inc/product.php and
   replaced by .st-product-heading and .st-product-facts.
--------------------------------------------------------------------------- */
.woocommerce div.product{padding:6px 0 0}
.woocommerce div.product div.images{width:400px;margin-bottom:24px}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{border:1px solid var(--line)}
.woocommerce div.product div.images .flex-control-thumbs{display:flex;gap:6px;margin-top:6px}
.woocommerce div.product div.images .flex-control-thumbs li{width:64px!important;border:1px solid var(--line)}
.woocommerce div.product div.summary{width:calc(100% - 430px);padding-top:0;margin-bottom:24px}
.woocommerce-product-details__short-description{font-size:12px;color:var(--soft)}

.st-product-heading{padding:0 0 13px;border-bottom:1px solid var(--line-strong)}
.st-product-heading h1{margin:0;font-size:19px;line-height:1.4;font-weight:700;letter-spacing:-.6px}
/* Sold out on the product page: a mark by the name, the same band on the photo, a notice and a grey button in place of the purchase area. */
.st-soldout-tag{display:inline-block;margin-top:7px;padding:3px 10px;background:var(--dark);color:var(--inverse);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em}
.st-soldout-notice{margin:14px 0 0;padding:14px 16px 16px;border:1px solid var(--line-btn);background:var(--bar)}
.st-soldout-notice p{margin:0 0 12px;font-size:13px;color:var(--sub)}
.st-soldout-notice strong{margin-right:8px;color:var(--name)}
.woocommerce .st-soldout-notice button.button.st-soldout-button,.woocommerce .st-soldout-notice button.button.st-soldout-button:disabled,.woocommerce .st-soldout-notice button.button.st-soldout-button:hover{display:block;width:100%;min-height:50px;padding:0;border:1px solid var(--line-strong);border-radius:0;background:var(--line2)!important;color:var(--label)!important;font-size:16px;font-weight:700;opacity:1;cursor:default}
.woocommerce div.product.outofstock .woocommerce-product-gallery .flex-viewport,.woocommerce div.product.outofstock .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper{position:relative}
.woocommerce div.product.outofstock .woocommerce-product-gallery .flex-viewport::before,.woocommerce div.product.outofstock .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper::before{content:"";position:absolute;inset:0;z-index:3;background:var(--veil);pointer-events:none}
.woocommerce div.product.outofstock .woocommerce-product-gallery .flex-viewport::after,.woocommerce div.product.outofstock .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper::after{content:"품절";position:absolute;top:50%;left:50%;z-index:4;transform:translate(-50%,-50%);padding:9px 28px;background:var(--badge-dark);color:var(--inverse);font-size:18px;font-weight:700;letter-spacing:.12em;pointer-events:none}
/* A sold out option in its menu (WooCommerce disables it). */
.woocommerce div.product form.cart .variations select option:disabled{color:var(--line-dark)}

.st-product-facts{margin:0 0 4px;font-size:12px}
.st-product-facts>div{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;min-height:30px;border-bottom:1px solid var(--line2)}
.st-product-facts dt{padding:6px 2px;color:var(--label)}
.st-product-facts dd{margin:0;padding:6px 2px;min-width:0;color:var(--ink2)}
.st-product-facts del{color:var(--faint)}
.st-product-facts .st-fact-price{min-height:40px}
.st-product-facts .st-fact-price strong{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--price)}

.woocommerce div.product form.cart{padding-top:6px;margin-bottom:10px}
.woocommerce div.product form.cart .variations{margin:0;border-collapse:collapse}
.woocommerce div.product form.cart .variations tr{border-bottom:1px solid var(--line2)}
.woocommerce div.product form.cart .variations th{width:96px;padding:9px 2px;text-align:left;font-size:12px;font-weight:400;line-height:1.4;color:var(--label);vertical-align:middle}
.woocommerce div.product form.cart .variations th label{font-weight:400}
.woocommerce div.product form.cart .variations td{padding:7px 0;vertical-align:middle}
/* background-color only: WooCommerce draws the select's arrow as its background image. */
.woocommerce div.product form.cart .variations select{width:100%;min-height:32px;margin-right:0;padding:4px 6px;font-size:12px;border:1px solid var(--line-strong);background-color:var(--paper)}
.woocommerce div.product form.cart .reset_variations{font-size:11px;color:var(--muted)}
.woocommerce div.product form.cart .quantity{display:flex;align-items:center;padding:6px 0;border-bottom:1px solid var(--line2)}
.woocommerce div.product form.cart .quantity::before{content:"수량";flex:0 0 96px;padding-left:2px;font-size:12px;color:var(--label)}
.woocommerce .quantity .qty{width:64px;min-height:30px;border:1px solid var(--line-strong)}
.woocommerce div.product .stock{margin:6px 0;font-size:12px;color:var(--muted)}
/* WooCommerce paints a chosen option's price and the sale badge olive; they follow the shop's price colour. */
.woocommerce div.product span.price{color:var(--price)}
.woocommerce div.product .woocommerce-variation-price .price{display:block;margin:2px 0;font-size:14px;font-weight:700;color:var(--price)}
.woocommerce span.onsale{background-color:var(--price);color:var(--inverse)}

/* 추가상품: one select per group, then a row per pick with its own quantity. */
.st-supplements{margin:0;padding:6px 0 4px;border-bottom:1px solid var(--line2)}
.st-supplements-title{margin:2px 0 4px 2px;font-size:12px;font-weight:700;color:var(--name)}
.st-supplement-group{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;margin-bottom:5px}
.st-supplement-group span{padding:0 6px 0 2px;font-size:12px;line-height:1.35;color:var(--label)}
.st-supplement-group select{width:100%;min-height:32px;padding:4px 6px;font-size:12px;border:1px solid var(--line-strong);background:var(--paper)}
.st-supplement-picked{margin:6px 0 2px;padding:0;list-style:none}
.st-supplement-picked:empty{display:none}
.st-supplement-picked li{display:grid;grid-template-columns:minmax(0,1fr) 56px 76px 28px;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--line);border-top:0;background:var(--panel);font-size:12px}
.st-supplement-picked li:first-child{border-top:1px solid var(--line)}
.st-supplement-picked input{width:56px;min-height:28px;padding:2px 4px;text-align:center;border:1px solid var(--line-strong)}
.st-supplement-picked strong{font-variant-numeric:tabular-nums;text-align:right}
.st-supplement-remove{width:24px;height:24px;padding:0;border:1px solid var(--line-strong);background:var(--paper);color:var(--label);font-size:14px;line-height:1;cursor:pointer}

/* 총 상품금액: the chosen option, quantities and the total in red. */
.st-purchase-summary{clear:both;margin:4px 0 6px;border-top:2px solid var(--sub);background:var(--paper)}
.st-purchase-summary dl{margin:0}
.st-purchase-summary dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;min-height:30px;border-bottom:1px solid var(--line2)}
.st-purchase-summary dt{padding:6px 2px;font-size:12px;color:var(--label)}
.st-purchase-summary dd{margin:0;padding:6px 2px;font-size:12px;text-align:right}
/* These classes sit on the dd itself, not on a wrapper element. */
.st-purchase-summary dd.st-selected-option{text-align:left;color:var(--ink2)}
.st-purchase-summary dd.st-selected-quantity{font-variant-numeric:tabular-nums}
.st-purchase-summary .st-summary-total{min-height:46px;border-bottom:1px solid var(--line-strong)}
.st-purchase-summary .st-summary-total dt{font-weight:700;color:var(--name)}
.st-purchase-summary dd.st-selected-total{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--price)}

/* Purchase controls share one two column track at every viewport: 바로구매 first, then 장바구니. */
.woocommerce div.product form.cart,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce div.product form.cart .woocommerce-variation,
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .st-supplements,
.woocommerce div.product form.cart .st-purchase-summary{grid-column:1/-1;width:100%;margin-left:0!important;margin-right:0!important}
.woocommerce div.product form.cart .quantity{float:none!important}
.woocommerce div.product form.cart .single_variation_wrap{display:block}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{clear:both}
.woocommerce div.product form.cart:before,.woocommerce div.product form.cart:after,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart:before,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart:after{display:none!important}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .st-buy-now{grid-column:auto;display:inline-flex!important;align-items:center;justify-content:center;float:none!important;width:100%!important;min-width:0!important;margin:0!important;min-height:48px;border-radius:0;font-size:15px;font-weight:700;line-height:1.2}
.woocommerce div.product form.cart .st-buy-now{order:1;border:1px solid var(--brand2);background:var(--brand2);color:var(--inverse)}
.woocommerce div.product form.cart .st-buy-now:hover{background:var(--brand3);color:var(--inverse)}
.woocommerce div.product form.cart .single_add_to_cart_button{order:2;border:1px solid var(--line-dark);background:var(--paper);color:var(--name)}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{border-color:var(--muted);background:var(--paper);color:var(--name)}

.woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;margin:0;padding:0;border-bottom:1px solid var(--sub)}
.woocommerce div.product .woocommerce-tabs ul.tabs:before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{flex:1 1 0;margin:0 0 -1px;padding:0;border:1px solid var(--line);border-left:0;border-radius:0;background:var(--bar);text-align:center}
.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child{border-left:1px solid var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,.woocommerce div.product .woocommerce-tabs ul.tabs li:after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:block;padding:12px 6px;font-size:13px;font-weight:400;color:var(--soft)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-color:var(--sub);border-bottom-color:var(--paper);background:var(--paper)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{font-weight:700;color:var(--name)}
.woocommerce div.product .woocommerce-tabs .panel{margin:0;padding:26px 4px}
.woocommerce div.product .woocommerce-tabs .panel>h2:first-child{display:none}
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .up-sells.products,.woocommerce div.product .related.products{clear:both;padding:10px 0 0;background:var(--paper)}
.woocommerce div.product .up-sells.products>h2,.woocommerce div.product .related.products>h2{margin:20px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line-strong);font-size:16px}

/* ---------------------------------------------------------------------------
   Shared pieces of the purchase screens: buttons, notices, form controls
--------------------------------------------------------------------------- */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--control);padding:0 24px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:14px;font-weight:700;line-height:1.2;text-align:center;cursor:pointer}
.st-btn:hover{border-color:var(--sub);color:var(--name)}
.st-btn.is-main{border-color:var(--brand2);background:var(--brand2);color:var(--inverse)}
.st-btn.is-main:hover{border-color:var(--brand3);background:var(--brand3);color:var(--inverse)}

/* WooCommerce's notices (장바구니에 담김, 재고 부족, 입력 오류) in the shop's colours. */
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error,.woocommerce-notices-wrapper .woocommerce-message{margin:0 0 16px;padding:12px 16px 12px 42px;border:1px solid var(--line);border-top:2px solid var(--brand2);border-radius:var(--radius);background:var(--brand-bg);color:var(--ink);font-size:13px;line-height:1.6}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{top:12px;left:16px;color:var(--brand2)}
.woocommerce .woocommerce-error{border-top-color:var(--danger);background:var(--danger-bg)}
.woocommerce .woocommerce-error::before{top:12px;left:16px;color:var(--danger)}
.woocommerce .woocommerce-message .button,.woocommerce .woocommerce-info .button{min-height:32px;margin:-4px 0 -4px 12px;padding:6px 14px;border:1px solid var(--brand2);background:var(--paper);color:var(--brand2);font-size:12px}
.woocommerce .woocommerce-message .button:hover,.woocommerce .woocommerce-info .button:hover{background:var(--brand-bg);color:var(--brand3)}
#main .wc-block-components-notice-banner{align-items:flex-start;gap:10px;margin:0 0 14px;padding:12px 14px!important;border:1px solid var(--line);border-top:2px solid var(--brand2);border-radius:var(--radius);background:var(--brand-bg);color:var(--ink);font-size:13px}
#main .wc-block-components-notice-banner>svg{width:20px;height:20px;background-color:var(--brand2)}
#main .wc-block-components-notice-banner.is-error{border-top-color:var(--danger);background:var(--danger-bg)}
#main .wc-block-components-notice-banner.is-error>svg{background-color:var(--danger)}
#main .wc-block-components-notice-banner.is-warning{border-top-color:var(--warn);background:var(--warn-bg)}
#main .wc-block-components-notice-banner.is-warning>svg{background-color:var(--warn)}
#main .wc-block-components-notice-banner.is-info>svg{background-color:var(--sub)}
#main .wc-block-components-notice-banner .wc-forward{color:var(--brand2)!important;opacity:1}

/* Classic forms (배송지 관리, 계정 정보, 주문조회, 결제하기): square fields of one height. 16px keeps iOS from zooming. */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{min-height:var(--control);padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--paper);color:var(--ink);font-size:16px}
.woocommerce form .form-row textarea{min-height:96px;padding:10px 12px;line-height:1.6}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{border-color:var(--brand2);outline:0;box-shadow:inset 0 0 0 1px var(--brand2)}
.woocommerce form .form-row label{color:var(--ink)}
.woocommerce form .form-row .required{color:var(--price);text-decoration:none}

/* ---------------------------------------------------------------------------
   Order steps: the title of the cart, the order form and the receipt, with
   장바구니 › 주문서 작성 › 주문 완료 beside it
--------------------------------------------------------------------------- */
.st-order-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.st-order-head .page-title{margin:0;padding:0;border:0;font-size:22px;letter-spacing:-.8px}
.st-steps{display:flex;align-items:center;margin:0;padding:0;list-style:none;font-size:13px;color:var(--faint)}
.st-steps li{display:flex;align-items:center}
.st-steps li+li::before{content:"";width:7px;height:7px;margin:0 14px 0 10px;border-top:1px solid var(--line-strong);border-right:1px solid var(--line-strong);transform:rotate(45deg)}
.st-steps .is-current{font-weight:700;color:var(--brand2)}

/* ---------------------------------------------------------------------------
   Cart and order form: WooCommerce's block cart and checkout, drawn in the
   shop's table style. Scoped to #main so these rules outrank the block
   stylesheets whichever loads last; WooCommerce's container queries still
   decide when the summary column drops under the list.
--------------------------------------------------------------------------- */
#main .wp-block-woocommerce-cart,#main .wp-block-woocommerce-checkout{padding-top:0;color:var(--ink);font-size:13px}
#main .wc-block-components-sidebar-layout{margin-bottom:10px}
#main .wc-block-components-main{min-width:0}
/* The cart's money column keeps its place beside a long list. The order form's lists every
   product, so it scrolls with the page rather than hide its bottom under the fold. */
#main .wc-block-cart__sidebar{align-self:flex-start;position:sticky;top:46px}
body.admin-bar #main .wc-block-cart__sidebar{top:78px}
@container (min-width:700px){
  #main .wc-block-components-sidebar-layout .wc-block-components-main{width:calc(100% - 330px);padding-right:30px}
  #main .wc-block-components-sidebar-layout .wc-block-components-sidebar{width:330px;padding-left:0}
}
@container (max-width:699px){
  #main .wc-block-cart__sidebar{position:static}
}

/* The list of products: a dark rule, grey heading row, one row per product. */
#main table.wc-block-cart-items{width:100%;margin:0;border-collapse:collapse;border-top:2px solid var(--rule)}
#main .wc-block-cart-items__header{background:var(--bar);text-transform:none}
#main .wc-block-cart-items__header th{padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;font-weight:400;color:var(--label);text-transform:none;letter-spacing:0}
#main .wc-block-cart-items__header .wc-block-cart-items__header-image{padding-left:16px;text-align:left}
#main .wc-block-cart-items__header .wc-block-cart-items__header-total{padding-right:16px;text-align:right}
#main .wc-block-cart-items td{padding:16px 12px;border:0;vertical-align:top}
/* The rule sits on the row: WooCommerce makes the total cell a flex box, which would end its own line short. */
#main .wc-block-cart-items .wc-block-cart-items__row{border:0;border-bottom:1px solid var(--line)}
#main .wc-block-cart-item__image{width:108px;padding-left:16px}
#main .wc-block-cart-item__image img{width:84px;height:84px;object-fit:contain;border:1px solid var(--line2);background:var(--paper)}
#main .wc-block-cart-item__wrap{display:flex;flex-direction:column;gap:5px}
#main .wc-block-components-product-name{font-size:13px;font-weight:700;line-height:1.5;color:var(--name);text-decoration:none}
#main a.wc-block-components-product-name:hover{color:var(--link)}
#main .wc-block-cart-item__prices{font-size:12px;color:var(--soft)}
#main .wc-block-components-product-metadata{margin:0;font-size:12px;color:var(--label)}
#main .wc-block-components-product-details{margin:0;padding:0;list-style:none}
#main .wc-block-components-product-details__name{font-weight:400}
#main .wc-block-components-product-details li{margin:0}
#main .wc-block-components-product-badge,#main .wc-block-components-sale-badge{border:1px solid var(--price);border-radius:var(--radius);background:var(--paper);color:var(--price);font-size:11px;font-weight:700;text-transform:none}
#main .wc-block-cart-item__quantity{display:flex;align-items:center;gap:6px;margin-top:4px}
#main .wc-block-cart-item__total{padding-right:16px;font-size:15px;font-weight:700;color:var(--name);white-space:nowrap}
#main .wc-block-cart-item__total .wc-block-components-product-price{font-size:15px}

/* Quantity: a square − 1 + box. */
#main .wc-block-components-quantity-selector{width:104px;height:32px;margin:0;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper)}
#main .wc-block-components-quantity-selector:after{display:none}
#main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{min-width:30px;border-radius:0;background:var(--bar);color:var(--sub);opacity:1;font-size:15px}
#main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover{background:var(--line2);color:var(--name)}
#main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled{color:var(--line-strong);background:var(--bar)}
#main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus{border-right:1px solid var(--line)}
#main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus{border-left:1px solid var(--line)}
#main .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{min-width:0;font-size:13px;font-weight:700;color:var(--ink)}
#main .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible,#main .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;box-shadow:none}
/* 삭제: a small square button; the full name is in its label for screen readers. */
#main .wc-block-cart-item__remove-link{display:inline-flex;align-items:center;width:auto!important;min-width:0;height:32px!important;padding:0 10px!important;border:1px solid var(--line-strong)!important;border-radius:var(--radius);background:var(--paper)!important;color:var(--sub)!important;font-size:12px!important;text-decoration:none!important;opacity:1}
#main .wc-block-cart-item__remove-link:hover{border-color:var(--sub)!important;color:var(--name)!important}
#main .wc-block-cart-item__remove-link svg{display:none}
#main .wc-block-cart-item__remove-link::after{content:"삭제"}

/* The money column: 총 상품금액, 배송비 and 결제 예정 금액 in red, then 주문하기. */
#main .wp-block-woocommerce-cart-order-summary-block,#main .wp-block-woocommerce-checkout-order-summary-block{margin:0;padding:0 18px;border:1px solid var(--line);border-top:2px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
#main .wc-block-cart__totals-title,#main .wc-block-components-checkout-order-summary__title-text{margin:0;padding:14px 0 12px;font-size:15px;font-weight:700;line-height:1.4;color:var(--name);text-align:left;text-transform:none;letter-spacing:-.3px}
#main .wc-block-components-checkout-order-summary__title{margin:0;padding:0}
#main .wc-block-components-totals-wrapper{padding:12px 0;border-top:1px solid var(--line)}
#main .wc-block-components-totals-wrapper:empty{display:none}
/* The totals group is a plain stack of its rows (WooCommerce gives it a second rule and a bottom gap). */
#main :is(.wp-block-woocommerce-cart-order-summary-totals-block,.wp-block-woocommerce-checkout-order-summary-totals-block){padding:0;border-top:0}
#main .wc-block-components-totals-coupon{padding:0}
#main .wc-block-components-totals-item{padding:3px 0;font-size:13px;color:var(--sub)}
#main .wc-block-components-totals-item__value{font-weight:700;color:var(--ink)}
#main .wc-block-components-totals-item__description{font-size:12px;color:var(--muted)}
#main .wc-block-components-totals-footer-item{padding:6px 0 4px}
#main .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{font-size:14px;font-weight:700;color:var(--name)}
#main .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--price)}
#main .wc-block-components-totals-footer-item-tax{font-size:11px;color:var(--muted)}
#main .wc-block-components-panel__button{font-size:13px;color:var(--sub)}
#main .wc-block-components-panel__button:hover{color:var(--name)}
#main .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button{min-height:var(--control)}
#main .wc-block-components-totals-coupon-link{color:var(--link)}
#main .wc-block-components-chip{border-radius:var(--radius);background:var(--brand-bg);color:var(--brand3)}
#main .wc-block-cart__submit{margin:10px 0 0}
#main .wc-block-cart__submit-container{padding:0}
#main .wc-block-cart__payment-options:empty{display:none}
#main .wc-block-cart__submit-button,#main .wc-block-components-checkout-place-order-button{min-height:54px;padding:0 20px;font-size:16px;font-weight:700}
/* WooCommerce's buttons on these screens: the shop's square brand button, a quiet outline for the rest. */
#main .wc-block-components-button:not(.is-link){border:1px solid var(--brand2);border-radius:var(--radius);background:var(--brand2);color:var(--inverse);box-shadow:none;text-decoration:none}
#main .wc-block-components-button:not(.is-link):hover{border-color:var(--brand3);background:var(--brand3);color:var(--inverse)}
#main .wc-block-components-button:not(.is-link):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#main .wc-block-components-button:not(.is-link):disabled,#main .wc-block-components-button[aria-disabled=true]{opacity:.55}
#main .wc-block-components-button.outlined{border-color:var(--line-strong);background:var(--paper);color:var(--ink)}
#main .wc-block-components-button.is-link{color:var(--link)}

/* Order form sections: a heading, then rows of label and field under a dark rule. */
#main .wc-block-checkout__form{margin:0}
#main .wc-block-components-checkout-step{position:relative;margin:0 0 30px;padding:0}
#main .wc-block-components-checkout-step::after{display:none}
#main .wc-block-components-checkout-step__heading-container{margin:0;padding:0}
#main .wc-block-components-checkout-step__heading{margin:0 0 10px;padding:0}
#main .wc-block-components-checkout-step__title{margin:0;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.4px;color:var(--name)}
#main .wc-block-components-checkout-step__heading-content{font-size:12px;color:var(--muted)}
#main .wc-block-components-checkout-step__heading-content a{color:var(--link);font-weight:700}
#main .wc-block-components-checkout-step__container,#main .wc-block-components-checkout-step__content{padding:0}
#main .wc-block-components-checkout-step__description{margin:0 0 10px;font-size:12px;color:var(--muted)}
#main .wc-block-checkout__guest-checkout-notice{margin:8px 0 0;font-size:12px;color:var(--muted)}
#main .wc-block-checkout__order-notes,#main .wc-block-checkout__terms{margin-bottom:20px}
#main .wc-block-checkout__order-notes{margin-top:-10px}

/* Fields. Below 520px the label sits over its field; wider, Korean shops' two column table. */
#main .wc-block-components-address-form{display:block;margin:0;border-top:2px solid var(--rule)}
#main .wc-block-components-address-form>*{width:100%;margin:0}
#main .wc-block-components-text-input{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
#main .wc-block-components-address-form :is(.wc-block-components-country-input,.wc-block-components-state-input){display:block;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
#main .wc-block-components-text-input label,#main .wc-blocks-components-select .wc-blocks-components-select__label{position:static;transform:none;grid-row:1;max-width:none;margin:0;font-size:13px;font-weight:700;line-height:1.4;color:var(--ink);white-space:normal;overflow:visible}
#main .wc-block-components-text-input input:is([type=email],[type=number],[type=password],[type=tel],[type=text],[type=url]),#main .wc-blocks-components-select .wc-blocks-components-select__select{grid-row:2;width:100%;height:var(--control);min-height:0;margin:0;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.4}
#main .wc-block-components-text-input input:is([type=email],[type=number],[type=password],[type=tel],[type=text],[type=url]):focus,#main .wc-blocks-components-select .wc-blocks-components-select__select:focus{padding:0 12px;border:1px solid var(--brand2);outline:0;box-shadow:inset 0 0 0 1px var(--brand2)}
#main .wc-block-components-text-input.has-error input:is([type=email],[type=number],[type=password],[type=tel],[type=text],[type=url]){border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
#main .wc-block-components-text-input.has-error label,#main .wc-block-components-validation-error{color:var(--danger)}
#main .wc-block-components-validation-error{grid-row:3;margin:0;padding:0;font-size:12px}
#main .wc-block-components-validation-error>p{margin:0;display:flex;align-items:center;gap:4px}
#main .wc-block-components-validation-error svg{fill:currentColor}
#main .wc-blocks-components-select .wc-blocks-components-select__container{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;height:auto;line-height:1.4;background:none}
#main .wc-blocks-components-select .wc-blocks-components-select__select{padding-right:36px}
#main .wc-blocks-components-select .wc-blocks-components-select__expand{top:auto;bottom:10px;right:10px;transform:none;fill:var(--sub)}
/* Required fields carry a red mark after the label, as Korean forms do. */
#main .wc-block-components-text-input:has(input[aria-required=true],input[required]) label::after,#main .wc-blocks-components-select:has(select[aria-required=true],select[required]) .wc-blocks-components-select__label::after{content:" *";color:var(--price)}
/* 우편번호 with 주소 검색 beside it. assets/address.js adds the button; the field is found by it,
   because the checkout rewrites the field's own class names each time it redraws. */
#main .wc-block-components-text-input:has(>.st-postcode-search){grid-template-columns:minmax(0,180px) auto minmax(0,1fr);column-gap:6px}
#main .wc-block-components-text-input:has(>.st-postcode-search) label{grid-column:1/-1}
#main .wc-block-components-text-input:has(>.st-postcode-search) input{grid-column:1;padding-right:12px!important}
#main .wc-block-components-text-input:has(>.st-postcode-search) .wc-block-components-validation-error{grid-column:1/-1}
#main .st-postcode-search--checkout{grid-row:2;grid-column:2;position:static;min-height:var(--control);padding:0 14px;font-size:13px;line-height:1}
/* + 상세주소 추가 sits in the field column; the field it opens is an ordinary row. */
#main .wc-block-components-address-form__address_2-toggle{display:block;margin:0;padding:12px 0;border-bottom:1px solid var(--line);color:var(--link);font-size:13px;font-weight:700;text-decoration:none}
#main .wc-block-components-address-form__address_2-toggle:hover{text-decoration:underline}
/* A saved address shows as a card with 편집 until it is changed. */
#main .wc-block-components-address-card{margin:0;padding:14px 16px;border:1px solid var(--line);border-top:2px solid var(--rule);border-radius:var(--radius);font-size:13px}
#main .wc-block-components-address-card__edit{min-height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--sub);font-size:12px;text-decoration:none}
#main .wc-block-components-address-card__edit:hover{border-color:var(--sub);color:var(--name);text-decoration:none}
@container (min-width:520px){
  #main .wc-block-components-text-input{grid-template-columns:130px minmax(0,1fr);column-gap:0;padding:0;background:linear-gradient(to right,var(--bar) 130px,transparent 130px)}
  #main .wc-block-components-address-form :is(.wc-block-components-country-input,.wc-block-components-state-input){padding:0;background:linear-gradient(to right,var(--bar) 130px,transparent 130px)}
  /* Short answers get short fields, as on Korean order forms. */
  #main .wc-block-components-address-form :is(.wc-block-components-address-form__email,.wc-block-components-address-form__first_name,.wc-block-components-address-form__phone) input{max-width:340px}
  #main .wc-block-components-text-input label,#main .wc-blocks-components-select .wc-blocks-components-select__label{grid-row:1/span 2;grid-column:1;align-self:stretch;display:flex;align-items:center;padding:10px 14px}
  #main .wc-block-components-text-input input:is([type=email],[type=number],[type=password],[type=tel],[type=text],[type=url]){grid-row:1;grid-column:2;width:calc(100% - 24px);margin:8px 12px}
  #main .wc-block-components-validation-error{grid-row:2;grid-column:2;padding:0 12px 8px}
  #main .wc-blocks-components-select .wc-blocks-components-select__container{grid-template-columns:130px minmax(0,1fr);gap:0}
  #main .wc-blocks-components-select .wc-blocks-components-select__select{grid-row:1;grid-column:2;width:calc(100% - 24px);max-width:340px;margin:8px 12px}
  #main .wc-blocks-components-select .wc-blocks-components-select__expand{grid-row:1;grid-column:2;bottom:auto;top:50%;right:auto;left:min(calc(100% - 46px),330px);transform:translateY(-50%)}
  #main .wc-block-components-text-input:has(>.st-postcode-search){grid-template-columns:130px minmax(0,180px) auto minmax(0,1fr);column-gap:0}
  #main .wc-block-components-text-input:has(>.st-postcode-search) label{grid-column:1}
  #main .wc-block-components-text-input:has(>.st-postcode-search) input{grid-column:2;width:auto;margin:8px 0 8px 12px}
  #main .wc-block-components-text-input:has(>.st-postcode-search) .wc-block-components-validation-error{grid-column:2/-1}
  #main .st-postcode-search--checkout{grid-row:1;grid-column:3;margin:8px 0 8px 6px}
  #main .wc-block-components-address-form__address_2-toggle{padding:12px 12px 12px 142px;background:linear-gradient(to right,var(--bar) 130px,transparent 130px)}
}

/* Choices: checkboxes, then shipping and payment options as bordered rows. */
#main .wc-block-components-checkbox{margin:12px 0 0;font-size:13px}
#main .wc-block-components-checkbox label{align-items:center}
#main .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{width:18px;height:18px;min-width:18px;margin-right:8px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--paper)}
#main .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked{border-color:var(--brand2);background:var(--brand2)}
#main .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus{outline:2px solid var(--brand);outline-offset:2px}
#main .wc-block-components-checkbox .wc-block-components-checkbox__mark{left:2px;width:14px;height:14px;fill:var(--inverse)}
#main .wc-block-components-radio-control{border-top:2px solid var(--rule)}
#main .wc-block-components-radio-control__option,#main .wc-block-components-radio-control-accordion-option{margin:0;padding:14px 14px 14px 46px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--paper);font-size:13px}
#main .wc-block-components-radio-control-accordion-option{padding-left:14px}
#main .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option{padding:0 0 0 32px;border:0;background:none}
#main .wc-block-components-radio-control__option--checked-option-highlighted,#main .wc-block-components-radio-control-accordion-option--checked-option-highlighted{background:var(--brand-bg);box-shadow:none}
#main .wc-block-components-radio-control .wc-block-components-radio-control__input{left:14px;width:18px;height:18px;min-width:18px;min-height:18px;border:1px solid var(--line-strong);background:var(--paper)}
#main .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__input{left:0}
#main .wc-block-components-radio-control .wc-block-components-radio-control__input:checked{border:5px solid var(--brand2)}
#main .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before{display:none}
#main .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#main .wc-block-components-radio-control__label{font-size:13px;font-weight:700;color:var(--name)}
#main .wc-block-components-radio-control__secondary-label{font-size:13px;font-weight:700;color:var(--ink)}
#main .wc-block-components-radio-control__description,#main .wc-block-components-radio-control__secondary-description{font-size:12px;color:var(--label)}
#main .wc-block-components-radio-control-accordion-content{padding:4px 0 0 32px;font-size:12px;color:var(--sub)}
/* The shop's own payment methods (plugin src/Payments): the note under the name, and the reason a payment came back unfinished above the order form. */
#main .st-pay-note{margin:0;font-size:12px;color:var(--label)}
#main .st-pay-notice{margin:0 0 14px;padding:12px 14px;border:1px solid var(--danger-line);border-top:2px solid var(--danger);border-radius:var(--radius);background:var(--danger-bg);color:var(--ink);font-size:13px;line-height:1.6}
#main .wc-block-components-shipping-rates-control__package{margin:0;padding:0}
#main .wc-block-components-checkout-step .wc-block-components-notice-banner{margin-top:10px}
/* 배송 메시지 and the terms line. */
#main .wc-block-checkout__add-note{gap:10px}
#main .wc-block-components-textarea{width:100%;min-height:84px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--paper);color:var(--ink);font-size:14px;line-height:1.6}
#main .wc-block-components-textarea:focus{border-color:var(--brand2);outline:0;box-shadow:inset 0 0 0 1px var(--brand2)}
#main .wc-block-checkout__terms{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);font-size:12px;color:var(--sub)}
#main .wc-block-checkout__terms.wc-block-checkout__terms--with-separator{padding-top:14px;border-top:1px solid var(--line)}
#main .wc-block-checkout__terms a{color:var(--link);font-weight:700}
#main .wc-block-checkout__actions{margin:0 0 30px}
#main .wc-block-checkout__actions_row{gap:12px}
#main .wc-block-components-checkout-return-to-cart-button{color:var(--sub);font-size:13px;text-decoration:none}
#main .wc-block-components-checkout-return-to-cart-button:hover{color:var(--name)}

/* 주문 상품 beside the order form: picture with its count, name, price. */
#main .wc-block-components-order-summary{padding:4px 0}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item{padding:10px 0;border-bottom:1px solid var(--line2)}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item:last-child{border-bottom:0}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item__image{width:56px;margin:0;padding:0}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item__image>img{width:56px;max-width:56px;height:56px;object-fit:contain;border:1px solid var(--line2);background:var(--paper)}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity{min-width:20px;min-height:20px;border:0;background:var(--sub);box-shadow:none}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span{color:var(--inverse)}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item__description{padding:0 10px 0 14px}
#main .wc-block-components-order-summary .wc-block-components-product-name{font-size:12px;font-weight:700;line-height:1.45}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices{font-size:12px;color:var(--soft)}
#main .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price{padding-top:0;font-size:13px;font-weight:700;color:var(--name)}
/* Phones: the summary folds under 주문 상품 with the total showing, and a copy sits above 결제하기. */
#main .checkout-order-summary-block-fill-wrapper{margin:0 0 14px;padding:14px 18px 0}
#main .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__heading{margin:0 0 4px}
#main .checkout-order-summary-block-fill{border:0;border-radius:0}
#main .checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary{padding:0}
#main .checkout-order-summary-block-fill .wc-block-components-totals-coupon,#main .checkout-order-summary-block-fill .wc-block-components-totals-item{padding-left:0;padding-right:0}
#main .wc-block-components-totals-coupon .wc-block-components-panel__button{margin:0;padding:0}
#main .wc-block-components-checkout-order-summary__title-price{font-weight:700;color:var(--price)}

/* The empty cart: a plain box that leads back to the shop, then the newest products in the listing's style. */
#main .wp-block-woocommerce-empty-cart-block{padding:0}
#main .wc-block-cart__empty-cart__title{margin:0;padding:56px 20px 10px;border:1px solid var(--line);border-top:2px solid var(--rule);border-bottom:0;font-size:15px!important;font-weight:700;color:var(--sub);text-align:center}
#main .wc-block-cart__empty-cart__title.with-empty-cart-icon:before{display:none}
#main .st-cart-empty-go{margin:0;padding:6px 20px 48px;border:1px solid var(--line);border-top:0;text-align:center}
#main .wp-block-woocommerce-empty-cart-block hr,#main .wp-block-woocommerce-empty-cart-block .wp-block-separator{display:none}
#main .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title){margin:34px 0 16px;padding-bottom:9px;border-bottom:1px solid var(--line-strong);font-size:18px!important;text-align:left}
#main .wp-block-woocommerce-empty-cart-block .wc-block-grid__products{margin:0 -7px}
#main .wp-block-woocommerce-empty-cart-block .wc-block-grid__product{padding:0 7px;border:0}
#main .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img{aspect-ratio:1;object-fit:contain;border:1px solid var(--line2)}
#main .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title{font-size:12px;font-weight:400;color:var(--name)}
#main .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price{font-size:13px;font-weight:700;color:var(--price)}
#main .wp-block-woocommerce-empty-cart-block .wp-block-button__link{min-height:auto;padding:4px 10px!important;border:1px solid var(--line-btn)!important;border-radius:var(--radius)!important;background:var(--paper)!important;color:var(--sub)!important;font-size:11px!important;font-weight:400}
/* 함께 구매하면 좋은 상품 under the list, when the products have cross-sells. */
#main .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection{margin-top:34px}
#main .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection>h2{margin:0 0 14px!important;padding-bottom:9px;border-bottom:1px solid var(--line-strong);font-size:16px}
#main .wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title{font-size:12px!important;font-weight:400;line-height:1.5}
#main .wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-price{font-size:13px!important;font-weight:700;color:var(--price)}

/* The money column of the order form gets the same box; its 결제 예정 금액 reads as the cart's. */
#main .wc-block-checkout__sidebar .wc-block-components-totals-footer-item{padding:6px 0 4px}
/* Above the form: 회원 로그인 for guests, saved addresses for customers. */
#main .st-checkout-login,#main .st-checkout-addresses{margin:0 0 24px}

/* ---------------------------------------------------------------------------
   주문 완료 (woocommerce/checkout/thankyou.php)
--------------------------------------------------------------------------- */
.st-complete-box{margin:0 0 28px;padding:34px 24px 0;border:1px solid var(--line);border-top:2px solid var(--rule);text-align:center;background:var(--paper)}
.st-complete-box h2{font-size:22px;letter-spacing:-.8px;color:var(--name)}
.st-complete-box>p{margin:8px 0 0;font-size:13px;color:var(--sub)}
.st-complete-box a{color:var(--link);font-weight:700}
.st-complete-box.is-failed{padding-bottom:28px;border-top-color:var(--danger)}
.st-complete-box.is-failed h2{color:var(--danger)}
.st-complete-box.is-closed{border-top-color:var(--sub)}
.st-complete-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:26px -24px 0;border-top:1px solid var(--line)}
.st-complete-facts>div{display:grid;grid-template-rows:auto 1fr;border-left:1px solid var(--line)}
.st-complete-facts>div:first-child{border-left:0}
.st-complete-facts dt{padding:9px 10px;background:var(--bar);font-size:12px;color:var(--label)}
.st-complete-facts dd{margin:0;padding:12px 10px 14px;font-size:14px;color:var(--ink)}
.st-complete-facts strong{font-size:16px;color:var(--name)}
.st-complete-facts .st-complete-total{font-size:18px;font-weight:800;color:var(--price)}
.st-complete-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:30px 0 10px}
.st-complete-actions .st-btn{min-width:180px;min-height:50px;font-size:15px}
.st-complete-box .st-complete-actions{margin:20px 0 28px}
/* A payment method's notes (an account to pay into) sit in a box of their own. */
.st-complete>p{margin:0 0 12px;font-size:13px;color:var(--sub)}
.woocommerce-bacs-bank-details{margin:0 0 28px;padding:14px 18px;border:1px solid var(--line);border-top:2px solid var(--rule);background:var(--paper)}
.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading{margin:0 0 8px;font-size:16px}
.woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name{margin:10px 0 4px;font-size:13px}
.woocommerce .woocommerce-bacs-bank-details ul.order_details{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.woocommerce .woocommerce-bacs-bank-details ul.order_details::before,.woocommerce .woocommerce-bacs-bank-details ul.order_details::after{display:none}
.woocommerce .woocommerce-bacs-bank-details ul.order_details li{float:none;margin:0;padding:0;border:0;font-size:13px;text-transform:none;color:var(--label)}
.woocommerce .woocommerce-bacs-bank-details ul.order_details li strong{display:inline;margin-left:6px;font-size:14px;color:var(--name)}

/* Order tables: the receipt, 마이페이지 주문 and 비회원 주문조회 share them. */
.woocommerce-order-details,.woocommerce-customer-details,.woocommerce-order-downloads{margin:0 0 28px}
.woocommerce-order-details__title,.woocommerce-column__title,.woocommerce-order-downloads__title{margin:0 0 10px;font-size:16px;letter-spacing:-.4px}
.woocommerce table.shop_table{margin:0 0 16px;border:0;border-top:2px solid var(--rule);border-bottom:1px solid var(--line);border-collapse:collapse;border-radius:var(--radius);background:var(--paper);font-size:13px}
.woocommerce table.shop_table th{padding:11px 14px;border-top:0;border-bottom:1px solid var(--line);background:var(--bar);font-weight:400;color:var(--label);line-height:1.5}
.woocommerce table.shop_table td{padding:13px 14px;border-top:0;border-bottom:1px solid var(--line);color:var(--ink);line-height:1.6}
.woocommerce table.shop_table tbody th{background:var(--bar)}
.woocommerce table.shop_table tfoot th{text-align:left}
.woocommerce table.shop_table tfoot td,.woocommerce table.shop_table tfoot th{border-top:0;font-weight:400}
.woocommerce table.shop_table .st-order-total{font-size:16px;font-weight:800;color:var(--price)}
.woocommerce table.shop_table .product-name a{font-weight:700;color:var(--name)}
.woocommerce table.shop_table .product-name a:hover{color:var(--link)}
.woocommerce table.shop_table .product-quantity{font-weight:400;color:var(--muted)}
.woocommerce table.shop_table .wc-item-meta{margin:4px 0 0;padding:0;list-style:none;font-size:12px;color:var(--label)}
.woocommerce table.shop_table .wc-item-meta li{margin:0}
.woocommerce table.shop_table .wc-item-meta p{display:inline;margin:0}
.woocommerce table.shop_table .wc-item-meta .wc-item-meta-label{float:none;margin-right:3px;font-weight:400}
.woocommerce .woocommerce-customer-details address{padding:14px 16px;border:1px solid var(--line);border-top:2px solid var(--rule);border-radius:var(--radius);font-style:normal;font-size:13px;line-height:1.8;color:var(--ink)}
.woocommerce .woocommerce-customer-details address p{margin:0}
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before,.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before{display:none}
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone,.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email{padding-left:0}
.woocommerce-customer-details .col2-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.woocommerce-customer-details .col2-set::before,.woocommerce-customer-details .col2-set::after{display:none}
.woocommerce-customer-details .col2-set .col-1,.woocommerce-customer-details .col2-set .col-2{float:none;width:auto}
.woocommerce .order-again .button{border:1px solid var(--line-strong);background:var(--paper);color:var(--ink)}
.woocommerce .order-again .button:hover{border-color:var(--sub);background:var(--paper);color:var(--name)}

/* ---------------------------------------------------------------------------
   마이페이지: the menu on the left as a list under a dark rule, the page beside it
--------------------------------------------------------------------------- */
.woocommerce-account .st-article>.woocommerce{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 30px;align-items:start}
.woocommerce-account .st-article>.woocommerce::before,.woocommerce-account .st-article>.woocommerce::after{display:none}
.woocommerce-account .st-article>.woocommerce>*{grid-column:1/-1}
.woocommerce-account .st-article>.woocommerce>.woocommerce-MyAccount-navigation{grid-column:1;float:none;width:auto}
.woocommerce-account .st-article>.woocommerce>.woocommerce-MyAccount-content{grid-column:2;float:none;width:auto;min-width:0}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--rule)}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation a{display:block;padding:11px 12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--sub)}
.woocommerce-MyAccount-navigation a:hover{background:var(--bar);color:var(--name)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--brand-bg);color:var(--brand2);font-weight:700}
.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--muted)}
.woocommerce-MyAccount-content>p:first-child{margin-top:0}
.woocommerce-MyAccount-content{font-size:13px;line-height:1.7}
.woocommerce-MyAccount-content>h2,.woocommerce-MyAccount-content>h3{margin:0 0 10px;font-size:16px}
/* 마이페이지 첫 화면: the greeting with the order stages, then the latest orders. */
.st-my-hello{margin:0 0 26px;padding:18px 20px;border:1px solid var(--line);border-top:2px solid var(--rule);background:var(--paper)}
.st-my-hello>p{margin:0 0 14px;font-size:15px;color:var(--ink)}
.st-my-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border:1px solid var(--line)}
.st-my-stages li+li{border-left:1px solid var(--line)}
.st-my-stages a{display:block;padding:12px 6px;text-align:center;color:var(--sub)}
.st-my-stages a:hover{background:var(--bar);color:var(--name)}
.st-my-stages span{display:block;font-size:12px}
.st-my-stages strong{display:block;margin-top:2px;font-size:20px;font-weight:800;color:var(--brand2)}
.st-my-recent h2{margin:0 0 10px;font-size:16px}
.st-my-orders .st-my-item{max-width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.st-my-more{margin:0;text-align:right;font-size:12px}
.st-my-more a,.st-my-none a{font-weight:700;color:var(--link)}
.st-my-none{margin:0;padding:30px 16px;border:1px solid var(--line);border-top:2px solid var(--rule);text-align:center;color:var(--sub)}
.woocommerce-MyAccount-content fieldset{margin:18px 0;padding:12px 16px 4px;border:1px solid var(--line)}
.woocommerce-MyAccount-content legend{padding:0 6px;font-size:13px;font-weight:700;color:var(--name)}
/* 계정 정보 → 로그인 방법: the password check spans the row above the service buttons. */
.st-account-link>.form-row{grid-column:1/-1;max-width:340px;margin:0}
/* The order list: number, date, status, amount, and a quiet 보기. */
.woocommerce table.shop_table.woocommerce-orders-table tbody th{background:none}
.woocommerce-orders-table__cell-order-number a{font-weight:700;color:var(--name)}
.woocommerce-orders-table__cell-order-total .amount,.woocommerce-orders-table__cell-order-total{color:var(--ink)}
.woocommerce-orders-table__cell-order-actions{text-align:right}
.woocommerce table.shop_table .woocommerce-button.button,.woocommerce-MyAccount-content .woocommerce-pagination .button{min-height:32px;margin:2px 0 2px 4px;padding:6px 12px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);font-size:12px;font-weight:400}
.woocommerce table.shop_table .woocommerce-button.button:hover,.woocommerce-MyAccount-content .woocommerce-pagination .button:hover{border-color:var(--sub);background:var(--paper);color:var(--name)}
.woocommerce-MyAccount-content .woocommerce-pagination{display:flex;justify-content:center;gap:6px}
.woocommerce-MyAccount-content .woocommerce-info .button,.woocommerce-MyAccount-content .woocommerce-message .button{float:right}
/* 주문 상세 in 마이페이지 opens with a line on the order's number, date and status. */
.woocommerce-MyAccount-content>p:has(mark.order-number){padding:12px 16px;border:1px solid var(--line);background:var(--panel)}
.woocommerce .woocommerce-order-details .woocommerce-table--order-details th.product-total,.woocommerce .woocommerce-order-details .woocommerce-table--order-details td.product-total{text-align:right}
.woocommerce .woocommerce-order-details .woocommerce-table--order-details tfoot td{text-align:right}

/* ---------------------------------------------------------------------------
   장바구니 담기: the layer that answers the 장바구니 button (storefront.js)
--------------------------------------------------------------------------- */
.st-layer{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--scrim)}
.st-dialog{width:min(420px,100%);border-radius:var(--radius);background:var(--paper);color:var(--ink);overflow:hidden}
.st-dialog-head{display:flex;align-items:center;justify-content:space-between;height:46px;margin:0;padding:0 4px 0 18px;background:var(--brand);color:var(--inverse);font-size:14px;font-weight:700}
.st-dialog-close{width:42px;height:42px;padding:0;border:0;background:none;color:var(--inverse);font-size:24px;line-height:1;cursor:pointer}
.st-dialog-body{padding:20px 20px 4px}
.st-dialog-item{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;padding:0 0 16px;border-bottom:1px solid var(--line2)}
.st-dialog-item:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.st-dialog-item img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line2);background:var(--paper)}
.st-dialog-item strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.45;color:var(--name)}
.st-dialog-item span{display:block;margin-top:3px;font-size:12px;color:var(--label)}
.st-dialog-message{margin:16px 0 0;font-size:14px;font-weight:700;line-height:1.5;text-align:center;color:var(--name)}
.st-dialog.is-error .st-dialog-message{color:var(--danger)}
.st-dialog-notes{margin:8px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.5;text-align:center;color:var(--danger)}
.st-dialog-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;padding:18px 20px 20px}
.st-dialog-actions .st-btn{min-height:48px;padding:0 10px}
/* WooCommerce's own 장바구니 보기 link after an AJAX add in a listing; the layer offers it instead. */
.woocommerce ul.products li.product a.added_to_cart{display:none}
.single_add_to_cart_button.is-busy{opacity:.6;pointer-events:none}

/* ---------------------------------------------------------------------------
   Footer: guide links, then the business details and 고객센터
--------------------------------------------------------------------------- */
.st-footer{margin-top:40px;border-top:1px solid var(--line-strong);background:var(--paper)}
.st-footer-links{border-bottom:1px solid var(--line)}
.st-footer-links .st-inner{display:flex;flex-wrap:wrap;height:44px;align-items:center}
.st-footer-links a{padding:0 14px;font-size:12px;font-weight:700;color:var(--sub);border-left:1px solid var(--line-btn);line-height:12px}
.st-footer-links a:first-child{padding-left:0;border-left:0}
.st-footer-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;padding:24px 0 40px;font-size:11px;line-height:1.9;color:var(--muted)}
.st-footer-info strong{display:block;margin-bottom:4px;font-size:13px;color:var(--name)}
.st-footer-info p{margin:0}
.st-footer .st-sep{margin:0 8px;color:var(--line-strong)}
.st-copy{margin-top:8px!important;color:var(--muted)}
.st-footer-cs{min-width:220px;padding-left:24px;border-left:1px solid var(--line)}
.st-footer-cs strong{display:block;font-size:13px;color:var(--name)}
.st-footer-cs em{display:block;margin:2px 0 4px;font-style:normal;font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--brand2)}
.st-footer-cs p{margin:0}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media(max-width:1259px){
  .st-quick{display:none}
}

@media(max-width:1079px){
  .st-head .st-inner{grid-template-columns:220px minmax(0,1fr)}
  .st-head-pick{display:none}
  .st-gnb-nav a{padding:0 13px}
  .woocommerce ul.products,.woocommerce .products ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .woocommerce.columns-5 ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
  .st-picks .st-inner{grid-template-columns:minmax(0,1fr)}
  .st-picks-title{display:none}
  /* Tablets: beside the category menu the product area is about 600px, so the photo and the
     purchase column share it instead of a fixed 400px photo pushing the options off the page. */
  .woocommerce div.product div.images{width:42%}
  .woocommerce div.product div.summary{width:calc(58% - 24px)}
  .st-cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:780px){
  .st-topbar .st-inner{justify-content:center}
  .st-topbar-nav a{padding:0 8px}

  .st-head .st-inner{height:auto;grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 0 12px}
  .st-logo{text-align:center}
  .st-logo img{margin:0 auto;max-height:48px}
  .st-logo small{font-size:11px;margin:0 0 4px}
  .st-logo strong{font-size:28px}
  .st-search{max-width:none;height:40px}

  .st-gnb .st-inner{width:100%;border-radius:0;overflow-x:auto;scrollbar-width:none}
  .st-gnb .st-inner::-webkit-scrollbar{display:none}
  .st-gnb-nav{padding:0 4px}
  .st-gnb-nav a{flex:0 0 auto;padding:0 12px;font-size:13px}
  .st-gnb-nav a:not(.st-gnb-board)+.st-gnb-board{margin-left:0}

  .st-picks .st-inner{height:auto;padding:8px 0}
  .st-picks ul{display:flex;overflow-x:auto;scrollbar-width:none}
  .st-picks ul::-webkit-scrollbar{display:none}
  .st-picks li{flex:0 0 220px}

  /* The category menu folds to its four headings, side by side. */
  .st-home-top,.st-store-grid{display:block}
  .st-home-cats,.st-sidebar{margin-bottom:12px}
  .st-catmenu{display:flex;overflow-x:auto;border-top:1px solid var(--line);scrollbar-width:none}
  .st-catmenu::-webkit-scrollbar{display:none}
  .st-catmenu-title,.st-catmenu ul,.st-side-note{display:none}
  .st-catmenu-group{flex:0 0 auto;margin:0;padding:0;border:0;border-left:1px solid var(--line)}
  .st-catmenu-group:first-of-type{border-left:0}
  .st-catmenu-head{padding:11px 16px;font-size:13px}

  .st-banner-slides{height:auto}
  .st-banner-slide,.st-banner-slide.is-active{position:static}
  .st-banner-slide.is-active{grid-template-columns:minmax(0,1fr) 128px;gap:14px;padding:18px 16px}
  .st-banner-slide img{width:128px;height:128px}
  .st-banner-text strong{font-size:17px;margin:4px 0 6px}
  .st-banner-text em{font-size:19px}
  .st-banner-go{margin-top:10px;padding:6px 14px}
  .st-banner-tabs{justify-content:center;gap:2px;padding:4px 0;border-top:0}
  .st-banner-tabs button{flex:0 0 28px;width:28px;height:28px;padding:0;border:0;background:none}
  .st-banner-tabs button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .st-banner-tabs button::before{content:"";display:block;width:8px;height:8px;margin:auto;border-radius:50%;background:var(--muted)}
  .st-banner-tabs button[aria-current=true]{box-shadow:none}
  .st-banner-tabs button[aria-current=true]::before{width:20px;border-radius:4px;background:var(--brand)}
  .st-banner-tabs .st-banner-pause{font-size:10px;color:var(--sub)}
  .st-banner-tabs .st-banner-pause::before{display:none}
  .st-cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-cat-tiles a{height:92px;grid-template-columns:minmax(0,1fr) 64px;padding:0 8px 0 12px}
  .st-cat-tiles img{width:64px;height:64px}

  .st-subcats{padding:10px 12px}
  .st-subcats ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-listbar{display:block}
  .st-listbar ul{margin-top:6px}
  .st-listbar li:first-child a{padding-left:0}

  .woocommerce ul.products,.woocommerce .products ul,.woocommerce.columns-5 ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}

  .st-store-content,.woocommerce div.product,.woocommerce div.product div.summary{min-width:0;max-width:100%}
  .woocommerce div.product div.images,.woocommerce div.product div.summary{float:none;width:100%}
  .woocommerce div.product .woocommerce-tabs ul.tabs{max-width:100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none}
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
  .woocommerce div.product .woocommerce-tabs ul.tabs li{flex:0 0 auto;white-space:nowrap}
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:11px 14px}
  .woocommerce div.product form.cart .single_add_to_cart_button,
  .woocommerce div.product form.cart .st-buy-now,
  .woocommerce .quantity .qty{min-height:44px}
  .st-product-facts dd,.st-purchase-summary dd,.woocommerce-product-details__short-description{overflow-wrap:anywhere;word-break:break-word}
  .st-product-heading h1{font-size:17px}
  .st-product-facts>div,.st-purchase-summary dl>div,.st-supplement-group{grid-template-columns:82px minmax(0,1fr)}
  .woocommerce div.product form.cart .variations th{width:82px}
  .woocommerce div.product form.cart .quantity::before{flex-basis:82px}

  .st-footer-body{grid-template-columns:minmax(0,1fr);gap:16px}
  .st-footer-cs{padding:14px 0 0;border-left:0;border-top:1px solid var(--line)}

  /* Purchase screens: the steps go under the title, 마이페이지's menu becomes a row of tabs. */
  .st-order-head{display:block}
  .st-steps{margin-top:8px;font-size:12px}
  .woocommerce-account .st-article>.woocommerce{display:block}
  .woocommerce-account .st-article>.woocommerce::before,.woocommerce-account .st-article>.woocommerce::after{display:table}
  .woocommerce-MyAccount-navigation ul{display:flex;overflow-x:auto;scrollbar-width:none}
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
  .woocommerce-MyAccount-navigation li{flex:0 0 auto}
  .woocommerce-MyAccount-navigation a{padding:11px 14px;white-space:nowrap}
  .woocommerce-account .woocommerce-MyAccount-content{margin-top:18px}
  .woocommerce-customer-details .col2-set{grid-template-columns:minmax(0,1fr)}
  .woocommerce table.shop_table_responsive thead{display:none}
  .woocommerce table.shop_table_responsive tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}
  .woocommerce table.shop_table_responsive tbody :is(td,th){display:flex;justify-content:space-between;gap:12px;padding:4px 12px;border:0;background:none;text-align:right}
  .woocommerce table.shop_table_responsive tbody :is(td,th)::before{content:attr(data-title);flex:0 0 auto;font-weight:400;color:var(--label);text-align:left}
  .woocommerce table.shop_table_responsive tbody :is(td,th):not([data-title])::before{display:none}
  .woocommerce table.shop_table_responsive .st-my-item{max-width:none;white-space:normal}
  .st-my-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-my-stages li:nth-child(3){border-left:0}
  .st-my-stages li:nth-child(n+3){border-top:1px solid var(--line)}
  .st-complete-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-complete-facts>div:nth-child(odd){border-left:0}
  .st-complete-facts>div:nth-child(n+3){border-top:1px solid var(--line)}

  /* WooCommerce 11 stacks the block cart and checkout with container queries
     only. Browsers without them (Chromium < 105, Safari < 16) keep the 65/35
     desktop split on a phone and squeeze the order summary into ~120px. */
  @supports not (container-type:inline-size){
    .st-main .wc-block-components-sidebar-layout .wc-block-components-main,
    .st-main .wc-block-components-sidebar-layout .wc-block-components-sidebar{width:100%;padding:0}
  }
}

/* The admin bar stops being fixed at this width, so the bar cannot stick under it. */
@media(max-width:600px){
  body.admin-bar .st-topbar{position:static}
}

@media(max-width:520px){
  .st-inner{width:calc(100% - 20px)}
  .st-section{padding-top:26px}
  .st-section-top h2{font-size:16px}
  .woocommerce ul.products,.woocommerce .products ul,.woocommerce.columns-5 ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
  .st-picks li{flex-basis:190px}
  .woocommerce div.product div.images{margin-bottom:12px}
  .woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{float:none;width:100%}
  .st-footer-links a{padding:0 10px}
  .st-order-head .page-title{font-size:19px}
  .st-complete-box{padding:26px 16px 0}
  .st-complete-box h2{font-size:19px}
  .st-complete-facts{margin:22px -16px 0}
  .st-complete-actions .st-btn{flex:1 1 0;min-width:0;padding:0 10px}
  .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:11px 10px}
}

@media(max-width:390px){
  .st-inner{width:calc(100% - 16px)}
  .st-topbar-nav a{padding:0 6px}
  .st-search button{width:52px}
  .st-banner-slide.is-active{grid-template-columns:minmax(0,1fr) 104px}
  .st-banner-slide img{width:104px;height:104px}
  .st-product-facts>div,.st-purchase-summary dl>div,.st-supplement-group{grid-template-columns:76px minmax(0,1fr)}
  .woocommerce div.product form.cart .variations th{width:76px}
  .woocommerce div.product form.cart .quantity::before{flex-basis:76px}
}