/* ---------------------------------------------------------------------------
   The demo's look (docs/DEMO-SITE.md), over style.css: a quiet select shop on a
   warm paper colour, ink buttons, one terracotta accent for sales, Pretendard,
   full width pages with the categories as tabs, and large photos without frames.
   The base sheet still draws every screen; this one sets its tokens again and
   redraws the header, the home, the grids, the product page and the footer.
   A rule here that the base sheet changes at a breakpoint is set again in the
   same breakpoint below, because this sheet loads later and would win.
--------------------------------------------------------------------------- */
:root{
  --name:#161513;
  --ink:#1f1e1b;
  --ink2:#3a3833;
  --sub:#4f4c46;
  --soft:#5a5650;
  --label:#625e57;
  --muted:#6c685f;
  --faint:#736f66;
  --rule:#1f1e1b;
  --line-dark:#b6b0a5;
  --line-strong:#d3cec4;
  --line-btn:#d8d3c9;
  --line:#e4e0d8;
  --line2:#edeae4;
  --paper:#fbfaf7;
  --bar:#f3f0ea;
  --panel:#f3f0ea;
  --dark:#1f1e1b;
  --brand:#1f1e1b;
  --brand2:#1f1e1b;
  --brand3:#000;
  --brand-bg:#f3f0ea;
  --link:#9c4522;
  --lime:#b4532a;
  --lime2:#b4532a;
  --lime-text:#9c4522;
  --lime-ink:#5a5650;
  --lime-bg:#f1ebe2;
  --price:#1f1e1b;
  --accent:#a84c26;
  --table:#e7dfd2;
  --veil:rgba(251,250,247,.55);
  --badge-dark:rgba(31,30,27,.86);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --radius:0;
  --radius-control:2px;
  --shell:1240px;
}
body{font:14px/1.6 var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:focus-visible{outline:2px solid var(--name);outline-offset:3px}
h1,h2,h3{letter-spacing:-.03em;word-break:keep-all}
.st-inner{width:min(var(--shell),calc(100% - 48px))}
.st-page{display:block;max-width:none}
.st-page>main{grid-area:auto}
.st-main{padding:32px 0 0}
.st-main.st-inner{padding-bottom:24px}
.st-store-grid.sn-store{display:block}
.st-main .page-title{margin:4px 0 0;padding:0;border:0;font-size:30px;font-weight:700;line-height:1.3;letter-spacing:-.035em;color:var(--name)}
.st-main h1.page-title+*{margin-top:20px}
.st-empty{border-color:var(--line);color:var(--muted);font-size:14px}

/* ---------------------------------------------------------------------------
   Top line and header: wordmark, the product views, search, account and cart
--------------------------------------------------------------------------- */
.sn-note{background:var(--ink);color:#e9e4db;font-size:12.5px}
.sn-note .st-inner{min-height:36px;display:flex;align-items:center;justify-content:center;gap:6px 18px;flex-wrap:wrap;text-align:center}
.sn-note p{margin:0}
.sn-note strong{margin-right:8px;font-weight:600;color:#fff}
.sn-note a{color:#e9e4db;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(233,228,219,.45)}
.sn-note a:hover{color:#fff;text-decoration-color:#fff}

.sn-head{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
body.admin-bar .sn-head{top:32px}
.sn-head-row{height:68px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:40px}
.st-logo{display:inline-flex;align-items:baseline;gap:9px;line-height:1;color:var(--name);white-space:nowrap}
.st-logo:hover{color:var(--name)}
.st-logo .st-wordmark{display:inline;margin:0;font-size:19px;font-weight:800;letter-spacing:.16em;color:var(--name)}
.st-logo .st-wordmark-note{display:inline;margin:0;font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--muted)}
.sn-nav{display:flex;align-items:center;gap:30px;min-width:0}
.sn-nav a{position:relative;padding:8px 0;font-size:14.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
.sn-nav a:hover{color:var(--name)}
.sn-nav a[aria-current]{font-weight:700;color:var(--name)}
.sn-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--name)}
.sn-search{display:flex;align-items:center;width:210px;height:38px;border-bottom:1px solid var(--line-strong)}
.sn-search:focus-within{border-bottom-color:var(--name)}
.sn-search input{flex:1;min-width:0;width:0;height:100%;padding:0 2px;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:14px;outline:0;-webkit-appearance:none;appearance:none}
.sn-search input::placeholder{color:var(--faint)}
.sn-search input::-webkit-search-cancel-button{display:none}
.sn-search button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.sn-tools{display:flex;align-items:center;gap:20px;font-size:13.5px;color:var(--ink2);white-space:nowrap}
.sn-tools a{display:inline-flex;align-items:center;gap:5px}
.sn-tools a:hover{color:var(--name)}
.st-cart-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);font-size:10.5px;font-weight:600}

/* ---------------------------------------------------------------------------
   Home
   The top sits on the same table colour as its picture, so the photo has no edge.
--------------------------------------------------------------------------- */
.sn-home.st-main{padding:0}
.sn-hero{background:var(--table);overflow:hidden}
.sn-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:24px;min-height:500px}
.sn-hero-text{padding:64px 0}
.sn-label{margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--sub)}
.sn-hero h1{margin:0;font-size:46px;font-weight:700;line-height:1.22;letter-spacing:-.04em;color:var(--name)}
.sn-hero-lead{margin:22px 0 0;max-width:27em;font-size:16px;line-height:1.75;color:var(--sub);word-break:keep-all}
.sn-actions{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.sn-hero-picture{align-self:stretch;display:flex;align-items:center;justify-content:center}
.sn-hero-picture img{display:block;width:100%;height:auto}

.sn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:1px solid var(--name);background:transparent;color:var(--name);font-size:14.5px;font-weight:600;line-height:1.2;transition:background-color .15s,color .15s,border-color .15s}
.sn-btn:hover{background:var(--name);color:#fff}
.sn-btn.is-main{background:var(--name);color:#fff}
.sn-btn.is-main:hover{border-color:#000;background:#000;color:#fff}
.sn-btn.is-light{border-color:rgba(255,255,255,.6);color:#fff}
.sn-btn.is-light:hover{border-color:#fff;background:#fff;color:var(--name)}

.sn-section{padding:76px 0 0}
.sn-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 26px}
.sn-section-head h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.035em;color:var(--name)}
.sn-section-head a,.sn-more{font-size:13.5px;color:var(--sub);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-dark)}
.sn-section-head a:hover,.sn-more:hover{color:var(--name);text-decoration-color:currentColor}

.sn-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.sn-cats a{display:block;color:var(--name)}
.sn-cats a:hover{color:var(--name)}
.sn-cats-photo{display:block;overflow:hidden;background:var(--bar)}
.sn-cats-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform .6s ease}
.sn-cats a:hover img{transform:scale(1.04)}
.sn-cats strong{display:block;margin-top:14px;font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.sn-cats strong+span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}

.sn-story{margin-top:96px;background:var(--ink);color:#e9e4db}
.sn-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding:84px 0}
.sn-story .sn-label{color:#b8b1a5}
.sn-story h2{margin:0;font-size:34px;font-weight:700;line-height:1.32;letter-spacing:-.04em;color:#fff}
.sn-story p{margin:0;font-size:16px;line-height:1.85;color:#d8d2c7;word-break:keep-all}
.sn-story .sn-actions{margin-top:30px}

.sn-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:92px;padding-top:40px;border-top:1px solid var(--line)}
.sn-info h2{margin:0 0 14px;font-size:16px;font-weight:700;color:var(--name)}
.sn-info ul{margin:0;padding:0;list-style:none}
.sn-info li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:14px}
.sn-info li a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
.sn-info li a:hover{color:var(--name)}
.sn-info time{flex:0 0 auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sn-info p{margin:0;font-size:14px;line-height:1.75;color:var(--sub);word-break:keep-all}
.sn-more{display:inline-block;margin-top:16px}

/* ---------------------------------------------------------------------------
   Listings: breadcrumb, title, category tabs, count and sort, the grid
--------------------------------------------------------------------------- */
.woocommerce-breadcrumb,.woocommerce .woocommerce-breadcrumb{margin:0 0 8px;font-size:12.5px;color:var(--muted);text-align:left}
.woocommerce .woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--name)}
.st-crumb-sep{margin:0 8px;color:var(--line-dark)}
.sn-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 30px}
.sn-tabs a{display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink2);font-size:14px;white-space:nowrap}
.sn-tabs a:hover{border-color:var(--name);color:var(--name)}
.sn-tabs a[aria-current]{border-color:var(--name);background:var(--name);color:#fff;font-weight:600}
.st-subcats{border-color:var(--line);background:var(--bar)}
.st-subcats a{font-size:13.5px}
.st-listbar{margin:0 0 30px;padding:0 0 14px;border:0;border-bottom:1px solid var(--line);background:none}
.st-listbar p,.st-soldout-filter label{font-size:13.5px;color:var(--sub)}
.st-listbar li+li{border-left:0}
.st-listbar a{padding:0 10px;font-size:13.5px;color:var(--muted)}
.st-listbar a:hover{color:var(--name)}
.st-listbar a[aria-current]{color:var(--name);font-weight:600;text-decoration:underline;text-underline-offset:5px}
.st-soldout-filter input{width:15px;height:15px;accent-color:var(--name)}

.woocommerce ul.products,.woocommerce .products ul,.woocommerce.columns-5 ul.products{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 20px}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{text-align:left}
.woocommerce ul.products li.product a img{margin:0 0 14px;border:0;background:var(--bar);object-fit:cover;transition:opacity .2s}
.woocommerce ul.products li.product a:hover img{border:0;opacity:.9}
.woocommerce ul.products li.product .woocommerce-loop-product__title{min-height:0;padding:0;font-size:14.5px;font-weight:500;line-height:1.5;letter-spacing:-.015em;color:var(--name)}
.woocommerce ul.products li.product .price{margin-top:6px;font-size:15px;font-weight:700;color:var(--name)}
.woocommerce ul.products li.product .price del{display:inline;margin-right:6px;font-size:13px;font-weight:400;color:var(--faint)}
.woocommerce ul.products li.product .price ins{color:var(--accent)}
/* The grid stays photos, names and prices; buying starts on the product page. */
.woocommerce ul.products li.product .button{display:none}
.woocommerce span.onsale,.woocommerce ul.products li.product .onsale{top:12px;left:12px;right:auto;margin:0;padding:4px 9px;background:var(--accent);font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.02em}
.woocommerce div.product span.onsale{top:16px;left:16px}
.st-soldout b{padding:7px 18px;background:var(--badge-dark);font-size:12.5px;font-weight:600;letter-spacing:.24em}
.woocommerce nav.woocommerce-pagination{margin-top:48px}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{min-width:38px;padding:9px 6px;border-color:var(--line);font-size:13.5px}
.woocommerce nav.woocommerce-pagination ul li span.current{border-color:var(--name);background:var(--name)}

/* ---------------------------------------------------------------------------
   Product page: a large photo, then the name, facts, options and the two buttons
--------------------------------------------------------------------------- */
.woocommerce div.product{padding-top:10px}
.woocommerce div.product div.images{width:56%;margin-bottom:56px}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{border:0}
/* WooCommerce lifts the zoom button to 99, over the sticky header (60) once the page scrolls. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{z-index:5}
.woocommerce div.product div.images .flex-control-thumbs{gap:8px;margin-top:8px}
.woocommerce div.product div.images .flex-control-thumbs li{width:76px!important;border:0}
.woocommerce div.product div.summary{width:calc(44% - 56px);margin-bottom:56px}
.st-product-heading{padding:0 0 20px;border-bottom:1px solid var(--line)}
.st-product-heading h1{font-size:26px;font-weight:700;line-height:1.35;letter-spacing:-.035em}
.woocommerce-product-details__short-description{font-size:14px;color:var(--sub)}
.st-product-facts{font-size:14px}
.st-product-facts>div,.st-purchase-summary dl>div,.st-supplement-group{grid-template-columns:104px minmax(0,1fr)}
.st-product-facts>div{min-height:46px}
.st-product-facts dt{color:var(--muted)}
.st-product-facts .st-fact-price strong{font-size:24px;font-weight:700;color:var(--name)}
.woocommerce div.product form.cart .variations th{width:104px;font-size:14px;color:var(--muted)}
.woocommerce div.product form.cart .variations select,.st-supplement-group select{min-height:44px;padding:0 12px;border-color:var(--line-strong);border-radius:var(--radius-control);font-size:14px}
.woocommerce div.product form.cart .quantity::before{flex-basis:104px;font-size:14px;color:var(--muted)}
.woocommerce .quantity .qty{min-height:40px;font-size:14px;border-color:var(--line-strong)}
.st-supplement-group span,.st-supplement-picked li,.st-purchase-summary dt,.st-purchase-summary dd{font-size:14px}
.st-purchase-summary{border-top:1px solid var(--name)}
.st-purchase-summary dd.st-selected-total{font-size:24px;font-weight:700;color:var(--name)}
.woocommerce div.product form.cart .single_add_to_cart_button,.woocommerce div.product form.cart .st-buy-now{min-height:56px;font-size:15.5px;font-weight:600}
.woocommerce div.product form.cart .st-buy-now{border-color:var(--name);background:var(--name)}
.woocommerce div.product form.cart .st-buy-now:hover{border-color:#000;background:#000}
.woocommerce div.product form.cart .single_add_to_cart_button{border-color:var(--name);background:transparent;color:var(--name)}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{border-color:var(--name);background:var(--bar);color:var(--name)}
.woocommerce div.product .woocommerce-tabs ul.tabs{gap:34px;border-bottom:1px solid var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li,.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child{flex:0 0 auto;border:0;background:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:15px 0;font-size:15px;color:var(--muted)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border:0;background:none;box-shadow:inset 0 -2px 0 var(--name)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{font-weight:600;color:var(--name)}
.woocommerce div.product .woocommerce-tabs .panel{padding:34px 0;font-size:14.5px;line-height:1.85;color:var(--ink2)}
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .up-sells.products,.woocommerce div.product .related.products{background:none}
.woocommerce div.product .up-sells.products>h2,.woocommerce div.product .related.products>h2{margin:64px 0 24px;padding:0;border:0;font-size:22px}

/* ---------------------------------------------------------------------------
   Shared pieces: buttons, notices, boards, purchase screens
--------------------------------------------------------------------------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button.alt,.woocommerce button.button.alt{min-height:46px;padding:13px 22px;font-size:14px;font-weight:600}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:#000}
.st-btn{font-weight:600}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error,.woocommerce-notices-wrapper .woocommerce-message{border-top-width:1px;font-size:14px}
.st-board{font-size:14px;border-top:1px solid var(--rule)}
.st-board th{background:none;color:var(--muted)}
.st-board th,.st-board td{padding:14px 8px}
.st-order-head .page-title{font-size:28px}
.st-steps{font-size:13.5px}
.st-steps .is-current{color:var(--name)}
.st-pay-notice{font-size:14px}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.st-footer.sn-foot{margin-top:100px;border-top:1px solid var(--line);background:var(--bar)}
.sn-foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:48px;padding:52px 0 36px}
.sn-foot .st-logo{margin-bottom:18px}
.sn-foot .st-footer-info strong:not(.st-wordmark){display:block;margin-bottom:4px;font-size:14px;color:var(--name)}
.sn-foot .st-footer-info p{margin:0;font-size:13px;line-height:1.85;color:var(--muted)}
.sn-foot .st-sep{color:var(--line-strong)}
.sn-foot-links{display:grid;grid-template-columns:repeat(2,max-content);align-content:start;gap:12px 44px;font-size:14px}
.sn-foot-links a{color:var(--ink2)}
.sn-foot-links a:hover{color:var(--name);text-decoration:underline;text-underline-offset:4px}
.sn-foot .st-footer-cs{min-width:200px;padding-left:28px;border-left:1px solid var(--line)}
.sn-foot .st-footer-cs em{color:var(--name)}
.sn-foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:18px 0 40px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.sn-foot-bottom .st-copy{margin:0!important}
.sn-credit{font-weight:600;letter-spacing:.06em;color:var(--ink2)}
.sn-credit:hover{color:var(--name);text-decoration:underline;text-underline-offset:4px}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media(max-width:1179px){
  .sn-head-row{gap:28px}
  .sn-nav{gap:22px}
  .sn-search{width:170px}
}

@media(max-width:1079px){
  .sn-head-row{grid-template-columns:auto minmax(0,1fr) auto}
  .sn-search{display:none}
  .sn-hero h1{font-size:38px}
  .sn-hero-grid{min-height:0}
  .woocommerce ul.products,.woocommerce .products ul,.woocommerce.columns-5 ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .woocommerce div.product div.images{width:50%}
  .woocommerce div.product div.summary{width:calc(50% - 36px)}
  .sn-story-grid{gap:40px}
}

@media(max-width:780px){
  .st-inner{width:calc(100% - 40px)}
  .st-main{padding-top:22px}
  .st-main .page-title{font-size:24px}
  .sn-note .st-inner{padding:8px 0;font-size:12px;line-height:1.5}

  /* The header scrolls away: the logo with the account and cart, the views in a row that scrolls
     sideways, and the search field under them. */
  .sn-head{position:static}
  .sn-head-row{height:auto;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"logo tools" "nav nav" "search search";gap:0 12px;padding-top:14px}
  .sn-head-row .st-logo{grid-area:logo}
  .sn-tools{grid-area:tools;justify-self:end;gap:16px;font-size:13px}
  .sn-nav{grid-area:nav;gap:24px;margin:0 -20px;padding:10px 20px 8px;overflow-x:auto;scrollbar-width:none}
  .sn-nav::-webkit-scrollbar{display:none}
  .sn-nav a{flex:0 0 auto}
  .sn-search{display:flex;grid-area:search;width:auto;height:42px;margin:4px 0 14px;padding-left:12px;border:1px solid var(--line);background:#fff}
  .sn-search input{font-size:16px}

  .sn-hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .sn-hero-picture{order:-1;margin:0 -20px}
  .sn-hero-text{padding:24px 0 44px}
  .sn-label{margin-bottom:12px}
  .sn-hero h1{font-size:29px}
  .sn-hero-lead{margin-top:14px;font-size:15px}
  .sn-actions{margin-top:24px}
  .sn-btn{min-height:46px;padding:0 20px}
  .sn-section{padding-top:56px}
  .sn-section-head{margin-bottom:18px}
  .sn-section-head h2{font-size:20px}
  .sn-cats{display:flex;gap:12px;margin:0 -20px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
  .sn-cats::-webkit-scrollbar{display:none}
  .sn-cats li{flex:0 0 136px}
  .sn-cats strong{margin-top:10px;font-size:14.5px}
  .sn-story{margin-top:64px}
  .sn-story-grid{grid-template-columns:minmax(0,1fr);gap:18px;padding:56px 0}
  .sn-story h2{font-size:25px}
  .sn-story p{font-size:15px}
  .sn-info{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:64px}

  .sn-tabs{flex-wrap:nowrap;margin:16px -20px 22px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
  .sn-tabs::-webkit-scrollbar{display:none}
  .sn-tabs a{flex:0 0 auto;min-height:36px;padding:0 15px}
  .st-listbar{margin-bottom:22px}
  .st-listbar li:first-child a{padding-left:0}
  .woocommerce ul.products,.woocommerce .products ul,.woocommerce.columns-5 ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px}

  .woocommerce div.product div.images,.woocommerce div.product div.summary{float:none;width:100%}
  .woocommerce div.product div.images{margin:0 -20px 20px;width:calc(100% + 40px)}
  .st-product-heading h1{font-size:21px}
  .st-product-facts>div,.st-purchase-summary dl>div,.st-supplement-group{grid-template-columns:86px minmax(0,1fr)}
  .woocommerce div.product form.cart .variations th{width:86px}
  .woocommerce div.product form.cart .quantity::before{flex-basis:86px}
  .woocommerce div.product .woocommerce-tabs ul.tabs{gap:24px}

  .st-footer.sn-foot{margin-top:72px}
  .sn-foot-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding:40px 0 26px}
  .sn-foot .st-footer-cs{padding:16px 0 0;border-left:0;border-top:1px solid var(--line)}
  .sn-foot-bottom{padding-bottom:32px}
  .st-order-head .page-title{font-size:22px}
}

@media(max-width:600px){
  body.admin-bar .sn-head{top:0}
}

@media(max-width:520px){
  .st-inner{width:calc(100% - 32px)}
  .sn-nav,.sn-cats,.sn-tabs{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .sn-hero-picture{margin:0 -16px}
  .woocommerce div.product div.images{margin:0 -16px 18px;width:calc(100% + 32px)}
  .woocommerce ul.products,.woocommerce .products ul,.woocommerce.columns-5 ul.products{gap:30px 10px}
  .sn-tools a:first-child{display:none}
}

/* Common Android widths (360px): the wordmark and its note no longer fit beside 마이페이지 and 장바구니
   on one line, so the note goes under the wordmark. */
@media(max-width:430px){
  .st-logo{flex-direction:column;align-items:flex-start;gap:4px}
  .st-logo .st-wordmark{font-size:17px;letter-spacing:.14em}
  .st-logo .st-wordmark-note{font-size:9.5px}
}

@media(max-width:390px){
  .st-inner{width:calc(100% - 28px)}
  .sn-nav,.sn-cats,.sn-tabs{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .sn-hero-picture{margin:0 -14px}
  .woocommerce div.product div.images{margin:0 -14px 16px;width:calc(100% + 28px)}
  .sn-hero h1{font-size:26px}
  .st-product-facts>div,.st-purchase-summary dl>div,.st-supplement-group{grid-template-columns:78px minmax(0,1fr)}
  .woocommerce div.product form.cart .variations th{width:78px}
  .woocommerce div.product form.cart .quantity::before{flex-basis:78px}
}